/* =====================================================================
   TheniOnline.com — Main Stylesheet
   Directory theme inspired by Justdial's UI language:
   signature blue #116DB6 + orange #F26600 CTA, green rating chips,
   compact list-style business cards, professional Jakarta/Inter type.
   ===================================================================== */

:root {
  --color-primary: #0B4F82;      /* deep JD blue — headings, footer */
  --color-secondary: #116DB6;    /* JD signature blue — links, nav, hero */
  --color-accent: #F26600;       /* JD signature orange — CTAs */
  --color-rating: #1CA65A;       /* rating-chip green */
  --color-bg: #F4F7FB;
  --color-text: #1E293B;
  --color-muted: #64748B;
  --color-border: #E3E9F0;
  --gradient-cta: linear-gradient(135deg, #F26600 0%, #FF8A3D 150%);
  --gradient-dark: linear-gradient(120deg, #0B4F82 0%, #116DB6 55%, #0E5C9C 100%);
  --shadow-soft: 0 4px 20px rgba(11, 79, 130, 0.07);
  --shadow-medium: 0 10px 30px rgba(11, 79, 130, 0.12);
  --shadow-lift: 0 16px 40px rgba(242, 102, 0, 0.18);
  --radius-card: 14px;
  --radius-pill: 999px;
  --font-display: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

h1, h2, h3, h4, h5, h6, .brand-mark {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-weight: 700;
}

a { text-decoration: none; color: inherit; transition: color .2s ease; }
img { max-width: 100%; }

::selection { background: var(--color-accent); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------
   Scroll-reveal animation system (auto-applied via main.js IntersectionObserver)
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.21,.6,.35,1), transform .6s cubic-bezier(.21,.6,.35,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-zoom { opacity: 0; transform: scale(.92); transition: opacity .55s ease, transform .55s ease; }
.reveal-zoom.is-visible { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero banner entrance */
.jd-banner-text > * { opacity: 0; transform: translateY(16px); animation: heroRise .7s ease forwards; }
.jd-banner-text .jd-banner-kicker { animation-delay: .05s; }
.jd-banner-text h2 { animation-delay: .18s; }
.jd-banner-text .btn { animation-delay: .32s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

/* Category icon micro-interaction */
.jd-cat-item .jd-cat-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .2s ease; }
.jd-cat-item:hover .jd-cat-icon { transform: scale(1.14) rotate(-4deg); }

/* Promo tile arrow nudge */
.promo-tile-arrow { transition: transform .25s ease; }
.promo-tile:hover .promo-tile-arrow { transform: translateX(4px); }

/* Sticky header shadow once page has scrolled */
#siteHeader.is-scrolled { box-shadow: 0 6px 20px rgba(11,79,130,.12); }

@media (prefers-reduced-motion: reduce) {
  .jd-banner-text > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

.container { max-width: 1240px; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-cta {
  background: var(--gradient-cta);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .6rem 1.5rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(242, 102, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: #fff; }

.btn-outline-nav {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .5rem 1.3rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
}
.btn-outline-nav:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

.btn-user {
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  padding: .45rem 1rem;
  background: #fff;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Header / Navigation (Justdial-style: dark blue utility bar + white nav)
   --------------------------------------------------------------------- */
.topbar { background: var(--color-primary); color: rgba(255,255,255,.8); font-weight: 500; }
.topbar a { color: rgba(255,255,255,.9); }
.topbar a:hover { color: var(--color-accent); }

.site-header { z-index: 1030; max-width: 100%; position: fixed; top: 0; left: 0; right: 0; }
/* Fallback offset before JS measures the real header height (JS overrides this inline) */
body { padding-top: 110px; }
@media (min-width: 992px) { body { padding-top: 128px; } }
.main-navbar { background: #fff; box-shadow: var(--shadow-soft); padding: .65rem 0; border-bottom: 3px solid var(--color-secondary); }

.brand-mark { font-size: 1.55rem; font-weight: 800; letter-spacing: -.5px; color: var(--color-primary); white-space: nowrap; }
.brand-accent { color: var(--color-accent); }
.brand-tagline { font-size: .64rem; font-weight: 600; color: var(--color-muted); letter-spacing: .6px; text-transform: uppercase; }

.badge-soon { font-size: .6rem; background: var(--color-accent); color: #fff; padding: 1px 6px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }

/* ---------------------------------------------------------------------
   Desktop nav links (replaces old Bootstrap collapse — always a simple
   flex row at lg+, no JS/collapse dependency, nothing to "break")
   --------------------------------------------------------------------- */
.navbar-links-row {
  width: 100%; justify-content: center; margin-top: .55rem; padding-top: .55rem;
  border-top: 1px solid var(--color-border);
}
.navbar-nav-desktop { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.navbar-nav-desktop > li { position: relative; }
.navbar-nav-desktop > li > a {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  color: var(--color-text); padding: .5rem 1rem; border-radius: 8px; white-space: nowrap;
}
.navbar-nav-desktop > li > a i:first-child { color: var(--color-secondary); font-size: .88rem; }
.navbar-nav-desktop > li > a:hover { color: var(--color-secondary); background: var(--color-bg); }
.navbar-nav-desktop .has-dropdown > a .chev { font-size: .68rem; transition: transform .2s ease; color: var(--color-muted); }
/* The arrow used to flip only on :hover, so it looked "stuck" once you
   clicked to open the menu and moved the mouse away (or on touch, where
   there's no hover at all). Bootstrap sets aria-expanded="true" on the
   trigger link whenever the dropdown is actually open — drive the arrow
   from that instead so it always matches the real state. */
.navbar-nav-desktop .has-dropdown > a[aria-expanded="true"] .chev,
.navbar-nav-desktop .has-dropdown:hover > a .chev { transform: rotate(180deg); }
.navbar-nav-desktop .dropdown-menu {
  border: none; box-shadow: var(--shadow-medium); border-radius: 12px; padding: .6rem;
  /* Long category lists used to run off the bottom of the screen with no way
     to reach the rest of the items. Lay them out in columns and cap the
     height so the menu always fits on screen, scrolling internally if needed. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem .5rem;
  min-width: 420px;
  max-width: min(560px, calc(100vw - 2rem));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Let visitors manually drag the bottom-right corner to make the box
     taller or shorter, in addition to it being scrollable. */
  resize: vertical;
  min-height: 180px;
}
/* IMPORTANT: only switch to grid layout once Bootstrap adds its .show
   class. Bootstrap's own base rule is ".dropdown-menu { display: none }"
   and it toggles a ".show" class on open/close. Setting "display: grid"
   on the plain ".dropdown-menu" selector (as before) had higher
   specificity than Bootstrap's "display: none" and permanently overrode
   it — so the menu never actually closed, on any page. Scoping it to
   ".show" restores normal open/close behavior while keeping the grid
   layout for whenever it IS open. */
.navbar-nav-desktop .dropdown-menu.show { display: grid; }
/* Grid children need min-width:0 or they refuse to shrink below their
   content size, which is what caused long labels to spill into the next
   column. Bootstrap also sets white-space:nowrap on .dropdown-item by
   default — override it so long names wrap onto a second line instead. */
.navbar-nav-desktop .dropdown-menu > li { min-width: 0; }
.navbar-nav-desktop .dropdown-item {
  border-radius: 8px; padding: .5rem .7rem; font-weight: 500;
  white-space: normal; word-break: break-word; line-height: 1.25;
}
.navbar-nav-desktop .dropdown-item:hover { background: var(--color-bg); }

/* Thin, unobtrusive scrollbar for the categories dropdown (WebKit + Firefox) */
.navbar-nav-desktop .dropdown-menu::-webkit-scrollbar { width: 6px; }
.navbar-nav-desktop .dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.navbar-nav-desktop .dropdown-menu::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.navbar-nav-desktop .dropdown-menu { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

/* Keep the (now wider) menu centered under its trigger and on-screen */
.navbar-nav-desktop .has-dropdown .dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 767.98px) {
  .navbar-nav-desktop .dropdown-menu { grid-template-columns: 1fr; min-width: 260px; }
}

/* ---------------------------------------------------------------------
   Justdial-style header search bar (logo + location + search + actions)
   --------------------------------------------------------------------- */
.jd-header-row {
  display: flex; align-items: center; gap: .75rem; width: 100%; flex-wrap: nowrap;
}
.main-navbar .navbar-brand {
  margin: 0; flex-shrink: 0; min-width: 0; overflow: visible;
  display: flex; align-items: center; gap: .65rem;
}
.brand-logo-mark { flex-shrink: 0; display: block; line-height: 0; }
.brand-logo-mark img { width: 56px; height: 56px; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.offcanvas-brand, .footer-brand { display: inline-flex; align-items: center; gap: .6rem; }
.footer-brand .brand-logo-mark {
  width: 60px; height: 60px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.footer-brand .brand-logo-mark img { width: 54px; height: 54px; }

.jd-search-bar { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.jd-search-inner {
  display: flex; align-items: stretch; background: #fff;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  overflow: hidden; height: 46px; box-shadow: var(--shadow-soft); max-width: 100%;
}
.jd-location-pill {
  display: flex; align-items: center; gap: .4rem; padding: 0 .9rem;
  background: var(--color-bg); flex-shrink: 0; max-width: 190px; min-width: 0;
}
.jd-location-pill i { color: var(--color-accent); font-size: .85rem; flex-shrink: 0; }
.jd-city-select {
  border: none; background: transparent; font-weight: 600; font-size: .82rem;
  color: var(--color-text); padding: 0; max-width: 150px; width: 100%; height: 100%;
}
.jd-city-select:focus { outline: none; box-shadow: none; }
.jd-divider { width: 1px; flex-shrink: 0; background: var(--color-border); margin: 8px 0; }
.jd-input-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; position: relative; }
.jd-search-input { border: none; width: 100%; min-width: 0; height: 100%; padding: 0 1rem; font-size: .88rem; font-weight: 500; background: transparent; }
.jd-search-input:focus { outline: none; box-shadow: none; }
.jd-input-wrap .search-suggestions { top: calc(100% + 10px); left: -1px; right: -1px; }
.jd-search-submit {
  border: none; background: var(--gradient-cta); color: #fff; width: 52px; flex-shrink: 0;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
}
.jd-search-submit:hover { filter: brightness(1.05); }

.jd-header-actions { align-items: center; gap: .6rem; flex-shrink: 0; }
.btn-list-free {
  display: inline-flex; align-items: center; border: 1.5px solid var(--color-secondary);
  color: var(--color-secondary); border-radius: var(--radius-pill); padding: .5rem 1rem;
  font-weight: 700; font-size: .82rem; white-space: nowrap; background: #fff;
}
.btn-list-free:hover { background: var(--color-secondary); color: #fff; }
.btn-list-free .free-tag {
  background: var(--color-rating); color: #fff; font-size: .6rem; font-weight: 800;
  padding: .1rem .35rem; border-radius: 5px; margin-left: .4rem; letter-spacing: .3px;
}

/* ---------------------------------------------------------------------
   Mobile header controls (search-icon toggle + hamburger -> offcanvas)
   --------------------------------------------------------------------- */
.navbar-mobile-controls { align-items: center; gap: .4rem; flex-shrink: 0; margin-left: auto; }
.nav-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--color-border);
  background: #fff; color: var(--color-primary); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0; padding: 0;
}
.nav-icon-btn:active { background: var(--color-bg); }
.nav-icon-btn.active { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }

.mobile-search-row {
  max-height: 0; overflow: hidden; width: 100%;
  transition: max-height .25s ease, margin-top .25s ease;
}
.mobile-search-row.open { max-height: 80px; margin-top: .65rem; }
.mobile-search-row .jd-search-bar { max-width: 100%; }

/* ---------------------------------------------------------------------
   Mobile offcanvas menu (hamburger)
   --------------------------------------------------------------------- */
.mobile-offcanvas { width: min(320px, 86vw); }
.mobile-offcanvas .offcanvas-header { border-bottom: 1px solid var(--color-border); padding: 1rem 1.2rem; }
.mobile-offcanvas .offcanvas-body { padding: 1.2rem; }

.mobile-account-card {
  display: flex; align-items: center; gap: .8rem; background: var(--color-bg);
  border-radius: var(--radius-card); padding: .9rem 1rem; margin-bottom: 1.1rem;
}
.mobile-account-card i { font-size: 2.1rem; color: var(--color-secondary); flex-shrink: 0; }
.mobile-account-card strong { display: block; color: var(--color-text); font-size: .95rem; }
.mobile-account-card a { display: block; font-size: .78rem; font-weight: 600; color: var(--color-secondary); margin-top: 2px; }

.mobile-auth-actions { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.mobile-auth-actions .btn { flex: 1 1 0; text-align: center; justify-content: center; }

.mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav-list > li:last-child { border-bottom: none; }
.mobile-nav-list > li > a {
  display: flex; align-items: center; gap: .8rem; padding: .85rem .2rem;
  font-weight: 600; color: var(--color-text); font-size: .95rem;
}
.mobile-nav-list > li > a i { width: 20px; text-align: center; color: var(--color-secondary); font-size: 1rem; }
.mobile-nav-list > li > a:active { color: var(--color-secondary); }

.mobile-nav-accordion-btn {
  width: 100%; border: none; background: none; display: flex; align-items: center;
  justify-content: space-between; padding: .85rem .2rem; font-weight: 600; font-size: .95rem;
  color: var(--color-text);
}
.mobile-nav-accordion-btn span { display: flex; align-items: center; gap: .8rem; }
.mobile-nav-accordion-btn span i:first-child { width: 20px; text-align: center; color: var(--color-secondary); font-size: 1rem; }
.mobile-nav-accordion-btn .chev { font-size: .75rem; color: var(--color-muted); transition: transform .2s ease; }
.mobile-nav-accordion-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.mobile-subcat-list {
  list-style: none; margin: 0 0 .5rem; padding: 0 0 0 2.2rem;
  max-height: 50vh; overflow-y: auto;
}
.mobile-subcat-list li a {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .2rem;
  font-size: .88rem; font-weight: 500; color: var(--color-muted);
  white-space: normal; word-break: break-word; min-height: 40px;
}
.mobile-subcat-list li a i { width: 16px; text-align: center; font-size: .82rem; flex-shrink: 0; }
.mobile-subcat-list li a:active { color: var(--color-secondary); }

/* ---------------------------------------------------------------------
   Hero — bold blue banner with a Justdial-style pill search bar
   --------------------------------------------------------------------- */
.hero {
  background: var(--gradient-dark);
  position: relative;
  overflow: hidden;
  padding: 4.2rem 0 6.5rem;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 12% 20%, rgba(255,255,255,.08) 0, transparent 40%),
                     radial-gradient(circle at 88% 80%, rgba(242,102,0,.25) 0, transparent 45%);
}
.hero-content { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; }
.hero h1 .accent-underline { color: #FFB877; }
.hero p.lead { color: rgba(255,255,255,.82); font-size: 1.08rem; }

.hero-search {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow-lift);
  position: relative;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.5);
}
.hero-search .form-control, .hero-search .form-select {
  border: none; padding: .8rem 1rem; font-size: .95rem; font-weight: 500;
}
.hero-search .form-control:focus, .hero-search .form-select:focus { box-shadow: none; }
.hero-search .divider-v { width: 1px; background: var(--color-border); }
.hero-search .btn-cta { border-radius: 6px; font-size: .95rem; }

.hero-stats { position: relative; z-index: 2; }
.hero-stats .stat-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: #fff; }
.hero-stats .stat-label { color: rgba(255,255,255,.7); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }

/* ---------------------------------------------------------------------
   Justdial-style banner carousel + promo tiles section
   --------------------------------------------------------------------- */
.jd-banner-section { padding: 1.6rem 0 2.2rem; background: var(--color-bg); }

.jd-banner-carousel, .jd-banner-carousel .carousel-inner { height: 100%; border-radius: var(--radius-card); overflow: hidden; }
.jd-banner-carousel { min-height: 280px; box-shadow: var(--shadow-soft); }
.jd-banner-slide {
  position: relative; min-height: 280px; height: 100%; background-size: cover; background-position: center;
  background-color: var(--color-primary); /* shows through until each slide's own image file exists */
  display: flex; align-items: center; padding: 0 2.4rem;
}
/* Dark scrim fading left-to-right, sitting between the photo and the text.
   Guarantees the heading stays readable and visually separated from whatever
   sits on the right side of the background photo (illustration, stars, etc),
   no matter how the "cover" background crops on different screen widths. */
.jd-banner-slide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,0) 66%);
  pointer-events: none;
}
.jd-banner-text { position: relative; z-index: 1; max-width: 400px; }
.jd-banner-kicker { color: #FFD9A8; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .8px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.jd-banner-text h2 { color: #fff; font-size: 1.55rem; font-weight: 800; margin: .5rem 0 1.1rem; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.jd-banner-carousel .carousel-control-prev, .jd-banner-carousel .carousel-control-next { width: 44px; }
.jd-banner-carousel .carousel-indicators { margin-bottom: .6rem; gap: 6px; }
.jd-banner-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .55;
  border: none; background-clip: initial; margin: 0; padding: 0; flex: 0 0 auto;
  transition: opacity .2s ease, background-color .2s ease;
}
.jd-banner-carousel .carousel-indicators .active { opacity: 1; background: var(--color-accent); }

.promo-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  border-radius: var(--radius-card); padding: 1.1rem 1rem; height: 100%; min-height: 130px;
  color: #fff; overflow: hidden; text-decoration: none; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  background-size: cover; background-repeat: no-repeat;
}
.promo-tile::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.promo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: #fff; }
.promo-tile-blue   { background-color: #0F5C99; background-position: center; }
.promo-tile-orange { background-color: #E05F00; background-position: center top; }
.promo-tile-purple { background-color: #7346D6; background-position: center top; }
.promo-tile-green  { background-color: #178A4C; background-position: center top; }
.promo-tile-blue::before,
.promo-tile-orange::before,
.promo-tile-purple::before,
.promo-tile-green::before { background: none; }
.promo-tile-textbox {
  position: relative; z-index: 2; display: inline-block; max-width: 78%;
  background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: 10px; padding: .5rem .65rem .6rem;
}
.promo-tile-label { font-weight: 800; font-size: 1.02rem; line-height: 1.25; display: block; }
.promo-tile-sub { font-size: .76rem; opacity: .95; margin-top: .3rem; display: block; }
.promo-tile-arrow {
  position: relative; z-index: 2; margin-top: auto; align-self: flex-start;
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: .7rem; margin-top: .7rem;
}

.jd-stats-strip { padding-top: 1.4rem; }
.jd-stats-strip .stat-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.jd-stats-strip .stat-label { color: var(--color-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; }

/* ---------------------------------------------------------------------
   Justdial-style category icon grid (matches reference screenshot)
   --------------------------------------------------------------------- */
.jd-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 14px;
}
.jd-cat-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 1.1rem .6rem; text-decoration: none; color: var(--color-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jd-cat-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); border-color: rgba(17,109,182,.3); color: var(--color-text); }
.jd-cat-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(17,109,182,.09); color: var(--color-secondary); font-size: 1.35rem; flex-shrink: 0;
}
/* cycle accent colours like Justdial's category tiles */
.jd-cat-item:nth-of-type(6n+2) .jd-cat-icon { background: rgba(242,102,0,.1); color: var(--color-accent); }
.jd-cat-item:nth-of-type(6n+3) .jd-cat-icon { background: rgba(28,166,90,.1); color: var(--color-rating); }
.jd-cat-item:nth-of-type(6n+4) .jd-cat-icon { background: rgba(139,92,246,.1); color: #8B5CF6; }
.jd-cat-item:nth-of-type(6n+5) .jd-cat-icon { background: rgba(219,39,119,.1); color: #DB2777; }
.jd-cat-item:nth-of-type(6n+6) .jd-cat-icon { background: rgba(11,79,130,.1); color: var(--color-primary); }
.jd-cat-label { font-size: .82rem; font-weight: 700; line-height: 1.25; }

/* Autocomplete dropdown */
.search-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-radius: 10px; box-shadow: var(--shadow-medium);
  margin-top: 6px; z-index: 50; overflow: hidden; display: none;
  border: 1px solid var(--color-border);
}
.search-suggestions .suggestion-item { padding: .65rem 1rem; display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.search-suggestions .suggestion-item:hover { background: var(--color-bg); }

/* ---------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------- */
.section { padding: 3.6rem 0; }
.section-eyebrow { color: var(--color-accent); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; }
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: .3rem; }
.section-subtitle { color: var(--color-muted); max-width: 560px; }
.view-all-link { font-weight: 700; color: var(--color-secondary); white-space: nowrap; }
.view-all-link:hover { color: var(--color-accent); }

/* ---------------------------------------------------------------------
   Category cards — Justdial-style colourful circular icons
   --------------------------------------------------------------------- */
.category-card {
  background: #fff; border-radius: var(--radius-card); padding: 1.5rem 1rem;
  text-align: center; box-shadow: var(--shadow-soft); border: 1px solid var(--color-border);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(242,102,0,.25);
}
.category-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary), #1B8FE0);
  color: #fff; font-size: 1.3rem;
  box-shadow: 0 6px 14px rgba(17,109,182,.25);
}
/* Cycle through a Justdial-like accent palette for variety */
.row .col-6:nth-of-type(5n+2) .category-icon,
.row .col-lg-2:nth-of-type(5n+2) .category-icon { background: linear-gradient(135deg, #F26600, #FF9A4D); box-shadow: 0 6px 14px rgba(242,102,0,.25); }
.row .col-6:nth-of-type(5n+3) .category-icon,
.row .col-lg-2:nth-of-type(5n+3) .category-icon { background: linear-gradient(135deg, #1CA65A, #4FD187); box-shadow: 0 6px 14px rgba(28,166,90,.25); }
.row .col-6:nth-of-type(5n+4) .category-icon,
.row .col-lg-2:nth-of-type(5n+4) .category-icon { background: linear-gradient(135deg, #8B5CF6, #B393F7); box-shadow: 0 6px 14px rgba(139,92,246,.25); }
.row .col-6:nth-of-type(5n+5) .category-icon,
.row .col-lg-2:nth-of-type(5n+5) .category-icon { background: linear-gradient(135deg, #0B4F82, #116DB6); box-shadow: 0 6px 14px rgba(11,79,130,.25); }

.category-card h6 { font-size: .9rem; margin-bottom: .2rem; font-weight: 700; }
.category-card .count { color: var(--color-muted); font-size: .78rem; }

/* ---------------------------------------------------------------------
   Business cards — Justdial-style: clean card, green rating chip, orange call CTA
   --------------------------------------------------------------------- */
.business-card {
  background: #fff; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-soft); height: 100%; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid var(--color-border);
}
.business-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.business-card .thumb-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-border); }
.business-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.business-card:hover .thumb-wrap img { transform: scale(1.06); }

.badge-premium, .badge-featured, .badge-verified {
  position: absolute; top: 10px; font-size: .66rem; font-weight: 700; padding: .3rem .6rem; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .3px;
}
.badge-premium { left: 10px; background: var(--gradient-cta); color: #fff; }
.badge-featured { left: 10px; background: var(--color-secondary); color: #fff; }
.badge-verified { right: 10px; background: var(--color-rating); color: #fff; }

.fav-btn {
  position: absolute; bottom: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); border: none;
}
.fav-btn:hover { color: #EF4444; }
.fav-btn.is-saved,
.fav-btn-inline.is-saved { color: #EF4444; }
.fav-btn-inline.is-saved { border-color: #EF4444; }

.business-card .card-body { padding: 1.05rem 1.15rem; flex-grow: 1; display: flex; flex-direction: column; }
.business-card .biz-category { color: var(--color-secondary); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.business-card h5 { font-size: 1.03rem; margin: .25rem 0; font-weight: 700; }
.business-card .biz-location { color: var(--color-muted); font-size: .82rem; }
.business-card .rating-row { display: flex; align-items: center; gap: .45rem; font-size: .82rem; margin-top: .55rem; }
.business-card .rating-row .stars { color: var(--color-rating); font-size: .78rem; background: rgba(28,166,90,.1); padding: .12rem .45rem; border-radius: 5px; }
.business-card .card-footer-actions { border-top: 1px dashed var(--color-border); margin-top: .8rem; padding-top: .7rem; display: flex; gap: .5rem; }
.business-card .card-footer-actions a { flex: 1; text-align: center; font-size: .8rem; font-weight: 700; padding: .42rem; border-radius: 7px; background: var(--color-bg); color: var(--color-primary); }
.business-card .card-footer-actions a:first-child:hover { background: var(--color-accent); color: #fff; }
.business-card .card-footer-actions a:last-child:hover { background: #25D366; color: #fff; }

/* ---------------------------------------------------------------------
   Skeleton loaders
   --------------------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, #EDF1F7 25%, #F8FAFC 37%, #EDF1F7 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 10px; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-card { height: 320px; border-radius: var(--radius-card); }

/* ---------------------------------------------------------------------
   Offer / testimonial / stats / area cards
   --------------------------------------------------------------------- */
.offer-card { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); position: relative; color: #fff; min-height: 180px; display: flex; align-items: flex-end; padding: 1.2rem; background-size: cover; background-position: center; }
.offer-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,79,130,.9), rgba(11,79,130,.15)); z-index: 0; }
.offer-card .offer-content { position: relative; z-index: 1; }
.offer-card .discount-pill { background: var(--color-accent); padding: .25rem .7rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .78rem; }

/* Category-wide deal cards (Offers page) — every category gets a standing
   discount badge so the page always has something to show, even before
   individual businesses submit their own offers above. */
.cat-offer-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 2.1rem 1rem 1.4rem; text-decoration: none; color: var(--color-text); height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: rgba(17,109,182,.3); color: var(--color-text); }
.cat-offer-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-accent); color: #fff; font-weight: 700; font-size: .72rem;
  padding: .3rem .75rem; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: var(--shadow-soft);
}
.cat-offer-icon {
  width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(17,109,182,.09); color: var(--color-secondary); font-size: 1.5rem; flex-shrink: 0;
}
.cat-offer-card:nth-of-type(6n+2) .cat-offer-icon { background: rgba(242,102,0,.1); color: var(--color-accent); }
.cat-offer-card:nth-of-type(6n+3) .cat-offer-icon { background: rgba(28,166,90,.1); color: var(--color-rating); }
.cat-offer-card:nth-of-type(6n+4) .cat-offer-icon { background: rgba(139,92,246,.1); color: #8B5CF6; }
.cat-offer-card:nth-of-type(6n+5) .cat-offer-icon { background: rgba(219,39,119,.1); color: #DB2777; }
.cat-offer-card:nth-of-type(6n+6) .cat-offer-icon { background: rgba(11,79,130,.1); color: var(--color-primary); }
.cat-offer-name { font-size: .95rem; font-weight: 700; margin: 0; }
.cat-offer-cta { font-size: .78rem; font-weight: 700; color: var(--color-secondary); display: inline-flex; align-items: center; gap: .35rem; }
.cat-offer-cta i { font-size: .68rem; transition: transform .2s ease; }
.cat-offer-card:hover .cat-offer-cta i { transform: translateX(3px); }

.testimonial-card { background: #fff; border-radius: var(--radius-card); padding: 1.8rem; box-shadow: var(--shadow-soft); height: 100%; border-top: 3px solid var(--color-secondary); }
.testimonial-card .quote-icon { color: rgba(17,109,182,.18); font-size: 2rem; }
.testimonial-card .stars { color: var(--color-rating); font-size: .85rem; }

.stats-strip { background: var(--gradient-dark); border-radius: var(--radius-card); padding: 2.5rem 1.5rem; }
.stats-strip .stat-num { color: #fff; font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; }
.stats-strip .stat-label { color: rgba(255,255,255,.7); font-size: .82rem; }

/* Popular Areas — grid layout (not flex-wrap) so chips line up cleanly
   into consistent rows/columns instead of a ragged left-aligned wrap.
   Each chip fills its grid cell, so left and right edges stay aligned
   across rows on every screen width. */
.area-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .65rem;
}
.area-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: .5rem 1rem; font-weight: 600;
  font-size: .85rem; box-shadow: var(--shadow-soft);
}
.area-chip:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

.why-card { display: flex; gap: 1rem; padding: 1.2rem; }
.why-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 12px; background: rgba(242,102,0,.1); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* ---------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------- */
.contact-quick-card {
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.2rem; text-align: center; height: 100%; border: 1px solid var(--color-border);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: block; text-decoration: none; color: var(--color-text);
}
.contact-quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(242,102,0,.25); color: var(--color-text); }
.contact-quick-card .why-icon { margin: 0 auto .9rem; }
.contact-quick-card h6 { font-weight: 700; margin-bottom: .2rem; }
.contact-quick-card p { color: var(--color-muted); font-size: .85rem; margin-bottom: 0; word-break: break-word; }

.contact-map-frame { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-border); }
.contact-map-frame iframe { width: 100%; height: 220px; border: 0; display: block; }

.faq-accordion .accordion-item { border: none; border-bottom: 1px solid var(--color-border); background: transparent; }
.faq-accordion .accordion-item:last-child { border-bottom: none; }
.faq-accordion .accordion-button { font-weight: 700; color: var(--color-text); background: transparent; box-shadow: none; padding: 1.1rem 0; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--color-secondary); background: transparent; box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-button::after { margin-left: 1rem; }
.faq-accordion .accordion-body { padding: 0 0 1.1rem; color: var(--color-muted); }

/* ---------------------------------------------------------------------
   Newsletter / footer
   --------------------------------------------------------------------- */
.newsletter-section { background: var(--gradient-cta); padding: 3rem 0; }
.newsletter-form .form-control { border-radius: var(--radius-pill); padding: .8rem 1.2rem; border: none; }
.newsletter-form .btn { border-radius: var(--radius-pill); padding: .8rem 1.6rem; background: var(--color-primary); color: #fff; font-weight: 700; }

.site-footer { background: var(--color-primary); color: rgba(255,255,255,.72); }
.footer-heading { color: #fff; font-size: .95rem; margin-bottom: 1rem; font-weight: 700; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: rgba(255,255,255,.68); font-size: .88rem; }
.footer-links a:hover { color: var(--color-accent); }
.social-icons { display: flex; gap: .6rem; margin-top: 1rem; }
.social-icons a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.social-icons a:hover { background: var(--color-accent); color: #fff; }
.social-icons.social-icons-alt { margin-top: 0; }
.social-icons.social-icons-alt a { background: var(--color-bg); color: var(--color-secondary); }
.social-icons.social-icons-alt a:hover { background: var(--color-accent); color: #fff; }
.footer-bottom { background: rgba(0,0,0,.2); }

/* Footer "Contact" column — icon + address/phone/email, wraps cleanly on narrow columns */
.footer-contact-list li { display: flex; }
.footer-contact-list a { display: flex; align-items: flex-start; gap: .6rem; }
.footer-contact-list a i { flex-shrink: 0; width: 1.1em; margin-top: .2em; color: rgba(255,255,255,.55); transition: color .2s ease; }
.footer-contact-list a:hover i { color: var(--color-accent); }
.footer-contact-list a span { text-align: left; line-height: 1.4; }

/* Bootstrap's own .text-muted is a dark charcoal meant for light
   backgrounds — on this dark navy footer it was nearly invisible. Use
   this instead anywhere footer copy needs a softer, still-readable tone. */
.footer-muted { color: rgba(255,255,255,.55); }

/* Full-width "All Categories" list under the main footer columns.
   Uses CSS multi-column flow (not a fixed-row grid) so it fills
   top-to-bottom, column by column — but each column's height balances
   naturally instead of being locked to a shared row grid, which is what
   caused the big uneven gaps whenever a longer label wrapped to 2 lines. */
.footer-all-categories { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
.footer-cat-tags { columns: 6; column-gap: 1.5rem; }
.footer-cat-tags a {
  display: block; break-inside: avoid-column; -webkit-column-break-inside: avoid;
  margin-bottom: .8rem; color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.3;
}
.footer-cat-tags a:hover { color: var(--color-accent); }

/* Tablet: scoped to this exact width band so it can never fight with the
   phone rule below over which one "wins" — no cascade-order guesswork. */
@media (min-width: 768px) and (max-width: 991px) {
  .footer-cat-tags { columns: 4; }
}

@media (max-width: 767px) {
  .newsletter-section { padding: 2rem 0; text-align: center; }
  .newsletter-section .col-lg-6:first-child { margin-bottom: .3rem; }

  .site-footer .container.py-5 { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
  .site-footer .row.g-4 { text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-brand .brand-logo-mark { width: 52px; height: 52px; }
  .footer-brand .brand-logo-mark img { width: 46px; height: 46px; }
  .social-icons { justify-content: center; }
  .footer-links a { font-size: .92rem; }
  .footer-links li { margin-bottom: .7rem; }
  .footer-contact-list li { justify-content: center; }
  .footer-contact-list a span { text-align: left; }

  .footer-all-categories { margin-top: 2rem; padding-top: 1.5rem; text-align: center; }
  /* 2 columns reads cleanly on a phone without the cramped, oddly-wrapped
     look 3+ columns gave long names like "Astrology & Pooja Services". */
  .footer-cat-tags { columns: 2; column-gap: 1.2rem; }
  .footer-cat-tags a { font-size: .85rem; margin-bottom: .9rem; }
}

.back-to-top {
  position: fixed; bottom: 22px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-cta); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s ease; z-index: 999;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Side quick-links — fixed edge tabs (Free Listing / Contact),
   Justdial-style "Advertise" / "Free Listing" ribbons.
   --------------------------------------------------------------------- */
.side-quick-links {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 1030; flex-direction: column; align-items: flex-end; gap: 3px;
}
.side-quick-link {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 46px; padding: .9rem .5rem; color: #fff;
  border-radius: 6px 0 0 6px; box-shadow: var(--shadow-medium); text-decoration: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  writing-mode: vertical-rl; text-orientation: mixed;
  transition: padding .25s ease;
}
.side-quick-link i { writing-mode: horizontal-tb; font-size: 1rem; }
.side-quick-link:hover { padding-top: 1.2rem; color: #fff; }
.side-quick-free { background: var(--gradient-cta); }
.side-quick-contact { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); }

@media (max-width: 991px) {
  .side-quick-links { display: none !important; } /* mobile already has the bottom app-nav + FAB */
}

/* ---------------------------------------------------------------------
   Breadcrumbs / misc
   --------------------------------------------------------------------- */
.breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--color-border); padding: .9rem 0; }
.breadcrumb-bar .breadcrumb { margin: 0; font-size: .85rem; }

.form-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 2rem; }

/* ---------------------------------------------------------------------
   Business profile page
   --------------------------------------------------------------------- */

/* Cover: a blurred, scaled-up copy of the same image fills the frame
   behind a non-cropped (object-fit:contain) foreground copy. Uploaded
   banner/ad-style covers keep their full design — including edge text —
   instead of being sliced off by a hard object-fit:cover crop. */
.biz-cover { height: 320px; border-radius: var(--radius-card); overflow: hidden; position: relative; background: var(--color-primary); }
.biz-cover-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(24px) brightness(.55) saturate(1.15);
  transform: scale(1.18);
}
.biz-cover-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }

/* Header card: overlaps the cover slightly, holds logo + name/rating +
   a tidy row of quick actions. Wraps cleanly at any width — the actions
   row drops to its own full-width line via flex-basis at narrow sizes
   instead of squeezing into the name row. */
.biz-header-card {
  position: relative; z-index: 3;
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
  margin-top: -52px;
  padding: 1.25rem 1.4rem 1.35rem;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .9rem 1.3rem;
}
.biz-logo-frame { width: 92px; height: 92px; border-radius: 16px; border: 4px solid #fff; box-shadow: var(--shadow-medium); overflow: hidden; background: #fff; margin-top: -48px; flex-shrink: 0; position: relative; z-index: 2; }
.biz-logo-frame img { width: 100%; height: 100%; object-fit: cover; }

.biz-header-info { flex: 1 1 200px; min-width: 0; }
.biz-header-info h1 { line-height: 1.25; word-break: break-word; }

.badge-verified-inline {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  background: rgba(28,166,90,.12); color: var(--color-rating);
  font-size: .68rem; font-weight: 700; letter-spacing: .2px;
  padding: .24rem .55rem; border-radius: var(--radius-pill); margin-left: .4rem;
}

.biz-quick-actions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
  flex: 1 1 100%; margin-top: .15rem;
}
.biz-quick-actions .btn { border-radius: 10px; font-weight: 700; white-space: nowrap; width: 100%; }
.biz-quick-actions .dropdown { width: 100%; }
.biz-quick-actions .dropdown .btn { width: 100%; }

.profile-tabs {
  flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs .nav-item { flex: 0 0 auto; }
.profile-tabs .nav-link { border-radius: var(--radius-pill); font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.profile-tabs .nav-link.active { background: var(--color-secondary); color: #fff; }
.gallery-thumb { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-thumb:hover img { transform: scale(1.08); }

@media (min-width: 992px) {
  /* Desktop: actions sit inline alongside the name/rating block instead
     of dropping to their own row. */
  .biz-header-card { flex-wrap: nowrap; align-items: center; }
  .biz-quick-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    flex: 0 0 auto; margin-top: 0; margin-left: auto;
  }
  .biz-quick-actions .btn, .biz-quick-actions .dropdown, .biz-quick-actions .dropdown .btn { width: auto; }
}

.review-item { border-bottom: 1px solid var(--color-border); padding: 1.2rem 0; }
.review-item:last-child { border-bottom: none; }
.reviewer-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Dashboard (shared by business + admin) */
.dash-sidebar { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.2rem; }
.dash-sidebar .nav-link { border-radius: 10px; color: var(--color-text); font-weight: 600; padding: .65rem .9rem; margin-bottom: .2rem; }
.dash-sidebar .nav-link:hover { background: var(--color-bg); }
.dash-sidebar .nav-link.active { background: var(--color-secondary); color: #fff; }
.stat-widget { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.3rem; display: flex; align-items: center; gap: 1rem; }
.stat-widget .icon-box { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: var(--color-secondary); }
.stat-widget .num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.table-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.2rem; }

.status-pill { font-size: .72rem; font-weight: 700; padding: .28rem .7rem; border-radius: var(--radius-pill); }
.status-approved { background: rgba(28,166,90,.12); color: #1CA65A; }
.status-pending { background: rgba(245,158,11,.14); color: #B45309; }
.status-rejected, .status-suspended { background: rgba(239,68,68,.12); color: #DC2626; }

/* Newsletter campaign cards (admin/newsletter-campaigns.php) */
.campaign-card-subject { min-width: 0; word-break: break-word; }
.campaign-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.campaign-card-actions form { flex: 0 0 auto; }
.campaign-card-actions .btn { white-space: nowrap; }
@media (max-width: 575px) {
  .campaign-card-actions { flex-direction: column; }
  .campaign-card-actions form,
  .campaign-card-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Mobile bottom app-nav (phones/tablets only, hidden on lg+ via d-lg-none)
   --------------------------------------------------------------------- */
.mobile-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: #fff; border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 18px rgba(11,79,130,.08);
  display: flex; align-items: center; justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .66rem; font-weight: 600; color: var(--color-muted);
  padding: 4px 8px; border-radius: 10px; flex: 1; text-align: center;
}
.mobile-bottom-nav a i { font-size: 1.05rem; }
.mobile-bottom-nav a.active { color: var(--color-secondary); }
.mobile-bottom-nav a.mnav-add {
  flex: 0 0 auto; width: 50px; height: 50px; margin-top: -22px; border-radius: 50%;
  background: var(--gradient-cta); color: #fff; justify-content: center;
  box-shadow: var(--shadow-lift);
}
.mobile-bottom-nav a.mnav-add i { font-size: 1.15rem; }

/* ---------------------------------------------------------------------
   Responsive breakpoints — tablets and below
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero { padding: 3rem 0 5rem; }
  .hero-search .divider-v { display: none; }
  body { padding-bottom: 70px; } /* room for fixed mobile bottom nav */
  .back-to-top { bottom: 80px; }

  /* Header: single compact row (brand + search icon + hamburger); the
     search bar itself lives in the collapsible row below, and full nav
     links + auth actions live in the offcanvas menu. Nothing wraps or
     overlaps, so there's no risk of horizontal overflow. */
  .main-navbar { padding: .55rem 0; }

  .jd-banner-slide { min-height: 220px; padding: 0 1.4rem; }
  .jd-banner-text h2 { font-size: 1.25rem; }
  .promo-tile { min-height: 105px; padding: .9rem .8rem; }
  .promo-tile-label { font-size: .88rem; }
}

/* ---------------------------------------------------------------------
   Responsive breakpoints — phones
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Full grid of category boxes on phones — every box shows completely
     and lines up evenly, instead of the old horizontal-scroll strip that
     cropped the last visible card at the edge of the screen. */
  .jd-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .jd-cat-item { padding: .8rem .3rem; }
  .jd-cat-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 12px; }
  .jd-cat-label { font-size: .7rem; }

  .topbar { font-size: .74rem; }
  .brand-mark { font-size: 1.15rem; }
  .brand-logo-mark img { width: 44px; height: 44px; }

  /* Mobile search row (revealed by the search icon): compact single row,
     location shrinks, input grows — same safe pattern used everywhere. */
  .jd-search-inner { height: 44px; }
  .jd-location-pill { max-width: 92px; padding: 0 .55rem; gap: .25rem; }
  .jd-location-pill i { display: none; }
  .jd-city-select { font-size: .74rem; max-width: 84px; }
  .jd-search-input { font-size: .82rem; padding: 0 .6rem; }
  .jd-search-input::placeholder { font-size: .78rem; }
  .jd-search-submit { width: 44px; }
  .mobile-search-row.open { max-height: 60px; }

  .hero { padding: 2.2rem 0 3.5rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero p.lead { font-size: .95rem; }
  .hero-search { padding: 10px; border-radius: 14px; }
  .hero-search .row.g-0 > div { margin-bottom: 8px; }
  .hero-stats .stat-num { font-size: 1.4rem; }
  .hero-stats .stat-label { font-size: .72rem; }

  /* Banner + promo tiles stack vertically on phones */
  .jd-banner-section { padding: 1.1rem 0 1.6rem; }
  .jd-banner-carousel, .jd-banner-slide { min-height: 190px; }
  .jd-banner-slide { padding: 0 1.1rem; }
  .jd-banner-text { max-width: 68%; }
  .jd-banner-kicker { font-size: .68rem; }
  .jd-banner-text h2 { font-size: 1.08rem; margin: .35rem 0 .8rem; }
  .jd-banner-text .btn { padding: .5rem 1.1rem; font-size: .85rem; }
  .jd-banner-carousel .carousel-control-prev,
  .jd-banner-carousel .carousel-control-next {
    top: auto; bottom: 6px; height: 32px; width: 32px; opacity: .8;
  }
  .jd-banner-carousel .carousel-control-prev { left: 4px; }
  .jd-banner-carousel .carousel-control-next { right: 4px; }
  .jd-banner-carousel .carousel-control-prev-icon,
  .jd-banner-carousel .carousel-control-next-icon { width: 1rem; height: 1rem; }
  .promo-tile { min-height: 96px; padding: .8rem .7rem; border-radius: 12px; }
  .promo-tile-label { font-size: .82rem; }
  .promo-tile-sub { font-size: .68rem; }
  .promo-tile-textbox { padding: .4rem .55rem .5rem; border-radius: 8px; max-width: 82%; }
  .jd-stats-strip .stat-num { font-size: 1.2rem; }
  .jd-stats-strip .stat-label { font-size: .66rem; }

  /* Tighter vertical rhythm between stacked sections on phones — the
     unconditional 3.6rem top+bottom padding (desktop value) was leaving
     large dead gaps between sections like Popular Areas and Testimonials. */
  .section { padding: 2.2rem 0; }
  .section-title { font-size: 1.35rem; }
  .category-card { padding: 1rem .5rem; }

  /* Popular Areas: 2 evenly-sized columns on phones so chips align into
     a clean grid instead of wrapping raggedly based on text length. */
  .area-chip-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .area-chip { font-size: .82rem; padding: .55rem .6rem; white-space: normal; text-align: center; }

  /* Testimonials: slightly tighter card padding + smaller quote icon so
     cards feel proportioned on a narrow column instead of oversized. */
  .testimonial-card { padding: 1.3rem; }
  .testimonial-card .quote-icon { font-size: 1.5rem; }
  .testimonial-card p { font-size: .92rem; margin-top: .5rem !important; }

  /* Business-card grids: 2 per row on phones instead of 1 full-width card
     (see the col-6 added alongside col-md-6/col-lg-* in the PHP templates).
     Everything below is scaled down to fit that narrower column cleanly. */
  .row:has(> .business-card), .row:has(> div > .business-card) { --bs-gutter-x: .65rem; --bs-gutter-y: .9rem; }
  .business-card .card-body { padding: .7rem .75rem; }
  .business-card .biz-category { font-size: .62rem; }
  .business-card h5 { font-size: .84rem; margin: .2rem 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .business-card .biz-location { font-size: .7rem; }
  .business-card .biz-location i { font-size: .68rem; }
  .business-card .rating-row { font-size: .7rem; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
  .business-card .rating-row .stars { font-size: .66rem; padding: .08rem .35rem; }
  .business-card .card-footer-actions { margin-top: .55rem; padding-top: .5rem; gap: .35rem; }
  .business-card .card-footer-actions a { font-size: .68rem; padding: .32rem .2rem; }
  .badge-premium, .badge-featured, .badge-verified { font-size: .56rem; padding: .22rem .45rem; top: 6px; }
  .badge-premium, .badge-featured { left: 6px; }
  .badge-verified { right: 6px; }
  .fav-btn { width: 27px; height: 27px; bottom: 6px; right: 6px; font-size: .8rem; }

  .why-card { flex-direction: column; text-align: center; align-items: center; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  /* Business profile: shorter cover, smaller overlapping logo, header
     card padding tightened, quick actions become a compact horizontally
     scrollable pill row instead of stacked full-width buttons. */
  .biz-cover { height: 190px; }
  .biz-header-card { margin-top: -34px; padding: 1rem 1.1rem 1.1rem; gap: .7rem 1rem; border-radius: 12px; }
  .biz-logo-frame { width: 72px; height: 72px; border-radius: 13px; margin-top: -34px; }
  .biz-header-info h1 { font-size: 1.18rem; }
  .biz-header-info .text-muted { font-size: .84rem; }
  .badge-verified-inline { font-size: .62rem; padding: .2rem .5rem; }
  .biz-quick-actions { gap: .5rem; }
  .biz-quick-actions .btn { font-size: .82rem; padding: .55rem .6rem; }

  .table-card, .form-card { padding: 1rem; }
  .dash-sidebar { margin-bottom: 1rem; }
  .footer-bottom { text-align: center; }
  .back-to-top { width: 38px; height: 38px; right: 14px; bottom: 76px; }
}

@media (max-width: 400px) {
  .jd-location-pill { display: none; }
  .jd-divider { display: none; }
}
@media (max-width: 420px) {
  /* Drop to 3 columns on very narrow phones so longer category names
     (e.g. "Home Services") have room to wrap onto two lines cleanly
     instead of squeezing 4-across. */
  .jd-cat-grid { grid-template-columns: repeat(3, 1fr); }
  /* Popular Areas: drop to a single column on very narrow phones so
     longer town names (e.g. "Uthamapalayam") never get clipped or force
     the grid to overflow. */
  .area-chip-grid { grid-template-columns: 1fr; }
}

/* Horizontal scroll safety for wide tables/dashboards on small screens */
@media (max-width: 575px) {
  .table-responsive, table { font-size: .82rem; }
  .stat-widget { padding: 1rem; }
}
/* ---------------- Password field show/hide toggle ---------------- */
.password-field-wrap { position: relative; }
.password-field-wrap .form-control { padding-right: 44px; }
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #64748B;
  cursor: pointer;
}
.password-toggle:hover { color: #0F172A; }
.password-toggle:focus-visible { outline: 2px solid #0F172A; outline-offset: -2px; border-radius: 6px; }

/* =====================================================================
   BUSINESSES — instant AJAX filters, active filter chips, offcanvas
   ===================================================================== */
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.active-filter-chips.d-none { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.filter-chip:hover { border-color: var(--color-secondary); }
.filter-chip i { font-size: .7rem; color: var(--color-muted); }
.filter-chip-clear {
  color: var(--color-accent);
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  font-weight: 600;
}

#resultsGrid { transition: opacity .15s ease; }
#resultsGrid.is-fetching { opacity: .45; pointer-events: none; }

/* Bootstrap 5.3 offcanvas-lg becomes a static block at ≥992px; keep it
   looking like a plain sidebar card there, and a proper drawer below it. */
#filterOffcanvas.offcanvas-lg { padding: 0; }
#filterOffcanvas .offcanvas-body { padding: 1.2rem; }