/* ==========================================================================
   Core tokens & resets
   ========================================================================== */

/* Fallback brand color (overridden from layout via inline <style>) */
:root { --orange: #ff6a00; --ash:#f5f7fb; --b:#0c0d0e; --muted:#667085; --ok:#20c997; --bad:#ef4444; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 500 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.h1 { font-size: 28px; margin: 0; }

/* Utilities */
.muted { color: #666; }
.flex.between { display: flex; justify-content: space-between; align-items: center; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.wrap.small { max-width: 420px; margin: 30px auto; }
.grid { display: grid; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width:900px){ .grid2 { grid-template-columns: 1fr 1fr; } }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.badge { background:#f5f7fb; border:1px solid #eef1f5; border-radius:999px; padding:6px 10px; font-weight:700; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:12px; text-decoration:none; font-weight:800;
  border:1px solid #eee; background:#fff; cursor:pointer;
}
.btn.primary { background: var(--orange); color:#fff; border-color: var(--orange); }
.btn.ghost { background:#fff; }

/* Layout shell */
.page { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* ==========================================================================
   Header (keeps your working structure and IDs)
   ========================================================================== */

.tma-header { position: sticky; top: 0; background:#fff; border-bottom:1px solid #eee; z-index: 1000; }
.tma-wrap { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; gap:10px; }
.tma-header img { height:32px; }
@media(min-width:1024px){ .tma-header img { height:28px; } }

.nav-desktop { display:none; gap:18px; align-items:center; }
@media(min-width:1024px){ .nav-desktop { display:flex; } }
.nav-desktop a { font-weight:700; text-decoration:none; padding:10px 2px; position:relative; }
.nav-desktop a:hover { color: var(--orange); }

/* Hamburger */
#hamburger { display:inline-flex; position:relative; width:44px; height:44px; border:0; background:transparent; }
#hamburger span { position:absolute; width:24px; height:2px; background:#000; left:10px; transition:.2s; }
#hamburger span:nth-child(1){ top:14px; }
#hamburger span:nth-child(2){ top:21px; }
#hamburger span:nth-child(3){ top:28px; }
#hamburger.open span:nth-child(1){ top:21px; transform:rotate(45deg); }
#hamburger.open span:nth-child(2){ opacity:0; }
#hamburger.open span:nth-child(3){ top:21px; transform:rotate(-45deg); }
@media(min-width:1024px){ #hamburger { display:none; } }

/* Mobile drawer */
#drawer {
  position:fixed; inset:0 0 0 auto; width:min(88%,380px);
  transform:translateX(100%); transition:transform .25s ease;
  z-index:1001; background:#fff; display:flex; flex-direction:column; border-left:1px solid #eee;
}
#drawer.open { transform:none; }
#overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:.2s; z-index:1000; }
#overlay.show { opacity:1; }
#overlay[hidden] { display:none; }

.drawer-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; padding:14px 16px; }
.mnav { list-style:none; margin:0; padding:10px; }
.mnav a { display:block; padding:12px; border-radius:12px; text-decoration:none; font-weight:800; }
.mnav a:hover { background:#fff2e5; color:var(--orange); }
.drawer-foot { margin-top:auto; padding:12px 16px; border-top:1px solid #eee; display:grid; gap:10px; }
.cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.address small { display:block; color:#666; }

/* prevent background scroll when drawer is open */
html.nav-open, html.nav-open body { overflow: hidden; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #drawer, #overlay { transition: none !important; }
}

/* ==========================================================================
   Home & listing bits
   ========================================================================== */

.hero { padding:30px 16px; text-align:center; }
.search {
  display:grid; grid-template-columns:1fr auto; gap:10px;
  max-width:680px; margin:12px auto;
}
.search input { padding:12px; border:1px solid #ddd; border-radius:12px; }
.search button { padding:12px 16px; border-radius:12px; background:var(--orange); color:#fff; border:0; font-weight:800; }

.card {
  border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff; text-decoration:none;
}
.card .img { aspect-ratio:16/10; background:#f5f5f5; background-size:cover; background-position:center; }
.card .info { padding:12px; }
.card .price { color:var(--orange); font-weight:800; }

.filters {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:10px; margin:10px 0 16px;
}
.filters input, .filters select { padding:10px; border:1px solid #ddd; border-radius:10px; }
.filters button { padding:10px 14px; border-radius:10px; background:var(--orange); border:0; color:#fff; font-weight:800; }

/* ==========================================================================
   Tour detail
   ========================================================================== */

.tour-hero { position:relative; }
.tour-hero img { width:100%; height:auto; display:block; border-radius:16px; }
.tour-hero .overlay {
  position:absolute; left:16px; bottom:16px;
  background:rgba(0,0,0,.45); color:#fff; padding:10px 12px; border-radius:10px;
}
.chips span { background:#fff2e5; color:#000; margin-right:6px; padding:4px 8px; border-radius:999px; }

.two { display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:1000px){ .two { grid-template-columns:1.3fr .7fr; } }

.bullets { padding-left: 18px; }
.bookbox { border:1px solid #eee; border-radius:16px; padding:12px; position:sticky; top:80px; height:max-content; }
.bookbox input, .bookbox select { width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; }
.note { color:#666; margin-top:6px; }

.table { width:100%; border-collapse:collapse; }
.table th, .table td { border:1px solid #eee; padding:8px; }

/* Polished tour gallery/price box */
.td-hero { display:grid; grid-template-columns:1fr; gap:14px; margin:10px 0; }
@media(min-width:1050px){ .td-hero { grid-template-columns:1.4fr .6fr; } }
.td-hero-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.td-hero-main { border-radius:16px; aspect-ratio:16/9; background:#f4f4f4; background-size:cover; background-position:center; }
.td-hero-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.td-hero-thumbs .thumb { aspect-ratio:1/1; border:0; border-radius:12px; background-size:cover; background-position:center; cursor:pointer; }

.td-pricebox { border:1px solid #eee; border-radius:16px; padding:14px; position:sticky; top:84px; height:max-content; background:#fff; }
.td-title { font:800 18px/1.2 system-ui; margin-bottom:6px; }
.td-badges .chip { display:inline-flex; gap:6px; background:#f8fafc; border:1px solid #eef1f5; border-radius:999px; padding:6px 10px; margin:2px 6px 6px 0; }
.td-starting { color:var(--muted); font-weight:700; margin-top:6px; }
.td-price { font:900 22px/1.1 system-ui; color: var(--orange); }
.td-price small { display:block; color:#666; font-weight:600; }
#bookBox label { display:block; margin:10px 0 4px; font-weight:700; }
#bookBox select, #bookBox input { width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; }
#bookBox .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

.td-summary { display:grid; grid-template-columns:1fr; gap:6px; margin:10px 0; }
.td-summary > div { display:flex; justify-content:space-between; align-items:baseline; }

/* Tabs + accordion */
.td-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; border-bottom:1px solid #eee; }
.td-tabs button { border:0; background:#f7f7f9; color:#333; padding:10px 12px; border-radius:12px 12px 0 0; font-weight:800; cursor:pointer; }
.td-tabs button.active { background:#fff; border:1px solid #eee; border-bottom-color:#fff; color:var(--orange); }
.td-tabwrap { border:1px solid #eee; border-top:0; border-radius:0 0 16px 16px; padding:14px; background:#fff; }
.td-tab { display:none; }
.td-tab.active { display:block; }

.acc .acc-item { border:1px solid #eee; border-radius:12px; margin:8px 0; overflow:hidden; }
.acc-head {
  width:100%; text-align:left; background:#fff; padding:12px 14px; border:0; font-weight:800;
  display:flex; gap:10px; align-items:center; justify-content:space-between; cursor:pointer;
}
.acc-head .chip { background:#eef2ff; border-radius:999px; padding:4px 8px; }
.acc-head i { width:18px; height:18px; border-right:2px solid #333; border-bottom:2px solid #333; transform:rotate(45deg); transition:.2s; margin-left:8px; }
.acc-item.open .acc-head i { transform:rotate(-135deg); }
.acc-body { display:none; padding:0 14px 12px; color:#333; }
.acc-item.open .acc-body { display:block; }

.list { padding:6px 0 6px 20px; }
.list.green li { list-style:'✅ '; padding-left:6px; }
.list.red li { list-style:'⛔ '; padding-left:6px; }

.icons { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:8px; }
.icons .i { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; background:#fff2e5; border-radius:8px; margin-right:8px; }

.td-reviews .rev { border-top:1px solid #eee; padding:10px 0; }

.td-related .rel-row { display:flex; gap:10px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.rel-card { min-width:240px; border:1px solid #eee; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; background:#fff; scroll-snap-align:start; }
.rel-card .img { aspect-ratio:4/3; background:#f5f5f5; background-size:cover; background-position:center; }
.rel-card .t { font-weight:800; padding:8px 10px 0; }
.rel-card .p { color:var(--orange); font-weight:800; padding:0 10px 10px; }

/* Error/notice */
.err { background:#fff3f3; border:1px solid #f4caca; padding:10px; border-radius:10px; margin-bottom:8px; }

/* ==========================================================================
   Footer (lightweight)
   ========================================================================== */

.site-footer { background:#0b0c0d; color:#d9dbe1; margin-top:24px; }
.site-footer a { color:#fff; text-decoration:none; }
.sf-wrap {
  max-width:1100px; margin:0 auto; padding:24px 16px;
  display:grid; gap:18px;
}
@media(min-width:900px){ .sf-wrap { grid-template-columns:2fr 1fr 1fr 1fr; } }
.sf-col h4 { margin:0 0 8px; font:800 16px/1.2 system-ui; }
.sf-col ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sf-col.brand img { height:28px; }
.badge-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.badge-row span { background:#121317; border:1px solid #1f2126; border-radius:10px; padding:6px 10px; }
.sf-bottom {
  max-width:1100px; margin:0 auto; border-top:1px solid #1f2126;
  padding:12px 16px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}

/* ==========================================================================
   Admin editor (your existing classes)
   ========================================================================== */

.editor { max-width:1100px; margin:0 auto; padding:16px; }
.editor .stickybar {
  position:sticky; top:64px; background:#fff; border:1px solid #eee;
  border-radius:12px; padding:8px 12px; display:flex; gap:10px; align-items:center; justify-content:space-between; z-index:5;
}
.editor .stickybar .row { display:flex; gap:8px; align-items:center; }

.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.tabs button { border:0; background:#f7f7f9; padding:10px 12px; border-radius:12px; font-weight:800; cursor:pointer; }
.tabs button.active { background:#fff; border:1px solid #eee; color:var(--orange); }
.tabpanel { display:none; border:1px solid #eee; border-radius:16px; padding:14px; background:#fff; }
.tabpanel.active { display:block; }

.grid1 { display:grid; gap:10px; }
label.small { font-size:12px; color:#667085; font-weight:700; margin-top:6px; display:block; }

.uploader { display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center; }
.uploader .thumb { width:120px; height:80px; border-radius:12px; border:1px solid #eee; background:#f4f4f4; background-size:cover; background-position:center; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
.gallery .item { border:1px solid #eee; border-radius:12px; overflow:hidden; position:relative; }
.gallery .item .img { aspect-ratio:4/3; background:#f5f5f5; background-size:cover; background-position:center; }
.gallery .item .x { position:absolute; right:6px; top:6px; border:0; background:#fff; border-radius:999px; padding:4px 6px; cursor:pointer; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips input { padding:8px; border:1px solid #ddd; border-radius:999px; }
.chips .chip { background:#fff2e5; border:1px solid #ffd6b0; border-radius:999px; padding:6px 10px; font-weight:700; }
.note.s { color:#667085; font-size:12px; }