/*:root{
      --bg:#fbfcfe;
      --card:#fff;
      --muted:#6b7280;
      
      --accent:#0f172a;
      --muted-2:#94a3b8;
      --maxW:1200px;
      --header-h:68px;
      --radius:10px;
      --container-side:18px;
      --soft-border: rgba(11,18,32,0.04);
      --search-w:360px;
      --hero-gap:18px;
      --footer-heading:18px;
    }*/
:root {
  /* Primary theme */
  --primary-50: #c8b2ff; /* Lavender (light)  */
  --primary-200: #9eafff;
  --primary-400: #6e86ff;
  --primary-500: #4d6bff; /* Royal Blue (main) */
  --primary-600: #415be0;
  --primary-700: #3649c2;

  /* Accent aqua (used as secondary highlight) */
  --accent-aqua: #00c6c7; /* Aqua (bright) */
  --accent-aqua-60: rgba(0, 198, 199, 0.06);
  --accent-aqua-10: rgba(0, 198, 199, 0.1);

  /* Neutral overrides kept for readability */
  --brand: var(--primary-500); /* keeps existing var names usable */
  --brand-accent: var(--accent-aqua);
  --muted: #64748b;
  --accent-strong: #0f172a;
  --soft-border: rgba(11, 18, 32, 0.04);
  --bg: #fbfcfe;
  --card: #fff;
  --accent: #0f172a;
  --muted-2: #94a3b8;
  --maxW: 1200px;
  --header-h: 68px;
  --radius: 10px;
  --container-side: 18px;
  --search-w: 360px;
  --hero-gap: 18px;
  --footer-heading: 18px;
}
/* Prevent horizontal overflow globally */
html,
body {
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
  margin: 0;
  font-family: Inter, system-ui, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--accent);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  margin: 0 auto;
  padding: 0 var(--container-side) 18px;
  box-sizing: border-box;
}
/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 1400;
  background: #ffffff;
  /*background: var(--bg);*/
   border-bottom: 1px solid rgba(11,18,32,0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  padding: 8px var(--container-side);
  width: 100%;
  box-sizing: border-box;
  overflow:hidden;
}
.brand-left {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  gap: 6px;
}
.logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.site-title {
  font-weight: 700;
  margin: 0;
  font-size: 16px;
}
.site-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.nav-link {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.nav-cta {
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  border: 0;
  cursor: pointer;
  font-weight: 600;
}
.hamburger {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
}
.hamburger .bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 18px;
}
.hamburger .bar {
  width: 20px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  display: block;
}
.listing-btn,.elite5pro-btn{
  background: linear-gradient(90deg, var(--primary-500), var(--accent-aqua));
  color: #fff;
  box-shadow: 0 10px 30px rgba(77, 107, 255, 0.12);
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 920px) {
  .hamburger {
    display: inline-flex;
  }
  .right-actions {
    display: none;
  }
}

/* Mobile off-canvas */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.28);
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  transition: opacity 0.18s ease;
}
.mobile-menu-backdrop.open {
  display: flex;
  opacity: 1;
}
.mobile-menu {
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--card);
  border-radius: 10px;
  padding: 16px;
  margin-top: calc(var(--header-h) + 8px);
  box-shadow: 0 30px 80px rgba(11, 18, 32, 0.25);
  overflow: auto;
}
.mobile-menu a {
  display: block;
  padding: 10px 8px;
  border-radius: 8px;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 6px;
}
.mobile-menu a:hover {
  background: rgba(14, 165, 164, 0.06);
}
.mobile-menu .close-btn {
  float: right;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

/* HERO */
.page-hero {
  display: flex;
  gap: var(--hero-gap);
  align-items: flex-start;
  margin-top: 12px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 28px;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(90deg, #4d6bff, #00c6c7) !important;
  border: none !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  color: #fff;
}
.hero-headline {
  color: #ffffff !important;
}
.hero-desc,
.hero-short {
  color: rgba(255, 255, 255, 0.92) !important;
}
.page-hero-left {
  flex: 1;
  min-width: 220px;
  box-sizing: border-box;
  max-width: calc(100% - var(--search-w) - var(--hero-gap));
}
.page-hero-right {
  width: var(--search-w);
  min-width: 240px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.search-card {
  width: var(--search-w);
  max-width: 100%;
  background: var(--card);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(11, 18, 32, 0.04);
  box-sizing: border-box;
}
.search-input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6e9ef;
  font-size: 15px;
  box-sizing: border-box;
  height: 44px;
  min-width: 0;
}
.search-btn {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  min-width: 96px;
  height: 44px;
}
.hero-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
}
.hero-headline {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(10px, 5.2vw, 26px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1;
  color: var(--accent);
  width: 100%;
  -webkit-font-smoothing: antialiased;
}
.hero-desc {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
  word-break: break-word;
  margin-top: 6px;
}
.hero-short {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
/* responsive: stack search on tablet+mobile, button below input and centered */
@media (max-width: 1100px) {
  :root {
    --search-w: 300px;
  }
  .page-hero {
    padding: 20px;
  }
  .page-hero-left {
    max-width: calc(100% - var(--search-w) - var(--hero-gap));
  }
  .search-card {
    width: 100%;
    max-width: var(--search-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
  }
  .search-input {
    width: 100%;
    margin: 0;
  }
  .search-btn {
    width: 40%;
    min-width: 120px;
    margin-top: 10px;
    align-self: center;
    height: 44px;
  }
  .hero-headline {
    font-size: clamp(11px, 4.2vw, 20px);
  }
}
@media (max-width: 720px) {
  :root {
    --search-w: 0px;
  }
  .page-hero {
    padding: 14px;
  }
  .page-hero-left {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .page-hero-right {
    display: none;
  }
  .hero-headline {
    font-size: clamp(10px, 6.2vw, 17px);
  }
  .hero-desc {
    font-size: 14px;
    line-height: 1.5;
  }
  .hero-short {
    display: none;
  }
  .search-btn {
    width: 54%;
    min-width: 120px;
  }
}
.num-fix {
  position: relative;
  top: -0.08em;
}
.hero-headline {
  line-height: 1.15;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
  text-rendering: geometricPrecision;
}

/* sponsors row */
.sponsors-row {
  margin-top: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.sponsor-card {
  background: var(--card);
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(11, 18, 32, 0.04);
  border: 1px solid rgba(11, 18, 32, 0.03);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 120px;
}
.sponsor-card h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--accent);
}
@media (min-width: 600px) {
  .sponsors-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* carousel */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
  padding: 10px 0;
  box-sizing: border-box;
}
.slides {
  display: flex;
  gap: 12px;
  transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.15, 1);
  will-change: transform;
  padding: 6px;
}
.slides .card {
  flex: 0 0 220px;
  min-width: 220px;
  border-radius: 10px;
  padding: 18px;
  background: var(--card);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  .slides .card {
    flex: 0 0 200px;
    min-width: 200px;
  }
}
@media (max-width: 720px) {
  .slides .card {
    flex: 0 0 160px;
    min-width: 160px;
  }
}
.carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: #e6e9ef;
  cursor: pointer;
}
.carousel-dots button.active {
  background: var(--accent);
}
/* footer */
.site-footer {
  border-top: 1px solid rgba(11, 18, 32, 0.03);
  /*padding-top: 28px;
  padding-bottom: 35px;*/
  min-height: fit-content;
  overflow: visible;
  background: linear-gradient(90deg, var(--primary-500), var(--accent-aqua));
}
.footer-wrap {
  margin: 0 auto;
  padding: 0 var(--container-side);
  box-sizing: border-box;
}
.footer-grid {
  align-items: start;
  width: 100%;
  padding-left: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;

}
.footer-col h4 {
  margin: 0 0 16px;
  font-size: var(--footer-heading);
  color: var(--accent);
  font-weight: 600;
  line-height: 1.1;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin: 10px 0;
}
.footer-col a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
.footer-divider {
  height: 1px;
  background: rgba(11, 18, 32, 0.04);
  margin-top: 18px;
  margin-bottom: 12px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0 0;
  color: #ffffff;
  font-size: 13px;
  border-top: 0;
}
.footer-bottom {
  color: #ffffff;
}

/* FORCE FOOTER-BOTTOM TO BE FULL WIDTH */

.site-footer,
.site-footer .footer-bottom {
  width: 100% !important;
  max-width: 100% !important;
}

/* REMOVE CENTERING */
.site-footer .footer-bottom {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  box-sizing: border-box;
}
.footer-wrap {
  max-width: 100% !important;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #ffffff;
  }
}
.site-footer ul li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
}

.site-footer ul li a::before {
  content: "»";
  flex-shrink: 0;
  opacity: 0.9;
}


.site-footer {
  background: linear-gradient(90deg, #4f7df3, #14b8c8);
  color: #fff;
}
.footer-intro {
  max-width: 520px;
  margin-bottom: 28px;
}

.footer-intro h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-intro p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
  max-width: 520px;
  font-weight: 400;
}
@media (min-width: 1100px) {
.footer-wrap {
    display: grid;
    grid-template-columns: 520px 1fr; /* intro | links */
    /*gap: 64px;*/
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }

  .footer-grid {
    margin-top: 0;
  }
}
@media (max-width: 1099px) {
  .footer-wrap {
    display: block;
  }

  .footer-intro {
    max-width: 100%;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .footer-intro h3 {
    font-size: 16px;
  }
  .footer-col li a{
  white-space:nowrap;
}

  .footer-intro p {
    font-size: 13px;
  }
}


/* location modal selected category text-only style (green like submit) */
.loc-selected {
  display: inline-block;
  margin-top: 8px;
  color: var(--brand);
  font-weight: 700;
}
/* mobile sticky close button */
.sticky-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 18, 32, 0.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.hidden {
  display: none !important;
}
button {
  font-family: inherit;
}
/* --------------------------
       Mobile categories grid (mobile-only)
       2 rows x 5 columns per group, smaller icons, "More" accordion
       -------------------------- */
.mobile-cat-grid {
  display: none;
  margin-top: 10px;
  padding: 10px var(--container-side);
  box-sizing: border-box;
}
.mobile-cat-grid .group {
  margin-bottom: 18px;
}
.mobile-cat-grid .group-title {
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 14px;
  padding-left: 4px;
}
/* default grid for larger small phones, will be overridden in media query below */
.mobile-cat-grid .icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mobile-cat-grid .icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--card);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(11, 18, 32, 0.03);
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.03);
  min-height: 84px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.mobile-cat-grid .icon-svg {
  width: 34px;
  height: 34px;
  display: block;
}
.mobile-cat-grid .icon-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 600;
  max-width: 100%;
  white-space: normal;
}
.mobile-cat-grid .icon-btn:active {
  transform: translateY(1px);
}
/* hidden extra list that expands when More is clicked */
.mobile-cat-grid .extra {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.26s ease;
  margin-top: 8px;
}
.mobile-cat-grid .extra.open {
  max-height: 400px; /* big enough for content */
}
/* "More" tile styles */
.mobile-cat-grid .more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  border: 1px dashed rgba(11, 18, 32, 0.06);
  background: linear-gradient(180deg, #fff, #fbfffd);
  min-height: 84px;
  cursor: pointer;
  color: var(--brand);
  font-weight: 700;
}
.mobile-cat-grid .more-btn .dots {
  font-size: 20px;
  line-height: 1;
}
/* mobile-specific: show 2 rows x 5 columns and smaller icons and spacing */
@media (max-width: 720px) {
  .mobile-cat-grid {
    display: block;
  }
  .mobile-cat-grid .icons {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding-right: 8px;
  }
  /* right pad to avoid edge overflow */
  .mobile-cat-grid .icon-btn {
    padding: 8px;
    min-height: 72px;
  }
  .mobile-cat-grid .icon-svg {
    width: 26px;
    height: 26px;
  }
  .mobile-cat-grid .icon-label {
    font-size: 11px;
  }
  /* ensure the group container has a right margin so items never touch edge */
  .mobile-cat-grid {
    padding-left: 12px;
    padding-right: 18px;
  }
  /* ensure 'more' tile fits compactly */
  .mobile-cat-grid .more-btn {
    min-height: 72px;
    font-size: 12px;
  }
  /* When extra expanded, it shows a simple grid of extra items */
  .mobile-cat-grid .extra .icons-extra {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 6px;
  }
  .mobile-cat-grid .extra .icons-extra .icon-btn {
    min-height: 64px;
    padding: 6px;
  }
}
/* hide on larger screens */
@media (min-width: 721px) {
  .mobile-cat-grid {
    display: none !important;
  }
}
/* Hide top dropdown category nav ONLY on mobile view */
@media (max-width: 720px) {
  nav.categories {
    display: none !important;
  }
}
/* === hide Explore categories section on mobile only === */
@media (max-width: 720px) {
  /* modern browsers: hide the whole section that *contains* the carousel */
  section:has(#categoryCarousel) {
    display: none !important;
  }
  /* extra safeguard to hide the carousel itself if :has() isn't supported */
  #categoryCarousel {
    display: none !important;
  }
}
/* Mobile inline dual-field search (Category | City) */
.mobile-inline-search {
  display: none;
}
@media (max-width: 720px) {
  .mobile-inline-search {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
  }
  .mobile-inline-inner {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-aqua));
    /* subtle shadow to lift the card above hero */
    box-shadow: 0 12px 30px rgba(6, 22, 35, 0.06);
  }
  .mobile-inline-inner > div {
    min-width: 0;
  }
  .mobile-inline-input {
    width: 110%;
    box-sizing: border-box;
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-width: 0 !important;
    display: inline-block;
    height: 44px !important;
    line-height: 20px !important;
    background: #ffffff !important; /* white input for contrast */

    outline: none !important;
    border-radius: 10px !important;
    border: 1px solid rgba(11, 18, 32, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  .mobile-inline-search-list-page {
    width: 75% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* ===== CITY PAGE ONLY STYLE ===== */
  .citypage-search .mobile-inline-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Hide category input ONLY for city page */
  .citypage-search .mobile-inline-cat {
    display: none !important;
  }

  /* Proper center alignment */
  .citypage-search .citypage-input-wrap {
    flex: 0 0 70%;
    max-width: 70%;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* City input styling */
  .citypage-search .mobile-inline-city {
    width: 100%;

    padding: 10px 14px;
    font-size: 16px;
    border-radius: 10px;
  }

  /* Search button */
  .citypage-search .mobile-inline-search-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-inline-input::placeholder {
    color: rgba(11, 18, 32, 0.4);
    opacity: 1; /* some browsers use low opacity */
  }
  .mobile-inline-input[type="search"],
  .mobile-inline-input[type="text"] {
    -webkit-appearance: none;
    appearance: none;
  }
  /* make category wider and city narrower */
  .mobile-inline-cat {
    max-width: 95%;
  }
  .mobile-inline-divider {
    color: rgba(11, 18, 32, 0.12);
    padding: 0 4px;
    user-select: none;
    font-weight: 700;
  }
  .mobile-inline-search-btn {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* keep layout tidy on very narrow phones */
  @media (max-width: 360px) {
    .mobile-inline-cat {
      max-width: 58%;
    }
    .mobile-inline-city {
      max-width: 36%;
      font-size: 13px;
    }
    .mobile-inline-inner {
      padding: 6px 8px;
    }
  }
}

/* Mobile-only wrapper */
.mobile-explore-wrapper {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin: 14px auto;
}
.mobile-explore-wrapper .heading {
  font-weight: 600;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  white-space: nowrap;
}
.mobile-explore-wrapper .mobile-explore-btn {
  background: linear-gradient(180deg, #fff, #fbfffd);
  border: 1px solid rgba(11, 18, 32, 0.06);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.03);
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 720px) {
  .mobile-explore-wrapper {
    display: flex;
  }
}
@media (min-width: 721px) {
  .mobile-explore-wrapper {
    display: none !important;
  }
}

/* OVERLAY: backdrop and panel */
.mobile-explore-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  z-index: 1800;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}
.mobile-explore-panel {
  background: var(--card);
  border-radius: 14px;
  width: 92vw;
  max-width: 460px;
  max-height: 88vh; /* limit overall overlay height */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
  transform: translateY(18px);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.mobile-explore-overlay.open .mobile-explore-panel {
  transform: none;
  opacity: 1;
}
.panel-header {
  padding: 14px;
  border-bottom: 1px solid var(--soft-border);
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  background: transparent;
  position: relative;
}
/* Reduced and centered search bar inside overlay */
.city-search {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  margin: 10px auto 6px; /* center horizontally */
  padding: 6px 8px;
  gap: 8px;
  width: calc(100% - 40px);
  max-width: 260px; /* reduced width (centered) */
  box-sizing: border-box;
  position: relative; /* allow absolute-positioned autosuggest directly under the input */
  z-index: 20;
}
.city-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 13px;
  outline: none;
  padding: 6px;
}
/* autosuggest dropdown (positioned under the city input; max 5 rows visible) */
.autosuggest {
  /* positioned absolutely within .city-search so it appears below the input */
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  /* limit to 5 rows (approx row height ~40px) */
  max-height: calc(5 * 40px);
  overflow: auto;
  box-shadow: 0 8px 30px rgba(11, 18, 32, 0.06);
  box-sizing: border-box;
  z-index: 40;
  display: none;
}
.autosuggest li {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autosuggest li[aria-selected="true"],
.autosuggest li:hover {
  background: rgba(14, 165, 164, 0.1);
  color: var(--brand);
}
.mobile-inline-autosuggest {
  position: absolute;
  left: 6px;
  right: 6px;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  max-height: calc(5 * 40px);
  overflow: auto;
  box-shadow: 0 8px 30px rgba(11, 18, 32, 0.06);
  box-sizing: border-box;
  z-index: 3000;
}
.mobile-inline-autosuggest li {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-inline-autosuggest li {
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-inline-autosuggest li:hover,
.mobile-inline-autosuggest li[aria-selected="true"] {
  background: rgba(14, 165, 164, 0.1);
  color: var(--brand);
}
/* tighten the search button spacing */
.mobile-inline-search-btn {
  margin-left: 0px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  padding: 6px;
}
.city-search input[disabled] {
  color: var(--muted);
  cursor: not-allowed;
}
.city-search button {
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
/* panel body scrollable and 3 columns (responsive) */
.panel-body {
  flex: 1; /* takes remaining height so it can scroll */
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
/* fallback narrow phones: 2 columns */
@media (max-width: 340px) {
  .panel-body {
    grid-template-columns: repeat(2, 1fr);
  }
}

.panel-item {
  background: var(--card);
  border: 1px solid rgba(11, 18, 32, 0.05);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(11, 18, 32, 0.02);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
/* Highlight / hover / active states - only color highlight, no transform (no dancing) */
@media (max-width: 720px) {
  .panel-item:hover,
  .panel-item:focus,
  .panel-item.active {
    background: rgba(14, 165, 164, 0.1);
    color: var(--brand);
    box-shadow: 0 8px 18px rgba(14, 165, 164, 0.04);
    outline: none;
  }
  /* small tap feedback via opacity change */
  .panel-item:active {
    opacity: 0.95;
  }
}

.close-overlay {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #fff;
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(11, 18, 32, 0.08);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* small utility */
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Initially hide the search bar until a category/service is selected */
.city-search.hidden {
  display: none !important;
}
/* ==== City Search (Desktop Inline) ==== */
.city-search-desktop {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  width: 50%;
  overflow: visible;
  margin-top: 12px;
  margin-left: 20%;
}
/* Input box */
.desktop-inline-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  outline: none;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
  box-shadow: 0 2px 6px rgba(6, 22, 35, 0.05);
}
.desktop-inline-input:focus {
  border-color: #bfe8e0;
  box-shadow: 0 8px 24px rgba(6, 22, 35, 0.08);
}
/* "Go" button */
.desktop-inline-search-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: #05a89a;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(5, 168, 154, 0.15);
  transition: background 0.15s ease, transform 0.05s ease;
}
.desktop-inline-search-btn:hover {
  background: #049c8f;
}
.desktop-inline-search-btn:active {
  transform: translateY(1px);
}
/* Dropdown suggestion list */
.desktop-inline-autosuggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 9999;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(6, 22, 35, 0.06);
  box-shadow: 0 16px 36px rgba(6, 22, 35, 0.08);
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.desktop-inline-autosuggest[hidden] {
  display: none !important;
}
/* Suggestion items */
.desktop-inline-autosuggest li {
  padding: 12px 16px;
  margin: 4px 0;
  font-size: 14px;
  color: #1f2937;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
/* Highlighted top option (like "San Jose") */
.desktop-inline-autosuggest li.top {
  background: #e6f6f3;
  color: #0b7a6f;
  font-weight: 600;
}
/* Hover / keyboard active */
.desktop-inline-autosuggest li:hover,
.desktop-inline-autosuggest li[aria-selected="true"],
.desktop-inline-autosuggest li.active {
  background: rgba(14, 165, 164, 0.1);
}
/* ==== Search Bar Styling — Desktop / Tablet Only ==== */
@media (min-width: 768px) {
  /* Main form container */
  .search-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 6px 22px rgba(6, 22, 35, 0.08);
    overflow: visible; /* ✅ allows dropdown overlay */
  }
  /* Wrapper for input + suggestions */
  .search-input-wrap {
    position: relative;
    flex: 1 1 auto;
  }
  /* Input styling */
  .search-input {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid #dce1e6;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: all 0.15s ease;
    background: #fff;
  }
  .search-input:focus {
    border-color: #9fd4cb;
    box-shadow: 0 4px 14px rgba(6, 22, 35, 0.08);
  }
  /* Search button */
  .search-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    border: none;
    background: #05a89a;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
  }
  .search-btn:hover {
    background: #049b8f;
  }
  .search-btn:active {
    transform: translateY(1px);
  }
  /* ==== Autosuggest dropdown ==== */
  .desktop-search-inline-autosuggest {
    position: absolute;
    top: calc(100% + 6px); /* ✅ sits right below input */
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(6, 22, 35, 0.12);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* JS will toggle this class */
  .desktop-search-inline-autosuggest.show {
    display: block;
  }
  /* Suggestion items */
  .desktop-search-inline-autosuggest li {
    padding: 12px 16px;
    font-size: 14px;
    color: #1f2937;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .desktop-search-inline-autosuggest li:hover,
  .desktop-search-inline-autosuggest li[aria-selected="true"],
  .desktop-search-inline-autosuggest li.active {
    background: rgba(14, 165, 164, 0.1);
  }
  /* Optional nice scrollbar */
  .desktop-search-inline-autosuggest::-webkit-scrollbar {
    width: 6px;
  }
  .desktop-search-inline-autosuggest::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }
  .desktop-search-inline-autosuggest::-webkit-scrollbar-thumb:hover {
    background: #aaa;
  }
}
/* OPTION A: allow dropdown to overflow the hero on desktop */
@media (min-width: 768px) {
  /* let the hero allow visible overflow so absolute dropdowns can escape */
  section.page-hero {
    overflow: visible !important;
  }

  /* sometimes body/html were set; ensure they don't clip on desktop */
  body,
  html {
    overflow: visible !important;
  }
}
/* ===========================
   Mobile input robustness fixes
   (for Galaxy S8+, Z Fold and other odd Android browsers)
   Apply at end of style.css
   =========================== */

.mobile-inline-inner,                 /* parent flex container */
.mobile-inline-inner > div,           /* direct wrapper around input cells */
.mobile-inline-cat,                   /* element that holds category input */
.mobile-inline-city {
  /* also apply to city cell if present */
  min-width: 0 !important; /* allows children to shrink properly in flex */
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

/* Make the input itself explicit and robust */
.mobile-inline-input {
  box-sizing: border-box !important; /* include padding in width calculations */
  display: block !important; /* avoid inline layout quirks */
  width: 100% !important; /* fill container reliably */
  min-width: 0 !important; /* allow shrinking in flex layouts */
  max-width: none !important; /* prevent inherited max-width from collapsing it */
  outline: none !important;
  -webkit-appearance: none !important; /* stop browser using native search widget */
  appearance: none !important;
  -moz-appearance: none !important;

  /* Make vertical sizing explicit to avoid tiny boxes */
  min-height: 44px !important;
  height: auto !important;
  line-height: 20px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  background: #ffffff !important; /* white input for contrast */
  border-radius: 10px !important;
  color: inherit !important;

  /* Allow normal wrapping / caret placement instead of forcing one-line ellipsis */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Hide vendor search decorations that sometimes change layout on Android/Samsung */
.mobile-inline-input[type="search"]::-webkit-search-decoration,
.mobile-inline-input[type="search"]::-webkit-search-cancel-button,
.mobile-inline-input[type="search"]::-webkit-search-results-button,
.mobile-inline-input[type="search"]::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Prevent Samsung “text suggestions” chip from collapsing layout */
input::-ms-clear,
input::-ms-expand {
  display: none !important;
}

/* Force focus/placeholder visibility */
.mobile-inline-input::placeholder {
  opacity: 1 !important;
  color: rgba(11, 18, 32, 0.45) !important;
}

/* Defensive: if some ancestor uses transform/overflow weirdness, ensure wrapper allows overflow */
.search-card,
.search-input-wrap,
.mobile-inline-search {
  overflow: visible !important;
  position: relative !important;
}

/* Minimal Samsung / foldable fix — paste at end of style.css */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
.mobile-inline-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
}
.mobile-inline-input[type="search"]::-webkit-search-decoration,
.mobile-inline-input[type="search"]::-webkit-search-cancel-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* === HERO GRADIENT (Option A: full-width below nav) === */
.page-hero {
  
  background: linear-gradient(90deg, #4d6bff, #00c6c7) !important;
  border: none !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  color: #fff;
}

/* Headline & description in white for readability */
.hero-headline {
  color: #ffffff !important;
}

.hero-desc,
.hero-short {
  color: rgba(255, 255, 255, 0.92) !important;
}
.hero-desc{
  font-weight: 600;
}
.hero-short{
  font-weight: 500;
}
/* Card stays white for contrast */
.search-card {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1) !important;
}

/* === UPDATED BUTTON COLOR (Matching Blue Theme) === */
.search-btn {
  background: linear-gradient(90deg, #4d6bff, #00c6c7) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.25);
}

.search-btn:hover {
  background: linear-gradient(90deg, #415be0, #00b3b5) !important;
}

.search-btn:active {
  transform: translateY(1px);
}

/* Make input blend better with theme */
.search-input {
  border-color: #dbe3f5 !important;
}
.search-input:focus {
  border-color: #b4c8ff !important;
  box-shadow: 0 0 0 3px rgba(100, 140, 255, 0.22) !important;
}

/* ============================
   Matching Color System (Theme)
   Based on: Lavender → Royal Blue → Aqua
   Paste this at the end of your style.css
   ============================ */

:root {
  /* Primary theme */
  --primary-50: #c8b2ff; /* Lavender (light)  */
  --primary-200: #9eafff;
  --primary-400: #6e86ff;
  --primary-500: #4d6bff; /* Royal Blue (main) */
  --primary-600: #415be0;
  --primary-700: #3649c2;

  /* Accent aqua (used as secondary highlight) */
  --accent-aqua: #00c6c7; /* Aqua (bright) */
  --accent-aqua-60: rgba(0, 198, 199, 0.06);
  --accent-aqua-10: rgba(0, 198, 199, 0.1);

  /* Neutral overrides kept for readability */
  --brand: var(--primary-500); /* keeps existing var names usable */
  --brand-accent: var(--accent-aqua);
  --muted: #64748b;
  --accent-strong: #0f172a;
  --soft-border: rgba(11, 18, 32, 0.04);
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--bg); /* keep white/backdrop as requested */
  border-bottom: 1px solid rgba(77, 107, 255, 0.06); /* faint tint */
}

/* nav links */
.nav-link {
  color: var(--accent-strong);
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.nav-link:hover,
.nav-link:focus {
  transform: translateY(-1px);
}

/* Nav CTA (right-side primary button) */
.nav-cta {
  color: var(--accent-strong);
}
.listing-btn:hover,
.nav-cta:hover,
.elite5pro-btn:hover {
  transform: translateY(-1px);
}

/* hamburger bars on small screens tint */
.hamburger .bar {
  background: var(--accent-strong);
}

/* ---------- Mega / category / hover states ---------- */
.mega-col a:hover,
.mega-col a:focus {
  background: var(--accent-aqua-10);
  color: var(--primary-700);
  box-shadow: 0 12px 30px rgba(54, 73, 194, 0.06);
}
.subcat-link.active-subcat {
  background: linear-gradient(
    180deg,
    rgba(77, 107, 255, 0.06),
    rgba(0, 198, 199, 0.04)
  );
  color: var(--brand);
  box-shadow: 0 10px 30px rgba(77, 107, 255, 0.06);
}

/* category tiles hover */
.cat:hover {
  background: rgba(77, 107, 255, 0.04);
}

/* ---------- Hero adjustments (additional polish) ---------- */
.page-hero {
  /* nothing aggressive here — hero gradient already applied */
  color: #fff;
  position: relative;
  overflow: visible;
  font-weight: 600;
}

/* add subtle text shadow on the hero for readability */
.page-hero .hero-headline {
  text-shadow: 0 6px 18px rgba(10, 18, 40, 0.12);
}

/* keep the search card white but add a thin accent border */
.page-hero .search-card {
  border: 1px solid rgba(77, 107, 255, 0.06);
}

/* ---------- Buttons & inputs (search + CTAs) ---------- */
/* Hero-scoped search button (already updated earlier) — keep consistent */
.page-hero .search-btn,
.search-btn {
  background: linear-gradient(
    90deg,
    var(--primary-500) 0%,
    var(--accent-aqua) 100%
  );
  color: #fff;
  box-shadow: 0 12px 30px rgba(65, 91, 224, 0.14);
  border: none;
  transition: transform 0.06s ease, box-shadow 0.12s ease;
}
.page-hero .search-btn:hover,
.search-btn:hover {
  background: linear-gradient(90deg, var(--primary-600) 0%, #00b3b5 100%);
  box-shadow: 0 16px 40px rgba(65, 91, 224, 0.16);
  transform: translateY(-2px);
}
.page-hero .search-btn:active,
.search-btn:active {
  transform: translateY(1px);
}

/* inline desktop go button */
.desktop-inline-search-btn {
  background: linear-gradient(90deg, var(--primary-500), var(--accent-aqua));
  box-shadow: 0 8px 28px rgba(77, 107, 255, 0.12);
}
.desktop-inline-search-btn:hover {
  background: linear-gradient(90deg, var(--primary-600), #00b3b5);
}

/* Input focus states */
.search-input:focus,
.desktop-inline-input:focus {
  border-color: var(--primary-200) !important;
  box-shadow: 0 8px 26px rgba(77, 107, 255, 0.1) !important;
}

/* autosuggest highlighted item */
.desktop-inline-autosuggest li.top,
.desktop-inline-autosuggest li:hover,
.desktop-inline-autosuggest li[aria-selected="true"] {
  background: rgba(0, 198, 199, 0.08);
  color: var(--primary-700);
  font-weight: 700;
}

/* ---------- Sponsored card & CTA ---------- */
.sponsored-card {
  border: 1px solid rgba(0, 198, 199, 0.06);
  box-shadow: 0 20px 50px rgba(9, 20, 60, 0.04);
}
.become-cta-pill {
  background: linear-gradient(90deg, var(--primary-500), var(--accent-aqua));
  color: #fff;
  box-shadow: 0 10px 30px rgba(77, 107, 255, 0.12);
}
.sponsored-catch {
  color: var(--brand);
}

/* ---------- Footer accents ---------- */
.footer-divider {
  background: rgba(77, 107, 255, 0.06);
}
.footer-col h4 {
  color: var(--accent-strong);
}

.sponsor-display {
  display: none;
}

/* ============================
   TRUST SIGNALS SECTION
   ============================ */

.platform-trust{
  margin: 28px auto 32px;
  padding: 20px 22px;
  max-width: 1200px;
  background: linear-gradient(180deg, rgba(77, 107, 255, 0.06), rgba(0, 198, 199, 0.04));
  border-radius: 12px;
  border: 1px solid rgba(20, 80, 200, 0.08);
}

.platform-trust h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
}

.platform-trust p {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.platform-trust a {
  color: #1f5eff; /* Elite5Pro blue */
  font-weight: 600;
  text-decoration: none;
}

.platform-trust a:hover {
  text-decoration: underline;
}

/* ============================
   MOBILE OPTIMIZATION
   ============================ */

@media (max-width: 768px) {
  .platform-trust {
    /*margin: 18px 14px 24px;*/
    padding: 16px;
    border-radius: 10px;
  }

  .platform-trust h2 {
    font-size: 18px;
  }

  .platform-trust p {
    font-size: 13.5px;
  }
}


/*logo remove changes*/

.listing-logo{
  display:none !important;
}

.listing-header{
  display:flex;
  justify-content:center !important;
  align-items:center;
}

.listing-biz{
  width:100%;
  flex:1;
  text-align:center;
}

.biz-name{
  width:100%;
  text-align:center;
  margin:0 auto;
}


.header-logo{
  height: 72px;
  width:auto;
  display:block;
  object-fit:contain;

  /*transform: scale(1.45);
  transform-origin:left center;

  margin-right:40px;*/
}

.elite-home-link {
  color: #1a73e8; /* blue */
  font-weight: 700;
  text-decoration: none;
}

.elite-home-link:hover {
  text-decoration: underline;
}