/* ======================================================
   main.css — Combined & scoped stylesheet for all pages
   5BestinCity
   Page classes: .page-index .page-categories .page-cities
                 .page-listing .page-profile .page-citywise .page-categorywise
====================================================== */

/* ======================================================
   SECTION 1 — SHARED UTILITIES (all pages)
====================================================== */

/* Safe area */
.safe-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.safe-top    { padding-top: max(0px, env(safe-area-inset-top)); }

/* Base body */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family:var(--font-body,'Inter',system-ui,sans-serif); overflow-x:hidden; color:var(--color-text,#1a1a1a); line-height:var(--line-height-body,1.6); margin:0; padding:0; }
h1,h2,h3,h4,.heading { font-family:var(--font-heading,'Poppins',system-ui,sans-serif); line-height:var(--line-height-heading,1.25); }
img { display:block; }

/* Mobile body padding (bottom nav) */
@media (max-width:1023px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* Scrollbar hiding */
.no-scroll::-webkit-scrollbar { display:none; }
.no-scroll { -ms-overflow-style:none; scrollbar-width:none; }
.hide-scroll::-webkit-scrollbar { display:none; }
.hide-scroll { -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }

/* Press / Touch */
.press { transition:transform .15s ease; }
.press:active { transform:scale(0.96); }
.press-sm:active { transform:scale(0.94); }

/* Ripple */
.ripple-wrap { position:relative; overflow:hidden; }
@keyframes rippleOut { to { transform:scale(6); opacity:0; } }
.ripple-circle { position:absolute; border-radius:50%; background:rgba(255,255,255,0.35); width:40px; height:40px; transform:scale(0); animation:rippleOut .5s ease-out forwards; pointer-events:none; z-index:10; }

/* Reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1); position: relative; z-index: 1; }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.02s; }
.reveal-d2 { transition-delay:.04s; }
.reveal-d3 { transition-delay:.06s; }
.reveal-d4 { transition-delay:.08s; }

/* Gradient text */
.grad-text { background:linear-gradient(135deg,#e01414 0%,#ff5a5a 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Icon morph bars → X */
#menuIco { transition:transform .3s cubic-bezier(.34,1.3,.64,1), opacity .2s ease; display:inline-block; }
#menuIco.is-open { transform:rotate(90deg) scale(0.9); }

/* ── MOBILE BOTTOM NAVIGATION ── */
#mobileBottomNav { background:#ffffff; border-top:1px solid #eeeeee; box-shadow:0 -4px 20px rgba(0,0,0,0.05); }
.mob-nav-btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1; padding:8px 4px; min-height:56px; cursor:pointer; transition:all .2s ease; border:none; background:transparent; text-decoration:none; }
.mob-icon { font-size:22px; color:#9ba3af; transition:all .2s ease; }
.mob-label { font-size:11px; font-weight:700; color:#9ba3af; transition:color .2s ease; }
.mob-nav-btn.active .mob-icon { color:#e01414; }
.mob-nav-btn.active .mob-label { color:#e01414; }
.mob-nav-fab { width:56px; height:56px; border-radius:9999px; background:linear-gradient(135deg,#e01414,#9b1111); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 25px rgba(224,20,20,0.4); transform:translateY(-20px); border:4px solid #ffffff; transition:all 0.2s ease; overflow:hidden; cursor:pointer; }
.mob-nav-fab-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; cursor:pointer; }
.mob-nav-fab-wrap .mob-label { font-size:11px; font-weight:700; color:#9ba3af; margin-top:-10px; }

/* ── SHARED NAV BASE (transparent, overridden per page below) ── */
#mainNav { transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, border-color .35s ease; background:transparent; border-bottom-color:transparent; box-shadow:0 0 0 rgba(0,0,0,0); margin:0; padding:0; }

/* ── SHARED NAV LINK / BUTTON COLORS (all pages) ── */
#mainNav:not(.scrolled) .nav-link { color:rgba(255,255,255,0.88); }
#mainNav:not(.scrolled) .nav-link:hover { color:#fff; background:rgba(255,255,255,0.12); }
#mainNav:not(.scrolled) .nav-icon { color:rgba(255,255,255,0.88); }
#mainNav:not(.scrolled) .nav-icon:hover { background:rgba(255,255,255,0.12); }
#mainNav:not(.scrolled) .nav-btn-outline { color:rgba(255,255,255,0.9); border-color:rgba(255,255,255,0.35); }
#mainNav:not(.scrolled) .nav-btn-outline:hover { background:rgba(255,255,255,0.12); }
#mainNav:not(.scrolled) .nav-btn-solid { background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.3); box-shadow:none; }
#mainNav:not(.scrolled) .nav-btn-solid:hover { background:rgba(255,255,255,0.28); }

/* ── STICKY NAV (Dark/Visible by default for white bg pages) ── */
.sticky-nav #mainNav:not(.scrolled) { background:rgba(255,255,255,0.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,0.08); }
.sticky-nav #mainNav:not(.scrolled) .nav-link { color:#374151; }
.sticky-nav #mainNav:not(.scrolled) .nav-link:hover { color:#D32F2F; background:rgba(211, 47, 47, 0.06); }
.sticky-nav #mainNav:not(.scrolled) .nav-icon { color:#4b5563; }
.sticky-nav #mainNav:not(.scrolled) .nav-icon:hover { background:#f3f4f6; color:#374151; }
.sticky-nav #mainNav:not(.scrolled) .nav-btn-outline { color:#BC0D0D; border-color:rgba(211, 47, 47, 0.3); }
.sticky-nav #mainNav:not(.scrolled) .nav-btn-outline:hover { background:rgba(211, 47, 47, 0.05); }
.sticky-nav #mainNav:not(.scrolled) .nav-btn-solid { background:#D32F2F; color:#fff; border:none; box-shadow:0 2px 10px rgba(211, 47, 47, 0.3); }
.sticky-nav #mainNav:not(.scrolled) .nav-btn-solid:hover { background:#B71C1C; }

#mainNav.scrolled { background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
#mainNav.scrolled .nav-link { color:#374151; }
#mainNav.scrolled .nav-link:hover { color:#D32F2F; background:rgba(211, 47, 47, 0.06); }
#mainNav.scrolled .nav-icon { color:#4b5563; }
#mainNav.scrolled .nav-icon:hover { background:#f3f4f6; color:#374151; }
#mainNav.scrolled .nav-btn-outline { color:#BC0D0D; border-color:rgba(211, 47, 47, 0.3); }
#mainNav.scrolled .nav-btn-outline:hover { background:rgba(211, 47, 47, 0.05); }
#mainNav.scrolled .nav-btn-solid { background:#D32F2F; color:#fff; border:none; box-shadow:0 2px 10px rgba(211, 47, 47, 0.3); }
#mainNav.scrolled .nav-btn-solid:hover { background:#B71C1C; }

/* ── MOBILE DRAWER BASE ── */
#mobileDrawer { background:#ffffff; border-top:1px solid rgba(0,0,0,0.07); box-shadow:0 16px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06); overflow:hidden; max-height:0; opacity:0; transform:translateY(-10px) scaleY(0.97); transform-origin:top center; pointer-events:none; transition:max-height .42s cubic-bezier(.4,0,.2,1), opacity .32s ease, transform .38s cubic-bezier(.34,1.3,.64,1); }
#mobileDrawer.drawer-open { opacity:1; transform:translateY(0) scaleY(1); pointer-events:all; }
#mobileDrawer a:not(.nav-cta), #mobileDrawer button:not(.nav-cta) { color:#1f2937; }
#mobileDrawer a:not(.nav-cta):hover, #mobileDrawer button:not(.nav-cta):hover { color:#e01414; background:rgba(224,20,20,0.06); }

/* ── DRAWER ITEM BASE (stagger animations) ── */
.drawer-item { opacity:0; transform:translateX(-14px); transition:opacity .28s ease, transform .32s cubic-bezier(.34,1.3,.64,1); }
#mobileDrawer.drawer-open .drawer-item:nth-child(1) { opacity:1; transform:translateX(0); transition-delay:.04s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(2) { opacity:1; transform:translateX(0); transition-delay:.09s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(3) { opacity:1; transform:translateX(0); transition-delay:.14s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(4) { opacity:1; transform:translateX(0); transition-delay:.19s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(5) { opacity:1; transform:translateX(0); transition-delay:.24s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(6) { opacity:1; transform:translateX(0); transition-delay:.27s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(7) { opacity:1; transform:translateX(0); transition-delay:.30s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(8) { opacity:1; transform:translateX(0); transition-delay:.33s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(9) { opacity:1; transform:translateX(0); transition-delay:.36s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(10) { opacity:1; transform:translateX(0); transition-delay:.39s; }
#mobileDrawer.drawer-open .drawer-item:nth-child(11) { opacity:1; transform:translateX(0); transition-delay:.42s; }
#mobileDrawer:not(.drawer-open) .drawer-item { opacity:0; transform:translateX(-10px); transition:opacity .18s ease, transform .2s ease; }

/* ── SCROLL TO TOP ── */
#scrollToTopBtn { position:fixed; bottom:2rem; right:1rem; width:48px; height:48px; background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%); color:white; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:0; visibility:hidden; transform:translateY(20px) scale(0.8); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); z-index:40; box-shadow:0 4px 12px rgba(239,68,68,0.3); }
#scrollToTopBtn:hover { transform:translateY(0) scale(1.1); box-shadow:0 8px 20px rgba(239,68,68,0.4); }
#scrollToTopBtn:active { transform:translateY(2px) scale(1.05); }
#scrollToTopBtn.show { opacity:1; visibility:visible; transform:translateY(0) scale(1); animation:jump 1.5s ease-in-out infinite; }
@keyframes jump { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-8px) scale(1.05);} }
@media (max-width:768px) { #scrollToTopBtn { bottom:5.5rem; right:1rem; width:44px; height:44px; font-size:18px; } }

/* ── MOBILE SEARCH OVERLAY ── */
#searchOverlay { position:fixed; inset:0; z-index:400; background:rgba(0,0,0,0.48); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s; }
#searchOverlay.on { opacity:1; visibility:visible; }
#searchPanel { position:absolute; bottom:0; left:0; right:0; background:#fff; border-radius:28px 28px 0 0; transform:translateY(100%); transition:transform .4s cubic-bezier(.32,0,.67,0); padding-bottom:max(20px,env(safe-area-inset-bottom)); max-height:92svh; overflow-y: overlay; }
#searchOverlay.on #searchPanel { transform:translateY(0); transition:transform .42s cubic-bezier(.16,1,.3,1); }
.search-handle { width:36px; height:4px; background:#e5e7eb; border-radius:9999px; margin:12px auto 0; }
.mob-search-card { background:#f8f9fa; border:2px solid #f0f0f0; border-radius:20px; overflow:visible; transition:border-color .25s ease, box-shadow .25s ease; position:relative; }
.mob-search-card:focus-within { border-color:#e01414; background:#fff; box-shadow:0 0 0 4px rgba(224,20,20,0.09); }
.mob-search-row { display:flex; align-items:center; gap:11px; padding:13px 16px; }
.mob-search-divider { height:1px; background:rgba(0,0,0,0.07); margin:0 16px; }
.mob-search-row input { background:transparent; border:none; outline:none; flex:1; font-size:15px; font-weight:500; color:#1f2937; min-width:0; }
.mob-search-row input::placeholder { color:#9ca3af; font-weight:400; }
.mob-search-input-wrap { display:flex; align-items:center; gap:10px; background:#f8f9fa; border:2px solid #f0f0f0; border-radius:18px; padding:12px 16px; transition:border-color .2s ease; }
.mob-search-input-wrap:focus-within { border-color:#e01414; background:#fff; box-shadow:0 0 0 4px rgba(224,20,20,0.08); }
.mob-search-input-wrap input { background:transparent; border:none; outline:none; flex:1; font-size:15px; font-weight:500; color:#1f2937; }
.mob-search-input-wrap input::placeholder { color:#9ca3af; font-weight:400; }
.city-chip { padding:8px 16px; background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:9999px; font-size:13px; font-weight:600; color:#374151; cursor:pointer; transition:all .18s ease; white-space:nowrap; flex-shrink:0; }
.city-chip:active, .city-chip.sel { background:#fee2e2; border-color:#e01414; color:#e01414; }
.cat-quick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:12px 8px; background:#f9fafb; border:1.5px solid #efefef; border-radius:16px; font-size:11px; font-weight:700; color:#374151; cursor:pointer; transition:all .18s ease; text-align:center; line-height:1.3; }
.cat-quick .cq-icon, .cq-icon { font-size:22px; line-height:1; display:block; }
.cat-quick:active { background:#fee2e2; border-color:#e01414; color:#e01414; transform:scale(0.95); }

/* Sticky search (shared by categories + cities) */
.sticky-search { position:sticky; top:58px; z-index:40; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid transparent; transition:all 0.3s ease; padding-bottom:1rem !important; }
.sticky-search.scrolled-past { background:rgba(255,255,255,0.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:rgba(0,0,0,0.06); padding-top:0.5rem; padding-bottom:1rem; box-shadow:0 10px 15px -3px rgba(0,0,0,0.1); }
@media (max-width:1023px) { 
  .sticky-search { padding-bottom:0 !important; }
  .sticky-search.scrolled-past { padding-top:0.75rem !important; padding-bottom:0.75rem !important; }
}
@media (max-width:1023px) {
   .page-categories #stickySearch,
   .page-cities #stickySearch {
      margin-bottom:0 !important;
      padding-left:0.75rem !important;
      padding-right:0.75rem !important;
   }
   .page-categories #stickySearch > .relative,
   .page-cities #stickySearch > .relative {
      margin-bottom:0 !important;
   }
}

/* Slight non-sticky 3D lift so search presence is visible */
.page-categories #stickySearch:not(.scrolled-past),
.page-cities #stickySearch:not(.scrolled-past) {
   transform:translateZ(0);
}
.page-categories #stickySearch:not(.scrolled-past) > .relative,
.page-cities #stickySearch:not(.scrolled-past) > .relative {
   border-radius:9999px;
   box-shadow:0 8px 18px -14px rgba(15,23,42,0.45), 0 2px 6px -4px rgba(15,23,42,0.22);
}
.page-categories #stickySearch:not(.scrolled-past) #categorySearchInput,
.page-cities #stickySearch:not(.scrolled-past) #citySearchInput {
   background:#ffffff !important;
   border-radius:9999px !important;
}
@media (max-width:1023px) {
  .page-categories #stickySearch #categorySearchInput,
  .page-cities #stickySearch #citySearchInput {
    border-radius:9999px !important;
  }
}



/* Mobile search facelift for categories + cities */
.page-categories #searchPanel,
.page-cities #searchPanel { background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); }
.page-categories #searchPanel .mob-search-card,
.page-cities #searchPanel .mob-search-card {
   background:linear-gradient(145deg,#ffffff 0%,#f8fafc 100%);
   border:1.5px solid #e2e8f0;
   border-radius:22px;
   box-shadow:0 14px 28px -20px rgba(15,23,42,0.38), inset 0 1px 0 rgba(255,255,255,0.9);
}
.page-categories #searchPanel .mob-search-card:focus-within,
.page-cities #searchPanel .mob-search-card:focus-within {
   border-color:#e01414;
   box-shadow:0 0 0 4px rgba(224,20,20,0.11), 0 16px 34px -22px rgba(224,20,20,0.45);
}
.page-categories #searchPanel .mob-search-row,
.page-cities #searchPanel .mob-search-row { padding:14px 16px; }
.page-categories #searchPanel .mob-search-row input,
.page-cities #searchPanel .mob-search-row input { font-weight:600; }
.page-categories #searchPanel .mob-search-divider,
.page-cities #searchPanel .mob-search-divider { background:linear-gradient(90deg,transparent,rgba(148,163,184,0.38),transparent); }

/* Mobile bottom sheets (Tailwind-like Modal) */
.mobile-bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-sheet.active {
    opacity: 1;
    visibility: visible;
}

.mobile-bottom-sheet-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.mobile-bottom-sheet-content {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 -8px 10px -6px rgba(0, 0, 0, 0.1);
    max-height: 85vh;
}

#cityFilterModal.active .mobile-bottom-sheet-content,
#categoryFilterModal.active .mobile-bottom-sheet-content {
    transform: translateY(0);
}

.sheet-header-handle {
    width: 36px;
    height: 4px;
    background-color: #e2e8f0;
    border-radius: 9999px;
    margin: 0.75rem auto 0.5rem;
}

.city-filter-item,
.category-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-radius: 1rem;
    background-color: #f8fafc;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #f1f5f9;
}

.city-filter-item:active,
.category-filter-item:active {
    background-color: #fef2f2;
    border-color: #fee2e2;
    transform: scale(0.98);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.5rem;
}

.filter-item-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.filter-item-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    background-color: #ffffff;
    border-radius: 9999px;
    color: #94a3b8;
    border: 1px solid #f1f5f9;
}

.city-filter-item:active .filter-item-badge,
.category-filter-item:active .filter-item-badge {
    color: #ef4444;
    border-color: #fee2e2;
}

/* ======================================================
   SECTION 2 — INDEX PAGE (.page-index)
====================================================== */
.page-index body, body.page-index { background:#f4f4f6; }

/* Index nav — transparent over hero, glass on scroll */
.page-index #mainNav { background:transparent; border-bottom-color:transparent; box-shadow:0 0 0 rgba(0,0,0,0); }
.page-index #mainNav:not(.scrolled) .nav-link  { color:rgba(255,255,255,0.88); }
.page-index #mainNav:not(.scrolled) .nav-link:hover { color:#fff; background:rgba(255,255,255,0.12); }
.page-index #mainNav:not(.scrolled) .nav-icon  { color:rgba(255,255,255,0.88); }
.page-index #mainNav:not(.scrolled) .nav-icon:hover { background:rgba(255,255,255,0.12); }
.page-index #mainNav:not(.scrolled) .nav-btn-outline { color:rgba(255,255,255,0.9); border-color:rgba(255,255,255,0.35); }
.page-index #mainNav:not(.scrolled) .nav-btn-outline:hover { background:rgba(255,255,255,0.12); }
.page-index #mainNav:not(.scrolled) .nav-btn-solid { background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.3); box-shadow:none; }
.page-index #mainNav:not(.scrolled) .nav-btn-solid:hover { background:rgba(255,255,255,0.28); }
.nav-btn-solid { color:#fff !important; }
.page-index #mainNav.scrolled { background:rgba(255,255,255,0.78); backdrop-filter:blur(22px) saturate(190%) brightness(105%); -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(105%); border-bottom-color:rgba(255,255,255,0.35); box-shadow:0 2px 28px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.5) inset; }
.page-index #mainNav.scrolled .nav-link  { color:#374151; }
.page-index #mainNav.scrolled .nav-link:hover { color:#e01414; background:rgba(224,20,20,0.06); }
.page-index #mainNav.scrolled .nav-icon  { color:#4b5563; }
.page-index #mainNav.scrolled .nav-icon:hover { background:#f3f4f6; color:#374151; }
.page-index #mainNav.scrolled .nav-btn-outline { color:#bc0d0d; border-color:rgba(224,20,20,0.3); }
.page-index #mainNav.scrolled .nav-btn-outline:hover { background:rgba(224,20,20,0.05); }
.page-index #mainNav.scrolled .nav-btn-solid { background:#e01414; color:#fff; border:none; box-shadow:0 2px 10px rgba(224,20,20,0.3); }
.page-index #mainNav.scrolled .nav-btn-solid:hover { background:#bc0d0d; }

.hero-content-inner { padding-top:74px; padding-bottom:clamp(110px,18vw,180px); }
@media (min-width:640px) {
  .hero-content-inner { padding-bottom:120px !important; }
}

@media (min-width:1024px) { .page-index #mainNav .flex.items-center.justify-between { height:66px; } }

/* Hero slider */
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.07); transition:opacity 2s ease-in-out, transform 10s linear; will-change:opacity,transform; }
.hero-slide.active { opacity:1; transform:scale(1); }
.h-dot { width:6px; height:6px; border-radius:9999px; background:rgba(255,255,255,0.35); transition:all .3s ease; cursor:pointer; flex-shrink:0; }
.h-dot.active { width:24px; background:#fff; }

/* Category strip */
.cat-btn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 12px; border-radius:16px; cursor:pointer; transition:all .22s ease; flex-shrink:0; border:none; background:transparent; min-width:72px; }
@media (min-width:640px) { .cat-btn { padding:10px 14px; } }
.cat-btn:active { transform:scale(0.93); }
.cat-icon-wrap { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; transition:all .25s cubic-bezier(.34,1.56,.64,1); }
.cat-btn:hover .cat-icon-wrap, .cat-btn.sel .cat-icon-wrap { transform:translateY(-3px) scale(1.08); }
.cat-btn.sel .cat-icon-wrap { box-shadow:0 6px 18px rgba(224,20,20,0.3); }
.cat-label { font-size:11px; font-weight:700; color:#6b7280; white-space:nowrap; transition:color .2s; }
.cat-btn.sel .cat-label { color:#e01414; }
@media (min-width:1024px) { #catRow { padding-top:6px; padding-bottom:6px; gap:2px; justify-content:center; cursor:grab; user-select:none; -webkit-user-select:none; } #catRow:active { cursor:grabbing; } .cat-btn { padding:10px 22px; min-width:86px; border-radius:18px; } .cat-icon-wrap { width:50px; height:50px; border-radius:15px; } .cat-label { font-size:12px; } .cat-strip-inner { justify-content:center; } }

/* City cards */
.page-index .city-card { position:relative; border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:0 8px 30px rgba(16,24,40,0.08); border:1px solid rgba(255,255,255,0.06); aspect-ratio:3/4; min-width:46vw; max-width:220px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.page-index .city-card img { width:100%; height:100%; object-fit:cover; display:block; }
.page-index .city-card .glass-footer { position:absolute; left:10px; right:10px; bottom:10px; z-index:6; background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.04)); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; border:1px solid rgba(255,255,255,0.08); }
.page-index .city-card .glass-footer .city-name { color:#fff; font-weight:700; font-size:11px; line-height:1.05; text-shadow:0 2px 8px rgba(0,0,0,0.45); text-align:center; }
.page-index .city-card .glass-footer .city-sub { color:rgba(255,255,255,0.78); font-size:0.72rem; font-weight:600; }
@media (max-width:639px) { .page-index .city-card:active { transform:scale(0.98); box-shadow:0 16px 40px rgba(0,0,0,0.15); } }
@media (min-width:640px) { .page-index .city-card { min-width:0; max-width:none; width:100%; } .page-index .city-card:hover { transform:translateY(-8px); box-shadow:0 32px 64px rgba(0,0,0,0.22); } }
@media (max-width:639px) {
  .mobile-advanced-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:20px 16px; gap:16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; align-items:center; margin:0 -16px; scroll-padding-inline-start:16px; overscroll-behavior-x:contain; }
  .feat-advanced-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:20px 16px; gap:16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; align-items:center; margin:0 -16px; scroll-padding-inline-start:16px; overscroll-behavior-x:contain; }
  .mobile-advanced-track::-webkit-scrollbar { display:none; }
   .page-index .mobile-advanced-track .city-card { flex:0 0 160px; height:220px; scroll-snap-align:start; transform:scale(0.88); filter:brightness(0.65); transition:transform 0.4s cubic-bezier(0.25,1,0.5,1), filter 0.4s ease, box-shadow 0.4s ease; scroll-snap-stop:always; }
  .feat-advanced-track .feat-card { flex:0 0 280px; scroll-snap-align:start; scroll-snap-stop:always; transform:scale(0.92); opacity:0.5; transition:transform 0.4s cubic-bezier(0.25,1,0.5,1), opacity 0.4s ease, box-shadow 0.4s ease; }
   .page-index .mobile-advanced-track .city-card.is-active { transform:scale(1.05); filter:brightness(1); box-shadow:0 15px 35px rgba(0,0,0,0.2); z-index:10; }
}

/* Business cards */
.biz-card { background:#fff; border-radius:20px; border:1px solid rgba(0,0,0,0.06); transition:all .28s ease; cursor:pointer; overflow:hidden; }
.biz-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.1); border-color:rgba(224,20,20,0.15); }
.biz-card:active { transform:scale(0.98); }
@keyframes heartPop { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} }
.heart-btn.liked .fa-heart { color:#e01414; animation:heartPop .4s ease; }
@media (max-width:767px) { .heart-btn { display:none !important; } }
.feat-card { background:#fff; border-radius:22px 22px 16px 16px; overflow:hidden; border:1px solid rgba(0,0,0,0.06); transition:all .3s ease; min-width:52vw; max-width:300px; }
.feat-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.12); }
.feat-card:active { transform:scale(0.98); }
@media (min-width:640px) { .feat-card { min-width:0; max-width:none; width:100%; } }

/* Search dropdowns */
.s-drop { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:999; background:#fff; border:1px solid rgba(224,36,36,0.12); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,0.12); opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .22s ease; max-height:320px; overflow-y:auto; }
.s-drop.on { opacity:1; visibility:visible; transform:translateY(0); }
.c-drop { position:absolute; top:calc(100% + 8px); left:0; z-index:999; width:220px; background:#fff; border:1px solid rgba(224,36,36,0.12); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,0.12); opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .22s ease; overflow:hidden; max-height:320px; overflow-y:auto; }
.c-drop.on { opacity:1; visibility:visible; transform:translateY(0); }

/* Mobile city dropdown inside search panel */


/* Hero search card */
.hero-search-card { background:rgba(255,255,255,0.97); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-radius:24px; box-shadow:0 12px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.4); }
.desk-search { background:rgba(255,255,255,0.97); backdrop-filter:blur(16px); box-shadow:0 8px 48px rgba(0,0,0,0.2), 0 0 0 2px rgba(255,255,255,0.3); }
@media (min-width:1024px) { .desk-search { box-shadow:0 20px 60px rgba(0,0,0,0.26), 0 0 0 2px rgba(255,255,255,0.4); } }
.hero-search-trigger { display:flex; align-items:center; gap:12px; background:linear-gradient(160deg,rgba(255,255,255,0.26) 0%,rgba(255,255,255,0.10) 100%); backdrop-filter:blur(24px) saturate(200%); -webkit-backdrop-filter:blur(24px) saturate(200%); border-top:1.5px solid rgba(255,255,255,0.55); border-left:1.5px solid rgba(255,255,255,0.35); border-right:1.5px solid rgba(255,255,255,0.15); border-bottom:1.5px solid rgba(255,255,255,0.10); border-radius:9999px; padding:10px 18px; cursor:pointer; width:100%; transition:all .2s ease; box-shadow:0 8px 24px rgba(0,0,0,0.30),0 2px 6px rgba(0,0,0,0.20),inset 0 1.5px 0 rgba(255,255,255,0.45),inset 0 -1px 0 rgba(0,0,0,0.12); transform:perspective(600px) rotateX(1.5deg); }
.hero-search-trigger:active { background:rgba(255,255,255,0.22); transform:perspective(600px) rotateX(1.5deg) scale(0.97); box-shadow:0 4px 12px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.35); }
@media (max-width:639px) { #heroSearchBtn .hero-search-trigger { gap:6px; padding:10px 12px; } #heroSearchBtn .hero-search-trigger > div.w-9 { min-width:32px; width:32px; height:32px; } }

/* Stats, CTA, shimmer */
.stat-card { background:linear-gradient(135deg,#fff 0%,#fff5f5 100%); border-radius:20px; border:1px solid rgba(224,20,20,0.08); transition:all .3s ease; }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(224,20,20,0.1); }
@media (min-width:768px) { .stat-card { padding:28px 22px; } }
@media (min-width:1024px) { .stat-card { padding:36px 24px; } }
.stat-icon { display:none; }
@media (min-width:640px) { .stat-icon { display:flex; } }
.cta-bg { background:linear-gradient(135deg,#7f1414 0%,#9b1111 35%,#bc0d0d 70%,#e01414 100%); }
.cta-visual { display:none; }
@media (min-width:1024px) { .cta-visual { display:block; } }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.shimmer-badge { background:linear-gradient(90deg,rgba(255,255,255,0.1) 25%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 75%); background-size:200% 100%; animation:shimmer 2.5s infinite; }
.sec-title::after { content:''; display:block; width:36px; height:3px; background:linear-gradient(90deg,#e01414,#ff5a5a); border-radius:9999px; margin-top:8px; }
@keyframes pulseRing { 0%{transform:scale(1);opacity:1} 80%,100%{transform:scale(2.5);opacity:0} }
.pulse-ring::before { content:''; position:absolute; inset:0; border-radius:50%; background:rgba(224,20,20,0.4); animation:pulseRing 2s ease-out infinite; }
.open-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; position:relative; }
.open-dot::before { content:''; position:absolute; inset:-2px; border-radius:50%; background:rgba(34,197,94,0.4); animation:pulseRing 2s ease-out infinite; }
.popular-heading { text-shadow:0 2px 4px rgba(0,0,0,0.4); }
@media (max-width:639px) { .mobile-tag-scroll { display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; scroll-snap-type:x mandatory; } .mobile-tag-scroll > * { scroll-snap-align:start; flex-shrink:0; } }
.foot-acc-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.foot-acc-body.open { max-height:300px; }
.foot-acc-icon { transition:transform .3s ease; }
.foot-acc-open .foot-acc-icon { transform:rotate(180deg); }
@keyframes bounceDown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.scroll-ind { animation:bounceDown 1.8s ease-in-out infinite; }
.pop-tag { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:rgba(255,255,255,0.18); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:9999px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; transition:all .25s ease; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,0.25); box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.pop-tag:active { background:#e01414; transform:scale(0.95); }
@media(hover:hover) { .pop-tag:hover { background:linear-gradient(135deg,#e01414,#bc0d0d); border-color:rgba(255,255,255,0.5); transform:scale(1.06) translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2); } }
@keyframes tagFadeOut { 0%{opacity:1;filter:blur(0);transform:translateY(0);} 100%{opacity:0;filter:blur(8px);transform:translateY(-7px);} }
@keyframes tagFadeIn  { 0%{opacity:0;filter:blur(8px);transform:translateY(7px);}  100%{opacity:1;filter:blur(0);transform:translateY(0);} }
.pop-tag .tag-inner { display:inline-flex; align-items:center; gap:6px; }
.pop-tag.tag-out .tag-inner { animation:tagFadeOut 0.22s cubic-bezier(0.4,0,1,1) forwards; }
.pop-tag.tag-in  .tag-inner { animation:tagFadeIn  0.32s cubic-bezier(0,0,0.2,1) forwards; }
@media (min-width:1024px) { .pop-tags-wrap { flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:none !important; } .pop-tags-wrap::-webkit-scrollbar { display:none; } }
@media (hover:hover) and (pointer:fine) { .city-card:hover { transform:translateY(-8px); box-shadow:0 32px 64px rgba(0,0,0,0.22); } .feat-card:hover { transform:translateY(-8px); box-shadow:0 24px 52px rgba(0,0,0,0.14); } .biz-card:hover { transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,0,0,0.12); } .stat-card:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(224,20,20,0.14); } }
@media (min-width:1024px) { .biz-sidebar { position:sticky; top:82px; } }
.hero-qstats { display:none; }
@media (min-width:640px) { .hero-qstats { display:flex; } }

/* Testimonials */
.testi-section { background:linear-gradient(180deg,#fafafa 0%,#fff1f1 46%,#fafafa 100%); }
#testiWrap { cursor: grab; user-select: none; -webkit-user-drag: none; }
#testiWrap:active { cursor: grabbing; }
.testi-track { display:flex; transition:transform .52s cubic-bezier(.4,0,.2,1); will-change:transform; touch-action:pan-y; }
.testi-track.is-dragging { transition:none; }
.testi-card { flex-shrink:0; width:100%; }
.testi-inner { background:#fff; border-radius:22px; padding:24px 20px 20px; border:1px solid rgba(0,0,0,0.06); box-shadow:0 4px 28px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.04); position:relative; overflow:hidden; height:100%; }
.testi-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#e01414 0%,#ff5a5a 100%); border-radius:22px 22px 0 0; }
.testi-bigquote { position:absolute; top:12px; right:16px; font-size:68px; line-height:1; color:rgba(224,20,20,0.07); font-family:Georgia,serif; font-weight:900; pointer-events:none; user-select:none; }
.testi-avatar { width:50px; height:50px; border-radius:50%; flex-shrink:0; padding:2.5px; }
.testi-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2.5px solid #fff; display:block; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.testi-dot { width:6px; height:6px; border-radius:9999px; background:rgba(224,20,20,0.18); transition:all .3s ease; cursor:pointer; flex-shrink:0; border:none; padding:0; }
.testi-dot.active { width:22px; background:#e01414; }
.testi-prog-wrap { height:2px; background:rgba(224,20,20,0.1); border-radius:9999px; overflow:hidden; max-width:100px; }
.testi-prog-bar { height:100%; background:linear-gradient(90deg,#e01414,#ff7b7b); border-radius:9999px; width:0%; }
@media (max-width:767px) {
  .testi-card { padding:0 4px; }
  .testi-inner {
    padding:28px 22px 22px;
    background:linear-gradient(150deg,#fff 0%,#fff6f6 100%);
    box-shadow:0 12px 40px rgba(224,20,20,0.12),0 2px 8px rgba(0,0,0,0.05);
    border-color:rgba(224,20,20,0.1);
  }
  .testi-inner::before { height:4px; background:linear-gradient(90deg,#e01414 0%,#ff5a5a 55%,#ffaaaa 100%); }
  .testi-inner::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg,transparent 0%,rgba(224,20,20,0.15) 50%,transparent 100%);
    border-radius:0 0 22px 22px;
  }
  .testi-bigquote { font-size:96px; color:rgba(224,20,20,0.09); top:10px; right:14px; }
  .testi-avatar { width:54px; height:54px; }
}
@media (min-width:768px) { .testi-track { display:flex; gap:20px; transition:transform .52s cubic-bezier(.4,0,.2,1); will-change:transform; } .testi-card { flex:0 0 calc((100% - 40px) / 3); } #testiDotsRow { display:none !important; } }

/* FAQ */
.faq-home-section-bg { background:#fff; background-image:radial-gradient(rgba(224,20,20,0.038) 1.5px,transparent 1.5px); background-size:26px 26px; }
.faq-home-item { border:1px solid rgba(0,0,0,0.07); border-radius:20px; overflow:hidden; background:#fff; position:relative; transition:border-color .3s ease, box-shadow .3s ease; }
.faq-home-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#e01414,#ff5a5a); border-radius:0 3px 3px 0; transform:scaleY(0); transform-origin:top; transition:transform .38s cubic-bezier(.4,0,.2,1); }
.faq-home-item.faq-home-open::before { transform:scaleY(1); }
.faq-home-item.faq-home-open { border-color:rgba(224,20,20,0.2); box-shadow:0 8px 32px rgba(224,20,20,0.08),0 2px 8px rgba(0,0,0,0.04); }
.faq-home-btn { width:100%; display:flex; align-items:center; gap:13px; padding:16px 18px; cursor:pointer; background:transparent; border:none; text-align:left; }
.faq-home-btn:active { opacity:.85; }
.faq-home-num { width:34px; height:34px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:800; font-size:11px; color:#fff; transition:transform .3s cubic-bezier(.34,1.3,.64,1); }
.faq-home-item.faq-home-open .faq-home-num { transform:scale(1.08); }
.faq-home-toggle { width:30px; height:30px; border-radius:50%; flex-shrink:0; margin-left:auto; border:1.5px solid rgba(0,0,0,0.09); background:#f9f9f9; display:flex; align-items:center; justify-content:center; transition:all .38s cubic-bezier(.34,1.3,.64,1); }
.faq-home-toggle i { font-size:11px; color:#9ca3af; transition:color .2s; }
.faq-home-item.faq-home-open .faq-home-toggle { background:linear-gradient(135deg,#e01414,#ff5a5a); border-color:transparent; transform:rotate(45deg); box-shadow:0 4px 14px rgba(224,20,20,0.38); }
.faq-home-item.faq-home-open .faq-home-toggle i { color:#fff; }
.faq-home-body { max-height:0; overflow:hidden; transition:max-height .44s cubic-bezier(.4,0,.2,1); }
.faq-home-item.faq-home-open .faq-home-body { max-height: 2000px !important; overflow: visible; }
.faq-home-answer { padding:0 18px 18px 65px; opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; }
.faq-home-item.faq-home-open .faq-home-answer { opacity:1 !important; transform:translateY(0) !important; }
@media (max-width:639px) { .faq-home-answer { padding-left:18px; } }
.faq-home-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(224,20,20,0.06); color:#bc0d0d; font-size:10px; font-weight:700; padding:3px 9px; border-radius:9999px; margin-bottom:7px; }

/* App section */
.app-section { background:linear-gradient(148deg,#150202 0%,#3d0707 28%,#7f1414 58%,#bc0d0d 100%); position:relative; overflow:hidden; }
.app-bg-blob { position:absolute; border-radius:50%; filter:blur(72px); pointer-events:none; }
@keyframes bubbleRise { 0%{transform:translateY(0) scale(1);opacity:.6;} 80%{opacity:.2;} 100%{transform:translateY(-220px) scale(.15);opacity:0;} }
.app-bubble { position:absolute; border-radius:50%; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); animation:bubbleRise linear infinite; pointer-events:none; }
@keyframes phoneFloat { 0%,100%{transform:translateY(0px) rotate(-.5deg);} 50%{transform:translateY(-14px) rotate(.5deg);} }
@keyframes phoneShake { 0%{transform:translateX(0) rotate(-.5deg);} 10%{transform:translateX(-10px) rotate(-4deg);} 22%{transform:translateX(10px) rotate(4deg);} 34%{transform:translateX(-8px) rotate(-3deg);} 46%{transform:translateX(8px) rotate(2deg);} 58%{transform:translateX(-5px) rotate(-1deg);} 70%{transform:translateX(5px) rotate(.5deg);} 82%{transform:translateX(-2px) rotate(0deg);} 100%{transform:translateX(0) rotate(-.5deg);} }
.app-phone-wrap { animation:phoneFloat 4s ease-in-out infinite; will-change:transform; cursor:pointer; position:relative; display:inline-block; z-index:1; }
.app-phone-wrap.shaking { animation:phoneShake .7s ease-in-out forwards; }
.app-phone { width:162px; background:linear-gradient(168deg,#1c1c2e 0%,#0d0d1a 100%); border-radius:36px; border:5px solid rgba(255,255,255,.13); box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.1); padding:12px 9px 10px; position:relative; }
.app-phone::before { content:''; position:absolute; right:-7px; top:58px; width:3px; height:28px; background:rgba(255,255,255,.12); border-radius:0 3px 3px 0; }
.app-phone::after { content:''; position:absolute; left:-7px; top:48px; width:3px; height:48px; background:rgba(255,255,255,.12); border-radius:3px 0 0 3px; }
.app-phone-notch { width:46px; height:10px; background:rgba(255,255,255,.07); border-radius:0 0 10px 10px; margin:0 auto 8px; position:relative; }
.app-phone-notch::before { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.15); top:1.5px; left:50%; transform:translateX(-50%); }
@keyframes screenGlow { 0%,100%{box-shadow:0 0 0px rgba(224,20,20,0);} 50%{box-shadow:0 0 22px rgba(224,20,20,.3),0 0 44px rgba(224,20,20,.1);} }
@keyframes shimmerSweep { 0%{left:-100%} 100%{left:220%} }
.app-phone-screen { background:linear-gradient(158deg,#fff5f5 0%,#fff 55%,#fff8f8 100%); border-radius:22px; padding:10px 9px 9px; position:relative; overflow:hidden; animation:screenGlow 3s ease-in-out infinite; }
.app-phone-screen::after { content:''; position:absolute; top:0; left:-100%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:shimmerSweep 3.8s ease-in-out infinite; pointer-events:none; }
.app-phone-bar { width:46px; height:4px; background:rgba(255,255,255,.22); border-radius:9999px; margin:8px auto 0; }
@keyframes orbit1 { 0%,100%{transform:translate(0,0) rotate(-4deg) scale(0.82);} 25%{transform:translate(-3px,-12px) rotate(-6deg) scale(1.0);} 50%{transform:translate(-6px,-20px) rotate(-3deg) scale(1.14);} 75%{transform:translate(-2px,-9px) rotate(-5deg) scale(1.0);} }
@keyframes orbit2 { 0%,100%{transform:translate(0,0) rotate(4deg) scale(0.82);} 25%{transform:translate(4px,-11px) rotate(6deg) scale(1.0);} 50%{transform:translate(6px,-18px) rotate(3deg) scale(1.14);} 75%{transform:translate(2px,-7px) rotate(5deg) scale(1.0);} }
@keyframes orbit3 { 0%,100%{transform:translate(0,0) rotate(-3deg) scale(0.82);} 25%{transform:translate(-3px,-9px) rotate(-5deg) scale(1.0);} 50%{transform:translate(-5px,-16px) rotate(-2deg) scale(1.14);} 75%{transform:translate(-2px,-5px) rotate(-4deg) scale(1.0);} }
@keyframes bdgPulse { 0%{transform:scale(1);opacity:.65;} 100%{transform:scale(1.65);opacity:0;} }
.app-phone-col-wrap { padding:20px 48px 8px; }
@media (min-width:480px) { .app-phone-col-wrap { padding:22px 78px 10px; } }
@media (min-width:640px) { .app-phone-col-wrap { padding:24px 100px 12px; } }
.app-badge { position:absolute; z-index:20; width:84px; height:84px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; box-shadow:0 12px 36px rgba(0,0,0,0.22),0 4px 12px rgba(0,0,0,0.10),inset 0 1px 0 rgba(255,255,255,1); }
.app-badge-ring { position:absolute; inset:-5px; border-radius:50%; animation:bdgPulse 2.4s ease-out infinite; pointer-events:none; }
.app-badge-1 { top:14%; left:-52px; animation:orbit1 4s ease-in-out infinite; }
.app-badge-2 { bottom:20%; right:-52px; animation:orbit2 4.6s ease-in-out .5s infinite; }
.app-badge-3 { top:55%; left:-48px; animation:orbit3 5.2s ease-in-out 1s infinite; }
@media (max-width:479px) { .app-badge-1 { left:-10px; } .app-badge-2 { right:-10px; } .app-badge-3 { left:-10px; } }
.app-store-btn { display:inline-flex; align-items:center; gap:11px; background:#fff; border-radius:16px; padding:12px 22px; text-decoration:none; transition:all .28s cubic-bezier(.34,1.3,.64,1); box-shadow:0 6px 26px rgba(0,0,0,.28); }
.app-store-btn:hover,.app-store-btn:active { transform:scale(1.06); box-shadow:0 12px 38px rgba(0,0,0,.42); }
@keyframes starPop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }
.app-star { display:inline-block; animation:starPop 1.8s ease-in-out infinite; }
.app-star:nth-child(2){animation-delay:.1s} .app-star:nth-child(3){animation-delay:.2s} .app-star:nth-child(4){animation-delay:.3s} .app-star:nth-child(5){animation-delay:.4s}
.app-chip { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); font-size:11px; font-weight:600; padding:5px 12px; border-radius:9999px; }

/* ======================================================
   SECTION 3 — CATEGORIES PAGE (.page-categories)
====================================================== */
body.page-categories { background:#f4f4f6; color:#0f172a; overscroll-behavior-y:none; }
@media (min-width:1024px) { body.page-categories { padding-bottom:80px; } }

/* Categories nav — transparent over hero */
.page-categories #mainNav { background:transparent; }
@media (max-width:1023px) { .page-categories #mainNav:not(.scrolled) { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } }
.page-categories #mainNav:not(.scrolled) .nav-icon  { color:rgba(255,255,255,0.88); }
.page-categories #mainNav:not(.scrolled) .nav-icon:hover { background:rgba(255,255,255,0.12); }
.page-categories #mainNav.scrolled { background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.page-categories #mainNav.scrolled .nav-icon  { color:#4b5563; }
.page-categories #mainNav.scrolled .nav-icon:hover { background:#f3f4f6; color:#374151; }

/* Categories hero */
.hero-modern { position:relative; width:100%; height:65vh; min-height:500px; display:flex; align-items:center; justify-content:center; padding:80px 24px 60px; background:#0b1120; isolation:isolate; overflow:hidden; }
.hero-modern-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-modern::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(211,47,47,0.92) 0%,rgba(2,132,199,0.85) 100%); mix-blend-mode:multiply; z-index:-1; }
.hero-modern::after { content:""; position:absolute; bottom:-2px; left:0; width:100%; height:1px; background:#f4f4f6; z-index:5; }
.hero-circle { position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); z-index:0; animation:float 20s infinite linear; }
@keyframes float { 0%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(100px,50px) rotate(180deg);} 100%{transform:translate(0,0) rotate(360deg);} }
.hero-content { position:relative; z-index:10; width:100%; color:white; text-align:center; animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.hero-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(3rem,12vw,5rem); line-height:0.9; letter-spacing:-0.04em; margin-bottom:1rem; text-transform:uppercase; font-style:italic; }
.hero-subtitle { font-size:1rem; font-weight:500; color:rgba(255,255,255,0.8); max-width:300px; margin:0 auto 2rem; line-height:1.5; }
@keyframes flame-pulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px rgba(239,68,68,0.4));} 50%{transform:scale(1.15) translateY(-1px);filter:drop-shadow(0 0 5px rgba(239,68,68,0.6));} }
.animate-flame { animation:flame-pulse 1.5s infinite ease-in-out; }

/* Categories search/filter */
#categoryContainer { position:relative; z-index:30; }
.category-card { scroll-margin-top:180px; }
@media (max-width:1023px) { .category-card { scroll-margin-top:140px; } }
#noResults { scroll-margin-top:140px; }
#trending-container { overflow:hidden; height:1.25rem; display:flex; align-items:center; }
#trending-text { transition:all 0.4s cubic-bezier(0.16,1,0.3,1); transform:translateX(0); opacity:1; display:inline-block; }
.slide-out { transform:translateX(100%) !important; opacity:0 !important; }
.slide-in { transform:translateX(-100%) !important; opacity:0 !important; transition:none !important; }
#categorySearchInput:focus { border:2px solid #e01414 !important; outline:none !important; box-shadow:none !important; }
#mobileSearchInput:focus { border:none !important; outline:none !important; box-shadow:none !important; }
.cat-pill.active { background-color:#D32F2F !important; border-color:#D32F2F !important; color:white !important; }

/* ======================================================
   SECTION 4 — CITIES PAGE (.page-cities)
====================================================== */
body.page-cities { font-family:"Inter",system-ui,sans-serif; background:#f4f4f6; color:#1e293b; }

/* Cities nav — transparent over hero */
.page-cities #mainNav { background:transparent; }
.page-cities #mainNav.scrolled { background:#ffffff; box-shadow:0 10px 30px rgba(211,47,47,0.1); }
@media (min-width:1024px) { .page-cities #mainNav.scrolled { border-bottom:2px solid #D32F2F; } }
.page-cities #mainNav:not(.scrolled) .nav-icon  { color:rgba(255,255,255,0.88); }
.page-cities #mainNav:not(.scrolled) .nav-icon:hover { background:rgba(255,255,255,0.12); }
.page-cities #mainNav.scrolled .nav-icon  { color:#4b5563; }
.page-cities #mainNav.scrolled .nav-icon:hover { background:#f3f4f6; color:#374151; }

/* Cities hero */
.hero-cities { height:60vh; min-height:480px; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:80px 24px 60px; }
.hero-cities::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(211,47,47,0.92) 0%,rgba(2,132,199,0.85) 100%); mix-blend-mode:multiply; z-index:1; }
.hero-cities::after { content:""; position:absolute; bottom:-2px; left:0; width:100%; height:1px; background:#f4f4f6; z-index:5; }

/* Cities cards/grid */
.touch-card { transition:all 0.3s cubic-bezier(0.4,0,0.2,1); }
.touch-card:active { transform:scale(0.95); }
.state-card { background:transparent; padding:0; box-shadow:none; border:none; }
.cities-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.city-item-link { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px; border-radius:24px; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); background:#fff; border:1px solid #f1f5f9; position:relative; overflow:hidden; box-shadow:0 4px 20px -5px rgba(211,47,47,0.05); }
.city-item-link:active { transform:scale(0.96); }
.city-item-link:hover { border-color:#0ea5e950; box-shadow:0 10px 25px -10px rgba(14,165,233,0.15); }
.city-img-thumb { width:100%; height:110px; border-radius:18px; object-fit:cover; }
.city-card-body { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.city-card-body,
.city-card-media { width:100%; }
.city-card-media { border-radius:18px; overflow:hidden; position:relative; }
.tier-badge { position:absolute; top:14px; left:14px; background:rgba(14,165,233,0.85); color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; letter-spacing:0.08em; box-shadow:0 6px 20px rgba(14,165,233,0.45); }
.mobile-spot-card { min-width:220px; border-radius:28px; background:#fff; color:#0f172a; overflow:hidden; box-shadow:0 14px 30px rgba(15,23,42,0.12); border:1px solid rgba(15,23,42,0.1); }
.mobile-spot-card img { width:100%; height:140px; object-fit:cover; }
.mobile-spot-card-body { padding:1rem; }
.verified-badge { position:absolute; top:20px; right:20px; background:rgba(211,47,47,0.85); backdrop-filter:blur(8px); color:#fff; font-size:7px; font-weight:900; padding:4px 8px; border-radius:8px; text-transform:uppercase; border:1px solid rgba(255,255,255,0.2); box-shadow:0 4px 10px rgba(0,0,0,0.1); }
.state-label { background:linear-gradient(135deg,#D32F2F 0%,#881337 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rating-chip { background:#fffbeb; border:1px solid #fde68a; padding:2px 6px; border-radius:6px; }
.count-badge { color:#0ea5e9; background:#f0f9ff; padding:2px 6px; border-radius:6px; }
.insight-card { transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
.insight-card:hover { transform:translateY(-5px); }
@keyframes count-up { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.animate-count { animation:count-up 0.8s ease-out forwards; }
@keyframes float-slow { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-15px) rotate(5deg);} }
@keyframes rotate-slow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes pulse-soft { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.7;transform:scale(0.95);} }
.animate-float-slow { animation:float-slow 6s ease-in-out infinite; }
.animate-rotate-slow { animation:rotate-slow 12s linear infinite; }
.animate-pulse-soft { animation:pulse-soft 3s ease-in-out infinite; }
.city-list-container { position:relative; z-index:30; }
.city-list-container .city-card { scroll-margin-top:180px; }
@media (max-width:1023px) { .city-list-container .city-card { scroll-margin-top:140px; } #stateStickyTabs { top:118px; } }
#citySearchInput:focus { border:none !important; outline:none !important; box-shadow:none !important; }
.state-pill.active { background-color:#D32F2F !important; border-color:#D32F2F !important; color:white !important; }

/* Cities state filter bar: transparent initially, glass only after sticky threshold */
#stateStickyTabs { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; transition:all 0.3s ease; }
#stateStickyTabs.scrolled-past { background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:#e2e8f0; box-shadow:0 10px 20px -16px rgba(15,23,42,0.3); }

/* ======================================================
   SECTION 5 — LISTING PAGE (.page-listing)
====================================================== */
body.page-listing { font-family:"Inter",system-ui,sans-serif; background:#f4f4f6 !important; color:#1e293b; }
.page-listing .glass-orb { display:none !important; }
footer { display:block; }

/* Listing nav */
.page-listing #mainNav { background:transparent; }
.page-listing #mainNav.scrolled { background:#ffffff; border-bottom:none; box-shadow:0 10px 30px rgba(0,0,0,0.05); }
@media (max-width:1023px) { .page-listing #mainNav:not(.scrolled) { background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } }
.page-listing #mainNav:not(.scrolled) .nav-icon { color:#4b5563; }
.page-listing #mainNav:not(.scrolled) .nav-icon:hover { background:#f3f4f6; color:#374151; }

/* Listing drawer — positioned relative, not fixed */
.page-listing #mobileDrawer { 
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #fff;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1);
    z-index: 100;
}
.page-listing #mobileDrawer.drawer-open { 
    max-height: calc(100vh - 56px);
    opacity: 1;
    visibility: visible;
}
.page-listing .drawer-item { 
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(-10px);
}
.page-listing #mobileDrawer.drawer-open .drawer-item {
    opacity: 1;
    transform: translateY(0);
}
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(1) { transition-delay: 0.05s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(2) { transition-delay: 0.1s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(3) { transition-delay: 0.15s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(4) { transition-delay: 0.2s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(5) { transition-delay: 0.25s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(6) { transition-delay: 0.3s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(7) { transition-delay: 0.35s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(8) { transition-delay: 0.4s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(9) { transition-delay: 0.45s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(10) { transition-delay: 0.5s; }
.page-listing #mobileDrawer.drawer-open .drawer-item:nth-child(11) { transition-delay: 0.55s; }

/* Listing cards */
.listing-card { background:#fff; border-radius:28px; border:1px solid #f1f5f9; overflow:hidden; transition:all 0.4s cubic-bezier(0.23,1,0.32,1); position:relative; box-shadow:0 4px 15px -5px rgba(0,0,0,0.05); }
.listing-card:hover { transform:translateY(-4px); box-shadow:0 20px 40px -15px rgba(211,47,47,0.1); border-color:#fca5a5; }
.card-container { background:#ffffff; border-radius:28px; box-shadow:0 10px 30px rgba(0,0,0,0.05); overflow:hidden; margin-bottom:24px; width:100%; max-width:400px; margin-left:auto; margin-right:auto; font-family:'Inter',sans-serif; border:1px solid #f1f5f9; }
.card-header { position:relative; padding:12px; background:linear-gradient(to bottom,#fff5f5,#ffffff); }
.header-top-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.category-tag { background:#D32F2F; color:white; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:700; }
.verified-header-badge { background:#2ecc71; color:white; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:4px; }
.call-bar { background:#1e60d2; color:white; padding:8px 18px; border-radius:100px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; margin-bottom:12px; box-shadow:0 4px 12px rgba(30,96,210,0.2); border:2px solid rgba(255,255,255,0.1); }
.inner-profile-card { background:#fff; border:1px solid #fee2e2; border-radius:16px; padding:0; display:flex; flex-direction:column; gap:15px; align-items:stretch; box-shadow:0 8px 15px rgba(211,47,47,0.05); position:relative; overflow:hidden; }
.profile-img-wrap { position:relative; width:100%; height:250px; flex-shrink:0; z-index:2; }
.chat-indicator { position:absolute; top:245px; right:15px; width:44px; height:44px; background:#1e60d2; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 4px 15px rgba(30,96,210,0.3); border:3px solid #fff; z-index:10; }
@media (max-width:480px) { .card-header { padding:12px 12px 6px; } .call-bar { margin:0 5px 12px; padding:6px 14px; font-size:12px; } .inner-profile-card { padding:0; gap:0; } .chat-indicator { top:175px; right:12px; width:40px; height:40px; font-size:18px; } .profile-img-wrap { height:200px; } .profile-details { padding:15px; } .profile-details .city-category-pills { display:flex !important; flex-wrap:wrap; gap:6px; margin-top:10px; margin-bottom:10px; } .profile-details > .flex.items-center.gap-4 { display:none !important; } }
.profile-img-wrap img { width:100%; height:100%; border-radius:0; object-fit:cover; }
.profile-verified-icon { position:absolute; top:-6px; right:-6px; background:#D32F2F; color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; border:2px solid white; }
.verified-label-row { display:flex; align-items:center; gap:2px; margin-bottom:4px; }
.verified-badge-img { height:16px; width:auto; object-fit:contain; }
.prime-badge-img { height:16px; width:auto; object-fit:contain; }
.profile-name-small { font-size:18px; font-weight:800; color:#1e293b; line-height:1.2; }
.location-row-small { display:flex; align-items:center; gap:5px; color:#64748b; font-size:13px; margin-top:6px; font-weight:500; }
.card-body-content { padding:24px; }
.body-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.main-title { font-size:20px; font-weight:800; color:#1e293b; line-height:1.3; flex:1; }
.rating-badge-new { color:#d97706; display:flex; align-items:center; gap:5px; font-weight:700; font-size:14px; }
.review-count-new { color:#64748b; font-size:12px; font-weight:600; }
.location-meta { display:flex; align-items:center; gap:15px; color:#64748b; font-size:14px; margin-bottom:20px; font-weight:500; }
.city-category-pills { display:none !important; }
.city-pill, .category-pill-mobile { background:#f0f9ff; color:#0284c7; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; border:1px solid #e0f2fe; display:inline-flex; align-items:center; gap:6px; margin-top:8px; margin-right:6px; }
.category-pill-mobile { background:#fff1f2; color:#d32f2f; border-color:#ffe4e6; }
.description-text { color:#475569; font-size:14px; line-height:1.6; margin-bottom:20px; }
.tags-container { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.tag-item { background:#f0f9ff; color:#0284c7; padding:8px 16px; border-radius:20px; font-size:12px; font-weight:700; border:1px solid #e0f2fe; }
.tag-more { background:#fff1f2; color:#D32F2F; padding:8px 16px; border-radius:20px; font-size:12px; font-weight:700; border:1px solid #ffe4e6; }
.action-grid { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; }
.action-btn-new { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:9999px; font-size:11px; font-weight:800; text-decoration:none; transition:all 0.2s ease; text-align:center; flex-shrink:0; }
.action-btn-new i { font-size:18px; }
.action-btn-new:active { transform:scale(0.95); }
.btn-call-new { background:#f0fdf4; color:#16a34a; border:1px solid #dcfce7; }
.btn-whatsapp-new { background:#f0fdf4; color:#16a34a; border:1px solid #dcfce7; }
.btn-website-new { background:#eff6ff; color:#2563eb; border:1px solid #dbeafe; }
.book-appointment-btn { background:linear-gradient(135deg,#D32F2F,#9f1239); color:white; width:100%; padding:16px; border-radius:14px; border:none; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 10px 20px rgba(211,47,47,0.2); transition:all 0.2s ease; }
.book-appointment-btn:active { transform:scale(0.98); opacity:0.9; }
.btn-view-profile-glass { background:linear-gradient(135deg,rgba(30,96,210,0.8),rgba(12,74,110,0.9)); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.2); color:#ffffff; width:100%; padding:12px; border-radius:14px; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); position:relative; overflow:hidden; box-shadow:0 8px 25px -10px rgba(30,96,210,0.4); }
@media (max-width:480px) { .btn-view-profile-glass { padding:10px; font-size:13px; border-radius:12px; } }
.btn-view-profile-glass::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); transition:0.5s; }
.btn-view-profile-glass:hover { transform:translateY(-2px); box-shadow:0 15px 35px -10px rgba(30,96,210,0.6); }
.btn-view-profile-glass:hover::before { left:100%; }
.btn-view-profile-glass .glow-effect { position:absolute; width:25px; height:100%; background:rgba(255,255,255,0.4); filter:blur(25px); transform:skewX(-30deg); left:-60px; animation:glow-move 4s infinite; }
@keyframes glow-move { 0%{left:-50px;} 30%{left:120%;} 100%{left:120%;} }
.slider-wrapper { position:relative; width:100%; height:250px; overflow:hidden; flex-shrink:0; background:#f1f5f9; }
.slider-inner { display:flex; height:100%; transition:transform 0.5s ease; }
.slider-inner img { width:100%; height:250px; object-fit:cover; flex-shrink:0; }
@media (max-width:480px) { .page-listing .card-container { max-width:100%; border-radius:16px; border-left:1px solid #f1f5f9; border-right:1px solid #f1f5f9; } .card-body-content { padding:16px; } .slider-wrapper { height:200px; } .slider-inner img { height:200px; } .profile-details { padding:12px 16px; } .profile-name-small { font-size:16px; } .main-title { font-size:18px; } .action-grid { flex-direction:row !important; gap:20px; justify-content:center; } .action-btn-new { width:52px; height:52px; font-size:11px; border-radius:9999px; } .action-btn-new i { font-size:20px; } }
.image-scroll-container::-webkit-scrollbar { display:none; }
.image-scroll-container { -ms-overflow-style:none; scrollbar-width:none; height:220px !important; }
.image-nav-btn { position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; color:#1e293b; font-size:10px; z-index:10; box-shadow:0 4px 10px rgba(0,0,0,0.1); backdrop-filter:blur(4px); border:none; opacity:0.8; }
.image-nav-btn:active { transform:translateY(-50%) scale(0.9); }
.btn-prev { left:12px; }
.btn-next { right:12px; }
.premium-tag { background:linear-gradient(135deg,#D32F2F 0%,#881337 100%); color:#fff; padding:4px 10px; border-radius:10px; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:4px; box-shadow:0 4px 12px rgba(211,47,47,0.2); }
.cat-pill { background:#fffbeb; color:#b45309; padding:6px 14px; border-radius:14px; font-size:11px; font-weight:700; border:1px solid #fde68a; }
.action-button { position:relative; overflow:hidden; transition:all 0.3s ease; }
.action-button:hover::after { animation:shine 1.2s infinite; }
.stats-blur { background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border:1px solid #fecdd3; }
.glass-orb { position:fixed; border-radius:50%; filter:blur(80px); z-index:-1; opacity:0.12; pointer-events:none; }

/* ======================================================
   SECTION 6 — PROFILE PAGE (.page-profile)
====================================================== */
body.page-profile { font-family:"Inter",system-ui,sans-serif; background:#f4f4f6; color:#1e293b; }

/* Profile nav */
.page-profile #mainNav { background:transparent; border-bottom-color:transparent; box-shadow:none; }
.page-profile #mainNav.scrolled { background:#ffffff; border-bottom:1px solid #e2e8f0; box-shadow:0 8px 24px rgba(0,0,0,0.08); }
/* Keep profile nav content readable before sticky */
.page-profile #mainNav .nav-link { color:#374151; }
.page-profile #mainNav .nav-link:hover { color:#e01414; background:rgba(224,20,20,0.06); }
.page-profile #mainNav .nav-icon { color:#4b5563; }
.page-profile #mainNav .nav-icon:hover { background:#f3f4f6; color:#374151; }
.page-profile #mainNav .nav-btn-outline { color:#bc0d0d; border-color:rgba(224,20,20,0.3); }
.page-profile #mainNav .nav-btn-solid { background:#e01414; color:#fff; border:none; box-shadow:0 2px 10px rgba(224,20,20,0.3); }

/* Profile drawer — absolute */
.page-profile #mobileDrawer { position:absolute; top:100%; left:0; right:0; max-height:0; opacity:0; visibility:hidden; overflow:hidden; transition:all 0.4s ease; z-index:40; border-bottom:1px solid #eee; transform:none; box-shadow:none; border-top:none; }
.page-profile #mobileDrawer.drawer-open { max-height:600px; opacity:1; visibility:visible; }

.profile-container { max-width:500px; margin:0 auto; padding:0 24px; transition: max-width 0.3s ease; }

@media (min-width: 1024px) {
    .profile-container {
        max-width: 1280px;
        padding: 0 40px;
    }
    .profile-layout-wrapper {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 40px;
        align-items: start;
        margin-top: 40px;
    }
    .sidebar-sticky-wrapper {
        position: sticky;
        top: 100px;
    }
    .business-details-header {
        padding: 40px;
    }
}

.page-profile .slider-wrapper { position:relative; width:100%; height:260px; overflow:hidden; border-radius:32px; background:#f1f5f9; }

@media (min-width: 1024px) {
    .page-profile .slider-wrapper {
        height: 480px;
    }
}

.slider-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:15; width:36px; height:36px; background:rgba(255,255,255,0.2); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:14px; transition:all 0.3s ease; }
.slider-nav-btn:active { transform:translateY(-50%) scale(0.9); }
.slider-nav-btn.prev { left:12px; }
.slider-nav-btn.next { right:12px; }
.slider-overlay-gradient { position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 100%); z-index:5; pointer-events:none; }
.slider-counter { position:absolute; bottom:50px; right:16px; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); color:#fff; padding:4px 10px; border-radius:12px; font-size:10px; font-weight:700; z-index:10; border:1px solid rgba(255,255,255,0.1); }
.slider-overlay-actions { position:absolute; bottom:50px; left:16px; display:flex; gap:8px; z-index:15; }
.slider-action-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(8px); cursor:pointer; transition:all 0.3s ease; text-decoration:none; color:white; }
.slider-action-video { background:rgba(224,20,20,0.4); }
.slider-action-360 { background:rgba(59,130,246,0.4); }
.page-profile .slider-inner { display:flex; transition:transform 0.6s cubic-bezier(0.23,1,0.32,1); height:100%; }
.page-profile .slider-inner img { width:100%; height:100%; object-fit:cover; flex-shrink:0; }
.page-profile .slider-inner iframe { width:100%; height:100%; flex-shrink:0; }
.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10; }
.dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.4); transition:all 0.3s ease; }
.dot.active { background:#fff; width:16px; border-radius:10px; }
.page-profile .action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.action-item { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
.action-circle { width:52px; height:52px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:20px; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); background:white; border:1px solid #f1f5f9; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
.action-item:active .action-circle { transform:scale(0.9); background:#f8fafc; }
.action-label { font-size:10px; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; }
.btn-main-action { background:linear-gradient(135deg,#0ea5e9,#0284c7); color:white !important; border:none !important; }
.btn-share-action { color:#6366f1; }
.btn-review-action { color:#f59e0b; }
.btn-comment-action { color:#10b981; }
.btn-website-action { color:#3b82f6; }
.info-card { background:#fff; border-radius:28px; padding:20px; border:1px solid #f1f5f9; box-shadow:0 4px 15px rgba(0,0,0,0.03); margin-top:-32px; position:relative; z-index:20; }

@media (min-width: 1024px) {
    .info-card {
        padding: 40px;
        margin-top: -60px;
        margin-left: 40px;
        margin-right: 40px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }
}

.page-profile .verified-badge { display:flex; align-items:center; gap:2px; background:transparent; padding:0; border-radius:0; width:fit-content; border:none; box-shadow:none; backdrop-filter:none; }
.page-profile .verified-badge-img { height:18px; width:auto; object-fit:contain; }
.page-profile .prime-badge-img { height:18px; width:auto; object-fit:contain; }
.section-title { font-size:16px; font-weight:800; color:#1e293b; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.section-title i { color:#D32F2F; }
.service-tag { background:#f1f5f9; color:#475569; padding:6px 14px; border-radius:12px; font-size:13px; font-weight:500; }
.sidebar-card { background:#fff; border-radius:24px; padding:24px; border:1px solid #f1f5f9; box-shadow:0 4px 15px rgba(0,0,0,0.03); }
.highlight-card { background:#fff; border-radius:20px; padding:16px; border:1px solid #f1f5f9; display:flex; align-items:center; gap:12px; transition:all 0.2s ease; }
.highlight-card:active { transform:scale(0.98); background:#f8fafc; }
.video-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:20px; background:#000; margin-bottom:12px; }
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.social-link-row { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.social-link-row::-webkit-scrollbar { display:none; }
.social-item { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; min-width:60px; }
.social-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; transition:all 0.2s ease; }
.social-label { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; }
.pricing-tag { background:#fdf2f8; color:#be185d; padding:4px 12px; border-radius:8px; font-size:12px; font-weight:700; }
.contact-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border-radius:16px; font-weight:700; transition:all 0.2s ease; }
.btn-call { background:#fee2e2; color:#D32F2F; }
.btn-whatsapp { background:#dcfce7; color:#166534; }
.btn-website { background:#e0f2fe; color:#0369a1; }
.sticky-actions { position:fixed; right:20px; bottom:100px; display:flex; flex-direction:column; gap:8px; z-index:40; }
.sticky-actions a { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,0.25); transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); position:relative; overflow:hidden; border:2px solid rgba(255,255,255,0.25); padding:0; }
.sticky-actions a.btn-call { background:linear-gradient(135deg,#e01414,#b91c1c); color:white; }
.sticky-actions a.btn-whatsapp { background:linear-gradient(135deg,#25D366,#128C7E); color:white; }
.sticky-actions a:active { transform:scale(0.85) translateY(5px); }
.sticky-actions a i { display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.sticky-actions a.btn-call i { animation:iconShake 3s ease-in-out infinite; }
.sticky-actions a.btn-whatsapp i { animation:iconPulse 2s ease-in-out infinite; }
@keyframes iconShake { 0%,70%,100%{transform:rotate(0deg) scale(1);} 75%{transform:rotate(15deg) scale(1.1);} 80%{transform:rotate(-15deg) scale(1.1);} 85%{transform:rotate(15deg) scale(1.1);} 90%{transform:rotate(-15deg) scale(1.1);} 95%{transform:rotate(0deg) scale(1.1);} }
@keyframes iconPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
@media (max-width:1023px) { .page-profile #scrollToTopBtn { right:16px !important; left:auto !important; bottom:74px !important; } }
@media (max-width:640px) { .sticky-actions { bottom:130px; right:16px; gap:12px; } .sticky-actions a { width:48px; height:48px; font-size:18px; } .breadcrumb-nav { padding:4px 16px; font-size:10px; gap:3px; } .info-card { margin-bottom:24px; } .page-profile .slider-wrapper { margin-top:20px; } }
.gallery-item { aspect-ratio:1/1; border-radius:12px; overflow:hidden; cursor:pointer; position:relative; flex-shrink:0; transition:all 0.3s ease; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.gallery-item::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(30,41,59,0) 0%,rgba(30,41,59,0.2) 100%); opacity:0; transition:opacity 0.3s ease; }
.gallery-item:active img { transform:scale(1.08); }
.gallery-item:active::after { opacity:1; }
#galleryModal { position:fixed; inset:0; background:rgba(0,0,0,0.98); z-index:100; display:none; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:fadeIn 0.3s ease; }
#galleryModal.show { display:flex; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal-close { position:absolute; top:16px; right:16px; color:white; font-size:28px; cursor:pointer; z-index:110; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); transition:all 0.2s ease; }
.modal-close:active { background:rgba(255,255,255,0.15); transform:scale(0.9); }
.modal-image { max-width:100%; max-height:75vh; object-fit:contain; border-radius:16px; animation:slideIn 0.3s ease; }
@keyframes slideIn { from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);} }
.modal-controls { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:110; }
.modal-btn { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all 0.3s ease; backdrop-filter:blur(8px); }
.modal-btn:active { background:rgba(255,255,255,0.25); transform:scale(0.9); }
.gallery-counter { position:absolute; bottom:20px; left:20px; color:white; background:rgba(0,0,0,0.4); padding:8px 16px; border-radius:99px; font-size:12px; font-weight:700; backdrop-filter:blur(8px); z-index:110; }
.tag-link { display:inline-block; padding:10px 16px; background:#fff; border:1.5px solid #e2e8f0; border-radius:99px; font-size:13px; font-weight:500; color:#475569; margin-right:8px; margin-bottom:10px; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 2px 8px rgba(0,0,0,0.04); cursor:pointer; }
.featured-slider { display:flex; gap:16px; overflow-x:auto; padding:8px 4px; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; -webkit-overflow-scrolling: touch; }
.featured-slider::-webkit-scrollbar { display:none; }

.featured-grid {
    display: block;
}

@media (min-width: 1024px) {
    .featured-grid {
        position: relative;
    }
}

.featured-card { 
    min-width: 200px; 
    flex: 0 0 auto; 
    background:#fff; 
    border-radius:16px; 
    border:1px solid #f1f5f9; 
    overflow:visible; 
    scroll-snap-align:start; 
    box-shadow:0 6px 15px rgba(0,0,0,0.06); 
    transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
    cursor:pointer; 
    position: relative; 
}

@media (min-width: 1024px) {
    .featured-card { 
        min-width: 280px;
        flex: 0 0 auto; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }
    .featured-card:hover { 
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0,0,0,0.12);
        border-color: #e0141433;
    }
}

.featured-card:active { transform:translateY(-4px); }
.featured-img-wrap { height:130px; position:relative; overflow:hidden; border-radius:16px 16px 0 0; }

@media (min-width: 1024px) {
    .featured-img-wrap { height: 180px; }
}

.featured-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.featured-badge { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#ffffff,#f0f9ff); padding:4px 12px; border-radius:99px; font-size:11px; font-weight:700; color:#0369a1; box-shadow:0 3px 12px rgba(0,0,0,0.15); display:flex; align-items:center; gap:4px; border:1px solid rgba(255,255,255,0.8); }
.featured-content { padding:14px; text-align:center; }

@media (min-width: 1024px) {
    .featured-content { padding: 20px; }
}

.featured-name { font-size:13px; font-weight:700; color:#D32F2F; margin-bottom:4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

@media (min-width: 1024px) {
    .featured-name { font-size: 15px; margin-bottom: 8px; }
}

.featured-location { font-size:11px; font-weight:600; color:#166534; margin-bottom:12px; }

@media (min-width: 1024px) {
    .featured-location { font-size: 13px; margin-bottom: 16px; }
}

.featured-btn { width:100%; padding:10px; background:linear-gradient(135deg,#0ea5e9,#0284c7); color:white; border:none; border-radius:12px; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(14, 165, 233, 0.3); }

@media (min-width: 1024px) {
    .featured-btn { padding: 12px; font-size: 14px; }
}

.featured-btn:active { transform:scale(0.95); }

/* Slider Controls */
.slider-controls {
    display: none;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    position: absolute;
    top: -65px;
    right: 0;
}

@media (min-width: 1024px) {
    .slider-controls {
        display: flex;
    }
}

.slider-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.slider-arrow:hover {
    background: #f8fafc;
    color: #e01414;
    border-color: #e0141433;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.slider-arrow:active {
    transform: translateY(0);
}
.gallery-title { font-size:16px; font-weight:800; color:#1e293b; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

@media (min-width: 1024px) {
    .gallery-title { font-size: 24px; margin-bottom: 24px; }
}
.business-details-header { background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%); padding:20px 24px 24px; border-bottom:1px solid #e2e8f0; position:relative; overflow:hidden; border-radius:24px; }
.breadcrumb-nav { display:flex; align-items:center; gap:6px; padding:8px 16px; padding-top:72px; margin-bottom:0; font-size:12px; font-weight:600; color:#64748b; overflow-x:auto; scrollbar-width:none; position:relative; z-index:2; width:100%; box-sizing:border-box; }

@media (min-width: 1024px) {
    .breadcrumb-nav {
        max-width: 80rem; /* 7xl equivalent (1280px) */
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem; /* lg:px-8 equivalent (32px) */
        padding-right: 2rem;
    }
}
.breadcrumb-nav::-webkit-scrollbar { display:none; }
.breadcrumb-item { white-space:nowrap; display:flex; align-items:center; gap:6px; }
.breadcrumb-item.active { color:#e01414; font-weight:700; }
.breadcrumb-separator { color:#cbd5e1; margin:0 2px; }
.details-title { font-size:28px; font-weight:900; color:#1e293b; margin-bottom:12px; line-height:1.2; position:relative; z-index:2; letter-spacing:-0.5px; }
.details-description { font-size:14px; color:#475569; line-height:1.6; position:relative; z-index:2; text-align:justify; }
.details-highlight { display:inline-block; background:linear-gradient(135deg,rgba(224,20,20,0.1),rgba(239,68,68,0.05)); padding:2px 6px; border-radius:4px; font-weight:600; color:#e01414; }
.details-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; position:relative; z-index:2; }
.meta-item { display:flex; align-items:center; gap:10px; padding:10px; background:white; border-radius:12px; border:1px solid #e2e8f0; transition:all 0.3s ease; }
.meta-item:active { transform:scale(0.98); background:#f8fafc; }
.meta-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:14px; flex-shrink:0; }
.meta-icon.category { background:#fef3c7; color:#d97706; }
.meta-icon.city { background:#dbeafe; color:#2563eb; }
.meta-icon.experience { background:#dcfce7; color:#16a34a; }
.meta-icon.verification { background:#dcfce7; color:#16a34a; }
.meta-info { flex:1; min-width:0; }
.meta-label { font-size:9px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.meta-value { font-size:12px; font-weight:700; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ======================================================
   SECTION 7 — CITYWISE VERIFIED (.page-citywise)
====================================================== */
:root { --primary:#D32F2F; --primary-dark:#B71C1C; --primary-light:#FFEBEE; --secondary:#FFFFFF; --blue-accent:#1976D2; --yellow-accent:#FBC02D; }
body.page-citywise { font-family:'Plus Jakarta Sans',sans-serif; background-color:#f4f4f6; touch-action:pan-y; overscroll-behavior-y:contain; }

/* Citywise nav — transparent mobile */
.page-citywise #mainNav { background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,0.05); transition:all 0.3s ease; }
@media (max-width:1023px) { .page-citywise #mainNav:not(.scrolled) { background:transparent !important; } }
@media (max-width:1023px) {
   .page-citywise #mainNav:not(.scrolled) .nav-icon { color:#0f172a; }
   .page-citywise #mainNav:not(.scrolled) .nav-icon:hover { background:rgba(15,23,42,0.1); }
}

/* Citywise drawer — fixed */
.page-citywise #mobileDrawer { position:fixed; top:58px; left:0; right:0; z-index:45; transform:translateY(-10px) scaleY(0.97); }
.page-citywise #mobileDrawer.drawer-open { opacity:1; transform:translateY(0) scaleY(1); pointer-events:all; }
.page-citywise #mobileDrawer a:not(.nav-cta):not(.bg-red-600), .page-citywise #mobileDrawer button:not(.nav-cta):not(.bg-red-600) { color:#1f2937; }
.page-citywise #mobileDrawer a:not(.nav-cta):not(.bg-red-600):hover, .page-citywise #mobileDrawer button:not(.nav-cta):not(.bg-red-600):hover { color:#e01414; background:rgba(224,20,20,0.06); }
.page-citywise .drawer-item { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; font-weight:600; font-size:14px; opacity:0; transform:translateX(-14px); }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(1) { opacity:1; transform:translateX(0); transition-delay:.04s; }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(2) { opacity:1; transform:translateX(0); transition-delay:.09s; }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(3) { opacity:1; transform:translateX(0); transition-delay:.14s; }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(4) { opacity:1; transform:translateX(0); transition-delay:.19s; }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(5) { opacity:1; transform:translateX(0); transition-delay:.24s; }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(6) { opacity:1; transform:translateX(0); transition-delay:.27s; }
.page-citywise #mobileDrawer.drawer-open .drawer-item:nth-child(7) { opacity:1; transform:translateX(0); transition-delay:.30s; }
.page-citywise .verified-badge {
   position: static;
   top: auto;
   right: auto;
   left: auto;
   background: transparent !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   border: 0 !important;
   box-shadow: none !important;
   padding: 0 !important;
}

.glass-nav { background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,0.05); transition:all 0.3s ease; }
.nav-scrolled { padding:8px 16px !important; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.sticky-filter { position:sticky; top:56px; z-index:40; }
@media (max-width:1023px) { .sticky-filter { background:transparent; transition:background 0.2s ease, box-shadow 0.2s ease; } }
@media (max-width:1023px) { .sticky-filter.is-stuck { background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,0.06); } }
.card-majestic { background:#ffffff; border-radius:20px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.07); transition:transform 0.2s ease, box-shadow 0.2s ease; border:1px solid #f1f5f9; position:relative; contain:layout style; }
.card-majestic::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent); }
.card-image-container { position:relative; background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%); overflow:hidden; height:130px; }
.card-image-container img { width:100%; height:100%; object-fit:cover; }
.card-majestic:active { transform:scale(0.97); }
.card-pattern-1 { border-top:3px solid var(--primary); }
.card-pattern-2 { border-top:3px solid var(--blue-accent); }
.card-pattern-3 { border-top:3px solid var(--yellow-accent); }
.verified-badge { display:flex; align-items:center; justify-content:center; gap:1px; background:transparent; padding:0; border-radius:0; width:100%; margin:4px auto 0; }
.verified-badge-img { height:12px; width:auto; object-fit:contain; }
.prime-badge-img { height:12px; width:auto; object-fit:contain; }
.star-rating { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.star-rating .stars { display:flex; gap:2px; }
.star-rating .star { width:12px; height:12px; font-size:12px; line-height:1; }
.star-rating .rating-value { font-size:11px; font-weight:700; color:#1e293b; margin-left:2px; }
.contact-btn { border:none; box-shadow:0 2px 6px rgba(0,0,0,0.12); position:relative; }
.contact-btn:hover { box-shadow:0 4px 12px rgba(0,0,0,0.16); }
.nearby-btn { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); box-shadow:0 8px 25px rgba(211,47,47,0.3); transition:all 0.3s ease; }
.nearby-btn:active { transform:scale(0.95); }
.loading-dots div { width:8px; height:8px; background:var(--primary); border-radius:50%; animation:bounce 0.5s infinite alternate; }
.loading-dots div:nth-child(2) { animation-delay:0.1s; }
.loading-dots div:nth-child(3) { animation-delay:0.2s; }
@keyframes bounce { to{transform:translateY(-10px);opacity:0.3;} }
.filter-loader-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.98); display:flex; align-items:center; justify-content:center; z-index:999; opacity:0; pointer-events:none; transition:none; }
.filter-loader-overlay.active { opacity:1; pointer-events:auto; }

/* ======================================================
   SECTION 8 — CATEGORYWISE VERIFIED (.page-categorywise)
====================================================== */
body.page-categorywise { font-family:'Plus Jakarta Sans',sans-serif; background-color:#f4f4f6; touch-action:pan-y; overscroll-behavior-y:contain; }

/* Categorywise nav */
.page-categorywise #mainNav { background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,0.05); transition:all 0.3s ease; }
@media (max-width:1023px) { .page-categorywise #mainNav:not(.scrolled) { background:transparent !important; } }
@media (max-width:1023px) {
   .page-categorywise #mainNav:not(.scrolled) .nav-icon { color:#0f172a; }
   .page-categorywise #mainNav:not(.scrolled) .nav-icon:hover { background:rgba(15,23,42,0.1); }
}

/* Categorywise drawer — fixed */
.page-categorywise #mobileDrawer { position:fixed; top:58px; left:0; right:0; z-index:45; transform:translateY(-10px) scaleY(0.97); }
.page-categorywise #mobileDrawer.drawer-open { opacity:1; transform:translateY(0) scaleY(1); pointer-events:all; }
.page-categorywise #mobileDrawer a:not(.nav-cta):not(.bg-red-600), .page-categorywise #mobileDrawer button:not(.nav-cta):not(.bg-red-600) { color:#1f2937; }
.page-categorywise #mobileDrawer a:not(.nav-cta):not(.bg-red-600):hover, .page-categorywise #mobileDrawer button:not(.nav-cta):not(.bg-red-600):hover { color:#e01414; background:rgba(224,20,20,0.06); }
.page-categorywise .drawer-item { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; font-weight:600; font-size:14px; opacity:0; transform:translateX(-14px); }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(1) { opacity:1; transform:translateX(0); transition-delay:.04s; }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(2) { opacity:1; transform:translateX(0); transition-delay:.09s; }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(3) { opacity:1; transform:translateX(0); transition-delay:.14s; }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(4) { opacity:1; transform:translateX(0); transition-delay:.19s; }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(5) { opacity:1; transform:translateX(0); transition-delay:.24s; }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(6) { opacity:1; transform:translateX(0); transition-delay:.27s; }
.page-categorywise #mobileDrawer.drawer-open .drawer-item:nth-child(7) { opacity:1; transform:translateX(0); transition-delay:.30s; }
.page-categorywise .verified-badge {
   position: static;
   top: auto;
   right: auto;
   left: auto;
   background: transparent !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   border: 0 !important;
   box-shadow: none !important;
   padding: 0 !important;
}
.page-categorywise .nearby-btn { background:linear-gradient(135deg,var(--blue-accent),#0D47A1); box-shadow:0 8px 25px rgba(25,118,210,0.3); }
.page-categorywise .cat-quick:active { background:#f3f4f6; border-color:#d1d5db; transform:scale(0.96); }

/* ======================================================
   STATIC PAGES — Dark hamburger icon (white hero bg)
====================================================== */
.page-about #mainNav:not(.scrolled) .nav-icon,
.page-transparency #mainNav:not(.scrolled) .nav-icon,
.page-faqs #mainNav:not(.scrolled) .nav-icon,
.page-blog #mainNav:not(.scrolled) .nav-icon,
.page-contact #mainNav:not(.scrolled) .nav-icon,
.page-list-business #mainNav:not(.scrolled) .nav-icon,
.page-update-business #mainNav:not(.scrolled) .nav-icon,
.page-terms #mainNav:not(.scrolled) .nav-icon,
.page-privacy #mainNav:not(.scrolled) .nav-icon,
.page-verify #mainNav:not(.scrolled) .nav-icon { color:#4b5563; }

.page-about #mainNav:not(.scrolled) .nav-icon:hover,
.page-transparency #mainNav:not(.scrolled) .nav-icon:hover,
.page-faqs #mainNav:not(.scrolled) .nav-icon:hover,
.page-blog #mainNav:not(.scrolled) .nav-icon:hover,
.page-contact #mainNav:not(.scrolled) .nav-icon:hover,
.page-list-business #mainNav:not(.scrolled) .nav-icon:hover,
.page-update-business #mainNav:not(.scrolled) .nav-icon:hover,
.page-terms #mainNav:not(.scrolled) .nav-icon:hover,
.page-privacy #mainNav:not(.scrolled) .nav-icon:hover,
.page-verify #mainNav:not(.scrolled) .nav-icon:hover { background:#f3f4f6; color:#374151; }

/* ======================================================
   SECTION 7 — LISTING PAGE DETAIL CARDS (.page-listing)
   Moved from listing.php inline <style>
====================================================== */

/* ===== Listing Card Mobile Redesign — index.php aesthetics ===== */

    /* Action button label — hidden on desktop, shown on mobile */
    .lcard-btn-label { display:none; font-size:11px; font-weight:700; line-height:1; margin-top:1px; }

    /* Since pill inside body */
    .lcard-since-pill {
        display:inline-flex; align-items:center; gap:5px;
        background:#f1f5f9; color:#475569;
        border:1px solid #e2e8f0;
        padding:4px 11px; border-radius:999px;
        font-size:11px; font-weight:700;
    }

    @media (max-width:640px) {

        /* ── Page ── */
        main.px-5 { padding-left:12px; padding-right:12px; }
        main { padding-top:6px !important; }

        /* ── Card container ── */
        .card-container {
            border-radius:28px;
            box-shadow:0 10px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.04);
            border:none; margin-bottom:24px; overflow:hidden; background:#fff;
        }

        /* ── Card header ── */
        .card-header { padding:0; background:none; }

        /* ── Inner profile card ── */
        .inner-profile-card {
            gap:0; border:none; border-radius:0; box-shadow:none;
            overflow:visible !important;
        }

        /* ── Image slider ── */
        .profile-img-wrap,
        .slider-wrapper { height:225px !important; }
        .slider-inner img { height:225px !important; }

        /* Gradient overlay at image bottom */
        .slider-wrapper::after {
            content:'';
            position:absolute; bottom:0; left:0; right:0; height:100px;
            background:linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
            pointer-events:none; z-index:4;
        }

        /* ── Chat indicator — fully inside image, above profile-details ── */
        .chat-indicator {
            top:174px !important; right:14px !important;
            width:42px !important; height:42px !important;
            font-size:18px !important; z-index:9 !important;
        }

        /* ── Profile details ── */
        .profile-details {
            position:relative; margin-top:0 !important; z-index:7;
            background:#ffffff !important;
            border-bottom:1px solid #f1f5f9;
            padding:14px 16px 13px !important;
        }

        /* ── Verified + rating row ── */
        .verified-label-row { margin-bottom:7px; align-items:center; }
        .verified-badge-img { height:15px; }
        .prime-badge-img    { height:15px; }

        /* Rating badge */
        .rating-badge-new {
            background:#fefce8; border:1.5px solid #fde68a;
            padding:4px 10px; border-radius:999px;
            font-size:12px; font-weight:800; color:#d97706;
            gap:4px; display:flex; align-items:center;
        }
        .review-count-new { font-size:10px; font-weight:600; color:#92400e; }

        /* Business name */
        .profile-name-small {
            font-size:17px; font-weight:800; color:#0f172a;
            margin-bottom:7px; line-height:1.25;
        }

        /* City / Category pills */
        .city-category-pills { display:flex !important; flex-wrap:wrap; gap:6px; margin-top:6px; }
        .city-pill {
            background:#eff6ff; color:#1d4ed8; border:1.5px solid #bfdbfe;
            padding:4px 11px; font-size:11px; font-weight:700; border-radius:999px;
            display:inline-flex; align-items:center; gap:4px;
        }
        .category-pill-mobile {
            background:#fff1f2; color:#D32F2F; border:1.5px solid #fecaca;
            padding:4px 11px; font-size:11px; font-weight:700; border-radius:999px;
            display:inline-flex; align-items:center; gap:4px;
        }

        /* Hide desktop location/category row */
        .lcard-secondary-loc { display:none !important; }

        /* ── Card body — generous, consistent padding ── */
        .card-body-content { padding:18px 16px 22px; }

        /* ── Tags — horizontal scroll ── */
        .tags-container {
            display:flex; overflow-x:auto; scrollbar-width:none;
            gap:8px; margin-bottom:0; padding-bottom:2px;
            flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
        }
        .tags-container::-webkit-scrollbar { display:none; }
        .tag-item {
            background:#eff6ff; color:#1d4ed8; border:1.5px solid #bfdbfe;
            padding:7px 14px; border-radius:999px;
            font-size:11px; font-weight:700;
            white-space:nowrap; flex-shrink:0;
            box-shadow:0 1px 4px rgba(29,78,216,0.07);
        }
        .tag-more {
            background:#fff1f2; color:#D32F2F; border:1.5px solid #fecaca;
            padding:7px 14px; border-radius:999px;
            font-size:11px; font-weight:700;
            white-space:nowrap; flex-shrink:0;
        }

        /* ── Action grid ── */
        .action-grid {
            display:grid; grid-template-columns:repeat(3,1fr);
            gap:9px; margin-bottom:12px;
        }
        .action-btn-new {
            width:100%; height:auto;
            padding:13px 4px; border-radius:18px;
            flex-direction:column; gap:6px;
            font-size:11px; font-weight:800; letter-spacing:0.01em;
            transition:transform 0.15s ease;
            box-shadow:0 2px 8px rgba(0,0,0,0.06);
        }
        .action-btn-new:active { transform:scale(0.93); box-shadow:none; }
        .action-btn-new i { font-size:20px; }
        .lcard-btn-label { display:block; }

        .btn-call-new     { background:#f0fdf4; color:#16a34a; border:1.5px solid #bbf7d0; }
        .btn-whatsapp-new { background:#f0fdf4; color:#16a34a; border:1.5px solid #bbf7d0; }
        .btn-website-new  { background:#eff6ff; color:#1d4ed8; border:1.5px solid #bfdbfe; }

        /* ── View Profile CTA ── */
        .btn-view-profile-glass {
            background:linear-gradient(135deg,#e01414 0%,#b71c1c 100%) !important;
            box-shadow:0 8px 26px rgba(211,47,47,0.36) !important;
            border:none !important; border-radius:18px !important;
            padding:15px !important; font-size:15px !important;
            font-weight:800 !important; color:#fff !important;
            letter-spacing:0.02em !important;
        }
        .btn-view-profile-glass:active { transform:scale(0.97) !important; }

        /* ── Image nav arrows ── */
        .image-nav-btn {
            width:30px; height:30px; font-size:9px;
            background:rgba(255,255,255,0.85);
            backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
        }
        .btn-prev { left:10px; }
        .btn-next { right:10px; }

        /* ── Header title card ── */
        .listing-header-card {
            background:linear-gradient(135deg,#fff 0%,#fff5f5 100%);
            position:relative; overflow:hidden;
        }
        .listing-header-card::before {
            content:'';
            position:absolute; inset:0;
            background-image:radial-gradient(rgba(211,47,47,0.045) 1.5px, transparent 1.5px);
            background-size:22px 22px;
            pointer-events:none;
        }
    }

    /* ══════════════════════════════════════════
       NEW DETAIL ELEMENTS — mobile + desktop
    ══════════════════════════════════════════ */

    /* ── Meta row: since + timing ── */
    .lcard-meta-row {
        display:flex; flex-wrap:wrap; gap:7px;
        margin-bottom:16px; align-items:center;
    }
    .lcard-timing-pill {
        display:inline-flex; align-items:center; gap:5px;
        background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0;
        padding:4px 11px; border-radius:999px; font-size:11px; font-weight:700;
    }

    /* ── Section divider ── */
    .lcard-divider {
        height:1px;
        background:linear-gradient(90deg, transparent, #e2e8f0 25%, #e2e8f0 75%, transparent);
        margin:16px 0;
    }

    /* ── Section header label ── */
    .lcard-section-hdr {
        display:flex; align-items:center; gap:7px;
        font-size:11px; font-weight:800; color:#94a3b8;
        text-transform:uppercase; letter-spacing:0.07em;
        margin-bottom:10px;
    }
    .lcard-section-hdr i { font-size:11px; }

    /* ── Discount strip — prominent amber banner ── */
    .lcard-discount-strip {
        display:flex; align-items:center; gap:10px;
        background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);
        border:1.5px solid #fde047; border-radius:16px;
        padding:11px 14px; margin-bottom:16px;
        font-size:12px; font-weight:700; color:#92400e;
        position:relative; overflow:hidden;
    }
    .lcard-discount-strip::before {
        content:'';
        position:absolute; top:0; left:0; bottom:0; width:4px;
        background:linear-gradient(180deg,#fbbf24,#f59e0b);
        border-radius:16px 0 0 16px;
    }
    .lcard-discount-strip i { color:#f59e0b; font-size:15px; flex-shrink:0; }

    /* ── About text block ── */
    .lcard-about-wrap {
        padding-left:11px;
        border-left:3px solid #fecaca;
        margin-bottom:0;
    }
    .lcard-about-text {
        font-size:13px; line-height:1.68; color:#475569; margin:0;
    }
    .lcard-about-text.lcard-clamped {
        display:-webkit-box;
        -webkit-line-clamp:2;
        line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .lcard-vmb {
        display:inline-flex; align-items:center; gap:4px;
        background:none; border:none; padding:0; margin-top:7px;
        font-size:11px; font-weight:700; color:#D32F2F; cursor:pointer; line-height:1;
    }
    .lcard-vmb:active { opacity:0.7; }
    .lcard-vmb-icon { font-size:9px; }

    /* ── About Expert block ── */
    .lcard-listme-wrap {
        background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 60%,#f0f9ff 100%);
        border:1px solid #bae6fd; border-left:3px solid #38bdf8;
        border-radius:16px; padding:12px 14px;
        margin-bottom:0;
    }
    .lcard-section-label {
        font-size:10px; font-weight:800; color:#0369a1;
        text-transform:uppercase; letter-spacing:0.07em;
        margin-bottom:6px; display:flex; align-items:center; gap:5px;
    }

    /* ── Info chips (pricing / awards / certs) ── */
    .lcard-info-grid {
        display:flex; flex-direction:column; gap:9px; margin-bottom:0;
    }
    .lcard-info-chip {
        display:flex; align-items:flex-start; gap:11px;
        padding:11px 14px; border-radius:15px;
        font-size:12px; font-weight:600; line-height:1.5;
    }
    .lcard-info-chip i { font-size:15px; margin-top:1px; flex-shrink:0; }

    .lcard-chip-green {
        background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
        color:#166534; border:1px solid #bbf7d0;
    }
    .lcard-chip-green i { color:#16a34a; }

    .lcard-chip-yellow {
        background:linear-gradient(135deg,#fefce8 0%,#fef9c3 100%);
        color:#854d0e; border:1px solid #fde68a;
    }
    .lcard-chip-yellow i { color:#ca8a04; }

    .lcard-chip-blue {
        background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);
        color:#1e40af; border:1px solid #bfdbfe;
    }
    .lcard-chip-blue i { color:#3b82f6; }

/* ======================================================
   SECTION 8 — PROFILE PAGE MOBILE REDESIGN (.page-profile)
   Moved from profile.php inline <style>
====================================================== */

/* ===== Profile Page Mobile Redesign ===== */

    /* Sticky action label — hidden on desktop */
    .pcard-sticky-label { display:none; font-size:12px; font-weight:800; line-height:1; }

    @media (max-width:640px) {

        /* Business details header — light red gradient instead of plain white */
        .business-details-header {
            background:linear-gradient(135deg,#fff5f5 0%,#ffe9e9 100%);
            border:none;
            border-bottom:1px solid rgba(211,47,47,0.08);
            border-radius:0;
            padding:14px 18px 18px;
        }
        .details-title { font-size:20px; margin-bottom:8px; letter-spacing:-0.3px; }
        .details-description { font-size:13px; line-height:1.55; }

        /* Info card — tighter padding */
        .info-card {
            border-radius:22px;
            padding:15px;
            margin-top:-20px;
        }

        /* Rating badge — yellow pill */
        .info-card > div:first-child > div:last-child {
            border:1.5px solid #fde68a;
            font-size:12px; font-weight:800;
        }

        /* Business name */
        .info-card > h1 { font-size:20px; margin-bottom:2px; }

        /* Subcategory/city line */
        .info-card > p { font-size:13px; margin-bottom:16px; }

        /* Action circles — more rounded, tighter */
        .action-circle { width:46px; height:46px; border-radius:16px; font-size:18px; }
        .action-label { font-size:10px; font-weight:700; color:#64748b; }

        /* Stat row — tighter */
        .flex.flex-wrap.gap-4.mb-6 { gap:8px; }
        .flex.flex-wrap.gap-4.mb-6 > div > div:first-child { width:32px; height:32px; }

        /* Section title */
        .section-title { font-size:14px; margin-bottom:10px; }

        /* About section */
        .mb-8 { margin-bottom:18px; }

        /* Service tags → blue pill chips */
        .service-tag {
            background:#eff6ff; color:#1d4ed8;
            border:1.5px solid #bfdbfe;
            padding:5px 12px; border-radius:999px;
            font-size:11px; font-weight:700;
        }

        /* Pricing tag → red pill chip */
        .pricing-tag {
            background:#fff1f2; color:#D32F2F;
            border:1.5px solid #fecaca;
            padding:4px 12px; border-radius:999px;
            font-size:12px; font-weight:700;
        }

        /* Highlight cards */
        .highlight-card { padding:12px; border-radius:16px; }
        .highlight-card > div:first-child { width:38px; height:38px; border-radius:12px; }

        /* Social icons */
        .social-icon { width:44px; height:44px; border-radius:12px; font-size:17px; }

        /* Gallery items */
        .gallery-item { border-radius:12px; }

        /* Featured cards */
        .featured-card { min-width:160px; }

        /* Floating Sticky Actions — Right Side Vertically Centered */
        .sticky-actions {
            position: fixed;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 999;
            width: auto;
        }

        .sticky-actions a {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
        }

        .sticky-actions a.btn-call {
            background: linear-gradient(135deg, #007bff, #0056b3);
        }

        .sticky-actions a.btn-whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E);
        }

        .sticky-actions a:active {
            transform: scale(0.9);
        }

        .pcard-sticky-label { display:none !important; }
    }

/* ======================================================
   SECTION 9 — CATEGORIES PAGE REDESIGN (.page-categories)
   Moved from categories.php inline <style>
====================================================== */

/* ── CATEGORIES PAGE REDESIGN ── */

/* ======================================================
   SECTION 10 — INDEX PAGE DESKTOP/TABLET (page-index)
====================================================== */

@media (min-width: 1024px) {
    .page-index #heroSection { min-height: 85vh !important; }
    .page-index .desk-search {
        background: #ffffff;
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        border: 1px solid rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        position: relative;
        z-index: 50;
    }
    .page-index .s-drop, .page-index .c-drop {
        position: absolute;
        top: calc(100% + 12px);
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        border: 1px solid #f1f5f9;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 100%;
        max-height: 320px;
        overflow-y: auto;
    }
    .page-index .s-drop.on, .page-index .c-drop.on {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* City dropdown styling tweaks */
    #cDrop .co {
        padding: 12px 18px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-bottom: 1px solid #f8fafc;
    }
    #cDrop .co:last-child {
        border-bottom: none;
    }
    #cDrop .co i {
        color: #e01414;
        font-size: 14px;
        width: 14px;
    }
    #cDrop .co span.font-medium {
        font-size: 15px;
        color: #1e293b;
    }
    #cDrop .co span.text-\[10px\] {
        margin-left: auto;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        background: #f1f5f9;
        padding: 2px 6px;
        border-radius: 6px;
    }
}

/* Hero Section Desktop Tweaks */
.page-index .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 8s linear;
    transform: scale(1.05);
}
.page-index .hero-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 0;
}

/* Category Grid/Layout Adjustments for Desktop */
@media (min-width: 1024px) {
    .page-index .container-custom {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ======================================================
   SECTION 11 — CATEGORIES PAGE DESKTOP/TABLET (page-categories)
====================================================== */

@media (min-width: 1024px) {
    .page-categories .cat-hero {
        height: 60vh;
        max-height: 600px;
        align-items: center;
        padding-bottom: 0;
    }
    .page-categories .cat-hero-content {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 4rem;
        text-align: left;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
        align-items: center;
    }
    .page-categories .cat-hero-stats {
        flex-direction: row;
        gap: 32px;
        margin-top: 32px;
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(10px);
        padding: 24px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .page-categories .cat-stat-num { font-size: 28px; }
    
    /* Category Grids */
    .page-categories .category-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .page-categories .cat-card-desktop {
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .page-categories .cat-card-desktop:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }
}

/* ======================================================
   SECTION 12 — LISTING PAGE DESKTOP/TABLET (page-listing)
====================================================== */

@media (min-width: 1024px) {
    .page-listing main {
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .page-listing .card-container {
        display: block; /* Change from grid to block to allow vertical stacking */
        background: #ffffff;
        border-radius: 28px;
        overflow: hidden;
        border: 1px solid #f1f5f9;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        margin-bottom: 40px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .page-listing .card-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    .page-listing .card-header {
        display: block;
    }
    .page-listing .inner-profile-card {
        display: grid;
        grid-template-columns: 340px 1fr;
        width: 100%;
        border-bottom: 1px solid #f1f5f9;
    }
    .page-listing .profile-img-wrap {
        width: 340px;
        height: 240px !important;
        position: relative;
    }
    /* Fixed slider positioning and visibility for desktop */
    .page-listing .slider-wrapper {
        position: relative;
        overflow: hidden;
        height: 240px !important;
        border-radius: 0;
        width: 100%;
    }
    .page-listing .slider-inner {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
    }
    .page-listing .slider-inner img {
        flex-shrink: 0;
        width: 340px !important;
        height: 240px !important;
        object-fit: cover;
    }
    .page-listing .image-nav-btn {
        z-index: 20;
        opacity: 0;
        transition: opacity 0.3s, transform 0.2s;
        pointer-events: auto;
    }
    .page-listing .card-container:hover .image-nav-btn {
        opacity: 1;
    }
    .page-listing .image-nav-btn:hover {
        transform: scale(1.1);
        background: rgba(255,255,255,1);
        color: #e01414;
    }
    /* Ensure dots/pagination also show above the grid */
    .page-listing .slider-dots {
        z-index: 15;
    }
    .page-listing .profile-details {
        padding: 24px 32px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .page-listing .profile-name-small {
        font-size: 24px;
        margin-bottom: 8px;
    }
    .page-listing .card-body-content {
        padding: 32px;
    }
    .page-listing .action-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        gap: 16px;
    }
}

@media (min-width: 1280px) {
    .page-listing .card-container {
        grid-template-columns: 400px 1fr;
    }
    .page-listing .inner-profile-card {
        grid-template-columns: 400px 1fr;
    }
    .page-listing .profile-img-wrap {
        width: 400px;
        height: 280px !important;
    }
    .page-listing .slider-wrapper {
        height: 280px !important;
    }
    .page-listing .slider-inner img {
        width: 400px !important;
        height: 280px !important;
    }
    .page-listing .profile-details {
        padding: 32px 40px;
    }
}

/* ======================================================
   SECTION 13 — CITIES PAGE DESKTOP/TABLET (page-cities)
====================================================== */

@media (min-width: 1024px) {
    .page-cities main { grid-template-columns: 1fr 300px !important; gap: 40px !important; }
    .page-cities .city-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
    .page-cities .city-card-desktop { height: 100%; }
    .page-cities .cat-hero { 
        height: 60vh !important; 
        max-height: 600px !important; 
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .page-cities .cat-hero-content {
        max-width: 900px;
        margin: 0 auto;
        padding-bottom: 0 !important;
    }
    .page-cities .cat-hero-stats {
        justify-content: center !important;
        margin-top: 32px !important;
    }
    .page-cities .cat-hero-stat {
        padding: 0 40px !important;
        border-right: 1px solid rgba(255,255,255,0.2) !important;
    }
    .page-cities .cat-stat-num { font-size: 36px !important; }
    .page-cities .cat-stat-lbl { font-size: 11px !important; }
    
    /* Improve category grid on desktop */
    .page-categories main { max-width: 1280px; margin: 0 auto; padding: 40px; }
    .page-categories .category-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    .page-categories .cat-card-desktop {
        background: #fff;
        border-radius: 28px;
        padding: 32px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        border: 1px solid #f1f5f9;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .page-categories .cat-card-desktop:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    }
}

@media (min-width: 1280px) {
    .page-cities .city-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ======================================================
   SECTION 14 — DESKTOP REFINEMENT (Spacing, Fonts, Alignment)
====================================================== */

@media (min-width: 1024px) {
    /* Navbar height and text clarity */
    #mainNav .flex.items-center.justify-between { height: 72px; }
    #mainNav .nav-link { font-size: 15px; letter-spacing: -0.01em; padding-left: 1rem; padding-right: 1rem; }
    #mainNav .nav-btn-outline, #mainNav .nav-btn-solid { font-size: 14.5px; padding: 0.75rem 1.5rem; }

    /* Index Page Hero Refinement */
    .page-index #heroSection h1 { font-size: 4.5rem; letter-spacing: -0.03em; margin-bottom: 2rem; }
    .page-index #heroSection p.text-white\/90 { font-size: 1.125rem; margin-bottom: 2.5rem; line-height: 1.6; }
    
    /* Desk Search Bar Perfection */
    .page-index .desk-search { padding: 8px; border-radius: 999px; max-width: 860px; margin: 0 auto; display: flex; align-items: center; }
    .page-index #deskSI { font-size: 16px; padding: 16px 20px; border: none; outline: none; background: transparent; width: 100%; }
    .page-index #selCity { font-size: 15px; font-weight: 600; color: #334155; }
    .page-index .desk-search button#searchBtn { padding: 14px 40px; font-size: 16px; border-radius: 999px; font-weight: 700; }
    
    /* Dropdown alignment */
    .page-index .s-drop, .page-index .c-drop { top: calc(100% + 15px) !important; width: 100%; min-width: 320px; max-height: 320px; overflow-y: auto; }

    /* Spacing between large sections */
    .page-index section, .page-categories section, .page-listing section { padding-top: 6rem; padding-bottom: 3rem; }

    /* Category Page Hero Alignment */
    .page-categories .cat-hero-content h1 { font-size: 4.5rem; margin-bottom: 1.5rem; letter-spacing: -0.03em; }
    .page-categories .cat-hero-content p { font-size: 1.15rem; max-width: 520px; line-height: 1.65; color: rgba(255,255,255,0.8); }
    
    /* Grid Spacing */
    .page-categories .category-grid { gap: 36px; padding: 40px 0; }
    .page-listing main { gap: 80px; margin-top: 60px; }
    
    /* Listing Card Text & Padding */
    .page-listing .card-container { margin-bottom: 50px; border-radius: 32px; border: 1px solid rgba(0,0,0,0.05); }
    .page-listing .profile-details { padding: 56px; }
    .page-listing .profile-name-small { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 16px; }
    .page-listing .lcard-about-text { font-size: 16px; line-height: 1.8; color: #475569; margin-bottom: 24px; }
    .page-listing .action-btn-new { padding: 16px 24px; font-size: 14px; border-radius: 16px; font-weight: 700; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .page-listing .action-btn-new:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

    /* Categories Hero Perfection */
    .page-categories .cat-hero { height: 65vh !important; max-height: 650px !important; align-items: center !important; }
    .page-categories .cat-hero-container { grid-template-columns: 1.1fr 0.9fr !important; gap: 60px !important; padding-bottom: 0 !important; }
    .page-categories .cat-hero-badge { font-size: 11.5px; padding: 6px 16px; margin-bottom: 24px; }
    .page-categories .cat-hero-stats { padding: 32px !important; gap: 48px !important; margin-top: 0 !important; }
    
    /* City Cards Perfection (cities.php) */
    .page-cities .city-img-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; padding: 20px 0; }
    .page-cities .city-img-card { 
        border-radius: 28px !important; 
        aspect-ratio: 1/1 !important; 
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    }
    .page-cities .city-img-card:hover { 
        transform: translateY(-12px) scale(1.02) !important; 
        box-shadow: 0 25px 50px rgba(0,0,0,0.2) !important; 
        z-index: 10;
    }
    .page-cities .city-img-card .city-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%) !important; }
    .page-cities .city-img-card .city-name { font-size: 18px !important; font-weight: 800 !important; letter-spacing: 0.01em; }
    .page-cities .city-img-card .city-count { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); }

    /* Citywise & Categorywise Verified Page Perfection */
    .page-citywise main, .page-categorywise main { max-width: 1280px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
    .page-citywise #listingsContainer, .page-categorywise #listingsContainer {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
    }
    .page-citywise .bg-white.rounded-\[20px\], .page-categorywise .bg-white.rounded-\[20px\] {
        border-radius: 28px !important;
        transition: all 0.3s ease;
    }
    .page-citywise .bg-white.rounded-\[20px\]:hover, .page-categorywise .bg-white.rounded-\[20px\]:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }
    .page-citywise .relative.h-32, .page-categorywise .relative.h-32 { height: 220px !important; }
    .page-citywise h2.heading, .page-categorywise h2.heading { font-size: 3rem !important; }

    /* Profile Page Perfection (profile.php) */
    .page-profile main { 
        max-width: 1280px; 
        margin: 0 auto; 
        padding-left: 2rem; 
        padding-right: 2rem; 
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 40px;
        align-items: start;
        padding-top: 40px !important;
    }
    .page-profile .profile-hero-section {
        grid-column: span 2;
        border-radius: 32px;
        overflow: hidden;
        margin-bottom: 20px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    .page-profile .info-card { 
        margin-top: 0 !important; 
        border-radius: 0; 
        box-shadow: none; 
        padding: 40px !important;
        border-bottom: 1px solid #f1f5f9;
    }
    .page-profile .info-card h1 { font-size: 36px !important; letter-spacing: -0.04em; font-weight: 900; }
    .page-profile .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .page-profile .sidebar-actions {
        position: sticky;
        top: 100px;
        background: #fff;
        border-radius: 24px;
        padding: 30px;
        border: 1px solid #f1f5f9;
        box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    }
    .page-profile .action-circle { width: 60px !important; height: 60px !important; border-radius: 20px !important; font-size: 24px !important; }

    /* Listing Page perfection tweak */
    .page-listing .listing-header-card { 
        max-width: 1280px !important; 
        padding: 60px !important; 
        border-radius: 40px !important;
        text-align: left !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .page-listing .listing-header-card h1 { font-size: 3rem !important; margin-bottom: 20px !important; }
    .page-listing .listing-header-card p { font-size: 1.1rem !important; max-width: 800px; }
}

/* ── CATEGORIES PAGE REDESIGN ── */

/* Hero */
.cat-hero {
    position: relative;
    height: 48vh;
    min-height: 300px;
    max-height: 440px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.cat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(180,10,10,0.72) 0%, rgba(10,10,30,0.88) 100%);
    z-index: 1;
}
.cat-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}
.cat-hero-container {
    padding: 0 20px 60px;
    width: 100%;
    position: relative;
    z-index: 2;
}

@media (min-width: 1024px) {
    .page-categories .cat-hero-container {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: flex-end;
        gap: 60px;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}
.cat-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.cat-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; flex-shrink: 0; }
.cat-hero-stats {
    display: flex;
    gap: 0;
    margin-top: 14px;
}
.cat-hero-stat {
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid rgba(255,255,255,0.18);
}
.cat-hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.cat-stat-num { font-size: 18px; font-weight: 900; color: #fff; line-height: 1; font-family: 'Poppins', sans-serif; }
.cat-stat-lbl { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* ── CITY SWITCHER ── */
.city-switcher-wrap {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 0 10px;
}
.city-switcher-label {
    font-size: 9px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 16px 6px;
}
.city-switcher-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.city-switcher-scroll::-webkit-scrollbar { display: none; }
.city-switch-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.city-switch-btn:active { transform: scale(0.95); }
.city-switch-btn.active {
    background: #D32F2F;
    border-color: #D32F2F;
    color: #FFFFFF;
}

/* ── CATEGORY TABS (Sticky) ── */
#catTabBar {
    position: sticky;
    top: 58px;
    z-index: 45;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
    padding: 10px 0;
}
.cat-tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
@media (min-width: 1024px) {
    .cat-tabs-scroll {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 0 60px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-x: visible;
    }
    .cat-tab-btn {
        flex: 0 1 auto;
        justify-content: center;
        border-radius: 12px;
        border: 1.5px solid transparent;
        background: transparent;
        padding: 10px 20px;
        transition: all 0.3s ease;
    }
    .cat-tab-btn:hover {
        background: #f8fafc;
        border-color: #e2e8f0;
    }
    .cat-tab-btn.active {
        background: #e01414;
        color: #fff;
        border-color: #e01414;
        box-shadow: 0 4px 12px rgba(224,20,20,0.25);
    }
}
.cat-tabs-scroll::-webkit-scrollbar { display: none; }
.cat-tab-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.cat-tab-btn:active { transform: scale(0.95); }
.cat-tab-btn.active {
    background: #e01414;
    border-color: #e01414;
    color: #fff;
    box-shadow: 0 4px 12px rgba(224,20,20,0.3);
}

/* ── SEARCH BAR ── */
.cat-search-wrap {
    padding: 12px 16px 4px;
    position: sticky;
    top: calc(58px + 53px);
    z-index: 44;
    background: #f4f4f6;
}
.cat-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #e8ecf0;
    border-radius: 16px;
    padding: 0 14px;
    height: 46px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cat-search-inner:focus-within {
    border-color: #e01414;
    box-shadow: 0 0 0 3px rgba(224,20,20,0.08);
}
.cat-search-inner input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}
.cat-search-inner input::placeholder { color: #94a3b8; }

/* ── MAIN CONTENT ── */
.cat-main { padding: 12px 12px 24px; scroll-margin-top: 200px; }

/* Section header */
.cat-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 14px;
}
.cat-section-title {
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
}
.cat-section-count {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ── CATEGORY CARD ── */
.cat-card {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid #eff0f2;
    /* border-top accent color set inline per card */
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.cat-card:active { transform: scale(0.985); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

/* Card banner — light gradient */
.cat-card-banner {
    position: relative;
    padding: 16px 16px 15px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.045);
    /* background set inline per-card */
}
/* Content row */
.cat-banner-overlay {
    display: flex;
    align-items: center;
    gap: 13px;
}
/* Icon */
.cat-banner-icon {
    width: 58px; height: 58px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
    /* background set inline */
}
/* Text block */
.cat-banner-info { flex: 1; min-width: 0; }
.cat-banner-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
.cat-banner-title {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    /* background set inline */
}
.cat-banner-sub {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
}
/* Text-style explore link */
.cat-explore-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    /* color set inline */
}
.cat-explore-link:active { opacity: 0.65; }

/* Sub-category chips */
.cat-card-body { padding: 11px 14px 13px; }
.cat-subs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cat-sub-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Inter', sans-serif;
}
.cat-sub-chip:active { transform: scale(0.94); }

/* ── NO RESULTS ── */
.cat-no-results {
    display: none;
    padding: 48px 16px;
    text-align: center;
}
.cat-no-results.visible { display: block; }
.cat-no-results-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #cbd5e1;
    font-size: 24px;
}

/* ── CITY FACTS CARD ── */
.facts-section { padding: 0 12px 12px; }
.facts-card {
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fact-item {
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px;
}
.fact-label { font-size: 9px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.fact-value { font-size: 13px; font-weight: 800; color: #1e293b; font-family: 'Poppins', sans-serif; line-height: 1.2; }
.fact-item.full { grid-column: span 2; }
.fact-item.accent .fact-value { color: #e01414; }

/* ── POPULAR CITIES CAROUSEL ── */
.cities-section { padding: 0 0 12px; }
.cities-section-header { padding: 0 16px 12px; display: flex; align-items: center; justify-content: space-between; }
.cities-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: none; -ms-overflow-style: none; }
.cities-scroll::-webkit-scrollbar { display: none; }
.city-thumb-card {
    flex-shrink: 0;
    width: 100px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.city-thumb-img {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    margin-bottom: 6px;
}
.city-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-thumb-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}
.city-thumb-name {
    position: absolute;
    bottom: 7px; left: 0; right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.city-thumb-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}
.city-thumb-card.active-city .city-thumb-img { box-shadow: 0 4px 16px rgba(224,20,20,0.35), 0 0 0 2px #e01414; }

/* ── FAQ ACCORDION ── */
.faq-section { padding: 0 12px 24px; }
.faq-item {
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    gap: 10px;
}
.faq-q-text { font-size: 13px; font-weight: 700; color: #1e293b; flex: 1; }
.faq-chevron { color: #94a3b8; font-size: 11px; transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    opacity: 0;
}
.faq-item.open .faq-answer { max-height: 200px; opacity: 1; }
.faq-answer-inner { padding: 0 16px 14px; font-size: 12px; color: #64748b; line-height: 1.6; }

/* ── MORE CHIP ── */
.cat-more-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: #f8fafc;
    color: #64748b;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cat-more-chip:active { transform: scale(0.94); background: #e8ecf0; }

/* ── SUBCATEGORY BOTTOM SHEET ── */
.sub-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sub-sheet-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.sub-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sub-sheet-panel {
    position: relative;
    background: #fff;
    border-radius: 28px 28px 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.34,1.2,0.64,1);
}
.sub-sheet-overlay.open .sub-sheet-panel {
    transform: translateY(0);
}
.sub-sheet-handle {
    width: 36px; height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    margin: 10px auto 0;
    flex-shrink: 0;
}
.sub-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    flex-shrink: 0;
}
.sub-sheet-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #1e293b;
}
.sub-sheet-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
}
.sub-sheet-search-wrap {
    padding: 0 16px 10px;
    flex-shrink: 0;
}
.sub-sheet-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1.5px solid #e8ecf0;
    border-radius: 14px;
    padding: 0 12px;
    height: 42px;
    transition: border-color 0.2s ease;
}
.sub-sheet-search:focus-within { border-color: #e01414; }
.sub-sheet-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 13px; font-weight: 500; color: #1e293b;
    font-family: 'Inter', sans-serif;
}
.sub-sheet-search input::placeholder { color: #94a3b8; }
.sub-sheet-count {
    font-size: 10px; font-weight: 700; color: #94a3b8;
    padding: 0 16px 8px;
    flex-shrink: 0;
}
.sub-sheet-list {
    overflow-y: auto;
    padding: 0 12px 24px;
    flex: 1;
}
.sub-sheet-list::-webkit-scrollbar { display: none; }
.sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    gap: 10px;
}
.sub-item:active { background: #f8fafc; }
.sub-item + .sub-item { border-top: 1px solid #f8fafc; }
.sub-item-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.sub-item-text { flex: 1; }
.sub-item-arrow { color: #cbd5e1; font-size: 10px; flex-shrink: 0; }
.sub-no-results {
    text-align: center; padding: 32px 16px;
    display: none;
}
.sub-no-results.visible { display: block; }

/* Section divider */
.section-divider { height: 8px; background: #f4f4f6; }

/* Animations */
@keyframes catFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cat-card { animation: catFadeUp 0.3s ease both; }

/* ======================================================
   SECTION 10 — CITIES PAGE REDESIGN (.page-cities)
   Moved from cities.php inline <style>
====================================================== */

/* ── CITIES PAGE REDESIGN ── */

/* Hero */
.cities-hero {
    position: relative;
    height: 48vh;
    min-height: 320px;
    max-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.cities-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(180,10,10,0.75) 0%, rgba(10,10,30,0.88) 100%);
    z-index: 1;
}
.cities-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 16px 60px;
}

.page-cities .cities-hero-content {
    padding-top: 10px;
}

.page-cities.cities-hero {
    height: 38vh;
    min-height: 280px;
}

@media (min-width: 640px) {
    .cities-hero {
        height: 60vh;
        min-height: 400px;
    }
    .page-cities.cities-hero {
        height: 60vh;
        min-height: 400px;
    }
    .cities-hero-content { padding: 160px 32px 80px; }
    .page-cities .cities-hero-content { padding-top: 100px; }
}

@media (min-width: 1024px) {
    .cities-hero-content { padding: 240px 48px -2px }
    .cities-hero-content { padding-top: 360px;top:65px; }
    .page-cities .cities-hero-content { padding-top: 200px; top: 0; }
}

/* Hero badge */
.hero-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.hero-cat-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    flex-shrink: 0;
}

/* Stats row in hero */
.hero-stats-row {
    display: none;
    gap: 0;
    margin-top: 14px;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .hero-stats-row { display: flex; margin-top: 20px; gap: 8px; }
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid rgba(255,255,255,0.18);
}

@media (min-width: 640px) {
    .hero-stat { padding-right: 20px; margin-right: 20px; }
}

.hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stat-num { 
    font-size: 18px; 
    font-weight: 900; 
    color: #fff; 
    line-height: 1; 
    font-family: 'Poppins', sans-serif; 
}

@media (min-width: 640px) {
    .hero-stat-num { font-size: 24px; }
}

.hero-stat-lbl { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* ── STATE FILTER TABS (Sticky) ── */
#stateTabBar {
    position: sticky;
    top: 53px;
    z-index: 45;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
    padding: 10px 0 10px;
    transition: box-shadow 0.3s ease;
}

@media (min-width: 1024px) {
    #stateTabBar { top: 58px; }
}

.state-tabs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

@media (min-width: 640px) {
    .state-tabs-scroll {
        padding: 0 24px;
        gap: 10px;
    }
}

@media (min-width: 1024px) {
    .state-tabs-scroll {
        padding: 0 48px;
        gap: 12px;
        max-width: 1280px;
        margin: 0 auto;
    }
}

.state-tabs-scroll::-webkit-scrollbar { display: none; }
.state-tab-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.state-tab-btn:active { transform: scale(0.95); }
.state-tab-btn.active {
    background: #e01414;
    border-color: #e01414;
    color: #fff;
    box-shadow: 0 4px 12px rgba(224,20,20,0.3);
}
.state-tab-btn .tab-count {
    font-size: 10px;
    font-weight: 800;
    background: rgba(0,0,0,0.08);
    padding: 1px 6px;
    border-radius: 999px;
}
.state-tab-btn.active .tab-count {
    background: rgba(255,255,255,0.25);
}

/* ── SEARCH BAR ── */
.cities-search-wrap {
    padding: 12px 16px 4px;
    position: sticky;
    top: calc(53px + 53px);
    z-index: 44;
    background: #f4f4f6;
    transition: box-shadow 0.3s ease;
}

@media (min-width: 1024px) {
    .cities-search-wrap { top: calc(58px + 53px); }
}

.cities-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #e8ecf0;
    border-radius: 16px;
    padding: 0 14px;
    height: 46px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 640px) {
    .cities-search-inner {
        margin: 0 auto;
        max-width: 1280px;
        height: 48px;
    }
}

@media (min-width: 1024px) {
    .cities-search-wrap {
        padding: 16px 48px 4px;
    }
    .cities-search-inner {
        padding: 0 16px;
    }
}
.cities-search-inner:focus-within {
    border-color: #e01414;
    box-shadow: 0 0 0 3px rgba(224,20,20,0.08);
}
.cities-search-inner input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}
#citySearchInput {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.cities-search-inner input::placeholder { color: #94a3b8; }

/* ── MAIN CONTENT ── */
.cities-main { 
    padding: 12px 12px 24px;
    scroll-margin-top: 200px; 
}

@media (min-width: 640px) {
    .cities-main { 
        padding: 16px 24px 32px;
        max-width: 1280px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .cities-main { 
        padding: 20px 48px 40px;
    }
}

/* State section */
.state-section { margin-bottom: 24px; }
.state-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.state-section-left { display: flex; align-items: center; gap: 8px; }
.state-accent { width: 4px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, #e01414, #9b1111); flex-shrink: 0; }
.state-name {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
}
.state-city-count {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
}
.state-chevron {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 11px;
    transition: transform 0.3s ease, background 0.2s ease;
    flex-shrink: 0;
}
.state-chevron { transform: rotate(180deg); } /* up = expanded */
.state-section.collapsed .state-chevron { transform: rotate(0deg); } /* down = collapsed */

/* ── CITY IMAGE CARDS (2-col grid) ── */
.city-img-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 9000px;
    opacity: 1;
}
.state-section.collapsed .city-img-grid,
.state-section.collapsed .city-list-rows {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
.city-img-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    display: block;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.city-img-card:active { transform: scale(0.97); }
.city-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
/* Gradient overlay */
.city-img-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,20,0.85) 0%, rgba(10,10,20,0.2) 55%, transparent 100%);
    z-index: 1;
}
/* Tier 1 glow border */
.city-img-card.tier1 {
    box-shadow: 0 4px 20px rgba(224,20,20,0.25), 0 0 0 2px rgba(224,20,20,0.35);
}
/* Tier badge */
.city-tier-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(224,20,20,0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
}
/* Card footer */
.city-card-footer {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    z-index: 2;
    padding: 12px 10px 10px;
}
.city-card-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    margin-bottom: 5px;
}
.city-card-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.city-pill-star {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(251,191,36,0.18);
    border: 1px solid rgba(251,191,36,0.35);
    color: #fbbf24;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
}
.city-pill-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.88);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
}
/* Arrow overlay */
.city-arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    font-size: 9px;
}

/* ── NON-TIER1 LIST ROWS ── */
.city-list-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 9000px;
    opacity: 1;
}
.city-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.city-list-row:active { transform: scale(0.98); }
.city-list-row:hover { border-color: #fca5a5; box-shadow: 0 4px 16px rgba(224,20,20,0.08); }
.city-list-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #fff5f5;
    border: 1px solid #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e01414;
    font-size: 15px;
    flex-shrink: 0;
}
.city-list-info { flex: 1; min-width: 0; }
.city-list-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}
.city-list-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.city-list-star {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #d97706;
    font-size: 10px;
    font-weight: 700;
}
.city-list-count {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}
.city-list-sep { color: #e2e8f0; font-size: 10px; }
.city-list-chevron {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 10px;
    flex-shrink: 0;
}

/* ── NO RESULTS ── */
.no-results-block {
    display: none;
    padding: 48px 16px;
    text-align: center;
}
.no-results-block.visible { display: block; }
.no-results-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #cbd5e1;
    font-size: 24px;
}

/* ── WHY SECTION ── */
.why-section {
    padding: 8px 12px 16px;
}
/* ======================================================
   FOOTER STYLING FIX FOR STATIC PAGES
   Ensures footer background displays correctly on desktop
====================================================== */
.page-privacy footer,
.page-terms footer,
.page-faqs footer,
.page-transparency footer {
    background: #e01414 !important;
}

@media (max-width: 767px) {
    .why-section {
        padding: 0 12px 8px;
        margin-top: -8px;
    }
}
.why-card {
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 28px;
    padding: 24px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
.why-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(224,20,20,0.05);
    filter: blur(40px);
}
.why-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    margin-top: 12px;
}
.why-feature-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #fff5f5;
    border: 1px solid #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #e01414;
    font-size: 14px;
}

/* ── SEARCH OVERLAY tweaks ── */
.page-cities #searchPanel { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.page-cities #searchPanel .mob-search-card { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 20px; overflow: visible; }
.page-cities #searchPanel .mob-search-row { padding: 14px 16px; }
.page-cities #searchPanel .mob-search-divider { background: linear-gradient(90deg, transparent, rgba(148,163,184,0.38), transparent); height: 1px; }

/* ── MOBILE BOTTOM SHEET (Filter) ── */
.mobile-bottom-sheet { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: flex-end; }
.mobile-bottom-sheet.hidden { display: none; }
.mobile-bottom-sheet-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mobile-bottom-sheet-content { position: relative; background: #fff; border-radius: 28px 28px 0 0; padding-top: 8px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
.sheet-header-handle { width: 36px; height: 4px; background: #e2e8f0; border-radius: 999px; margin: 0 auto 8px; }

/* Animations */
@keyframes cityFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.city-img-card { animation: cityFadeUp 0.35s ease both; }

/* ── AREAS BOTTOM SHEET ── */
#areasSheet {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#areasSheet.open {
    pointer-events: all;
    opacity: 1;
}
.areas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,15,30,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity 0.25s ease;
}
.areas-panel {
    position: relative;
    background: #fff;
    border-radius: 28px 28px 0 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}
#areasSheet.open .areas-panel {
    transform: translateY(0);
}
.areas-handle {
    width: 40px; height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    margin: 10px auto 0;
    flex-shrink: 0;
}
.areas-header {
    padding: 12px 20px 0;
    flex-shrink: 0;
}
.areas-city-hero {
    width: 100%;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
    position: relative;
}
.areas-city-hero-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 120px;
    margin-bottom: 14px;
}
.areas-city-hero-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.areas-city-hero-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,10,25,0.78) 0%, rgba(10,10,25,0.3) 60%, transparent 100%);
}
.areas-city-hero-text {
    position: absolute;
    left: 16px;
    bottom: 12px;
    z-index: 2;
}
.areas-city-hero-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.areas-city-hero-sub {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    margin-top: 3px;
}
.areas-browse-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: linear-gradient(135deg, #bc0d0d, #e01414);
    border-radius: 16px;
    text-decoration: none;
    margin: 0 20px 14px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 16px rgba(224,20,20,0.3);
}
.areas-browse-all:active { transform: scale(0.97); }
.areas-browse-all-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.areas-browse-all-text {
    flex: 1;
}
.areas-browse-all-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    line-height: 1.1;
}
.areas-browse-all-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
}
.areas-browse-all-arrow {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    flex-shrink: 0;
}
.areas-divider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 12px;
    flex-shrink: 0;
}
.areas-divider-line {
    flex: 1;
    height: 1px;
    background: #f1f5f9;
}
.areas-divider-label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
/* Areas search bar */
.areas-search-wrap {
    padding: 0 20px 10px;
    flex-shrink: 0;
}
.areas-search-inner {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f8fafc;
    border: 1.5px solid #e8ecf0;
    border-radius: 14px;
    padding: 0 12px;
    height: 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.areas-search-inner:focus-within {
    border-color: #e01414;
    box-shadow: 0 0 0 3px rgba(224,20,20,0.08);
    background: #fff;
}
.areas-search-inner input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}
.areas-search-inner input::placeholder { color: #94a3b8; }

/* scrollable areas grid */
.areas-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 32px;
    scrollbar-width: none;
}
.areas-scroll::-webkit-scrollbar { display: none; }
.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.area-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: #f8fafc;
    border: 1.5px solid #e8ecf0;
    border-radius: 16px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.area-chip:active {
    transform: scale(0.94);
    border-color: #e01414;
    background: #fff5f5;
    box-shadow: 0 4px 12px rgba(224,20,20,0.12);
}
.area-chip-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #fff5f5;
    border: 1px solid #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e01414;
    font-size: 13px;
}
.area-chip-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    color: #1e293b;
    line-height: 1.2;
}
/* highlight popular areas */
.area-chip.popular {
    border-color: rgba(224,20,20,0.2);
    background: #fff8f8;
}
.area-chip.popular .area-chip-icon {
    background: linear-gradient(135deg, #fff0f0, #ffe0e0);
}
/* close button */
.areas-close-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}
.areas-close-btn:active { background: #e2e8f0; }
/* City card indicator for cities with areas */
.city-has-areas-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 3px;
}