/* Sections marked hide-on-mobile (via /admin/settings) are hidden only on small screens */
    @media (max-width: 700px) { .hide-on-mobile { display: none !important; } }
    /* Clean, function-first homepage styling - minimal decoration, search widget as the focus */
    /* Hero gradient - matches the reference screenshot's purple -> pink -> orange. */
    .clean-hero {
      position: relative; overflow: hidden;
      background: linear-gradient(135deg, #9333EA 0%, #EC4899 55%, #FB923C 100%);
      padding: 20px 0 20px;
    }
    .clean-hero .container { max-width: 1140px; position: relative; text-align: center; }
    .hero-headline { font-size: 2.4rem; line-height: 1.12; font-weight: 800; color: #FFFFFF; margin: 0; letter-spacing: -0.01em; }
    .hero-headline .accent { color: #F2C230; display: block; }

    .hero-search-panel { position: relative; text-align: left; background: var(--white); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); overflow: visible; margin-top: 20px; }
    @media (max-width: 700px) { .hero-headline { font-size: 1.7rem; } }

    /* Hero search panel - mode tabs (Search Stays / By City / Near Me) on top, boxed search
       fields below, gradient Search button inline with the fields. Replaces the old separate
       "What kind of stay" section further down the page - property type filtering now lives
       as a secondary pill row under the search fields instead of the top-level tabs. */

    .hs-tabs { display: flex; gap: 4px; padding: 6px 18px 0; border-bottom: 1px solid var(--line); }
    .hs-tab { display: flex; align-items: center; gap: 8px; background: none; border: none; border-bottom: 3px solid transparent; padding: 14px 16px; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 700; color: #8A93A0; }
    .hs-tab-ico { font-size: 1rem; color: #9333EA; }
    .hs-tab.active { color: #9333EA; border-bottom-color: #9333EA; }
    .hs-tab:hover:not(.active) { color: var(--ink); }
    @media (max-width: 520px) { .hs-tab { padding: 12px 10px; font-size: 0.82rem; } }

    .hero-fields-wrap { padding: 18px; }
    .hs-hint { font-size: 0.85rem; color: #556372; margin: 0 0 14px; }

    .hero-fields-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.8fr auto; gap: 12px; align-items: stretch; }
    .hero-field { padding: 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
    .hero-field.active-field { border-color: rgba(147,51,234,0.35); }
    .hero-field label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #616C76; margin-bottom: 6px; }
    .hero-field select, .hero-field input { width: 100%; border: none; background: transparent; padding: 0; font-family: 'Poppins', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
    .hero-field select:focus, .hero-field input:focus { outline: none; }
    .hs-field-row { display: flex; align-items: center; gap: 8px; }
    .hs-field-row input { flex: 1; min-width: 0; }
    .hs-field-row input::placeholder { color: #9AA3AD; font-weight: 500; }
    .hs-field-ico { color: #9333EA; font-size: 0.95rem; flex-shrink: 0; }
    .hero-field-btn { border: none; background: none; padding: 0; display: flex; }
    .hero-search-btn {
      flex: 1; background: linear-gradient(135deg, #9333EA, #7C3AED); color: #FFFFFF; border: none;
      font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em;
      padding: 0 26px; border-radius: 10px; cursor: pointer; box-shadow: 0 10px 24px rgba(147,51,234,0.32);
    }
    .hero-search-btn:hover { filter: brightness(1.05); }
    @media (max-width: 900px) { .hero-fields-grid { grid-template-columns: repeat(2, 1fr); } .hero-field-btn { grid-column: 1 / -1; } .hero-search-btn { padding: 14px; } }
    @media (max-width: 520px) { .hero-fields-grid { grid-template-columns: 1fr; } .hero-field-btn { grid-column: auto; } }

    /* Property type filter - now a secondary pill row under the search fields rather than the
       top-level tabs (those are the Search Stays / By City / Near Me mode tabs now). */
    .stay-type-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    .stay-type-tab { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 30px; padding: 8px 16px; cursor: pointer; font-family: 'Poppins', sans-serif; }
    .stay-type-tab .stt-icon { font-size: 0.95rem; line-height: 1; }
    .stay-type-tab span:last-child { font-size: 0.8rem; font-weight: 600; color: #556372; white-space: nowrap; }
    .stay-type-tab.active { background: rgba(147,51,234,0.08); border-color: #9333EA; }
    .stay-type-tab.active span:last-child { color: #9333EA; }
    .stay-type-tab:hover span:last-child { color: var(--ink); }

    /* By City panel */
    .hs-city-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .hs-city-chip { padding: 10px 20px; border: 1px solid var(--line); border-radius: 30px; font-size: 0.85rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
    .hs-city-chip:hover { border-color: #9333EA; background: rgba(147,51,234,0.06); color: #9333EA; }

    /* Near Me panel */
    .hs-near-box { text-align: center; padding: 8px 0; }
    .hs-near-city { font-family: 'Quicksand','Poppins',sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 4px 0 14px; }
    .hs-near-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px; text-decoration: none; }
    .hs-near-alt-link { color: #9333EA; font-weight: 700; font-size: 0.85rem; text-decoration: none; margin-left: 6px; }
    .hs-near-alt-link:hover { text-decoration: underline; }

    .quick-badges { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 10px 0 2px; }
    .quick-badges span { font-size: 0.78rem; color: rgba(255,255,255,0.92); font-weight: 600; display: flex; align-items: center; gap: 6px; }

    .hero-taxi-pill {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 18px;
      background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); border-radius: 30px;
      color: #FFFFFF; font-size: 0.82rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(4px);
      transition: background 0.15s ease;
    }
    .hero-taxi-pill:hover { background: rgba(255,255,255,0.26); }
    .hero-taxi-pill strong { font-weight: 800; color: #F2C230; }

    .quicklink-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
    @media (max-width: 700px) { .quicklink-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .quicklink { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color 0.15s ease; }
    .quicklink:hover { border-color: var(--ink); }
    .quicklink img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; }
    .quicklink span { font-size: 0.78rem; font-weight: 600; color: var(--ink); text-align: center; }

    /* Top padding only, deliberately - these sections are reorderable (see the order:
       inline styles in index.html), so a fixed "top + bottom" padding would sometimes double up
       (two 28px gaps between neighbours) and sometimes need a hand-tuned padding-top:0 override
       to compensate, which broke the moment admin reordered sections. One consistent top-only
       value means every pair of neighbours gets exactly one correctly-sized gap, in any order. */
    .section-tight { padding: 40px 0 0; }
    .section-tight .eyebrow { margin-bottom: 2px; }
    .section-tight h2 { font-size: 1.15rem; margin: 0 0 10px; }

    .type-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .type-grid::-webkit-scrollbar { height: 5px; }
    .type-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .type-card { display: block; text-align: center; padding: 11px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color 0.15s ease; flex: 0 0 auto; min-width: 110px; scroll-snap-align: start; }
    .type-card:hover { border-color: var(--ink); }
    .type-card .icon { font-size: 1.6rem; margin-bottom: 4px; }
    .type-card span { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

    .trending-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .trending-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 30px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
    .trending-chip .fire { color: var(--rust); }
    .trending-chip:hover { border-color: var(--ink); }

    .planner-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    @media (max-width: 700px) { .planner-steps { grid-template-columns: 1fr; } }
    .planner-step { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 20px; text-align: center; }
    .planner-step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
    .planner-step h4 { font-size: 0.95rem; margin: 0 0 4px; }
    .planner-step p { font-size: 0.8rem; color: #556372; margin: 0; }

    /* Popular Destinations - gradient cards, real data only (hotel count / price computed
       server-side from actual listings). */
    .top-dest-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .top-dest-title { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin: 0; color: var(--ink); white-space: nowrap; }
    .top-dest-title .grad {
      background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .top-dest-viewall { font-size: 0.88rem; font-weight: 700; color: #9333EA; white-space: nowrap; }
    /* Generic scroll-row arrow system, reused by every horizontal card row on this page
       (Popular Destinations, Offers, Guest Stories, Travel Inspiration). One set of styles and
       one JS module drive all of them, rather than a bespoke pair of buttons per section. */
    .scroll-wrap { position: relative; }
    .top-dest-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
    .top-dest-grid::-webkit-scrollbar { display: none; }
    .scroll-nav {
      position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
      border-radius: 50%; background: var(--white); border: 1px solid var(--line);
      box-shadow: 0 4px 14px rgba(6,52,94,0.16); display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 5; font-size: 1.1rem; color: var(--ink);
      opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease;
    }
    /* Only ever visible when there's actually somewhere to scroll to in that direction -
       toggled by JS, never shown by default even on desktop. (Local Guides previously forced
       these always-visible, but with only 4-5 cards that usually fit without overflowing, the
       arrows just sat there doing nothing when clicked - worse than hiding them. Reverted to
       the same rule every other row uses: they'll appear on their own once there are enough
       guides to actually scroll to.) */
    .scroll-nav.can-scroll { opacity: 1; visibility: visible; pointer-events: auto; }
    .scroll-nav:hover { background: var(--parchment); }
    .scroll-nav.prev { left: -18px; }
    .scroll-nav.next { right: -18px; }
    @media (max-width: 900px) { .scroll-nav { display: none; } }

    /* Full-photo card, text pinned top-left over a gradient scrim that fades from the top -
       matches a photo-led destination card rather than the previous bottom-anchored layout. */
    .top-dest-card {
      position: relative; border-radius: 20px; padding: 18px;
      flex: 0 0 var(--dest-basis, calc(25% - 12px)); scroll-snap-align: start;
      height: 260px; display: flex; flex-direction: column; justify-content: flex-start;
      text-decoration: none; color: #FFFFFF; box-shadow: 0 8px 20px rgba(0,0,0,0.14);
      transition: transform 0.15s ease; overflow: hidden;
    }
    .top-dest-card:hover { transform: translateY(-3px); }
    .top-dest-card:hover .dest-photo { transform: scale(1.06); }
    .top-dest-card .dest-photo {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.4s ease; z-index: 0;
    }
    /* Scrim now fades from the top (where the text sits) rather than the bottom. */
    .top-dest-card .dest-scrim {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to bottom, rgba(6,14,28,0.75) 0%, rgba(6,14,28,0.25) 35%, rgba(6,14,28,0) 60%);
    }
    .top-dest-card > * { position: relative; z-index: 2; }
    .top-dest-card .state-label { font-size: 0.82rem; color: rgba(255,255,255,0.85); font-weight: 500; }
    .top-dest-card .icon { font-size: 1.7rem; margin-bottom: 8px; opacity: 0.9; }
    .top-dest-card .city-name { font-size: 1.4rem; font-weight: 800; color: #FFFFFF; line-height: 1.2; margin-top: 2px; }
    .top-dest-card.grad-1 { background: linear-gradient(160deg, #4F8EF7, #0B3D6B); }
    .top-dest-card.grad-2 { background: linear-gradient(160deg, #34C77B, #0F5C3E); }
    .top-dest-card.grad-3 { background: linear-gradient(160deg, #E0469B, #7A1E4E); }
    .top-dest-card.grad-4 { background: linear-gradient(160deg, #F2A900, #A85A00); }
    .top-dest-card.grad-5 { background: linear-gradient(160deg, #7C3AED, #3B1670); }
    .top-dest-card.grad-6 { background: linear-gradient(160deg, #00A699, #024F47); }
    @media (max-width: 900px) { .top-dest-card { flex: 0 0 calc(50% - 8px); height: 220px; } }
    @media (max-width: 560px) { .top-dest-card { flex: 0 0 78%; } }

    /* Why Apna Basera - real feature descriptions, no invented stats */
    .why-us-header { text-align: center; max-width: 640px; margin: 0 auto 28px; }
    .why-us-eyebrow { color: #9333EA; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
    .why-us-header .top-dest-title { white-space: normal; font-size: 1.9rem; }
    .why-us-sub { font-size: 0.92rem; color: #556372; margin-top: 10px; }
    .why-us-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 900px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 620px) { .why-us-grid { grid-template-columns: 1fr; } }
    .why-us-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
    .why-us-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px; color: #FFFFFF; }
    .why-us-icon.c1 { background: linear-gradient(135deg, #9333EA, #7C3AED); }
    .why-us-icon.c2 { background: linear-gradient(135deg, #34C77B, #0F5C3E); }
    .why-us-icon.c3 { background: linear-gradient(135deg, #E0469B, #C0392B); }
    .why-us-icon.c4 { background: linear-gradient(135deg, #F2A900, #FB923C); }
    .why-us-icon.c5 { background: linear-gradient(135deg, #4F8EF7, #0B72D9); }
    .why-us-icon.c6 { background: linear-gradient(135deg, #00A699, #024F47); }
    .why-us-card h4 { font-size: 1.02rem; margin: 0 0 8px; color: var(--ink); }
    .why-us-card p { font-size: 0.85rem; color: #556372; margin: 0; line-height: 1.55; }

    /* Guest Stories - real reviews only, pulled from the database, never fabricated */
    .stories-header { text-align: center; max-width: 640px; margin: 0 auto 28px; }
    .stories-badge { display: inline-flex; align-items: center; gap: 6px; background: #FEF3E2; color: #A85A00; font-size: 0.78rem; font-weight: 800; padding: 6px 16px; border-radius: 20px; margin-bottom: 14px; }
    .stories-header .top-dest-title { white-space: normal; font-size: 1.9rem; }
    .stories-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .stories-grid::-webkit-scrollbar { height: 6px; }
    .stories-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .story-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; flex: 0 0 var(--story-basis, calc(25% - 12px)); scroll-snap-align: start; display: flex; flex-direction: column; }
    .story-card .quote-mark { font-size: 1.6rem; color: #E0469B; font-weight: 800; line-height: 1; margin-bottom: 8px; }
    .story-card .stars { color: #F2A900; font-size: 0.85rem; margin-bottom: 10px; }
    .story-card .quote-text { font-size: 0.85rem; color: var(--charcoal); line-height: 1.55; flex: 1; }
    .story-card .stayed-at { font-size: 0.72rem; color: #9333EA; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 16px; }
    .story-card .stayed-at .place { color: #556372; font-weight: 600; text-transform: none; display: block; margin-top: 2px; }
    .story-card .reviewer-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
    .story-card .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #9333EA, #EC4899); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; }
    .story-card .reviewer-name { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
    @media (max-width: 900px) { .story-card { flex: 0 0 calc(50% - 8px); } }
    @media (max-width: 560px) { .story-card { flex: 0 0 82%; } }

    /* Bold Basera card - used for Recommended/Featured Basera. Real photos stay front and
       center (unlike the destination cards, a listing's actual photo matters a lot here), but
       gets the same bold-shadow, rounded-corner, gradient-accent treatment as the rest of the
       redesigned homepage. Scoped to these two sections only - the shared .card class used on
       Similar Properties / city pages / search results is untouched. */
    .basera-card { background: var(--white); border-radius: 20px; overflow: hidden; position: relative; display: block; text-decoration: none; box-shadow: 0 8px 24px rgba(6,52,94,0.10); transition: transform 0.18s ease, box-shadow 0.18s ease; padding: 10px; }
    .scroll-grid .basera-card { flex: 0 0 260px; scroll-snap-align: start; }
    @media (max-width: 620px) { .scroll-grid .basera-card { flex-basis: 240px; } }
    .basera-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(6,52,94,0.20); }
    .basera-card .photo-wrap { position: relative; height: 172px; border-radius: 14px; overflow: hidden; }
    .basera-card .photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .basera-card .badge-pill { position: absolute; top: 12px; left: 12px; padding: 6px 14px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #F2A900, #FB923C); box-shadow: 0 3px 10px rgba(0,0,0,0.28); }
    .basera-card .badge-pill.recommended { background: linear-gradient(135deg, #9333EA, #EC4899); }
    .basera-card .discount-badge { position: absolute; top: 12px; right: 12px; padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #C0392B, #E74C3C); box-shadow: 0 3px 10px rgba(0,0,0,0.28); }
    .basera-card .strike-price { font-size: 0.78rem; color: #B0B8C1; text-decoration: line-through; font-weight: 500; display: block; }
    .basera-card .rating-pill { position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; color: #FFFFFF; background: rgba(20,20,30,0.55); backdrop-filter: blur(3px); }
    .basera-card .rating-pill .star { color: #F2A900; }
    .basera-card .body { padding: 14px 8px 8px; }
    .basera-card h3 { font-size: 1.1rem; margin: 0 0 3px; color: var(--ink); font-weight: 700; }
    .basera-card .prop-type { font-size: 0.82rem; color: #8A93A0; }
    .basera-card .price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
    .basera-card .price-row .amt { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
    .basera-card .price-row .amt small { font-weight: 400; font-size: 0.82rem; color: #8A93A0; }
    .basera-card .view-link { font-size: 0.9rem; font-weight: 700; color: #7C3AED; display: flex; align-items: center; gap: 2px; }
    /* Offers strip - real admin-managed offers only, pulled from OfferService.findLive() */
    .offers-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; margin-top: 16px; }
    .offers-scroll::-webkit-scrollbar { height: 6px; }
    .offers-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .offer-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; display: flex; box-shadow: 0 6px 18px rgba(6,52,94,0.08); transition: transform 0.15s ease; }
    .offer-card:hover { transform: translateY(-3px); }
    .offer-card img { width: 110px; height: auto; object-fit: cover; flex-shrink: 0; }
    .offer-card .body { padding: 14px; flex: 1; }
    .offer-badge { display: inline-block; background: linear-gradient(135deg, #F2A900, #FB923C); color: #FFFFFF; font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; margin-bottom: 6px; }
    .offer-card h4 { font-size: 0.92rem; margin: 0 0 4px; color: var(--ink); }
    .offer-card p { font-size: 0.78rem; color: #616C76; margin: 0 0 8px; }
    .offer-code { font-size: 0.76rem; color: #9333EA; font-weight: 700; }
    @media (max-width: 560px) { .offer-card { flex-basis: 260px; } }
    /* Kanwar Yatra route planner - interactive day-split, driven by admin-entered stages */
    .kr-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 18px; }
    .kr-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
    .kr-pace-btn { padding: 9px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--charcoal); }
    .kr-pace-btn.active { background: linear-gradient(135deg, #9333EA, #EC4899); border-color: transparent; color: #FFFFFF; }
    .kr-day { border-left: 3px solid #EC4899; padding: 4px 0 4px 18px; margin-bottom: 18px; }
    .kr-day-head { font-weight: 800; color: var(--ink); font-size: 0.95rem; }
    .kr-day-meta { font-size: 0.78rem; color: #8A93A0; margin-bottom: 8px; }
    .kr-stage-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
    .kr-stage-row:last-child { border-bottom: none; }
    .kr-stage-name { color: var(--ink); font-weight: 600; }
    .kr-stage-name .halt { display: inline-block; font-size: 0.65rem; font-weight: 800; color: #FFFFFF; background: var(--sage); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
    .kr-stage-fac { font-size: 0.75rem; color: #8A93A0; }
    .kr-stage-km { color: #616C76; white-space: nowrap; font-size: 0.82rem; }
    .kr-note { font-size: 0.78rem; color: #8A93A0; margin-top: 14px; }

    /* Festival calendar - photo cards with a real, admin-set crowd/wait/best-for read per
       festival. Not a link (there's no individual festival page to send someone to), so no
       hover-lift - that visual cue is reserved for things that are actually clickable. */
    .fc-title { display: flex; align-items: center; gap: 12px; }
    .fc-title-badge { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #9333EA, #EC4899); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
    .fc-viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: #9333EA; border: 1px solid rgba(147,51,234,0.35); padding: 9px 18px; border-radius: 30px; white-space: nowrap; text-decoration: none; transition: background 0.15s ease; }
    .fc-viewall:hover { background: rgba(147,51,234,0.06); }

    /* Summary chips - real computed data (festival count) plus optional admin-set fields
       (Site Settings > Festival Calendar summary); each hides individually if unset. */
    .fc-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
    .fc-chip { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; flex: 1 1 200px; min-width: 190px; }
    .fc-chip-ico { font-size: 1.15rem; flex-shrink: 0; }
    .fc-chip strong { display: block; font-size: 0.8rem; color: var(--ink); font-weight: 700; }
    .fc-chip span { display: block; font-size: 0.78rem; color: #556372; margin-top: 1px; }
    .fc-chip-pink { background: #FCE7F3; }
    .fc-chip-amber { background: #FEF3C7; }
    .fc-chip-green { background: #D1FAE5; }
    .fc-chip-blue { background: #DBEAFE; }

    .fc-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .fc-grid::-webkit-scrollbar { height: 6px; }
    .fc-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

    .fest-card { flex: 0 0 280px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
    @media (max-width: 560px) { .fest-card { flex-basis: 250px; } }
    .fest-cover { height: 170px; position: relative; overflow: hidden; }
    .fest-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .fest-cover-grad { background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); display: flex; align-items: center; justify-content: center; }
    .fest-cover .icon { font-size: 2rem; opacity: 0.9; }
    .fest-crowd-tag { position: absolute; top: 12px; left: 12px; font-size: 0.66rem; font-weight: 800; color: #FFFFFF; padding: 5px 12px; border-radius: 12px; background: #9333EA; }
    .fest-crowd-tag.fc-badge-very-busy { background: #9333EA; }
    .fest-crowd-tag.fc-badge-high { background: #E11D48; }
    .fest-crowd-tag.fc-badge-moderate { background: #F2A900; }
    .fest-crowd-tag.fc-badge-low { background: #00A699; }
    .fest-body { padding: 16px; }
    .fest-body h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); line-height: 1.3; }
    .fest-period { font-size: 0.78rem; font-weight: 700; color: #9333EA; }
    .fest-dates { font-size: 0.78rem; color: var(--ink); font-weight: 700; margin-top: 3px; }
    .fest-desc { font-size: 0.82rem; color: #556372; margin: 10px 0 0; line-height: 1.55; }
    .fest-stats { display: flex; gap: 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
    .fest-stat { display: flex; align-items: center; gap: 7px; }
    .fest-stat-ico { font-size: 0.95rem; flex-shrink: 0; }
    .fest-stat strong { display: block; font-size: 0.78rem; color: var(--ink); font-weight: 700; line-height: 1.3; }
    .fest-stat span { display: block; font-size: 0.68rem; color: #8A93A0; }
    .fest-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 0.76rem; color: #085041; background: #E1F5EE; padding: 9px 11px; border-radius: 8px; margin-top: 12px; line-height: 1.5; }
    .fest-tip .tip-icon { flex-shrink: 0; }
    .fest-tip strong { color: inherit; }

    /* Homepage FAQ accordion */
    .faq-title { display: inline-flex; align-items: center; gap: 12px; }
    .faq-title-badge { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #9333EA, #EC4899); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .faq-list { max-width: 780px; margin: 22px auto 0; }
    .faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--white); margin-bottom: 12px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
    .faq-item.open { border-color: rgba(147,51,234,0.3); box-shadow: 0 6px 18px rgba(6,52,94,0.08); }
    .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 16px 20px; font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 14px; }
    .faq-q:hover { background: var(--parchment); }
    .faq-q-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(147,51,234,0.1); color: #9333EA; font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
    .faq-item.open .faq-q-num { background: #9333EA; color: #FFFFFF; }
    .faq-q-text { flex: 1; }
    .faq-q .chev { flex-shrink: 0; color: #9333EA; font-size: 0.9rem; transition: transform 0.18s ease; }
    .faq-item.open .faq-q .chev { transform: rotate(180deg); }
    .faq-a { display: none; padding: 0 20px 18px 60px; font-size: 0.88rem; color: #556372; line-height: 1.65; }
    .faq-item.open .faq-a { display: block; }
    /* Travel Inspiration articles */
    /* Horizontal scroll rather than a wrapping grid, so every published article is reachable
       without the section growing taller as more are added. */
    .art-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; margin-top: 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .art-grid::-webkit-scrollbar { height: 6px; }
    .art-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .art-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
    @media (max-width: 560px) { .art-card { flex-basis: 230px; } }
    .art-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(6,52,94,0.14); }
    .art-cover { height: 150px; background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); position: relative; }
    .art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .art-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.94); color: var(--ink); font-size: 0.66rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; }
    .art-body { padding: 16px; }
    .art-body h4 { font-size: 0.98rem; margin: 0 0 6px; color: var(--ink); line-height: 1.35; }
    .art-body p { font-size: 0.82rem; color: #556372; margin: 0; line-height: 1.5; }
    .art-read { font-size: 0.8rem; font-weight: 700; color: #9333EA; margin-top: 10px; display: inline-block; }
    .trending-chip .trend-note { display:block; font-size:0.7rem; color:#8A93A0; font-weight:500; margin-top:2px; }
    /* Local Guides - full-photo card with a "GUIDE" badge over the cover, state + city title in
       the body, matching the same visual weight as the Popular Destinations / Travel Inspiration
       cards above it on the page. Photo and state come from the linked City record (see
       LocalGuideCard) - falls back to the shared gradient+icon treatment when a city has no
       photo yet. */
    .lg-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; margin-top: 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .lg-grid::-webkit-scrollbar { height: 6px; }
    .lg-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
    .lg-card { flex: 0 0 260px; scroll-snap-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
    .lg-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(6,52,94,0.14); }
    @media (max-width: 560px) { .lg-card { flex-basis: 230px; } }
    .lg-cover { height: 180px; position: relative; overflow: hidden; }
    .lg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
    .lg-card:hover .lg-cover img { transform: scale(1.06); }
    .lg-cover-grad { background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); display: flex; align-items: center; justify-content: center; }
    .lg-cover .lg-icon { font-size: 2.2rem; opacity: 0.9; }
    .lg-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; background: #9333EA; color: #FFFFFF; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; padding: 6px 11px 6px 8px; border-radius: 8px; }
    .lg-badge-ico { font-size: 0.8rem; }
    .lg-body { padding: 16px; }
    .lg-loc { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: #9333EA; margin-bottom: 8px; }
    .lg-loc .lg-pin { font-size: 0.78rem; }
    .lg-body h4 { font-size: 1.02rem; font-weight: 800; margin: 0 0 8px; color: var(--ink); line-height: 1.3; }
    .lg-body p { font-size: 0.82rem; color: #556372; margin: 0; line-height: 1.55; }
    .lg-divider { border-top: 1px solid var(--line); margin: 14px 0 12px; }
    .lg-read { font-size: 0.82rem; font-weight: 700; color: #9333EA; display: inline-block; }
    /* Dot indicators under the row - generic, driven by the shared scroll-row JS module. */
    .scroll-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .scroll-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
    .scroll-dot.active { background: #9333EA; transform: scale(1.25); }
    @media (max-width: 900px) { .scroll-dots { display: none; } }
    /* Trust strip under Local Guides - static, generic reassurance copy (not per-guide facts),
       same pattern as the "Book With Confidence" section elsewhere on the page. */
    .lg-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; padding: 22px 24px; background: var(--parchment); border-radius: 14px; }
    @media (max-width: 700px) { .lg-trust { grid-template-columns: repeat(2, 1fr); } }
    .lg-trust-item { display: flex; align-items: flex-start; gap: 10px; }
    .lg-trust-item .lg-trust-ico { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
    .lg-trust-item strong { display: block; font-size: 0.86rem; color: var(--ink); font-weight: 700; }
    .lg-trust-item span { display: block; font-size: 0.76rem; color: #6B7684; margin-top: 2px; }
    /* Location-personalised strip. Fixed to the bottom and out of normal document flow, so
       when it appears after load it pushes nothing around - no layout shift, no Core Web
       Vitals penalty. Slides up rather than popping in. */
    #geoStrip {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
      background: linear-gradient(135deg, #9333EA, #EC4899 55%, #FB923C); color: #FFFFFF;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
      transform: translateY(100%); transition: transform 0.35s ease; visibility: hidden;
    }
    #geoStrip.show { transform: translateY(0); visibility: visible; }
    #geoStrip .inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; flex-wrap: wrap; }
    #geoStrip .msg { font-size: 0.88rem; font-weight: 600; }
    #geoStrip .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    #geoStrip a.geo-btn { background: #FFFFFF; color: var(--ink); font-size: 0.8rem; font-weight: 700; padding: 7px 15px; border-radius: 20px; text-decoration: none; white-space: nowrap; }
    #geoStrip button.geo-dismiss { background: none; border: 1px solid rgba(255,255,255,0.5); color: #FFFFFF; font-size: 0.76rem; padding: 6px 12px; border-radius: 20px; cursor: pointer; }
    @media (max-width: 600px) { #geoStrip .inner { padding: 10px 0; } #geoStrip .msg { font-size: 0.82rem; } }
    /* Guest Houses by Purpose - sits directly under the search panel */
    .purpose-strip { padding: 22px 0 4px; }
    .purpose-strip h3 { font-size: 1.05rem; margin: 0 0 12px; color: var(--ink); text-align: center; }
    .purpose-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .purpose-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: 10px 20px; text-decoration: none; color: var(--charcoal); font-size: 0.88rem; font-weight: 600; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
    .purpose-chip:hover { transform: translateY(-2px); border-color: #9333EA; box-shadow: 0 8px 18px rgba(6,52,94,0.12); }
    .purpose-chip .ico { font-size: 1.1rem; }
    .purpose-chip .cnt { font-size: 0.72rem; color: #8A93A0; font-weight: 500; }
    /* Guest houses by city - a compact directory rather than another card grid, so it reads
       differently from the photo-driven sections above it and stays scannable as the list grows. */
    .topcity-wrap { padding: 38px 0 14px; border-top: 1px solid var(--line); margin-top: 36px; }
    .topcity-head { text-align: center; margin-bottom: 24px; }
    .topcity-head h3 { font-size: 1.3rem; margin: 0 0 5px; color: var(--ink); }
    .topcity-head .sub { font-size: 0.86rem; color: #8A93A0; margin: 0; }

    .topcity-cols { column-count: 3; column-gap: 32px; max-width: 920px; margin: 0 auto; }
    @media (max-width: 800px) { .topcity-cols { column-count: 2; } }
    @media (max-width: 520px) { .topcity-cols { column-count: 1; } }

    .topcity-group { break-inside: avoid; margin-bottom: 22px; }
    .topcity-state { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #9333EA; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
    .topcity-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; text-decoration: none; }
    .topcity-row .nm { font-size: 0.9rem; color: var(--charcoal); font-weight: 500; transition: color 0.15s ease; }
    .topcity-row:hover .nm { color: #9333EA; }
    .topcity-row .ct { flex-shrink: 0; font-size: 0.74rem; font-weight: 700; color: #7C3AED; background: #F3E8FF; padding: 2px 9px; border-radius: 10px; }
    .topcity-row .ct.soon { color: #8A93A0; background: var(--parchment); font-weight: 500; }