/* Tourism v2 theme refresh (default: light, toggle: dark) */

    :root{
      /* light (poster vibe) */
      --sand:#fff8e6;
      --aqua:#e6f7ff;
      --ocean:#0284c7;
      --reef:#16a34a;
      --sun:#f97316;
      --hibiscus:#ec4899;
      --night:#0b1220;

      --bg:var(--sand);
      --bg2:var(--aqua);
      --card:rgba(255,255,255,.88);
      --card2:rgba(255,255,255,.94);
      --txt:#0b1220;
      --mut:rgba(11,18,32,.72);

      /* primary gradient */
      --pri:var(--ocean);
      --pri2:var(--reef);
      --accent:var(--hibiscus);

      --bd:rgba(11,18,32,.10);
      --sh:0 18px 55px rgba(2,6,23,.14);
    }

    /* opt-in dark */
    :root[data-theme="dark"]{
      --sand:#0b1220;
      --aqua:#070b14;
      --ocean:#22d3ee;
      --reef:#22c55e;
      --sun:#fb923c;
      --hibiscus:#f472b6;
      --night:#0b1220;

      --bg:#071025;
      --bg2:#050812;
      --card:rgba(17,28,51,.94);
      --card2:rgba(17,28,51,.96);
      --txt:#e5e7eb;
      --mut:rgba(229,231,235,.70);

      --pri:#22d3ee;
      --pri2:#22c55e;

      --accent:#f472b6;

      --bd:rgba(255,255,255,.10);
      --sh:0 18px 60px rgba(0,0,0,.50);
    }

    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--txt);
      background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
      min-height:100vh;}
    header{padding:14px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;
      background:linear-gradient(135deg,var(--pri),var(--pri2));
      color:#fff;
      border-bottom:0;
      z-index:500}
    :root[data-theme="dark"] header{background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(34,197,94,.14))}
    header .logo{width:38px;height:38px;border-radius:14px;
      background:linear-gradient(135deg,var(--pri),var(--accent));
      display:grid;place-items:center;font-weight:900;color:white}
    header .t{line-height:1.1}
    header .t .h{font-weight:800}
    header .t .s{color:rgba(255,255,255,.85);font-size:12px}
    #app{padding:14px 14px 84px;max-width:760px;margin:0 auto;}
    .card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:22px;padding:14px;margin-bottom:12px;box-shadow:var(--sh)}
    .row{display:flex;gap:10px;align-items:center}
    .btn{padding:10px 14px;border-radius:999px;border:1px solid var(--bd);
      background:rgba(2,132,199,.10);color:var(--txt);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    :root[data-theme="dark"] .btn{background:rgba(109,124,255,.16)}
    .btn:hover{background:rgba(2,132,199,.16)}
    :root[data-theme="dark"] .btn:hover{background:rgba(109,124,255,.26)}
    .btn.ghost{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);color:#fff}
    :root[data-theme="dark"] .btn.ghost{background:rgba(255,255,255,.06)}
    .btn.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:white;border-color:transparent;font-weight:800}
    .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .input{width:100%;padding:12px 0;border-radius:16px;border:1px solid var(--bd);background:rgba(255,255,255,.72);color:var(--txt);outline:none}
    :root[data-theme="dark"] .input{background:rgba(255,255,255,.05)}
    .mut{color:var(--mut);font-size:13px}
    a.link{color:var(--pri);text-decoration:none}
    a.link:hover{text-decoration:underline}
    .list a{display:block;padding:12px;border-radius:18px;border:1px solid var(--bd);background:rgba(255,255,255,.72);text-decoration:none;color:var(--txt);margin-top:10px}
    :root[data-theme="dark"] .list a{background:rgba(255,255,255,.03)}
    .list a:hover{background:rgba(255,255,255,.90)}
    :root[data-theme="dark"] .list a:hover{background:rgba(255,255,255,.06)}
    .phone { white-space: nowrap; flex-shrink: 0; }
    .badge{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(249,115,22,.16);color:rgba(11,18,32,.72);border:1px solid var(--bd)}
    :root[data-theme="dark"] .badge{background:rgba(255,255,255,.08)}
    #map{height:280px;border-radius:18px;overflow:hidden}
    .tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-top:1px solid var(--bd);display:flex;justify-content:center;z-index:500}
    :root[data-theme="dark"] .tabs{background:rgba(11,18,32,.92)}
    .tabs .wrap{max-width:760px;flex:1;display:flex;gap:8px;padding:10px 12px}
    .tab{flex:1;text-align:center;padding:10px 8px;border-radius:16px;color:var(--mut);text-decoration:none;border:1px solid transparent}
    .tab.active{color:#fff;background:var(--pri);border-color:transparent}
    :root[data-theme="dark"] .tab.active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06)}
    #adRail .adBanner{display:block;height:140px;flex:0 0 88%;border-radius:16px;background-size:cover;background-position:center;background-repeat:no-repeat}

    /* WOW home extras */
    body{
      background:
        radial-gradient(1100px 560px at 10% -10%, rgba(2,132,199,.30), transparent 55%),
        radial-gradient(900px 520px at 110% 10%, rgba(236,72,153,.22), transparent 55%),
        radial-gradient(850px 520px at 20% 105%, rgba(249,115,22,.22), transparent 55%),
        radial-gradient(700px 420px at 95% 110%, rgba(22,163,74,.14), transparent 55%),
        linear-gradient(180deg,var(--bg),var(--bg2));
    }
    .heroCard{
      background:
        radial-gradient(650px 320px at 20% 20%, rgba(37,99,235,.14), transparent 55%),
        radial-gradient(650px 320px at 85% 25%, rgba(6,182,212,.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
      border:1px solid var(--bd);
      border-radius:26px;
      padding:16px;
      margin-bottom:12px;
      box-shadow:var(--sh);
    }
    :root[data-theme="dark"] .heroCard{
      background:
        radial-gradient(650px 320px at 20% 20%, rgba(109,124,255,.22), transparent 55%),
        radial-gradient(650px 320px at 85% 25%, rgba(34,211,238,.14), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(17,28,51,.92));
    }
    .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(2,6,23,.82);background:rgba(255,255,255,.70);border:1px solid var(--bd);padding:6px 10px;border-radius:999px}
    :root[data-theme="dark"] .kicker{color:rgba(255,255,255,.86);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10)}
    .kdot{width:8px;height:8px;border-radius:99px;background:linear-gradient(135deg,#fbbf24,rgba(255,255,255,.2));box-shadow:0 0 0 4px rgba(251,191,36,.12)}
    .heroTitle{margin-top:10px;font-weight:950;font-size:28px;letter-spacing:-.6px}
    .heroSearch{
      margin-top:12px;
      display:flex;gap:10px;align-items:center;
      background:rgba(255,255,255,.70);
      border:1px solid var(--bd);
      border-radius:18px;
      padding:10px 10px;
    }
    :root[data-theme="dark"] .heroSearch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10)}
    .sicon{opacity:.85}
    .sinput{width:100%;border:0;outline:0;background:transparent;color:var(--txt);font-size:15px}
    .sinput::placeholder{color:rgba(2,6,23,.45)}
    :root[data-theme="dark"] .sinput::placeholder{color:rgba(229,231,235,.55)}
    .heroStats{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
    .pill{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(37,99,235,.08);border:1px solid var(--bd);color:rgba(2,6,23,.74)}
    :root[data-theme="dark"] .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:rgba(229,231,235,.8)}
    .hscroll{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:12px 2px 6px}
    .hscroll::-webkit-scrollbar{display:none}
    .slideCard{
      scroll-snap-align:start;
      min-width:78%;
      display:flex;gap:12px;
      text-decoration:none;color:var(--txt);
      padding:12px;border-radius:22px;
      border:1px solid var(--bd);
      background:
        radial-gradient(500px 200px at 10% 10%, rgba(37,99,235,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
      box-shadow:var(--sh);
    }
    .hscroll.ads{
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;          /* 👈 critical */
      overscroll-behavior-x: contain;
    }
    .adBanner{
      scroll-snap-align: center;
    }

    :root[data-theme="dark"] .slideCard{
      border-color:rgba(255,255,255,.10);
      background:
        radial-gradient(500px 200px at 10% 10%, rgba(109,124,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,6,23,.92));
    }
    .slideThumb{width:56px;height:56px;border-radius:18px;flex-shrink:0;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.08);display:grid;place-items:center}
    .slideThumb img{width:100%;height:100%;object-fit:cover;display:block}
    .slideBody{min-width:0}
    .slideTop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .slideBadge{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.20);color:rgba(2,6,23,.75)}
    :root[data-theme="dark"] .slideBadge{background:rgba(109,124,255,.18);border-color:rgba(109,124,255,.28);color:#c7d2fe}
    .slideMeta{font-size:12px;color:rgba(2,6,23,.55)}
    :root[data-theme="dark"] .slideMeta{color:rgba(229,231,235,.65)}
    .slideTitle{margin-top:6px;font-weight:950}
    .slideDesc{margin-top:6px;font-size:13px;color:rgba(2,6,23,.62);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    :root[data-theme="dark"] .slideDesc{color:rgba(229,231,235,.72)}
    .carWrap{position:relative}
    .carBtns{position:absolute;right:8px;top:-8px;display:flex;gap:8px}
    .carBtn{width:38px;height:38px;border-radius:999px;border:1px solid var(--bd);background:rgba(255,255,255,.60);color:var(--txt);cursor:pointer}
    :root[data-theme="dark"] .carBtn{border-color:rgba(255,255,255,.12);background:rgba(0,0,0,.25)}
    .dots{display:flex;gap:6px;justify-content:center;margin-top:6px}
    .dot{width:8px;height:8px;border-radius:99px;background:rgba(2,6,23,.16);border:1px solid var(--bd)}
    :root[data-theme="dark"] .dot{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.10)}
    .dot.active{background:rgba(37,99,235,.95)}
    :root[data-theme="dark"] .dot.active{background:rgba(109,124,255,.95)}
    .ads .adCard{min-width:86%}
    .adCard{
      scroll-snap-align:start;
      position:relative;
      min-width:86%;
      border-radius:24px;
      border:1px solid var(--bd);
      background:
        radial-gradient(420px 220px at 20% 20%, rgba(6,182,212,.12), transparent 60%),
        radial-gradient(520px 240px at 90% 20%, rgba(250,204,21,.12), transparent 60%),
        linear-gradient(135deg, rgba(37,99,235,.14), rgba(255,255,255,.78));
      background-size:cover;
      background-position:center;
      overflow:hidden;
      text-decoration:none;
      color:var(--txt);
      box-shadow:var(--sh);
    }
    :root[data-theme="dark"] .adCard{
      border-color:rgba(255,255,255,.10);
      background:
        radial-gradient(420px 220px at 20% 20%, rgba(34,211,238,.14), transparent 60%),
        radial-gradient(520px 240px at 90% 20%, rgba(251,191,36,.12), transparent 60%),
        linear-gradient(135deg, rgba(109,124,255,.18), rgba(2,6,23,.92));
    }
    .adOverlay{
      min-height:140px;
      padding:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.92));
      display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
    }
    :root[data-theme="dark"] .adOverlay{background:linear-gradient(180deg, rgba(2,6,23,.25), rgba(2,6,23,.88))}
    .adTitle{font-weight:950;font-size:16px}
    .adDesc{font-size:13px;color:rgba(2,6,23,.70);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    :root[data-theme="dark"] .adDesc{color:rgba(229,231,235,.78)}
    .adCta{display:inline-flex;align-self:flex-start;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:white;font-weight:900}

    /* Coupon badge */
    .notifBtn{position:relative}
    .nbadge{
      position:absolute;top:-6px;right:-6px;
      min-width:18px;height:18px;padding:0 5px;
      border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:#0f172a;color:#fff;
      font-size:12px;font-weight:950;
      border:2px solid rgba(255,255,255,.9);
    }
    .tbadge{
      margin-left:8px;
      min-width:18px;height:18px;padding:0 6px;
      border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:#0f172a;color:#fff;
      font-size:12px;font-weight:950;
      vertical-align:middle;
    }

    .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:linear-gradient(135deg,#0ea5e9,#16a34a);
  color:#fff;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-text{
  display:flex;
  flex-direction:column;
}

.nav-title{
  font-weight:800;
  font-size:18px;
  line-height:1.1;
}

.nav-sub{
  font-size:12px;
  opacity:.9;
}

.nav-logo{
  width:28px;
  height:28px;
  border-radius:8px;
  object-fit:contain;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.badge-count{
  position:absolute;
  top:-4px;
  right:-4px;
  background:#0f172a;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  border:2px solid #16a34a;
}