/* ============================================================
   Car For Rent — frontend styles (polished)
   ============================================================ */

:root {
	--cfr-primary: #2563eb;
	--cfr-primary-dark: #1d4ed8;
	--cfr-accent: #dc2626;
	--cfr-ink: #0f172a;
	--cfr-muted: #64748b;
	--cfr-line: #e5e7eb;
	--cfr-bg: #f8fafc;
	--cfr-radius: 16px;
	--cfr-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
	--cfr-shadow-hover: 0 12px 32px rgba(15,23,42,.14);
}

/* ---------- Search / filter ---------- */
.cfr-search-form {
	background: #fff;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	padding: 20px;
	margin: 24px 0;
	box-shadow: var(--cfr-shadow);
}
.cfr-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

/* ช่วงวันเช่า (เด่นบนสุด เต็มความกว้าง) */
.cfr-search-daterange { display: flex; flex-direction: column; margin-bottom: 14px; }
.cfr-search-daterange label { color: var(--cfr-primary); font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.cfr-search-daterange input {
	cursor: pointer;
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
}

/* ตัวกรองต่อเนื่อง: ประเภท → ยี่ห้อ → รุ่น → ปี (auto-fit ปรับคอลัมน์ตามจอ) */
.cfr-cascade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cfr-line);
}
.cfr-cascade .cfr-search-field label { font-weight: 700; color: var(--cfr-ink); }
/* กันฟิลด์/ดรอปดาวน์ล้นบนมือถือ */
.cfr-search-field { min-width: 0; }
.cfr-search-field select,
.cfr-search-field input,
.cfr-logoselect,
.cfr-logoselect-btn { max-width: 100%; }
.cfr-search-field { display: flex; flex-direction: column; }
.cfr-search-field label {
	font-weight: 600;
	font-size: .8rem;
	color: var(--cfr-muted);
	margin-bottom: 6px;
}
.cfr-search-field select,
.cfr-search-field input {
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	background: #fff;
	font-size: .95rem;
	transition: border-color .15s, box-shadow .15s;
}
.cfr-search-field select:focus,
.cfr-search-field input:focus {
	outline: none;
	border-color: var(--cfr-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.cfr-search-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	align-items: center;
	justify-content: space-between; /* toggle ซ้าย · ค้นหาชิดขวา (บรรทัดเดียวกัน) */
	flex-wrap: wrap;
}
.cfr-search-actions-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) {
	.cfr-search-actions { flex-direction: column; align-items: stretch; }
	.cfr-search-actions-right { justify-content: stretch; }
	.cfr-search-actions-right .cfr-btn { flex: 1 1 auto; }
	.cfr-adv-toggle { justify-content: center; }
}

/* ปุ่มสลับ "ค้นหาละเอียด" (ซ่อน/แสดงตัวกรองรายละเอียด) */
.cfr-adv-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border: 1px dashed var(--cfr-line); border-radius: 999px;
	background: #fff; color: var(--cfr-primary-dark); font-weight: 600; font-size: .9rem; cursor: pointer;
	transition: border-color .12s, background .12s;
}
.cfr-adv-toggle:hover { border-color: var(--cfr-primary); background: #eff6ff; }
.cfr-adv-caret { transition: transform .18s; font-size: .8rem; }
.cfr-adv-toggle[aria-expanded="true"] .cfr-adv-caret { transform: rotate(180deg); }
.cfr-adv { margin-top: 14px; }
.cfr-adv[hidden] { display: none; }

/* ---------- Brand strip (โลโก้ยี่ห้อ) ---------- */
.cfr-brand-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cfr-line);
}
.cfr-brand-strip-label { font-weight: 700; font-size: .8rem; color: var(--cfr-muted); flex: 0 0 auto; }
.cfr-brand-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cfr-brand-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 6px;
	border: 1px solid var(--cfr-line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-size: .85rem;
	transition: border-color .12s, box-shadow .12s, background .12s;
}
.cfr-brand-pill:hover { border-color: var(--cfr-primary); }
.cfr-brand-pill.is-active { border-color: var(--cfr-primary); background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.cfr-brand-pill > span:last-child { font-weight: 600; }

/* โลโก้/ชิปยี่ห้อ */
.cfr-brand-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.cfr-brand-letter {
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	color: #fff; font-weight: 800; font-size: .75rem;
}
.cfr-brand-badge { display: inline-flex; align-items: center; gap: 8px; }
.cfr-brand-name { font-weight: 700; }

/* ---------- Brand dropdown (มีโลโก้) ---------- */
.cfr-hidden-select { display: none !important; }
.cfr-logoselect { position: relative; }
.cfr-logoselect-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: .95rem;
	text-align: left;
}
.cfr-logoselect-btn:hover { border-color: var(--cfr-primary); }
.cfr-logoselect-label { flex: 1; font-weight: 600; }
.cfr-logoselect-caret { color: var(--cfr-muted); font-size: .8rem; }
.cfr-logoselect-panel {
	position: absolute;
	z-index: 60;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	box-shadow: var(--cfr-shadow);
	display: none;
}
.cfr-logoselect.open .cfr-logoselect-panel { display: block; }
.cfr-logoselect-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	cursor: pointer;
	font-size: .92rem;
}
.cfr-logoselect-item:hover { background: var(--cfr-bg); }
.cfr-logoselect-item.is-sel { background: #eff6ff; font-weight: 700; }

/* ---------- Buttons ---------- */
.cfr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(180deg, var(--cfr-primary), var(--cfr-primary-dark));
	color: #fff !important;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	font-size: .95rem;
	font-weight: 600;
	transition: transform .12s, box-shadow .12s, opacity .12s;
	box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.cfr-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.35); }
.cfr-btn-sm { padding: 5px 12px; font-size: .82rem; border-radius: 8px; box-shadow: none; }
.cfr-btn-danger { background: linear-gradient(180deg, #ef4444, #dc2626); }
.cfr-btn-danger:hover { box-shadow: 0 3px 10px rgba(220,38,38,.35); }

/* ปุ่มหัวใจ (wishlist) */
.cfr-car-card { position: relative; }
.cfr-wish-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	box-shadow: 0 2px 8px rgba(15,23,42,.18);
	color: #94a3b8;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s, color .15s, background .15s;
}
.cfr-wish-btn:hover { color: #ef4444; background: #fff; }
.cfr-wish-btn.is-saved { color: #ef4444; }
.cfr-wish-pop { transform: scale(1.35); }
/* หัวใจในหัวข้อหน้ารายละเอียด */
.cfr-single-title .cfr-wish-btn {
	position: static;
	width: 40px; height: 40px;
	vertical-align: middle;
	margin-left: 8px;
	box-shadow: 0 1px 4px rgba(15,23,42,.15);
	font-size: 1.35rem;
}
.cfr-wishlist-empty { text-align: center; padding: 40px 20px; color: var(--cfr-muted); }
.cfr-wishlist-empty p:first-child { font-size: 1.2rem; margin-bottom: 6px; }

/* จำนวนคนบันทึก (wishlist count) — ชิปให้เห็นชัดทั้ง grid และ list */
.cfr-wish-count-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .8rem;
	font-weight: 700;
	color: #dc2626;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: 999px;
	padding: 3px 10px;
	line-height: 1.4;
}
/* แถวเดียว: rating (ซ้าย) + จำนวนถูกใจ (ขวา) */
.cfr-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 6px 0 4px;
	min-height: 24px;
}
.cfr-card-meta .cfr-card-rating { margin: 0; }
.cfr-card-meta .cfr-wish-count-label { margin: 0; flex: 0 0 auto; }
.cfr-wish-count-num { font-weight: 800; }
.cfr-single-tags .cfr-tag-wish { padding: 0; border: none; background: none; }
.cfr-single-tags .cfr-tag-wish .cfr-wish-count-label { margin: 0; }
.cfr-btn-sm:hover { box-shadow: 0 3px 10px rgba(37,99,235,.3); }
.cfr-btn-ghost {
	background: #fff;
	color: var(--cfr-ink) !important;
	border: 1px solid var(--cfr-line);
	box-shadow: none;
}
.cfr-btn-ghost:hover { background: var(--cfr-bg); box-shadow: none; }

/* ---------- List header / toolbar ---------- */
.cfr-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 16px;
}
.cfr-list-title {
	margin: 0;
	font-size: 1.5rem;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.cfr-list-count {
	font-size: .85rem;
	font-weight: 500;
	color: var(--cfr-muted);
	background: var(--cfr-bg);
	border: 1px solid var(--cfr-line);
	padding: 2px 10px;
	border-radius: 999px;
}
.cfr-list-tools { display: flex; align-items: center; gap: 10px; }
.cfr-sort-select {
	padding: 8px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	background: #fff;
	font-size: .9rem;
	cursor: pointer;
}
.cfr-view-toggle {
	display: inline-flex;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.cfr-view-btn {
	border: none;
	background: #fff;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 1rem;
	color: var(--cfr-muted);
	line-height: 1;
}
.cfr-view-btn.is-active { background: var(--cfr-primary); color: #fff; }

/* ---------- Car grid & cards ---------- */
.cfr-car-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 8px 0 32px;
}
.cfr-car-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	overflow: hidden;
	box-shadow: var(--cfr-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.cfr-car-card:hover { transform: translateY(-4px); box-shadow: var(--cfr-shadow-hover); }

.cfr-card-media { position: relative; display: block; }
.cfr-car-thumb img,
.cfr-car-thumb .cfr-thumb-placeholder {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}
.cfr-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(15,23,42,.82);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.cfr-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; flex: 1; }
/* โลโก้ยี่ห้อหน้าชื่อรถ */
.cfr-car-title .cfr-brand-logo,
.cfr-car-title .cfr-brand-letter {
	width: 20px;
	height: 20px;
	font-size: .68rem;
	vertical-align: -4px;
	margin-right: 7px;
}
.cfr-car-title { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.cfr-car-card a { text-decoration: none; color: inherit; }
.cfr-car-title:hover { color: var(--cfr-primary); }

.cfr-car-specs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 0;
	margin: 0;
	color: var(--cfr-muted);
	font-size: .85rem;
}
.cfr-car-specs li { display: inline-flex; align-items: center; gap: 4px; }

.cfr-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px dashed var(--cfr-line);
}
.cfr-price { color: var(--cfr-accent); font-weight: 800; font-size: 1.25rem; }
.cfr-price small { font-size: .7rem; font-weight: 500; color: var(--cfr-muted); }

/* ราคาโปรโมชั่น — ราคาเดิม (เล็ก) ลอยบนราคาจริง */
.cfr-price-wrap { display: inline-flex; flex-direction: column; line-height: 1.1; }
.cfr-price-old {
	text-decoration: line-through;
	color: var(--cfr-muted);
	font-size: .78rem;
	font-weight: 500;
	margin-bottom: 1px;
}
.cfr-price-sale { color: #16a34a; }

/* ป้ายรถฝาก (agent) */
.cfr-agent-badge {
	position: absolute;
	top: 46px;              /* ใต้ป้ายประเภทรถ */
	left: 12px;
	background: rgba(124, 58, 237, .92);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}
.cfr-tag-agent { background: #ede9fe !important; color: #6d28d9 !important; border-color: #ddd6fe !important; font-weight: 700; }

/* ป้ายส่วนลดมุมรูป */
.cfr-sale-badge {
	position: absolute;
	top: 12px;
	right: 56px; /* เว้นที่ให้ปุ่มหัวใจ (wishlist) มุมขวาบน */
	background: linear-gradient(135deg, #f43f5e, #dc2626);
	color: #fff;
	font-weight: 800;
	font-size: .85rem;
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(220,38,38,.35);
}

/* section โปรโมชั่น */
.cfr-promotions {
	background: linear-gradient(180deg, #fff7ed, #fff);
	border: 1px solid #fed7aa;
	border-radius: var(--cfr-radius);
	padding: 20px 22px;
	margin: 24px 0;
}

/* ---------- Carousel ---------- */
.cfr-carousel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.cfr-carousel-head .cfr-list-title { margin: 0; }
.cfr-carousel-nav { display: flex; gap: 8px; }
.cfr-carousel-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--cfr-line);
	background: #fff;
	color: var(--cfr-ink);
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cfr-shadow);
	transition: background .12s, transform .12s, opacity .12s;
}
.cfr-carousel-btn:hover:not(:disabled) { background: var(--cfr-primary); color: #fff; transform: translateY(-1px); }
.cfr-carousel-btn:disabled { opacity: .35; cursor: default; }

.cfr-carousel {
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-ms-overflow-style: none;
	scrollbar-width: none;
	cursor: grab;
}
.cfr-carousel::-webkit-scrollbar { display: none; }
.cfr-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cfr-carousel-track { display: flex; gap: 20px; padding-bottom: 4px; }
.cfr-carousel-slide {
	flex: 0 0 clamp(240px, 30%, 300px);
	scroll-snap-align: start;
}
.cfr-carousel-slide .cfr-car-card { height: 100%; }
@media (max-width: 640px) {
	.cfr-carousel-slide { flex-basis: 80%; }
}

/* Placeholder (เมื่อไม่มีรูป) */
.cfr-thumb-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.cfr-thumb-placeholder span { font-size: 3rem; font-weight: 800; text-transform: uppercase; opacity: .95; }
.cfr-thumb-placeholder small { position: absolute; bottom: 8px; right: 12px; font-size: 1.4rem; }

/* ---------- List view ---------- */
.cfr-car-grid.cfr-view-list { grid-template-columns: 1fr; }
.cfr-view-list .cfr-car-card { flex-direction: row; }
.cfr-view-list .cfr-card-media { flex: 0 0 300px; }
.cfr-view-list .cfr-car-thumb img,
.cfr-view-list .cfr-car-thumb .cfr-thumb-placeholder { height: 100%; min-height: 180px; }
.cfr-view-list .cfr-card-body { flex: 1; }
@media (max-width: 640px) {
	.cfr-view-list .cfr-car-card { flex-direction: column; }
	.cfr-view-list .cfr-card-media { flex: none; }
}

/* ---------- No result ---------- */
.cfr-no-result {
	padding: 32px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--cfr-radius);
	color: #92400e;
	text-align: center;
}

/* ---------- Single car page ---------- */
.cfr-single-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 8px 0 20px;
}
.cfr-single-brand .cfr-brand-logo,
.cfr-single-brand .cfr-brand-letter {
	width: 52px; height: 52px; font-size: 1.4rem;
}
.cfr-single-title { margin: 0 0 8px; font-size: 1.9rem; line-height: 1.2; }
.cfr-single-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cfr-tag {
	background: var(--cfr-bg);
	border: 1px solid var(--cfr-line);
	color: var(--cfr-muted);
	font-size: .82rem;
	padding: 3px 12px;
	border-radius: 999px;
}
.cfr-status-pill { font-size: .82rem; padding: 3px 12px; border-radius: 999px; color: #fff; font-weight: 600; }
.cfr-status-ok { background: #16a34a; }
.cfr-status-busy { background: #dc2626; }
.cfr-status-warn { background: #d97706; }

/* สเปกรถ — grid 12 ช่อง แถวเดียว (แยกเต็มความกว้าง) */
.cfr-spec-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 12px;
	margin: 0 0 24px;
}
.cfr-spec {
	grid-column: span 2; /* 6 การ์ด × 2 = 12 -> แถวเดียว */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	padding: 14px 8px;
	border: 1px solid var(--cfr-line);
	border-radius: 12px;
	background: #fff;
}
.cfr-spec-ico { line-height: 1; }
.cfr-spec-ico .cfr-brand-logo,
.cfr-spec-ico .cfr-brand-letter { width: 26px; height: 26px; }
@media (max-width: 900px) { .cfr-spec-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 520px) { .cfr-spec-grid { grid-template-columns: repeat(4, 1fr); } }
.cfr-spec-ico { font-size: 1.4rem; }
.cfr-spec-lbl { font-size: .72rem; color: var(--cfr-muted); }
.cfr-spec-val { font-weight: 700; font-size: .95rem; }
.cfr-car-desc { margin-top: 20px; }
.cfr-car-desc h3 { margin-bottom: 8px; }

.cfr-single-thumb { position: relative; }
.cfr-single-thumb .cfr-lb { display: block; position: relative; }
.cfr-single-thumb img {
	width: 100%;
	height: auto;            /* ยกเลิก attribute height เพื่อให้ aspect-ratio คุม */
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: var(--cfr-radius);
}
.cfr-single-thumb .cfr-thumb-placeholder { aspect-ratio: 16 / 10; height: auto; border-radius: var(--cfr-radius); }
.cfr-single-thumb .cfr-thumb-placeholder span { font-size: 5rem; }
.cfr-zoom-hint {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(15,23,42,.75);
	color: #fff;
	font-size: .8rem;
	padding: 6px 12px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity .15s;
}
.cfr-single-thumb .cfr-lb:hover .cfr-zoom-hint { opacity: 1; }

.cfr-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin-top: 14px;
}
.cfr-gallery img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s;
}
.cfr-gallery img:hover { transform: scale(1.03); box-shadow: var(--cfr-shadow); }

/* ---------- Lightbox ---------- */
.cfr-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(2,6,23,.92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.cfr-lightbox.is-open { display: flex; flex-direction: column; gap: 14px; }
.cfr-lb-stage { margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; }
.cfr-lb-stage img { max-width: 90vw; max-height: 72vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cfr-lb-count { color: #cbd5e1; margin-top: 12px; font-size: .9rem; }

/* แถบรูปย่อใต้รูปใหญ่ */
.cfr-lb-thumbs {
	display: flex;
	gap: 8px;
	max-width: 90vw;
	padding: 4px 2px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.cfr-lb-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 50px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: .5;
	transition: opacity .15s, border-color .15s;
}
.cfr-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfr-lb-thumb:hover { opacity: .85; }
.cfr-lb-thumb.is-active { opacity: 1; border-color: #fff; }
.cfr-lb-close, .cfr-lb-prev, .cfr-lb-next {
	position: absolute;
	background: rgba(255,255,255,.12);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 999px;
	width: 48px;
	height: 48px;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.cfr-lb-close:hover, .cfr-lb-prev:hover, .cfr-lb-next:hover { background: rgba(255,255,255,.28); }
.cfr-lb-close { top: 20px; right: 20px; }
.cfr-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.cfr-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
	.cfr-lb-prev { left: 8px; } .cfr-lb-next { right: 8px; }
	.cfr-lb-close { top: 10px; right: 10px; }
}

/* ---------- Booking form ---------- */
.cfr-booking-form {
	max-width: 460px;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	padding: 22px;
	background: linear-gradient(180deg, #ffffff, #fbfcfe);
	box-shadow: var(--cfr-shadow);
	margin: 0 0 24px;
}
.cfr-booking-form h3 { margin-top: 0; }
.cfr-booking-form input,
.cfr-booking-form select,
.cfr-booking-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	box-sizing: border-box;
	font-family: inherit;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cfr-agent-form { max-width: 520px; }
.cfr-booking-form input:hover,
.cfr-booking-form select:hover,
.cfr-booking-form textarea:hover { border-color: #cbd5e1; }
.cfr-booking-form input:focus,
.cfr-booking-form select:focus,
.cfr-booking-form textarea:focus {
	outline: none;
	border-color: var(--cfr-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.cfr-booking-form label { font-weight: 600; font-size: .9rem; }
.cfr-booking-form input[readonly] { background: #fff; cursor: pointer; }

/* ---- การ์ดสรุป + ปุ่มเปิดฟอร์ม ---- */
.cfr-book-card {
	max-width: 460px;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	padding: 20px;
	background: linear-gradient(180deg, #ffffff, #fbfcfe);
	box-shadow: var(--cfr-shadow);
	margin: 0 0 24px;
}
.cfr-book-card .cfr-book-head { margin-bottom: 14px; }
.cfr-book-card .cfr-tier-note { margin-bottom: 14px; }
.cfr-book-open { cursor: pointer; }

/* ---- Modal ฟอร์มจอง ---- */
.cfr-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.cfr-modal[hidden] { display: none; }
.cfr-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); animation: cfrFade .2s ease; }
.cfr-modal-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(15,23,42,.35);
	animation: cfrModalIn .25s cubic-bezier(.2,.8,.25,1);
	overflow: hidden;
}
@keyframes cfrModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.cfr-modal-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--cfr-line);
	background: #fff;
}
.cfr-modal-title { font-weight: 800; font-size: 1.05rem; color: var(--cfr-ink); }
.cfr-modal-close {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border: none;
	border-radius: 50%;
	background: var(--cfr-bg);
	color: var(--cfr-muted);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.cfr-modal-close:hover { background: #fee2e2; color: var(--cfr-accent); }
.cfr-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 22px; }
/* ฟอร์มภายใน modal ไม่ต้องมีกรอบ/เงา/ระยะซ้ำ */
.cfr-modal-body .cfr-booking-form {
	max-width: none;
	border: none;
	box-shadow: none;
	background: transparent;
	padding: 0;
	margin: 0;
}
@media (max-width: 480px) {
	.cfr-modal { padding: 0; }
	.cfr-modal-panel { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
}

/* ---- ฟอร์มจองดีไซน์ใหม่ (เป็นขั้นตอน) ---- */
.cfr-book-head {
	position: relative;
	padding: 14px 16px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, #1e3a8a, #2563eb);
	color: #fff;
}
.cfr-book-label { display: block; font-size: .75rem; opacity: .85; margin-bottom: 2px; }
.cfr-book-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cfr-book-price { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.cfr-book-price small { font-size: .8rem; font-weight: 500; opacity: .85; }
.cfr-book-save { display: inline-flex; align-items: center; gap: 6px; }
.cfr-book-was { font-size: .95rem; font-weight: 600; opacity: .65; text-decoration: line-through; }
.cfr-book-off {
	font-size: .75rem;
	font-weight: 800;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 6px;
	background: #ef4444;
	color: #fff;
}
.cfr-book-serve {
	position: absolute;
	top: 14px;
	right: 16px;
	max-width: 55%;
	font-size: .8rem;
	background: rgba(255,255,255,.15);
	padding: 4px 10px;
	border-radius: 999px;
}

.cfr-form-section {
	position: relative;
	margin-bottom: 14px;
	padding: 16px 16px 6px;
	background: #f8fafc;
	border: 1px solid var(--cfr-line);
	border-radius: 14px;
}
.cfr-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: .95rem;
	color: var(--cfr-ink);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e8edf3;
}
.cfr-step {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: 0 2px 6px rgba(37,99,235,.35);
}
.cfr-field { display: block; margin-bottom: 12px; font-weight: 600; font-size: .88rem; }
.cfr-field input, .cfr-field select, .cfr-field textarea {
	width: 100%;
	margin-top: 5px;
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	box-sizing: border-box;
	font-weight: 500;
	font-family: inherit;
}
.cfr-field input[type="file"] { padding: 8px 10px; font-weight: 500; background: #fff; }
.cfr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .cfr-grid-2 { grid-template-columns: 1fr; } }

/* สัมภาระ: กลุ่มนับจำนวนกระเป๋า */
.cfr-luggage {
	margin: 4px 0 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--cfr-line);
	border-radius: 12px;
}
.cfr-luggage-title { display: block; font-weight: 700; font-size: .88rem; color: var(--cfr-ink); margin-bottom: 10px; }
.cfr-luggage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cfr-luggage-grid label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-weight: 600;
	font-size: .82rem;
	color: var(--cfr-ink);
	text-align: center;
}
.cfr-luggage-grid .cfr-lug-name { white-space: nowrap; } /* icon + ชื่อ อยู่บรรทัดเดียวกัน */
.cfr-luggage-grid label small { font-weight: 500; font-size: .72rem; color: var(--cfr-muted); }
.cfr-luggage-grid input {
	width: 100%;
	padding: 9px 6px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	box-sizing: border-box;
	text-align: center;
	font-weight: 700;
	font-family: inherit;
}
@media (max-width: 400px) { .cfr-luggage-grid { grid-template-columns: 1fr; } }
.cfr-btn-block { width: 100%; padding: 15px; font-size: 1.08rem; border-radius: 12px; margin-top: 4px; letter-spacing: .3px; }

/* บริการเสริม (add-ons) */
.cfr-addons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cfr-addon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-weight: 500;
	font-size: .9rem;
	transition: border-color .15s, background .15s;
}
.cfr-addon:hover { border-color: #cbd5e1; }
.cfr-addon input { width: auto !important; height: auto; margin: 0; flex: 0 0 auto; }
.cfr-addon input:checked ~ .cfr-addon-name { color: var(--cfr-primary); font-weight: 700; }
.cfr-addon-name { flex: 1 1 auto; }
.cfr-addon-price { flex: 0 0 auto; font-weight: 700; color: var(--cfr-ink); }
.cfr-addon-price small { font-weight: 500; color: var(--cfr-muted); font-size: .8em; }
.cfr-addon:has(input:checked) { border-color: var(--cfr-primary); background: #eff6ff; }

/* โค้ดส่วนลด */
.cfr-coupon { margin-bottom: 12px; }
.cfr-coupon-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.cfr-coupon-row { display: flex; gap: 8px; }
.cfr-coupon-row input { flex: 1 1 auto; text-transform: uppercase; }
.cfr-coupon-row .cfr-btn-sm { flex: 0 0 auto; white-space: nowrap; }
.cfr-coupon-msg { margin-top: 6px; font-size: .85rem; font-weight: 600; }
.cfr-coupon-msg.is-ok { color: #15803d; }
.cfr-coupon-msg.is-err { color: var(--cfr-accent); }

/* หมายเหตุเงินมัดจำ */
.cfr-deposit-note {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: .85rem;
	color: #92400e;
}

/* ใช้แต้มสะสม */
.cfr-usepoints {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 12px;
	border: 1px solid #fcd34d;
	border-radius: 10px;
	background: #fffdf5;
	cursor: pointer;
	font-size: .88rem;
}
.cfr-usepoints input { width: auto !important; height: auto; margin: 0; flex: 0 0 auto; }

/* หน้าแต้มสะสม */
.cfr-points-box { max-width: 460px; }
.cfr-points-balance {
	text-align: center;
	padding: 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	margin-bottom: 20px;
}
.cfr-points-num { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.cfr-points-unit { font-size: 1.1rem; font-weight: 600; margin-left: 4px; }
.cfr-points-worth { font-size: .85rem; opacity: .9; margin-top: 6px; }
.cfr-points-log { list-style: none; margin: 0; padding: 0; }
.cfr-points-log li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cfr-line);
	font-size: .9rem;
}
.cfr-points-log-note { flex: 1 1 auto; }
.cfr-points-log-date { color: var(--cfr-muted); font-size: .82rem; }
.cfr-points-log-pts { font-weight: 800; }
.cfr-points-log-pts.plus { color: #16a34a; }
.cfr-points-log-pts.minus { color: var(--cfr-accent); }

/* กล่องแดชบอร์ด agent (ยังใช้ flex row) */
/* เวลารับ-คืนรถ */
.cfr-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.cfr-time-row label { display: block; font-weight: 600; font-size: .9rem; }
.cfr-time-row select { margin-top: 4px; }

/* จุดรับ-ส่งรถ */
.cfr-loc { margin: 4px 0 12px; }
.cfr-loc-note {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: 8px 12px;
	margin: 0 0 10px;
	font-size: .85rem;
	color: #1e40af;
}
.cfr-loc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cfr-loc-row-full { grid-template-columns: 1fr; }
.cfr-loc-row > label { display: block; font-weight: 600; font-size: .88rem; margin: 0; }
/* ไอคอน emoji อยู่บรรทัดเดียวกับข้อความหัวข้อ */
.cfr-loc-row > label img.emoji { display: inline; vertical-align: -2px; width: 1em; height: 1em; margin: 0 2px 0 0; }
/* input กับ select ให้ขนาด/สไตล์เท่ากันเป๊ะ + ขึ้นบรรทัดใหม่ใต้หัวข้อ */
.cfr-loc-row select,
.cfr-loc-row input[type="text"] {
	display: block;
	width: 100%;
	height: 44px;
	margin-top: 5px;
	padding: 0 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 500;
	line-height: 42px;
}
.cfr-loc-same {
	display: flex; align-items: center; gap: 8px;
	font-weight: 500 !important; margin: 6px 0 12px; font-size: .9rem;
}
.cfr-loc-same input { width: auto !important; height: auto; }
.cfr-loc-return {
	border-left: 3px solid var(--cfr-primary);
	padding-left: 12px;
	margin-bottom: 4px;
}
@media (max-width: 400px) { .cfr-loc-row { grid-template-columns: 1fr; } }

.cfr-book-summary {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 12px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.cfr-book-summary .cfr-book-total strong { color: var(--cfr-accent); font-size: 1.15rem; }

/* ส่วนลดตามจำนวนวัน */
.cfr-tier-note {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: .88rem;
}
.cfr-tier-note strong { color: #166534; }
.cfr-tier-note ul { margin: 6px 0 0; padding-left: 18px; }
.cfr-tier-note li { color: #15803d; }
.cfr-tier-price { color: #dc2626; font-weight: 700; }
.cfr-summary-disc span { color: #16a34a; font-weight: 600; }

/* ---------- สรุปการจอง (ใบเสร็จ) หน้า single ---------- */
.cfr-booking-summary {
	margin: 14px 0;
	border: 1px solid #bfdbfe;
	border-radius: 14px;
	background: linear-gradient(180deg, #f5f9ff, #eef4ff);
	padding: 16px;
	box-shadow: 0 2px 8px rgba(37,99,235,.08);
	animation: cfrFade .25s ease;
}
@keyframes cfrFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.cfr-summary-dates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px dashed #bfdbfe;
	font-size: .9rem;
}
.cfr-summary-badge {
	background: #dbeafe;
	color: #1d4ed8;
	font-size: .72rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}
.cfr-summary-arrow { color: var(--cfr-muted); margin: 0 4px; }

.cfr-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	font-size: .95rem;
	color: var(--cfr-ink);
}
.cfr-summary-row span:first-child { color: var(--cfr-muted); }
.cfr-summary-line { height: 1px; background: #bfdbfe; margin: 8px 0; }
.cfr-summary-total { font-size: 1.05rem; }
.cfr-summary-total span:first-child { color: var(--cfr-ink); font-weight: 700; }
.cfr-summary-total span:last-child { color: var(--cfr-accent); font-weight: 800; font-size: 1.35rem; }
.cfr-summary-warn { color: #b45309; font-weight: 600; }

/* ---------- Notices ---------- */
.cfr-notice { padding: 14px 18px; border-radius: 12px; margin-bottom: 16px; }
.cfr-notice-success { background: #dcfce7; color: #166534; }
.cfr-notice-error   { background: #fee2e2; color: #991b1b; }

/* ---------- Booked ranges ---------- */
.cfr-booked-list {
	margin-top: 20px;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	padding: 16px 20px;
	background: #fff;
}
.cfr-booked-list h4 { margin: 0 0 10px; }
.cfr-booked-list ul { list-style: none; padding: 0; margin: 0; }
.cfr-booked-list li { padding: 6px 0; border-bottom: 1px dashed var(--cfr-line); font-size: .9rem; }
.cfr-booked-list li span { color: var(--cfr-muted); }
.cfr-booked-confirmed { color: #991b1b; }
.cfr-booked-pending { color: #b45309; }

/* ---------- PromptPay QR ---------- */
.cfr-promptpay {
	text-align: center;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	padding: 20px;
	margin: 16px 0;
	background: #fff;
	max-width: 300px;
}
.cfr-promptpay h4 { margin: 0 0 12px; color: #003d7a; }
.cfr-promptpay img { width: 220px; height: 220px; image-rendering: pixelated; }
.cfr-promptpay .cfr-price { font-size: 1.3rem; margin: 8px 0 4px; }
.cfr-promptpay small { color: var(--cfr-muted); }

/* ---------- Lookup ---------- */
.cfr-lookup-form {
	max-width: 440px;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	padding: 24px;
	background: #fff;
	box-shadow: var(--cfr-shadow);
	margin: 24px 0;
}
.cfr-lookup-form input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cfr-line);
	border-radius: 10px;
	box-sizing: border-box;
}
.cfr-lookup-form label { font-weight: 600; }
.cfr-lookup-result { max-width: 600px; margin: 16px 0; }
.cfr-lookup-card {
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--cfr-shadow);
}
.cfr-lookup-top { display: flex; gap: 16px; align-items: center; padding: 20px; border-bottom: 1px solid var(--cfr-line); }
.cfr-lookup-thumb { flex: 0 0 120px; }
.cfr-lookup-thumb img,
.cfr-lookup-thumb .cfr-thumb-placeholder {
	width: 120px; height: 84px; object-fit: cover; border-radius: 10px; display: flex;
}
.cfr-lookup-thumb .cfr-thumb-placeholder { align-items: center; justify-content: center; position: relative; }
.cfr-lookup-headinfo { flex: 1; min-width: 0; }
.cfr-lookup-ref { font-size: .82rem; color: var(--cfr-muted); margin-bottom: 2px; }
.cfr-lookup-ref strong { color: var(--cfr-ink); letter-spacing: .04em; }
.cfr-lookup-carname { margin: 2px 0 8px; font-size: 1.2rem; }
.cfr-lookup-carname a { color: var(--cfr-ink); text-decoration: none; }
.cfr-lookup-carname a:hover { color: var(--cfr-primary); }

/* Timeline สถานะ */
.cfr-timeline { display: flex; gap: 4px; padding: 18px 20px; }
.cfr-tl-step {
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
	position: relative; font-size: .8rem; color: var(--cfr-muted); text-align: center;
}
.cfr-tl-step::before {
	content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
	background: var(--cfr-line); z-index: 0;
}
.cfr-tl-step:first-child::before { display: none; }
.cfr-tl-dot {
	width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid var(--cfr-line); color: var(--cfr-muted);
	font-size: .82rem; font-weight: 700; z-index: 1;
}
.cfr-tl-step.done  { color: #166534; }
.cfr-tl-step.done  .cfr-tl-dot { background: #166534; border-color: #166534; color: #fff; }
.cfr-tl-step.done::before { background: #166534; }
.cfr-tl-step.active { color: var(--cfr-primary); font-weight: 700; }
.cfr-tl-step.active .cfr-tl-dot { background: var(--cfr-primary); border-color: var(--cfr-primary); color: #fff; }
.cfr-tl-step.active::before { background: linear-gradient(90deg, #166534, var(--cfr-primary)); }
.cfr-timeline-cancelled { justify-content: center; }
.cfr-timeline-cancelled .cfr-tl-step { flex: 0; color: #991b1b; font-weight: 700; font-size: .95rem; }
.cfr-timeline-cancelled .cfr-tl-step::before { display: none; }

/* กริดรายละเอียด */
.cfr-lookup-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--cfr-line); border-top: 1px solid var(--cfr-line);
}
.cfr-lookup-grid > div { background: #fff; padding: 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.cfr-lookup-lbl { font-size: .76rem; color: var(--cfr-muted); }
.cfr-lookup-val { font-weight: 600; }
.cfr-lookup-total { grid-column: 1 / -1; background: var(--cfr-bg) !important; }
.cfr-lookup-total .cfr-lookup-val { font-size: 1.25rem; color: var(--cfr-primary); }
.cfr-lookup-pay { padding: 18px 20px; border-top: 1px solid var(--cfr-line); text-align: center; }
.cfr-lookup-pay-note { font-size: .9rem; color: var(--cfr-muted); margin: 0 0 10px; }
@media (max-width: 420px) {
	.cfr-lookup-top { flex-direction: column; text-align: center; }
	.cfr-lookup-thumb { flex: 0 0 auto; width: 100%; }
	.cfr-lookup-thumb img, .cfr-lookup-thumb .cfr-thumb-placeholder { width: 100%; height: 140px; }
}

/* ---------- My bookings table ---------- */
.cfr-my-bookings { overflow-x: auto; }
.cfr-bookings-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.cfr-bookings-table th, .cfr-bookings-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--cfr-line);
	text-align: left;
	font-size: .92rem;
}
.cfr-bookings-table th { background: var(--cfr-bg); font-size: .82rem; color: var(--cfr-muted); text-transform: uppercase; letter-spacing: .03em; }
.cfr-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; color: #fff; font-size: .8rem; }
.cfr-badge-pending   { background: #b45309; }
.cfr-badge-confirmed { background: #1d4ed8; }
.cfr-badge-completed { background: #166534; }
.cfr-badge-cancelled { background: #991b1b; }

/* ---------- Login ---------- */
.cfr-login-box {
	max-width: 420px;
	margin: 24px auto;
	padding: 28px;
	border: 1px solid var(--cfr-line);
	border-radius: var(--cfr-radius);
	background: #fff;
	box-shadow: var(--cfr-shadow);
}
.cfr-login-box .login-username,
.cfr-login-box .login-password { margin-bottom: 14px; }
.cfr-login-box label { display: block; font-weight: 600; margin-bottom: 4px; }
.cfr-login-box input[type=text],
.cfr-login-box input[type=email],
.cfr-login-box input[type=password] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--cfr-line);
	border-radius: 10px; box-sizing: border-box;
}
.cfr-login-box .button, .cfr-login-box #wp-submit {
	background: linear-gradient(180deg, var(--cfr-primary), var(--cfr-primary-dark));
	color: #fff; border: none; padding: 10px 20px; border-radius: 10px;
	cursor: pointer; font-weight: 600;
}
.cfr-login-box .login-remember { margin: 8px 0; font-weight: 400; }
.cfr-login-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cfr-login-alt { margin-top: 16px; text-align: center; font-size: .9rem; color: var(--cfr-muted); }
.cfr-login-box .cfr-btn { width: 100%; margin-top: 8px; }

/* ---------- Pagination ---------- */
.cfr-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 8px 0 32px;
	padding-top: 18px;
	border-top: 1px solid var(--cfr-line);
}
.cfr-pp, .cfr-goto { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--cfr-muted); }
.cfr-pp select, .cfr-goto input {
	padding: 6px 10px;
	border: 1px solid var(--cfr-line);
	border-radius: 8px;
}
.cfr-goto input { width: 64px; }
.cfr-pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cfr-page-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cfr-line);
	border-radius: 8px;
	background: #fff;
	color: var(--cfr-ink);
	text-decoration: none;
	font-size: .92rem;
	transition: background .12s, color .12s, border-color .12s;
}
.cfr-page-btn:hover { border-color: var(--cfr-primary); color: var(--cfr-primary); }
.cfr-page-btn.is-active { background: var(--cfr-primary); color: #fff; border-color: var(--cfr-primary); }
.cfr-page-dots { color: var(--cfr-muted); padding: 0 2px; }
@media (max-width: 640px) {
	.cfr-pagination { justify-content: center; }
}

/* ---------- Related cars ---------- */
.cfr-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cfr-line); }
.cfr-related .cfr-list-title { margin-bottom: 16px; }

/* ---------- Reviews / ดาว ---------- */
.cfr-reviews { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cfr-line); }
.cfr-reviews-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cfr-reviews-head .cfr-list-title { margin: 0; }
.cfr-reviews-avg { display: flex; align-items: center; gap: 8px; }
.cfr-avg-num { font-size: 1.6rem; font-weight: 800; color: var(--cfr-ink); }
.cfr-avg-count { color: var(--cfr-muted); font-size: .9rem; }

/* ดาว — แสดงเศษดาวแม่นยำ (clip ความกว้าง) */
.cfr-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	font-size: 1.05rem;
	letter-spacing: 1px;
}
.cfr-stars-bg { color: #d1d5db; }
.cfr-stars-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #f59e0b;
}

/* ดาวบนการ์ด */
.cfr-card-rating { display: flex; align-items: center; gap: 6px; margin: -2px 0 2px; }
.cfr-card-rating .cfr-stars { font-size: .9rem; }
.cfr-card-rating-num { font-weight: 700; font-size: .85rem; color: var(--cfr-ink); }
.cfr-card-rating-count { font-size: .8rem; color: var(--cfr-muted); }

.cfr-review-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.cfr-review-item { border: 1px solid var(--cfr-line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.cfr-review-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cfr-review-author { font-weight: 700; }
.cfr-review-date { color: var(--cfr-muted); font-size: .82rem; margin-left: auto; }
.cfr-review-text { color: var(--cfr-ink); font-size: .95rem; }
.cfr-review-empty { color: var(--cfr-muted); padding: 12px 0; }

/* ตัวเลือกให้ดาว */
.cfr-star-input { display: inline-flex; gap: 4px; margin: 6px 0 12px; cursor: pointer; }
.cfr-star-pick { font-size: 1.8rem; color: #d1d5db; transition: color .1s; line-height: 1; }
.cfr-star-pick.on { color: #f59e0b; }
.cfr-review-form textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--cfr-line);
	border-radius: 10px; box-sizing: border-box; font-family: inherit;
}

/* ---------- Car meta on single ---------- */
.cfr-car-meta { list-style: none; padding: 0; }
.cfr-car-meta li { padding: 10px 0; border-bottom: 1px solid var(--cfr-line); display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Modal จองสำเร็จ + นับถอยหลังชำระเงิน ---------- */
.cfr-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.cfr-modal-hide { display: none !important; }
.cfr-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .6);
	backdrop-filter: blur(2px);
	animation: cfr-fade .2s ease;
}
.cfr-modal-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 18px;
	padding: 28px 24px 22px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	animation: cfr-pop .25s ease;
}
@keyframes cfr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfr-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.cfr-modal-x {
	position: absolute; top: 10px; right: 14px;
	background: none; border: none; font-size: 1.6rem; line-height: 1;
	color: var(--cfr-muted); cursor: pointer;
}
.cfr-modal-x:hover { color: var(--cfr-ink); }
.cfr-modal-check { font-size: 3rem; line-height: 1; }
.cfr-modal-title { margin: 8px 0 4px; font-size: 1.5rem; color: #166534; }
.cfr-modal-sub { margin: 0 0 14px; color: var(--cfr-muted); }
.cfr-modal-ref {
	background: var(--cfr-bg); border: 1px dashed var(--cfr-line); border-radius: 12px;
	padding: 10px; font-size: .85rem; color: var(--cfr-muted); margin-bottom: 14px;
}
.cfr-modal-ref strong { font-size: 1.15rem; color: var(--cfr-ink); letter-spacing: .05em; }
.cfr-modal-paybreak {
	font-size: .82rem; color: var(--cfr-muted); margin: 8px 0 12px; line-height: 1.5;
}
.cfr-modal-paybreak strong { color: var(--cfr-ink); }

.cfr-countdown {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px;
	padding: 12px; margin-bottom: 14px; color: #9a3412; font-size: .9rem; font-weight: 600;
}
.cfr-countdown-time { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cfr-countdown-note { font-size: .74rem; font-weight: 500; opacity: .85; }
.cfr-countdown-expired { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.cfr-modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.cfr-modal-box .cfr-promptpay { margin: 0 0 4px; }
.cfr-modal-box .cfr-promptpay img { width: 200px; height: 200px; }

/* นับถอยหลังในตารางการจองของฉัน */
.cfr-pay-timer {
	margin-top: 6px; font-size: .78rem; font-weight: 600; color: #9a3412;
	display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.cfr-pay-timer-time { font-variant-numeric: tabular-nums; font-weight: 800; }
.cfr-pay-timer-expired { color: #991b1b; }

/* ============ แท็บ (การจองของฉัน / รายการโปรด) ============ */
.cfr-tabs .cfr-tab-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cfr-tab-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--cfr-line, #e5e7eb); margin-bottom: 18px; flex-wrap: wrap; }
.cfr-tab-nav label {
	cursor: pointer; padding: 10px 18px; font-weight: 600; font-size: .95rem;
	color: var(--cfr-muted, #6b7280); border-radius: 10px 10px 0 0;
	border: 2px solid transparent; border-bottom: none; margin-bottom: -2px; user-select: none;
}
.cfr-tab-nav label:hover { color: var(--cfr-primary, #2563eb); background: var(--cfr-bg, #f8fafc); }
.cfr-tab-panel { display: none; }
#cfr-tab-bookings:checked ~ .cfr-tab-nav label[for="cfr-tab-bookings"],
#cfr-tab-wishlist:checked ~ .cfr-tab-nav label[for="cfr-tab-wishlist"] {
	color: var(--cfr-primary, #2563eb); border-color: var(--cfr-line, #e5e7eb);
	border-bottom-color: #fff; background: #fff;
}
#cfr-tab-bookings:checked ~ .cfr-panel-bookings,
#cfr-tab-wishlist:checked ~ .cfr-panel-wishlist { display: block; }

/* ============ แดชบอร์ด/ฟอร์มเจ้าของรถ (agent) ============ */
.cfr-agent-cars-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.cfr-agent-cars-head h3 { margin: 0; }
.cfr-agent-car-cell { display: flex; align-items: center; gap: 10px; }
.cfr-agent-car-cell img { flex: 0 0 auto; }
.cfr-agent-car-name { font-weight: 600; }
.cfr-agent-cars-table td { vertical-align: middle; }
.cfr-agent-cars-table td:last-child { white-space: nowrap; }
.cfr-agent-thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.cfr-agent-mycars { border-top: 1px solid var(--cfr-line, #e5e7eb); padding-top: 18px; }
.cfr-agent-mycars-list { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfr-agent-mycars-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--cfr-bg, #f8fafc); border-radius: 8px; }
.cfr-agent-mycars-name { font-weight: 600; }
.cfr-agent-earn { color: #166534 !important; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 12px; margin: 8px 0 0; }
.cfr-agent-consent { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.5; margin: 14px 0; }
.cfr-agent-consent { width: 100%; }
.cfr-agent-consent input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.cfr-carf-brand-other, .cfr-carf-model-other { width: 100%; box-sizing: border-box; }

/* ช่วงวันเช่าเต็มแถว (flatpickr ครอบด้วย .flatpickr-wrapper แบบ inline-block) */
.cfr-daterange-field { display: block; margin: 0 0 6px; }
.cfr-daterange-field > label { display: block; font-weight: 600; margin-bottom: 6px; }
.cfr-daterange-field .flatpickr-wrapper { display: block; width: 100%; }
.cfr-daterange-input { width: 100%; box-sizing: border-box; }

/* ============ รายการโปรด: grid view ============ */
.cfr-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
@media (max-width: 560px) { .cfr-grid-cards { grid-template-columns: 1fr; } }

/* ============ ไอคอนหัวใจ (SVG) ============ */
.cfr-wish-btn svg.cfr-wish-ico { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .15s, stroke .15s, transform .15s; }
.cfr-wish-btn { color: #64748b; }
.cfr-wish-btn:hover { color: #ef4444; }
.cfr-wish-btn:hover svg.cfr-wish-ico { transform: scale(1.12); }
.cfr-wish-btn.is-saved { color: #ef4444; }
.cfr-wish-btn.is-saved svg.cfr-wish-ico { fill: #ef4444; stroke: #ef4444; }

/* ============ ตัวจัดการรูป (ฟอร์มแก้ไข) ============ */
.cfr-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 8px; }
.cfr-img-tile { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid var(--cfr-line, #e5e7eb); aspect-ratio: 4/3; background: var(--cfr-bg, #f8fafc); }
.cfr-img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfr-img-tile.is-featured { border-color: var(--cfr-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.cfr-img-badge { position: absolute; left: 6px; bottom: 6px; background: var(--cfr-primary, #2563eb); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: none; }
.cfr-img-tile.is-featured .cfr-img-badge { display: block; }
.cfr-img-star, .cfr-img-del { position: absolute; top: 6px; width: 26px; height: 26px; border: none; border-radius: 50%; cursor: pointer; font-size: .95rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.cfr-img-star { left: 6px; background: rgba(255,255,255,.92); color: #f59e0b; }
.cfr-img-star:hover { background: #fff; transform: scale(1.1); }
.cfr-img-tile.is-featured .cfr-img-star { background: #f59e0b; color: #fff; }
.cfr-img-del { right: 6px; background: rgba(255,255,255,.92); color: #dc2626; font-weight: 700; }
.cfr-img-del:hover { background: #dc2626; color: #fff; transform: scale(1.1); }

/* ============ Tag picker พื้นที่ให้บริการ ============ */
.cfr-tagpick .cfr-tagpick-prov-add, .cfr-tagpick .cfr-tagpick-dist-add { width: 100%; }
.cfr-tagpick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.cfr-tag { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 20px; padding: 5px 6px 5px 12px; font-size: .88rem; font-weight: 600; }
.cfr-tag.cfr-tag-dist { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.cfr-tag-x { border: none; background: rgba(0,0,0,.08); color: inherit; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.cfr-tag-x:hover { background: #dc2626; color: #fff; }
.cfr-tagpick-dist-field { margin-top: 12px; }

/* ============ ฟอร์มเจ้าของรถ: เต็มความกว้าง + กริดหลายคอลัมน์ ============ */
.cfr-agent-form { width: 100%; max-width: 100%; }
.cfr-agent-form .cfr-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cfr-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cfr-form-actions .cfr-btn { min-width: 150px; }
@media (max-width: 480px) { .cfr-agent-form .cfr-grid-2 { grid-template-columns: 1fr; } }

/* ============ Dropzone อัปโหลดรูป ============ */
.cfr-dz-field { display: block; }
.cfr-dropzone { margin-top: 6px; }
.cfr-dz-input { display: none; }
.cfr-dz-area { border: 2px dashed var(--cfr-line, #cbd5e1); border-radius: 12px; padding: 28px 16px; text-align: center; cursor: pointer; background: var(--cfr-bg, #f8fafc); transition: border-color .15s, background .15s; }
.cfr-dz-area:hover { border-color: var(--cfr-primary, #2563eb); background: #eff6ff; }
.cfr-dropzone.is-drag .cfr-dz-area { border-color: var(--cfr-primary, #2563eb); background: #dbeafe; }
.cfr-dz-ico { font-size: 2rem; line-height: 1; margin-bottom: 6px; }
.cfr-dz-text { font-weight: 600; color: #334155; }
.cfr-dz-browse { color: var(--cfr-primary, #2563eb); text-decoration: underline; }
.cfr-dz-hint { font-size: .8rem; color: var(--cfr-muted, #6b7280); font-weight: 500; margin-top: 4px; }
.cfr-dz-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
.cfr-dz-previews:empty { display: none; }
.cfr-dz-item { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid var(--cfr-line, #e5e7eb); aspect-ratio: 4/3; background: #000; }
.cfr-dz-item.is-main { border-color: var(--cfr-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.cfr-dz-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfr-dz-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: #dc2626; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.cfr-dz-del:hover { background: #dc2626; color: #fff; transform: scale(1.1); }
.cfr-dz-meta { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: .7rem; font-weight: 600; padding: 12px 8px 5px; }

/* ปุ่มจัดการในตารางรถ (แก้ไข/ดู/ลบ) */
.cfr-agent-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ============ รถที่คุณฝากไว้แล้ว: grid การ์ด ============ */
.cfr-agent-mycars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 10px; }
.cfr-agent-mycard { border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cfr-agent-mycard-thumb { position: relative; aspect-ratio: 16/10; background: var(--cfr-bg, #f1f5f9); display: flex; align-items: center; justify-content: center; }
.cfr-agent-mycard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfr-agent-mycard-noimg { font-size: 2rem; opacity: .5; }
.cfr-agent-mycard-badge { position: absolute; top: 8px; left: 8px; font-size: .68rem; }
.cfr-agent-mycard-body { padding: 10px 12px; }
.cfr-agent-mycard-name { font-weight: 700; font-size: .92rem; margin-bottom: 3px; }
.cfr-agent-mycard-price { color: var(--cfr-primary, #2563eb); font-weight: 800; }
.cfr-agent-mycard-price small { color: var(--cfr-muted, #6b7280); font-weight: 500; }

/* ============ Modal เงื่อนไขการฝากเช่า ============ */
.cfr-terms-link { border: none; background: none; padding: 0 2px; color: var(--cfr-primary, #2563eb); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cfr-terms-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cfr-terms-modal[hidden] { display: none; }
.cfr-terms-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(2px); }
.cfr-terms-box { position: relative; background: #fff; border-radius: 16px; max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.cfr-terms-box h3 { margin: 0 0 14px; font-size: 1.2rem; }
.cfr-terms-x { position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 1.6rem; line-height: 1; color: #94a3b8; cursor: pointer; }
.cfr-terms-x:hover { color: #dc2626; }
.cfr-terms-content ol { margin: 0 0 12px; padding-left: 20px; }
.cfr-terms-content li { margin-bottom: 10px; line-height: 1.6; font-size: .92rem; }
.cfr-terms-note { font-size: .85rem; color: var(--cfr-muted, #6b7280); background: var(--cfr-bg, #f8fafc); padding: 10px 12px; border-radius: 8px; }
.cfr-btn-block { display: block; width: 100%; text-align: center; }

/* ============ พื้นที่ให้บริการ: block จังหวัด → อำเภอ ============ */
.cfr-svc-blocks { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.cfr-svc-block { border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 12px; padding: 12px 14px; background: var(--cfr-bg, #f8fafc); }
.cfr-svc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cfr-svc-prov-name { font-weight: 700; font-size: .98rem; color: #1d4ed8; }
.cfr-svc-del-prov { border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; border-radius: 8px; padding: 4px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.cfr-svc-del-prov:hover { background: #dc2626; color: #fff; }
.cfr-svc-dist-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.cfr-svc-block .cfr-svc-add-dist { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 8px; font-family: inherit; box-sizing: border-box; }
.cfr-svc-dist-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cfr-svc-dist-chips:empty { display: none; }

/* ============ ส่วนลดตามจำนวนวัน (tiers builder) ============ */
.cfr-tiers { margin-top: 14px; }
.cfr-tiers > label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
.cfr-tiers-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cfr-tiers-rows:empty { display: none; }
.cfr-tiers-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--cfr-bg, #f8fafc); border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 10px; padding: 8px 12px; font-size: .9rem; font-weight: 600; }
.cfr-tiers-row input.cfr-tier-days, .cfr-tiers-row input.cfr-tier-pct { width: 76px; padding: 6px 8px; border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 8px; font-family: inherit; text-align: center; }
.cfr-tier-del { margin-left: auto; border: none; background: rgba(0,0,0,.08); color: #dc2626; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.cfr-tier-del:hover { background: #dc2626; color: #fff; }

/* ============ แดชบอร์ด: การจองรถของเจ้าของ ============ */
.cfr-agent-bkstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.cfr-agent-stat { background: #fff; border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.cfr-agent-stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: #111827; }
.cfr-agent-stat-lbl { font-size: .8rem; color: var(--cfr-muted, #6b7280); font-weight: 600; }
.cfr-agent-stat-action { border-color: #fbbf24; background: #fffbeb; }
.cfr-agent-stat-action .cfr-agent-stat-num { color: #b45309; }
.cfr-agent-stat-fee .cfr-agent-stat-num { color: #7c3aed; }
.cfr-agent-bk-table td[data-th="รายได้คุณ"] .cfr-agent-bk-payout { color: #166534; }
.cfr-agent-bk-active { background: #fffbeb; }
.cfr-agent-bk-range { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfr-agent-bk-arrow { color: var(--cfr-muted, #9ca3af); }
.cfr-agent-bk-empty { color: var(--cfr-muted, #6b7280); background: var(--cfr-bg, #f8fafc); border: 1px dashed var(--cfr-line, #e5e7eb); border-radius: 12px; padding: 18px; text-align: center; }
/* ตารางการจอง/รถ → การ์ดบนมือถือ (ใช้ data-th เป็นป้ายกำกับ) — ครอบทุก .cfr-bookings-table */
@media (max-width: 720px) {
	.cfr-bookings-table thead { display: none; }
	.cfr-bookings-table, .cfr-bookings-table tbody, .cfr-bookings-table tr, .cfr-bookings-table td { display: block; width: 100%; box-sizing: border-box; }
	.cfr-bookings-table tr { border: 1px solid var(--cfr-line, #e5e7eb); border-radius: 12px; margin-bottom: 12px; padding: 6px 4px; background: #fff; }
	.cfr-bookings-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none; padding: 8px 12px; text-align: right; }
	.cfr-bookings-table td::before { content: attr(data-th); font-weight: 700; color: var(--cfr-muted, #6b7280); text-align: left; white-space: nowrap; }
	.cfr-bookings-table td:empty, .cfr-bookings-table td[data-th]:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
}

/* ============ หน้าบัญชีของฉัน — จัดกึ่งกลางจอ ============ */
.cfr-profile-wrap { max-width: 480px; margin: 24px auto; }
.cfr-profile-title { text-align: center; margin: 0 0 18px; }
.cfr-profile-wrap .cfr-profile-form { max-width: 100%; margin: 0; }

/* ============================================================
 *  Smart controls: segmented pills + stepper (แทน select/number ธรรมดา)
 * ============================================================ */

/* Segmented control — กลุ่มปุ่มชิปแบบ radio (ตัวเลือกน้อย ๆ เช่น เกียร์/เชื้อเพลิง/ที่นั่ง) */
.cfr-segment { display: flex; flex-wrap: wrap; gap: 8px; }
.cfr-segment input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cfr-segment label {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 16px; border: 1px solid var(--cfr-line); border-radius: 999px;
	background: #fff; color: var(--cfr-ink); font-size: .92rem; font-weight: 600;
	line-height: 1.2; cursor: pointer; user-select: none;
	transition: border-color .12s, background .12s, box-shadow .12s, color .12s;
}
.cfr-segment label:hover { border-color: var(--cfr-primary); }
.cfr-segment input[type="radio"]:checked + label {
	border-color: var(--cfr-primary); background: #eff6ff; color: var(--cfr-primary-dark);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.cfr-segment input[type="radio"]:focus-visible + label { outline: 2px solid var(--cfr-primary); outline-offset: 2px; }
.cfr-seg-ico { font-size: 1.05rem; line-height: 1; }
/* ฟิลด์ segment ในฟอร์มค้นหา — กินเต็มแถวเพื่อให้ชิปเรียงสวย */
.cfr-search-field--seg { grid-column: 1 / -1; }

/* ฟอร์มฝากรถ (agent): segment ขึ้นบรรทัดใหม่ใต้ label + fuel 4 ชิปเรียงแถวเดียว */
.cfr-agent-form .cfr-field > .cfr-segment { margin-top: 6px; }
.cfr-agent-form .cfr-field-full { grid-column: 1 / -1; }

/* Stepper — − จำนวน + (แทน number box เช่น จำนวนกระเป๋า/ผู้โดยสาร) */
.cfr-stepper {
	display: flex; align-items: stretch; width: 100%; /* เต็มความกว้างเท่ากับ input/select ปกติ */
	border: 1px solid var(--cfr-line); border-radius: 10px; overflow: hidden; background: #fff;
}
.cfr-field .cfr-stepper { margin-top: 5px; } /* เว้นจาก label เท่ากับ input ปกติ */
.cfr-stepper button {
	flex: 0 0 auto; width: 44px; border: 0; background: #f1f5f9; color: var(--cfr-primary-dark);
	font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background .12s;
	display: flex; align-items: center; justify-content: center; padding: 0; /* ไม่ให้ button ดันความสูงเกิน input */
}
.cfr-stepper button:hover { background: #e0e7ff; }
.cfr-stepper button:disabled { color: #cbd5e1; background: #fff; cursor: not-allowed; }
.cfr-stepper input[type="number"] {
	flex: 1 1 auto; width: 100%; min-width: 0; text-align: center;
	border: 0 !important; background: transparent; margin: 0 !important; padding: 9px 4px !important; /* สูงเท่า input ปกติ */
	font-size: 1rem; font-weight: 700; color: var(--cfr-ink); -moz-appearance: textfield; font-family: inherit;
}
.cfr-stepper input[type="number"]::-webkit-outer-spin-button,
.cfr-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfr-stepper input[type="number"]:focus { outline: none; }

/* Range slider — ราคาสูงสุด/วัน (แทน number box) */
.cfr-price-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cfr-range-out {
	display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
	background: linear-gradient(135deg, var(--cfr-primary), var(--cfr-primary-dark));
	color: #fff; font-weight: 700; font-size: .85rem; white-space: nowrap;
}
.cfr-range { -webkit-appearance: none; appearance: none; width: 100%; margin: 14px 0 6px;
	background: transparent; cursor: pointer; outline: none; }
/* track = bg สีน้ำเงิน (เลือก = เข้ม, เหลือ = น้ำเงินอ่อน) — วาดที่ pseudo ของ track */
.cfr-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px;
	background: linear-gradient(90deg, var(--cfr-primary) var(--cfr-range-pct, 100%), #bfdbfe var(--cfr-range-pct, 100%)); }
.cfr-range::-moz-range-track { height: 8px; border-radius: 999px;
	background: linear-gradient(90deg, var(--cfr-primary) var(--cfr-range-pct, 100%), #bfdbfe var(--cfr-range-pct, 100%)); }
.cfr-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -9px; width: 26px; height: 26px; border-radius: 50%;
	background: #fff; border: 4px solid var(--cfr-primary); box-shadow: 0 2px 6px rgba(37,99,235,.35); cursor: grab; transition: transform .1s; }
.cfr-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.cfr-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff;
	border: 4px solid var(--cfr-primary); box-shadow: 0 2px 6px rgba(37,99,235,.35); cursor: grab; }
.cfr-range:focus-visible::-webkit-slider-runnable-track { outline: 3px solid rgba(37,99,235,.3); outline-offset: 2px; }
.cfr-range-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--cfr-muted); font-weight: 600; }

/* Inline validation — สถานะเขียว/แดง ขณะกรอก (อีเมล/เบอร์/รหัสผ่าน) */
.is-valid > input { border-color: #16a34a !important; }
.is-valid > input:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.is-invalid > input { border-color: var(--cfr-accent) !important; }
.is-invalid > input:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.cfr-input-hint { display: block; font-size: .78rem; margin-top: 5px; font-weight: 500; }
.cfr-input-hint.ok { color: #16a34a; }
.cfr-input-hint.err { color: var(--cfr-accent); }

/* Empty state — ไม่พบผลลัพธ์ (แทน <p> ธรรมดา) */
.cfr-empty {
	text-align: center; padding: 48px 20px; margin: 8px 0;
	background: #fff; border: 1px solid var(--cfr-line); border-radius: var(--cfr-radius);
}
.cfr-empty-ico { font-size: 3rem; line-height: 1; margin-bottom: 10px; opacity: .85; }
.cfr-empty-title { font-size: 1.15rem; font-weight: 700; color: var(--cfr-ink); }
.cfr-empty-sub { color: var(--cfr-muted); margin: 6px 0 18px; }

/* Loading state — ปุ่มหมุนขณะค้นหา/ส่งฟอร์ม */
.cfr-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; opacity: .9; }
.cfr-btn.is-loading::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
	animation: cfr-spin .6s linear infinite;
}
@keyframes cfr-spin { to { transform: rotate(360deg); } }

/* Toast — แจ้งเตือนลอย (wishlist/บันทึกโปรไฟล์ ฯลฯ) */
.cfr-toasts { position: fixed; z-index: 9999; left: 50%; bottom: 24px; transform: translateX(-50%);
	display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.cfr-toast { pointer-events: auto; max-width: 90vw; padding: 12px 18px; border-radius: 12px;
	color: #fff; font-weight: 600; font-size: .92rem; box-shadow: 0 10px 30px rgba(15,23,42,.25);
	display: flex; align-items: center; gap: 8px; animation: cfr-toast-in .25s ease; }
.cfr-toast-success { background: #16a34a; }
.cfr-toast-info { background: var(--cfr-primary); }
.cfr-toast-error { background: var(--cfr-accent); }
.cfr-toast.cfr-toast-out { animation: cfr-toast-out .26s ease forwards; }
@keyframes cfr-toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cfr-toast-out { to { opacity: 0; transform: translateY(14px); } }