/* ============================================================
   Darika Hub — สไตล์หลัก
   โทน: modern-luxury / ม่วงเข้ม-ทอง (สีแบรนด์ Darika Hub)
   ============================================================ */

:root{
  --ink:        #1f0f33;   /* ม่วงเข้มมาก พื้นหลังหรู */
  --ink-soft:   #2e1a4a;   /* ม่วงเข้มไล่เฉด */
  --gold:       #d4af5a;   /* ทอง accent (สีแบรนด์) */
  --gold-light: #e8ce86;   /* ทองอ่อน */
  --cream:      #fbfaf7;   /* ครีมตัวอักษร (สีแบรนด์) */
  --cream-dim:  #c3b6d4;   /* ม่วงอ่อนนวล สำหรับ text รอง */
  --line:       rgba(212,175,90,.22);
  --card:       #2a1745;   /* การ์ดม่วงเข้ม */
  --ok:         #3f9d6b;
  --warn:       #c14b4b;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Noto Sans Thai',sans-serif;
  background:var(--ink);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

/* ---------- ช่องค้นหา + ฟิลเตอร์ขั้นสูง ---------- */
.search-bar{
  padding:14px 18px 6px;
}
.search-input{
  width:100%;padding:12px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
  color:var(--cream);font-family:inherit;font-size:14px;
}
.search-input::placeholder{color:var(--cream-dim)}
.search-input:focus{outline:none;border-color:var(--gold)}

.filter-groups{padding:8px 18px 4px}
.fgroup{margin-bottom:10px}
.fgroup-label{
  font-size:11px;color:var(--cream-dim);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:6px;font-weight:500;
}
.fgroup-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.fchip{
  white-space:nowrap;padding:6px 14px;border-radius:18px;
  border:1px solid var(--line);background:transparent;color:var(--cream-dim);
  font-family:inherit;font-size:13px;cursor:pointer;transition:all .15s;
}
.fchip.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

/* แถวฟิลเตอร์ย่อย (cascading) — เยื้องเข้าเล็กน้อย มีเส้นบอกระดับ */
.fgroup-sub{
  margin-left:14px;padding-left:14px;
  border-left:2px solid var(--line);
  margin-top:-2px;margin-bottom:10px;
}
.fgroup-sub .fgroup-label{color:var(--gold-light);opacity:.85}

.filter-bar-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 18px 0;
}
.result-count{font-size:12px;color:var(--cream-dim)}
.clear-btn{
  background:none;border:none;color:var(--gold);font-family:inherit;
  font-size:12px;cursor:pointer;padding:4px;
}

/* ---------- ปุ่มสลับภาษา ---------- */
.lang-switch{
  display:flex;gap:4px;justify-content:center;
  padding:14px 0 0;
}
.lang-switch.floating{
  position:absolute;top:16px;right:16px;padding:0;z-index:20;
}
.lang-btn{
  padding:5px 12px;border-radius:8px;
  border:1px solid var(--line);background:rgba(20,35,54,.7);
  color:var(--cream-dim);font-family:inherit;font-size:12px;font-weight:500;
  cursor:pointer;transition:all .15s;backdrop-filter:blur(4px);
}
.lang-btn.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

.zh-contact-note{
  text-align:center;font-size:13px;color:var(--gold-light);
  margin-top:12px;padding:0 20px;line-height:1.5;
}

/* กล่องหมายเหตุ "จองแล้ว — ลงชื่อสำรองสิทธิ์" */
.booked-note{
  margin:16px 0 4px;padding:13px 16px;border-radius:12px;
  background:rgba(212,175,90,.1);border:1px solid var(--line);
  border-left:3px solid var(--gold);
  font-size:13px;color:var(--cream);line-height:1.6;
}

/* ---------- HERO ---------- */
.hero{
  background:radial-gradient(circle at 50% 0%, var(--ink-soft), var(--ink) 70%);
  padding:64px 24px 48px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:88px;height:88px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:54px;font-weight:700;
  color:var(--ink);
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  border-radius:22px;
  box-shadow:0 8px 30px rgba(201,160,78,.35);
}
.brand-name{
  font-family:'Cormorant Garamond',serif;
  font-size:38px;font-weight:600;letter-spacing:.5px;
  color:var(--gold-light);
}
.brand-tagline{color:var(--cream-dim);font-size:14px;margin-top:6px;font-weight:300}

/* ---------- หมวดหมู่ ---------- */
.categories{max-width:560px;margin:0 auto;padding:36px 18px 12px}
.cat-intro{
  text-align:center;color:var(--cream-dim);font-size:13px;
  text-transform:uppercase;letter-spacing:2px;margin-bottom:20px;
}
.cat-card{
  display:flex;align-items:center;gap:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 20px;margin-bottom:14px;
  transition:transform .15s ease, border-color .15s ease;
}
.cat-card:active{transform:scale(.98)}
.cat-card:hover{border-color:var(--gold)}
.cat-icon{font-size:30px;flex-shrink:0}
.cat-text{flex:1}
.cat-text h2{font-size:18px;font-weight:600;color:var(--cream)}
.cat-text p{font-size:13px;color:var(--cream-dim);font-weight:300}
.cat-arrow{color:var(--gold);font-size:18px;flex-shrink:0;font-weight:300}
.cat-card[data-soon]{opacity:.55}
.cat-card[data-soon] .cat-arrow{font-size:12px}

/* ---------- ติดต่อ ---------- */
.contact-block{
  max-width:560px;margin:24px auto;padding:28px 24px;text-align:center;
}
.contact-block h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold-light)}
.contact-block p{color:var(--cream-dim);font-size:14px;margin:6px 0 18px}
.contact-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;border-radius:12px;font-weight:600;font-size:15px;
  min-width:120px;transition:opacity .15s;
}
.btn:active{opacity:.8}
.btn-line{background:#06c755;color:#fff}
.btn-call{background:var(--gold);color:var(--ink)}
.btn-mess{background:#0084ff;color:#fff}
.btn-share{background:#1877f2;color:#fff}

/* ---------- footer ---------- */
.site-footer{text-align:center;padding:30px;color:var(--cream-dim);font-size:12px;border-top:1px solid var(--line)}

/* ============================================================
   หน้ารายการรถ
   ============================================================ */
.page-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(13,27,42,.92);backdrop-filter:blur(8px);z-index:10;
}
.back-link{color:var(--gold);font-size:22px}
.page-head h1{font-size:18px;font-weight:600;color:var(--cream)}
.page-head .sub{font-size:12px;color:var(--cream-dim);font-weight:300}

.filters{
  display:flex;gap:8px;padding:14px 18px;overflow-x:auto;
  border-bottom:1px solid var(--line);
}
.filter-chip{
  white-space:nowrap;padding:7px 16px;border-radius:20px;
  border:1px solid var(--line);background:transparent;color:var(--cream-dim);
  font-family:inherit;font-size:13px;cursor:pointer;transition:all .15s;
}
.filter-chip.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

.car-grid{max-width:900px;margin:0 auto;padding:18px;
  display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.car-grid{grid-template-columns:1fr 1fr}}

.car-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:transform .15s, border-color .15s;
}
.car-card:active{transform:scale(.99)}
.car-card:hover{border-color:var(--gold)}
.car-photo{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink-soft);display:block}
.car-body{padding:14px 16px}
.car-name{font-size:16px;font-weight:600;color:var(--cream)}
.car-meta{font-size:12px;color:var(--cream-dim);margin:3px 0 8px;font-weight:300}
.car-price{font-size:19px;font-weight:700;color:var(--gold-light);font-family:'Cormorant Garamond',serif}
.car-status{
  display:inline-block;font-size:11px;padding:3px 10px;border-radius:6px;
  margin-left:8px;vertical-align:middle;font-weight:500;
}
.st-avail{background:rgba(63,157,107,.18);color:#5fd49a}
.st-booked{background:rgba(193,75,75,.18);color:#e58a8a}
.st-sold{background:rgba(120,120,120,.2);color:#aaa}

.loading,.empty{text-align:center;color:var(--cream-dim);padding:60px 20px;font-size:14px}

/* ---------- หน้าผลงาน We Sold ---------- */
.sold-grid{max-width:900px;margin:0 auto;padding:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:640px){.sold-grid{grid-template-columns:1fr 1fr 1fr}}
.sold-card{
  position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);aspect-ratio:4/3;
}
.sold-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
.sold-card .sold-cap{
  position:absolute;bottom:0;left:0;right:0;
  padding:10px 12px;font-size:13px;color:#fff;font-weight:500;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
}
/* ป้าย SOLD คาดเฉียงมุมขวาบน */
.sold-ribbon{
  position:absolute;top:14px;right:-34px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--ink);font-weight:700;font-size:13px;letter-spacing:1px;
  padding:6px 40px;box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* ============================================================
   หน้ารายละเอียดรถ
   ============================================================ */
.detail-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0}
.detail-photos img{width:100%;flex-shrink:0;scroll-snap-align:center;aspect-ratio:4/3;object-fit:cover;background:var(--ink-soft)}
.detail-wrap{max-width:680px;margin:0 auto;padding:20px 18px 120px}
.detail-name{font-size:24px;font-weight:700;color:var(--cream);margin-bottom:4px}
.detail-price{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:var(--gold-light);margin:10px 0}
.spec-table{width:100%;border-collapse:collapse;margin:18px 0}
.spec-table td{padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px}
.spec-table td:first-child{color:var(--cream-dim);width:42%;font-weight:300}
.spec-table td:last-child{color:var(--cream);font-weight:500}
.detail-desc{font-size:14px;color:var(--cream-dim);line-height:1.8;margin-top:16px;white-space:pre-line}

.contact-bar{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;gap:8px;padding:12px 16px;
  background:rgba(13,27,42,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.contact-bar .btn{flex:1;min-width:0;padding:14px 8px;font-size:14px}

/* ปุ่มแชร์เฟซ ลอยมุมขวาบนรูป */
.share-fab{
  position:fixed;top:70px;right:16px;z-index:30;
  display:flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:24px;
  background:#1877f2;color:#fff;font-family:inherit;font-size:14px;font-weight:600;
  border:none;cursor:pointer;box-shadow:0 4px 14px rgba(24,119,242,.4);
  transition:opacity .15s;
}
.share-fab:active{opacity:.8}
.share-fab svg{width:16px;height:16px;fill:currentColor}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}