:root{
  --bg:#fff7e6;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --brand:#d97706;
  --brand2:#f59e0b;
  --border:#eadcc5;
  --shadow:0 18px 40px rgba(0,0,0,.12);
  --r:18px;
  --ok:#059669;
  --bad:#dc2626;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(245,158,11,.20), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(217,119,6,.16), transparent 55%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(255,247,230,.78);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:.2px; min-width: 220px;}
.logo-badge{
  width:40px;height:40px;border-radius:14px;
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  box-shadow: 0 12px 26px rgba(217,119,6,.22);
  display:grid; place-items:center; color:white; font-weight:950;
}
.logo-title{line-height:1; font-size:14px}
.logo-sub{line-height:1; font-size:12px; color:var(--muted); font-weight:800}

.pill{
  flex:1;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  background: rgba(255,255,255,.86);
  min-width: 220px;
}
.pill input{border:none; outline:none; background:transparent; width:100%; font-size:14px;}

/* Buttons */
.btn{
  border:none;
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  color:white;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  box-shadow: 0 12px 24px rgba(217,119,6,.18);
  transition: transform .12s ease, filter .12s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); filter:saturate(1.02)}
.btn:active{transform: translateY(0px)}
.btn.secondary{
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn.danger{
  background: rgba(220,38,38,.10);
  border:1px solid rgba(220,38,38,.25);
  color: #991b1b;
  box-shadow:none;
}

/* Layout */
.wrap{max-width:1200px; margin:0 auto; padding:16px 14px 40px;}
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; margin-top:8px;}
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr;}
  .right{position:relative !important; top:auto !important;}
}
.panel{
  background: rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  overflow:hidden;
}
.panel-h{
  padding:14px;
  border-bottom:1px solid var(--border);
  background: rgba(255,247,230,.62);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.panel-h h1,.panel-h h2{margin:0}
.panel-h h1{font-size:24px; font-weight:950; letter-spacing:.2px}
.panel-h h2{font-size:16px; font-weight:950}
.panel-h p{margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.45}
.panel-b{padding:14px}

.countpill{
  font-size:12px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: var(--muted);
  white-space:nowrap;
  height: fit-content;
}

/* Tabs */
.tabs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.tab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.88);
  color: var(--muted);
  font-weight:900;
  padding:8px 10px;
  border-radius: 999px;
  cursor:pointer;
}
.tab.active{
  color:#92400e;
  border-color: rgba(217,119,6,.35);
  background: rgba(255,255,255,.94);
}
.tabpanel{display:none}
.tabpanel.show{display:block}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
  color: var(--muted);
}
.chip.hot{color:#92400e; border-color: rgba(217,119,6,.35)}

/* Cards / Grid */
.grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;}
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

.card{
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* Carousel */
.carousel{position:relative; height: 170px; background: linear-gradient(180deg, rgba(245,158,11,.16), rgba(255,255,255,0)); overflow:hidden;}
.track{height:100%; display:flex; transition: transform .45s ease; will-change: transform;}
.slide{min-width:100%; height:100%; display:grid; place-items:center; padding:12px;}
.slide img{width:100%; height:100%; object-fit:cover; border-radius: 14px; border:1px solid var(--border); box-shadow: 0 14px 30px rgba(0,0,0,.12); user-select:none; pointer-events:none;}
.car-nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 10px; pointer-events:none;}
.car-btn{pointer-events:auto; width:38px;height:38px; border-radius: 14px; border:1px solid var(--border); background: rgba(255,255,255,.82); cursor:pointer; display:grid; place-items:center; box-shadow: 0 10px 20px rgba(0,0,0,.10);}
.dots{position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; pointer-events:none;}
.dot{width:7px; height:7px; border-radius:999px; background: rgba(107,114,128,.35); border:1px solid rgba(234,220,197,.9);}
.dot.active{background: rgba(217,119,6,.85)}
.car-tag{position:absolute; top:10px; left:10px; font-size:11px; padding:5px 9px; border-radius: 999px; border:1px solid var(--border); background: rgba(255,255,255,.86); color: var(--muted);}

.card-top{padding:12px 12px 10px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.title{margin:0; font-weight:950; line-height:1.2; font-size:15px;}
.meta{margin:6px 0 0; color: var(--muted); font-size:12px; line-height:1.45;}
.badges{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.badge{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.88); color: var(--muted); white-space:nowrap;}
.badge.cat{color:#92400e; border-color: rgba(217,119,6,.35)}
.badge.time{color:#0f766e; border-color: rgba(13,148,136,.28)}
.badge.cost{color:#6d28d9; border-color: rgba(109,40,217,.25)}
.card-mid{padding:0 12px 12px}
.desc{margin:0; color: var(--ink); font-size:13px; line-height:1.55;}
.card-actions{padding:12px; border-top:1px dashed rgba(234,220,197,.95); display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;}
.card-actions .btn{flex:1}

/* Right panel fields */
.right{position: sticky; top: 70px; height: fit-content;}
.field{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 10px;
  background: rgba(255,255,255,.92);
  outline:none;
}
.label{font-size:12px; color:var(--muted); margin:0 0 6px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row > *{flex:1}

.tourlist{display:flex; flex-direction:column; gap:10px;}
.touritem{
  border:1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  padding:10px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.touritem b{font-weight:950}
.touritem small{display:block; color:var(--muted); font-size:12px; margin-top:3px}
.tinybtn{
  border:none;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  background: rgba(255,255,255,.9);
  border:1px solid var(--border);
}
.tinybtn.remove{color:#991b1b; border-color: rgba(220,38,38,.22); background: rgba(220,38,38,.08)}
.tinybtn.up,.tinybtn.down{color:#0f766e}
.tinybtn:disabled{opacity:.5; cursor:not-allowed}

/* Ghats list */
.ghats-top{margin-bottom:12px}
.ghatList{display:flex; flex-direction:column; gap:10px;}
.ghatRow{
  border:1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  padding:10px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:10px;
  align-items:center;
}
.ghatRow b{font-weight:950}
.ghatRow small{display:block; color:var(--muted); font-size:12px; margin-top:3px}
.ghatRow .tag{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.88);
  color: var(--muted);
  white-space:nowrap;
}
.tag.famous{color:#92400e; border-color: rgba(217,119,6,.35)}

/* Routes */
.routes-top{margin-bottom:12px}
.routeGrid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;}
@media (max-width: 640px){ .routeGrid{grid-template-columns: 1fr;} }

.routeCard{
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.routeCard h3{margin:0; font-size:15px; font-weight:950}
.routeCard .sub{color:var(--muted); font-size:12px; line-height:1.45}
.routeMeta{display:flex; gap:8px; flex-wrap:wrap}
.rtag{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.88);
  color: var(--muted);
  white-space:nowrap;
}
.rtag.primary{color:#92400e; border-color: rgba(217,119,6,.35)}
.rsteps{
  font-size:12px;
  color:var(--ink);
  background: rgba(255,247,230,.55);
  border:1px dashed rgba(234,220,197,.95);
  border-radius: 14px;
  padding:10px;
  line-height:1.45;
}
.rsteps b{font-weight:950}
.routeActions{display:flex; gap:10px; flex-wrap:wrap}
.routeActions .btn{flex:1}

/* Notes + toast */
.note{
  font-size:12px;
  color: var(--muted);
  line-height:1.45;
  border-top:1px dashed rgba(234,220,197,.95);
  padding-top:10px;
  margin-top:10px;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.8);
  color: var(--muted);
}

/* Floating WhatsApp */
.fab{position: fixed; right: 16px; bottom: 16px; z-index: 50;}
.wabtn{
  border:none; cursor:pointer; border-radius: 18px; padding:12px 14px; color:white;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; gap:10px;
  font-weight:900;
}
.waSub{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1;}

.toast{position: fixed; left: 16px; bottom: 16px; z-index: 60; display:flex; flex-direction:column; gap:10px;}
.t{
  background: rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius: 16px;
  padding:10px 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  display:flex; gap:10px; align-items:flex-start;
  max-width: 420px;
}
.t .okdot{width:10px;height:10px;border-radius:999px;background:var(--ok); margin-top:4px}
.t .msg{font-size:13px}
.t .msg small{display:block; color:var(--muted); margin-top:2px}

/* Modal / map */
.modal{position:fixed; inset:0; background: rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index: 120; padding: 16px;}
.modal.show{display:flex}
.modal-card{
  width:min(1100px, 100%);
  height:min(78vh, 760px);
  background: rgba(255,255,255,.95);
  border:1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  background: rgba(255,247,230,.75);
  border-bottom:1px solid var(--border);
}
.modal-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.modal-b{flex:1; background: #fff; position:relative;}
#leafletMap{position:absolute; inset:0;}

/* Festivals Calendar */
.festTop{margin-top:4px}
.festControls{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.festControls input[type="month"],
.festControls input[type="search"]{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,.92);
  outline:none;
}
.festControls input[type="search"]{flex:1; min-width:240px}
.festHint{color:var(--muted); font-size:12px; margin:10px 0 0}

.festLayout{display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-top:12px}
@media (max-width: 980px){ .festLayout{grid-template-columns:1fr} }

.calHead{font-weight:900; margin:6px 0 10px}
.calGrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  background:rgba(255,255,255,.45);
  border:1px solid var(--border);
  border-radius:18px;
  padding:10px;
}
.calDow{
  text-align:center;
  font-size:11px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.02em;
  padding:6px 0;
}
.calCell{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px;
  min-height:64px;
  cursor:pointer;
  position:relative;
  transition:transform .12s ease;
}
.calCell:hover{transform:translateY(-1px)}
.calNum{font-weight:950}
.calBadges{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.calBadge{
  font-size:10px;
  font-weight:900;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(245,158,11,.16);
  border:1px solid rgba(217,119,6,.25);
  color:var(--ink);
}
.calCell.muted{opacity:.45}
.calCell.today{outline:2px solid rgba(245,158,11,.65)}
.calCell.selected{outline:2px solid rgba(217,119,6,.85)}

.festSide{background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:12px}
.festSideHead{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.festList{margin-top:10px; display:flex; flex-direction:column; gap:10px}
.festItem{border:1px dashed rgba(217,119,6,.35); border-radius:14px; padding:10px; background:rgba(255,247,230,.6)}
.festItem b{display:block}
.festItem small{color:var(--muted)}

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


/* Near Me Finder */
.nearbox{
  border:1px dashed rgba(217,119,6,.35);
  background: rgba(255,247,230,.55);
  border-radius: 16px;
  padding: 10px;
}
.nearstatus{
  margin-top:10px;
  font-size:12px;
  color: var(--muted);
  line-height:1.4;
}
.nearlist{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nearitem{
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding:10px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.nearitem b{font-weight:950}
.nearitem small{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}
.nearactions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nearpill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: var(--muted);
  white-space:nowrap;
}