/* =========================
   Click & Go - Base Styles
   ========================= */
:root{
  --brand:#0b8e78;
  --text:#333;
  --muted:#666;
  --border:#e5e5e5;
  --bg:#ffffff;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Thai","Noto Sans",sans-serif;
  color:var(--text); background:#fff; line-height:1.6;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.section-title{ margin:10px 0 12px; font-size:clamp(20px,3vw,28px); }

/* =========================
   Header
   ========================= */
.site-header{ position:relative; z-index:10; background:#fff; border-bottom:1px solid #eee; }
.site-header .inner{ display:flex; align-items:center; gap:14px; max-width:1100px; margin:0 auto; padding:10px 16px; }
.brand{ display:flex; align-items:center; gap:10px; color:#333; font-weight:700; }
.brand img{ display:block; border-radius:6px; width:40px; height:40px; }
.brand-text{ display:none; }

.main-nav{ margin-left:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.main-nav a{ color:#333; font-weight:600; }
.main-nav a[aria-current="page"]{ color:var(--brand); }

/* Language pop-up */
.lang{ position:relative; }
.lang-btn{
  background:#fff; border:1px solid #ddd; border-radius:6px;
  padding:6px 10px; cursor:pointer; color:#333; font-weight:600;
}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--border); border-radius:8px;
  min-width:180px; padding:8px 10px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:none; z-index:50;
}
.lang-menu.open{ display:block; }
.lang-menu a{ display:block; padding:6px 8px; color:#333; text-decoration:none; }
.lang-menu a[aria-current="true"]{ font-weight:700; }

/* =========================
   Hero
   ========================= */
.hero{ margin-top:14px; }
.hero-img{ width:100%; height:auto; display:block; border-radius:10px; }

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:8px; background:var(--brand);
  color:#fff; font-weight:700; border:none; cursor:pointer;
}
.btn:hover{ opacity:.92; text-decoration:none; }

/* =========================
   Widget-like & Search form
   ========================= */
.widget-like{
  border:2px dashed #ccc; border-radius:12px; background:#f9f9f9; padding:16px;
}
.widget-like.solid{ border-style:solid; background:#fff; }

.muted{ color:#666; font-size:14px; margin:0 0 8px; }
.tiny-note{ font-size:12px; color:#999; margin-top:8px; }

.search-form{ display:grid; gap:10px; }
.search-4cols{ grid-template-columns:1fr 1fr 1fr auto; }

.search-form input,
.search-form select{
  padding:10px; border:1px solid #ccc; border-radius:6px; min-width:0;
}

.date-wrap{ position:relative; }
.date-wrap input{ width:100%; }
.date-wrap .date-placeholder{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#999; pointer-events:none;
}
.date-wrap:not(.empty) .date-placeholder{ display:none; }

@media (max-width: 860px){
  .search-4cols{ grid-template-columns:1fr 1fr; }
  .search-form .btn{ grid-column:1 / -1; width:100%; }
}
@media (max-width: 480px){
  .container{ padding:0 12px; }
  .widget-like{ padding:12px; }
  .search-4cols{ grid-template-columns:1fr; }
}

/* =========================
   Features
   ========================= */
.features{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:10px; }
.feature{ flex:1 1 220px; max-width:260px; }
.feature h3{ margin:0 0 6px; }
.feature p{ margin:0; color:var(--muted); }

/* =========================
   City Tiles (index)
   ========================= */
.city-grid{ display:grid; gap:14px; grid-template-columns: repeat(6,1fr); }
@media (max-width:1200px){ .city-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:820px){ .city-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px){ .city-grid{ grid-template-columns: repeat(2,1fr); } }

.city-card{ display:block; color:inherit; text-decoration:none; }
.city-card figure{ position:relative; margin:0; }
.city-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:block; background:#eee; }
.city-card figcaption{
  position:absolute; left:8px; bottom:8px; padding:6px 10px;
  background:rgba(0,0,0,.45); color:#fff; font-weight:700; border-radius:999px; font-size:14px;
}

/* =========================
   City Pages - Hero & Deals
   ========================= */
.hero-city{
  position:relative; height:280px; border-radius:10px; overflow:hidden;
  background:#ddd center/cover no-repeat; margin-top:14px;
}
.hero-city .overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.10)); }
.hero-city .content{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end; padding:16px 20px;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.hero-city h1{ margin:0 0 4px; font-size:clamp(22px,3vw,28px); font-weight:800; }
.hero-city p{ margin:0; font-size:clamp(14px,2vw,16px); }

.deal-grid{ display:grid; gap:18px; grid-template-columns:repeat(3, 1fr); }
@media (max-width:980px){ .deal-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .deal-grid{ grid-template-columns:1fr; } }
.deal-card{
  border:1px solid #eee; border-radius:12px; background:#fff;
  overflow:hidden; box-shadow:0 1px 10px rgba(0,0,0,.04); display:flex; flex-direction:column;
}
.deal-card .thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#f1f1f1; display:block; }
.deal-card .body{ padding:14px 14px 10px; }
.deal-card h3{ margin:0 0 6px; font-size:18px; color:#222; }
.deal-card p{ margin:0 0 10px; color:#666; font-size:14px; }
.deal-card .meta{ display:flex; align-items:center; justify-content:space-between; padding:0 14px 14px; margin-top:auto; }

/* ปุ่มในการ์ดดีล */
.deal-card .btn{
  background:var(--brand);
  color:#fff;
  padding:8px 14px;
  border-radius:8px;
}

/* =========================
   Districts (Popular Areas)
   ========================= */
.districts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.districts .btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

/* =========================
   Footer
   ========================= */
.site-footer{ border-top:1px solid #eee; background:#fafafa; padding:18px 0; margin-top:26px; }
.site-footer a{ color:var(--brand); }
.footer-links{ font-weight:700; }

/* =========================================================
   Mock Search Box (Agoda-like) + Suggestion dropdown
   (ใช้กับหน้า test/searchbox-mock หรือดีล/อินเด็กซ์ที่ต้องการ)
   ========================================================= */
.agoda-wrap{
  max-width:1030px; width:100%; margin:0 auto;
}

/* กล่องหลักให้สูงใกล้เคียง Sherpa (293px) */
.mock-box{
  min-height:293px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* แถวอินพุต 5 ช่อง: Destination | Check-in | Check-out | Guests | Button */
.mock-row{
  display:grid;
  grid-template-columns: 1fr 200px 200px 240px 130px;
  gap:10px;
  align-items:center;
}

/* ให้ input/ปุ่มสูงเท่ากัน */
.mock-input,
.guest-input,
.mock-btn{
  height:44px;
  border:1px solid #d7d7d7;
  border-radius:8px;
  padding:0 12px;
  background:#fff;
}

/* ปุ่ม Search สีน้ำเงินเขียวของแบรนด์ */
.mock-btn{
  background:#0ea5a0;
  color:#fff;
  border:0;
  font-weight:700;
}

/* ------------ Suggestion dropdown ------------- */
.suggest-wrap{ position:relative; }
.suggest-panel{
  position:absolute;
  left:0; right:0; top:calc(100% + 4px);
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  max-height:260px;
  overflow:auto;
  z-index:999;
}
.suggest-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  cursor:pointer;
}
.suggest-item:hover{ background:#f5f7f8; }
.suggest-item .sub{ color:#666; font-size:12px; }
.suggest-empty{ padding:10px 12px; color:#777; }

/* ให้ altInput ของ flatpickr เหมือน input ปกติ */
.flatpickr-input[readonly]{ background:#fff; }

/* ---------- Responsive ของ mock-row ---------- */
@media (max-width: 980px){
  .mock-row{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mock-btn{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .mock-row{
    grid-template-columns: 1fr;
  }
  .mock-btn{ width:100%; }
}