/* ════════════════════════════════════════════════════════════════
   JUST4DESI BRAND THEME  ·  Light, royal-purple + marigold-orange
   Derived from Documents/Design-System (Brand Guidelines + Frontend Guide).
   Loaded after Bootstrap 5.3 + styles.css to theme the public site.
   No product name is hard-coded here — the UI reads config('app.name').

   This file keeps every legacy --bd-* token/selector name working
   (only the VALUES changed) so the ~20 shared storefront views that
   already reference --bd-* / .bd-* keep rendering correctly, and adds
   the canonical Just4Desi --jd-* tokens + .jd- / .btn-jd- component
   library (verbatim from the approved Layout 03 homepage) at the end
   for the rebuilt navbar / footer / homepage.
════════════════════════════════════════════════════════════════ */

:root {
  /* ── Legacy brand-token names, repointed to the Just4Desi palette ──
     --bd-lime      → primary brand action color   → Purple 700
     --bd-charcoal  → page/surface base             → White
     --bd-lavender  → secondary accent              → Purple 600
     --bd-offwhite  → text color on the base surface→ Gray 900 (dark, since base is now light)
     --bd-pink      → highlight / alert             → Red 600                                   */
  --bd-lime:        #54227f;
  --bd-charcoal:    #ffffff;
  --bd-lavender:    #6a2d9e;
  --bd-offwhite:    #22202a;
  --bd-pink:        #cc3355;

  /* Surfaces & lines */
  --bd-card-bg:     #ffffff;
  --bd-card-bg-2:   #f7f5fa;
  --bd-footer-bg:   #f7f5fa;
  --bd-border:      rgba(52,19,79,.15);
  --bd-border-soft: #e4e0ea;

  /* Text opacities (on the white/cream surface) */
  --bd-text:        #22202a;
  --bd-text-70:     rgba(34,32,42,.72);
  --bd-text-55:     rgba(34,32,42,.58);
  --bd-text-40:     rgba(34,32,42,.42);

  /* Type */
  --bd-font-head:   'Poppins', sans-serif;
  --bd-font-body:   'Inter', sans-serif;

  /* Radii (Just4Desi shape language — see Brand Guidelines §7) */
  --bd-radius-sm:   8px;
  --bd-radius:      14px;
  --bd-radius-lg:   16px;
  --bd-radius-pill: 20px;

  /* Bootstrap variable overrides (native utilities pick these up) */
  --bs-primary:        #54227f;
  --bs-primary-rgb:    84,34,127;
  --bs-body-bg:        #ffffff;
  --bs-body-color:     #22202a;
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-border-color:   #e4e0ea;

  /* ── Canonical Just4Desi tokens (used by the .jd- and .btn-jd- library) ── */
  --jd-purple-900:#34134f; --jd-purple-800:#3f1a63;
  --jd-purple-700:#54227f; --jd-purple-600:#6a2d9e;
  --jd-orange-600:#e8780f; --jd-orange-500:#f4901e; --jd-orange-100:#fdecd6;
  --jd-red-600:#cc3355; --jd-cream:#fdf7ec;
  --jd-gray-900:#22202a; --jd-gray-600:#6b6776;
  --jd-gray-300:#e4e0ea; --jd-gray-100:#f7f5fa;
  --font-head:'Poppins',sans-serif; --font-body:'Inter',sans-serif;
}

/* ── BASE ───────────────────────────────────────────────────────── */
html { scrollbar-color: var(--bd-lime) var(--bd-card-bg-2); scrollbar-width: thin; }
body {
  font-family: var(--bd-font-body);
  background: var(--bd-charcoal);
  color: var(--bd-offwhite);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .display-font {
  font-family: var(--bd-font-head);
}
a { color: var(--bd-offwhite); text-decoration: none; }
a:hover { color: var(--bd-lime); }
.text-lime { color: var(--bd-lime) !important; }
.text-lavender { color: var(--bd-lavender) !important; }
.text-pink { color: var(--bd-pink) !important; }
.text-muted, .text-secondary { color: var(--bd-text-55) !important; }
.bg-charcoal { background: var(--bd-charcoal) !important; }
.bg-card { background: var(--bd-card-bg) !important; }
hr { border-color: var(--bd-border-soft); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bd-card-bg-2); }
::-webkit-scrollbar-thumb { background: var(--bd-lime); border-radius: 4px; }

.section-label, .eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--jd-orange-600); font-family: var(--bd-font-body);
}
.section-title {
  font-family: var(--bd-font-head); font-weight: 800; line-height: 1.05;
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.section-title .lime { color: var(--bd-lime); }

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn { font-family: var(--bd-font-body); border-radius: var(--bd-radius-pill); font-weight: 600; }
/* styles.css has .btn.btn-primary { background: #96421d } (two-class specificity) so match it */
.btn-primary, .btn-lime, .bd-btn-primary,
.btn.btn-primary, .btn.btn-lime, .btn.bd-btn-primary {
  background: var(--bd-lime) !important; border-color: var(--bd-lime) !important;
  color: var(--bd-charcoal) !important;
  font-family: var(--bd-font-body); font-weight: 600;
  padding: 10px 26px; border-radius: var(--bd-radius-pill) !important;
  transition: background .2s, transform .15s;
}
.btn-primary:hover, .btn-lime:hover, .bd-btn-primary:hover,
.btn.btn-primary:hover, .btn.btn-lime:hover {
  background: var(--jd-purple-800) !important; color: var(--bd-charcoal) !important; transform: translateY(-2px);
}
.btn-lavender { background: var(--bd-lavender); color: var(--bd-charcoal) !important; }
.btn-pink { background: var(--bd-pink); color: var(--bd-charcoal) !important; }
.btn-outline-light, .bd-btn-outline {
  background: transparent; border: 1.5px solid var(--bd-border); color: var(--bd-offwhite);
  border-radius: var(--bd-radius-pill); padding: 9px 22px; font-weight: 600;
  transition: border-color .2s, color .2s;
}
.btn-outline-light:hover, .bd-btn-outline:hover { border-color: var(--bd-lime); color: var(--bd-lime); background: transparent; }

/* ── BADGES & PILLS ─────────────────────────────────────────────── */
.bd-badge {
  display: inline-block; font-family: var(--bd-font-head); font-weight: 700; font-size: 1rem;
  padding: 3px 12px; border-radius: var(--bd-radius-pill); background: var(--bd-lime); color: var(--bd-charcoal);
}
.bd-badge.lavender { background: var(--bd-lavender); }
.bd-badge.pink { background: var(--bd-pink); }
.bd-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; border-radius: var(--bd-radius-pill);
  padding: 6px 16px; background: rgba(244,144,30,.1); border: 1px solid rgba(244,144,30,.25); color: var(--jd-orange-600);
}
.bd-city-tag {
  color: var(--bd-lavender); background: rgba(106,45,158,.1);
  padding: 3px 12px; border-radius: var(--bd-radius-pill); font-size: .76rem; font-weight: 600;
}

/* ── CARDS ──────────────────────────────────────────────────────── */
.card, .bd-card {
  background: var(--bd-card-bg); border: 1px solid var(--bd-border-soft);
  border-radius: var(--bd-radius-lg); overflow: hidden; color: var(--bd-offwhite);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover, .bd-card:hover {
  border-color: var(--bd-lime); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(52,19,79,.16);
}
.bd-card .head {
  height: 140px; display: flex; align-items: center; justify-content: center; font-size: 3rem;
  background: var(--jd-purple-700); color: #fff;
}
.bd-card .body { padding: 18px 20px; }
.bd-card .store { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bd-text-40); }
.bd-card .title { font-family: var(--bd-font-head); font-size: 1.3rem; font-weight: 700; line-height: 1.1; margin: 4px 0 8px; }
.bd-card .desc { font-size: .85rem; color: var(--bd-text-55); line-height: 1.5; }
.bd-card .cta {
  display: block; background: var(--jd-orange-500); color: #fff; text-align: center;
  font-family: var(--bd-font-head); font-weight: 700; padding: 12px; transition: background .2s;
}
.bd-card .cta:hover { background: var(--jd-orange-600); color: #fff; }

/* ── CATEGORY TILE ──────────────────────────────────────────────── */
.bd-cat-tile {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  background: var(--bd-card-bg); border: 1px solid var(--bd-border-soft);
  border-radius: var(--bd-radius); padding: 22px 20px; height: 100%;
  transition: border-color .2s, transform .2s, background .2s;
}
.bd-cat-tile:hover { border-color: var(--bd-lime); transform: translateY(-4px); background: var(--bd-card-bg-2); }
.bd-cat-tile .ic { font-size: 1.8rem; color: var(--jd-orange-600); }
.bd-cat-tile .nm { font-family: var(--bd-font-head); font-weight: 700; font-size: 1.15rem; color: var(--bd-offwhite); }
.bd-cat-tile .ct { font-size: .76rem; color: var(--bd-text-40); }

/* ── REVEAL / COUPON CODE ───────────────────────────────────────── */
.bd-reveal {
  border: 2px dashed var(--jd-orange-500); border-radius: var(--bd-radius);
  background: var(--jd-orange-100); padding: 18px 20px; text-align: center;
}
.bd-reveal .code {
  font-family: var(--bd-font-head); font-weight: 800; font-size: 1.8rem; letter-spacing: 2px;
  color: var(--jd-orange-600);
}
.bd-reveal .locked { color: var(--bd-text-55); font-size: .9rem; }

/* ── FORMS ──────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: #fff; border: 1.5px solid var(--bd-border-soft);
  color: var(--bd-offwhite); border-radius: var(--bd-radius-sm);
}
.form-control::placeholder { color: var(--bd-text-40); }
.form-control:focus, .form-select:focus {
  background: #fff; border-color: var(--bd-lime);
  color: var(--bd-offwhite); box-shadow: 0 0 0 3px rgba(84,34,127,.15);
}
.bd-input-group {
  display: flex; background: #fff; border: 1.5px solid var(--bd-border-soft);
  border-radius: var(--bd-radius-pill); overflow: hidden; max-width: 480px;
}
.bd-input-group input { flex: 1; background: transparent; border: none; color: var(--bd-offwhite); padding: 13px 22px; }
.bd-input-group input:focus { outline: none; box-shadow: none; }
.bd-input-group button {
  background: var(--bd-lime); border: none; color: var(--bd-charcoal);
  font-family: var(--bd-font-head); font-weight: 700; font-size: 1.05rem; padding: 12px 26px;
}

/* ── NAVBAR (legacy shared shell — kept for any direct references) ── */
/* styles.css has .navbar { background: #fff !important } so we need higher specificity */
.bd-nav, .bd-nav.navbar, nav.bd-nav {
  background: rgba(255,255,255,.92) !important; backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bd-border-soft) !important;
  box-shadow: none !important; padding: 14px 0;
}
.bd-nav.scrolled, .bd-nav.navbar.scrolled { background: #ffffff !important; }
.bd-brand {
  font-family: var(--bd-font-head); font-weight: 700; font-size: 1.6rem;
  color: var(--jd-purple-800); letter-spacing: -.2px;
}
.bd-brand span { color: var(--jd-orange-500); }
/* styles.css sets .nav-link { color: #222 } — beat it with !important */
.bd-nav .nav-link, .bd-nav.navbar .nav-link { color: var(--bd-text-70) !important; font-weight: 600; font-size: .92rem; padding: 6px 14px; }
.bd-nav .nav-link:hover, .bd-nav.navbar .nav-link:hover { color: var(--bd-lime) !important; }
.bd-nav .nav-link.active, .bd-nav.navbar .nav-link.active { color: var(--jd-orange-600) !important; }
.bd-city-select {
  background: rgba(106,45,158,.1); border: 1px solid rgba(106,45,158,.25);
  color: var(--bd-lavender); border-radius: var(--bd-radius-pill); padding: 6px 14px; font-weight: 600; font-size: .85rem;
}

/* ── TICKER / MARQUEE ───────────────────────────────────────────── */
.bd-ticker { background: var(--jd-orange-500); overflow: hidden; padding: 9px 0; white-space: nowrap; }
.bd-ticker .track { display: inline-block; animation: bd-marquee 22s linear infinite; }
.bd-ticker span {
  font-family: var(--bd-font-head); font-weight: 700; color: #fff;
  letter-spacing: .5px; margin: 0 22px;
}
@keyframes bd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTIONS / HERO ────────────────────────────────────────────── */
.bd-section { padding: 72px 0; position: relative; }
.bd-hero {
  padding: 90px 0 70px;
  background:
    radial-gradient(circle at 80% 0%, rgba(244,144,30,.10), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(106,45,158,.07), transparent 50%),
    var(--jd-cream);
}
.bd-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; }
.bd-grid-bg {
  background:
    linear-gradient(rgba(84,34,127,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,34,127,.035) 1px, transparent 1px),
    var(--bd-charcoal);
  background-size: 48px 48px, 48px 48px, auto;
}
.underline-scribble { display: inline-block; position: relative; }
.underline-scribble::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 6px;
  background: var(--jd-orange-500); border-radius: 3px; transform: rotate(-1deg);
}

/* ── TABLES (public) ────────────────────────────────────────────── */
.table { color: var(--bd-offwhite); }
.table > :not(caption) > * > * { background: transparent; border-color: var(--bd-border-soft); color: var(--bd-offwhite); }

/* ── FOOTER (legacy shared shell — kept for any direct references) ── */
.bd-footer { background: var(--bd-footer-bg); border-top: 1px solid var(--bd-border-soft); color: var(--bd-text-55); padding: 56px 0 28px; }
.bd-footer a { color: var(--bd-text-55); }
.bd-footer a:hover { color: var(--bd-lime); }
.bd-footer h6 { color: var(--bd-offwhite); font-family: var(--bd-font-head); letter-spacing: .2px; margin-bottom: 14px; }

/* ── PRICING CARDS ──────────────────────────────────────────────── */
.bd-price-card { background: var(--bd-card-bg); border: 1px solid var(--bd-border-soft); border-radius: var(--bd-radius-lg); padding: 30px 26px; height: 100%; position: relative; }
.bd-price-card.featured { border-color: var(--bd-lime); box-shadow: 0 0 0 1px var(--bd-lime), 0 20px 50px rgba(84,34,127,.10); }
.bd-price-card .pkg-name { font-family: var(--bd-font-head); font-weight: 700; font-size: 1.5rem; }
.bd-price-card .price { font-family: var(--bd-font-head); font-weight: 800; font-size: 2.8rem; color: var(--jd-red-600); line-height: 1; }
.bd-price-card .price small { font-size: 1rem; color: var(--bd-text-55); font-family: var(--bd-font-body); }
.bd-price-card .feat { list-style: none; padding: 0; margin: 18px 0; }
.bd-price-card .feat li { padding: 7px 0; color: var(--bd-text-70); font-size: .9rem; border-bottom: 1px solid var(--bd-border-soft); }
.bd-price-card .feat li::before { content: '✦'; color: var(--jd-orange-500); margin-right: 8px; }
.bd-price-card .pkg-badge { position: absolute; top: -12px; right: 22px; background: var(--jd-orange-500); color: #fff; font-family: var(--bd-font-head); font-weight: 700; font-size: .78rem; padding: 4px 14px; border-radius: var(--bd-radius-pill); }

/* ════════════════════════════════════════════════════════════════
   PUBLIC INSIDE PAGES — LEGACY CLASS OVERRIDES
   Re-skins the older marketplace markup (business directory, coupon
   category + detail) into the light, royal-purple/marigold-orange
   Just4Desi brand system WITHOUT rewriting every blade template.
════════════════════════════════════════════════════════════════ */

/* ── Dark Bootstrap buttons/badges (barter, classified, videos,
   events, membership plans) → Just4Desi purple ─────────────────── */
.btn-dark {
  background: var(--jd-purple-700) !important; border-color: var(--jd-purple-700) !important;
  color: #fff !important;
}
.btn-dark:hover, .btn-dark:focus {
  background: var(--jd-purple-800) !important; border-color: var(--jd-purple-800) !important;
}
.btn-outline-dark {
  background: transparent !important; border-color: var(--jd-purple-700) !important;
  color: var(--jd-purple-700) !important;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
  background: var(--jd-purple-700) !important; color: #fff !important;
}
.badge.bg-dark { background: var(--jd-purple-700) !important; }

/* ── Page hero band (was a dark neon-lime band) ──────────────────── */
.header-block {
  background:
    radial-gradient(circle at 82% 0%, rgba(244,144,30,.10), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(106,45,158,.07), transparent 50%),
    var(--jd-cream) !important;
  height: auto !important;
  padding: 64px 0 52px !important;
  border-bottom: 1px solid var(--bd-border-soft);
}
.header-block .text-dark,
.header-block h1, .header-block h2 { color: var(--bd-offwhite) !important; }
.header-block h1 {
  font-family: var(--bd-font-head); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1;
}
.header-block p, .header-block .text-muted { color: var(--bd-text-55) !important; }
.header-block img { border: 1px solid var(--bd-border-soft); }

/* ── Search / filter panel ───────────────────────────────────────── */
.search-panel,
.search-panel.bg-white {
  background: var(--bd-card-bg) !important;
  border-bottom: 1px solid var(--bd-border-soft);
  box-shadow: none !important;
}
.header-search-button {
  background: var(--jd-orange-500) !important; color: #fff !important;
  border-radius: var(--bd-radius-pill) !important;
  font-family: var(--bd-font-body); font-weight: 600;
  transition: background .2s;
}
.header-search-button:hover { background: var(--jd-orange-600) !important; }
.reset-search a {
  background: transparent !important; border: 1.5px solid var(--bd-border) !important;
  color: var(--bd-offwhite) !important; border-radius: var(--bd-radius-pill) !important;
}
.reset-search a:hover { border-color: var(--bd-lime) !important; color: var(--bd-lime) !important; }
.search-panel .index_catagory, .search-panel .index_catagory::placeholder { color: var(--bd-text-55); }

/* ── Category bubble pills ───────────────────────────────────────── */
.cate-bubbles li {
  background: rgba(84,34,127,.06) !important;
  border: 1.5px solid var(--bd-border) !important;
  color: var(--bd-lime) !important;
}
.cate-bubbles li a { color: var(--bd-lime) !important; }
.cate-bubbles li:hover { background: var(--bd-lime) !important; border-color: var(--bd-lime) !important; }
.cate-bubbles li:hover a, .cate-bubbles li:hover { color: #fff !important; }

/* ── Indigo buttons → orange per-card CTA (mirrors "View Coupon") ─── */
.btn-indigo {
  background: var(--jd-orange-500) !important; border-color: var(--jd-orange-500) !important;
  color: #fff !important; border-radius: var(--bd-radius-pill) !important;
  font-family: var(--bd-font-body); font-weight: 600;
  transition: background .2s, transform .15s;
}
.btn-indigo:hover { background: var(--jd-orange-600) !important; color: #fff !important; transform: translateY(-2px); }
.btn-outline, .btn-outline-indigo {
  background: transparent !important; border: 1.5px solid var(--bd-border) !important;
  color: var(--bd-offwhite) !important; border-radius: var(--bd-radius-pill) !important;
}
.btn-outline:hover, .btn-outline-indigo:hover { border-color: var(--jd-orange-500) !important; color: var(--jd-orange-600) !important; background: transparent !important; }

/* ── Badges & card titles ────────────────────────────────────────── */
.bg-marigold { background: var(--jd-orange-500) !important; }
.badge.bg-marigold, .badge.text-charcoal { color: #fff !important; }
.card-body .text-charcoal, .card-title, .card-title a, .coupon-card .text-charcoal {
  color: var(--bd-offwhite) !important;
}
.card-title a:hover { color: var(--bd-lime) !important; }

/* ── Coupon code reveal box ───────────────────────────────────────── */
.coupon-code-box, .coupon-code-box.bg-light {
  background: var(--jd-orange-100) !important;
  border: 2px dashed var(--jd-orange-500) !important;
}
.coupon-code-box code { color: var(--jd-orange-600) !important; }

/* ── Prices (discount values — Red 600 per Brand Guidelines) ───────── */
.price, .price.text-success, .text-success.fs-3, .text-success.fs-6,
.main-price-label .price { color: var(--jd-red-600) !important; }
.main-price-original, .main-reg-price-label { color: var(--bd-text-55) !important; }

/* ── Card chrome on detail pages ────────────────────────────────── */
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--bd-border-soft) !important;
  color: var(--bd-offwhite);
}
.card-header h3, .card-header h4, .card-header h5 { color: var(--bd-offwhite); }
/* styles.css: .sidebar-card .card-header h4 { color:#ffffff } is more specific and
   was left over from the old dark card-header theme — overrides our dark text
   color above and made "Opening Hours" (etc.) invisible on the now-white card. */
.sidebar-card .card-header h4 { color: var(--bd-offwhite) !important; }
/* styles.css: .breadcrumb li a { color:#96421d !important } — 3-part selector, need to match */
.breadcrumb-item.active { color: var(--bd-text-55); }
.breadcrumb li a, .breadcrumb a, .breadcrumb-item a {
  color: var(--bd-text-55) !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  font-size: inherit !important;
}
.breadcrumb li a:hover, .breadcrumb a:hover, .breadcrumb-item a:hover { color: var(--bd-lime) !important; }
.deal-description, .deal-description p, .exclusive, .exclusive .highlight li, .unlock { color: var(--bd-text-70); }
/* styles.css: .card-top-side { border: 2px solid #96421D } */
.card-top-side { border-color: var(--bd-border-soft) !important; }
.card-top-side .topbtn a { color: var(--bd-text-70); }
.card-top-side .topbtn a:hover { color: var(--bd-lime); }

/* ── Disclaimer / warning alerts → on-brand subtle ──────────────── */
.alert-warning, .alert1.alert-warning {
  background: rgba(204,51,85,.06) !important;
  border: 1px solid rgba(204,51,85,.22) !important;
  color: var(--bd-text-70) !important;
}

/* ── Section-level backgrounds — beat legacy !important rules ───── */
/* coupons-section & coupon-inside both carry !important in styles.css */
.coupons-section, .coupon-inside {
  background: var(--bd-charcoal) !important;
  background-image: none !important;
}
/* product-info (coupon detail wrapper), directory sections */
.product-info, .product-directory,
.directory-businesses-inside,
.featured-businesses-inside, .featured-businesses,
.events { background: var(--bd-charcoal) !important; }

/* ── Cards inside legacy sections ────────────────────────────────── */
.product-info .card,
.directory-businesses-inside .card,
.featured-businesses-inside .card,
.coupons-section .card,
.coupon-inside .card {
  background: var(--bd-card-bg) !important;
  border-color: var(--bd-border-soft) !important;
  color: var(--bd-offwhite) !important;
}
.product-info .card-body,
.directory-businesses-inside .card-body,
.featured-businesses-inside .card-body,
.coupons-section .card-body,
.coupon-inside .card-body { background: transparent !important; color: var(--bd-offwhite) !important; }

/* ── Text overrides for legacy inside-page elements ─────────────── */
.text-dark, .text-charcoal, h3.text-dark, h5.text-dark { color: var(--bd-offwhite) !important; }
.pro-title h2, .pro-titlebar h2, .pro-title span a { color: var(--bd-offwhite) !important; }
.pro-title span, .pro-titlebar span, .coupon-author a { color: var(--bd-text-55) !important; }
/* .deal-timer had yellow bg (#ffd94d) in styles.css — now a soft orange chip */
.deal-timer {
  background: var(--jd-orange-100) !important;
  color: var(--jd-orange-600) !important;
  border-radius: var(--bd-radius-sm) !important;
}
.text-rust { color: var(--bd-pink) !important; }

/* ── Dropdown menu ───────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--bd-card-bg) !important;
  border: 1px solid var(--bd-border-soft) !important;
}
.dropdown-item { color: var(--bd-text-70) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(84,34,127,.06) !important; color: var(--bd-lime) !important;
}

/* ── Shadow softening — purple-tinted per Brand Guidelines §7/§9 ──── */
.shadow, .shadow-sm { box-shadow: 0 4px 24px rgba(52,19,79,.14) !important; }

/* ════════════════════════════════════════════════════════════════
   JUST4DESI COMPONENT LIBRARY  ·  ported verbatim from the approved
   Layout 03 homepage. Used by the rebuilt navbar, footer, and home
   page sections. Tokens come from the canonical --jd-* / --font-* set
   defined in :root above.
════════════════════════════════════════════════════════════════ */

.section-pad { padding: 4.25rem 0; }
.text-purple { color: var(--jd-purple-700) !important; }
.text-orange { color: var(--jd-orange-600) !important; }
.bg-cream { background: var(--jd-cream) !important; }
.bg-soft { background: var(--jd-gray-100) !important; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-jd-purple {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--jd-purple-700); border: 1.5px solid var(--jd-purple-700); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  border-radius: 8px; padding: .65rem 1.5rem; transition: .2s; text-decoration: none;
}
.btn-jd-purple:hover { background: var(--jd-purple-800); border-color: var(--jd-purple-800); color: #fff; }
.btn-jd-orange {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--jd-orange-500); border: 1.5px solid var(--jd-orange-500); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  border-radius: 8px; padding: .65rem 1.5rem; transition: .2s; text-decoration: none;
}
.btn-jd-orange:hover { background: var(--jd-orange-600); border-color: var(--jd-orange-600); color: #fff; }
.btn-jd-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1.5px solid var(--jd-orange-500); color: var(--jd-orange-600);
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  border-radius: 8px; padding: .65rem 1.5rem; transition: .2s; text-decoration: none;
}
.btn-jd-outline:hover { background: var(--jd-orange-500); color: #fff; }
.btn-jd-outline-sm {
  display: block; width: 100%; text-align: center;
  background: transparent; border: 1.5px solid var(--jd-purple-700); color: var(--jd-purple-700);
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  border-radius: 7px; padding: .55rem 1rem; transition: .2s; text-decoration: none;
}
.btn-jd-outline-sm:hover { background: var(--jd-purple-700); color: #fff; }
.btn-jd-orange-sm {
  display: block; width: 100%; text-align: center;
  background: var(--jd-orange-500); border: 1.5px solid var(--jd-orange-500); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  border-radius: 7px; padding: .55rem 1rem; transition: .2s; text-decoration: none;
}
.btn-jd-orange-sm:hover { background: var(--jd-orange-600); border-color: var(--jd-orange-600); color: #fff; }
.btn-jd-login {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--jd-gray-300); color: var(--jd-gray-900);
  font-family: var(--font-body); font-weight: 600; font-size: .88rem;
  border-radius: 8px; padding: .55rem 1.25rem; transition: .2s; text-decoration: none;
}
.btn-jd-login:hover { border-color: var(--jd-purple-700); color: var(--jd-purple-700); }
.btn-jd-register {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jd-purple-700); border: 1.5px solid var(--jd-purple-700); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .88rem;
  border-radius: 8px; padding: .55rem 1.25rem; transition: .2s; text-decoration: none;
}
.btn-jd-register:hover { background: var(--jd-purple-800); border-color: var(--jd-purple-800); color: #fff; }
.jd-search-btn {
  background: var(--jd-orange-500); border: none; color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  border-radius: 8px; padding: .65rem 1.5rem; transition: background .2s;
}
.jd-search-btn:hover { background: var(--jd-orange-600); }

/* ── Navbar ───────────────────────────────────────────────────────── */
.jd-navbar {
  background: #fff; border-bottom: 1px solid var(--jd-gray-300);
  position: sticky; top: 0; z-index: 1000; padding: .85rem 0;
}
.jd-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.jd-logo span.jd-logo-word {
  font-family: var(--font-head); font-weight: 800; font-size: 1.55rem; color: var(--jd-purple-800);
}
.jd-logo span.jd-logo-word .jd-logo-desi { color: var(--jd-orange-500); }
.jd-logo small {
  font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .04em;
  color: var(--jd-gray-600); margin-top: 2px;
}
.jd-nav { display: flex; align-items: center; gap: 1.5rem; }
.jd-nav .nav-link {
  font-family: var(--font-body); font-weight: 600; font-size: .93rem; color: var(--jd-gray-900);
  padding: .4rem 0; transition: color .2s;
}
.jd-nav .nav-link.active { color: var(--jd-orange-600); }
.jd-nav .nav-link:hover { color: var(--jd-purple-700); }
.jd-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--jd-gray-300);
  display: inline-flex; align-items: center; justify-content: center; color: var(--jd-gray-900);
  background: #fff; transition: .2s; text-decoration: none;
}
.jd-icon-btn:hover { border-color: var(--jd-orange-500); color: var(--jd-orange-600); }

/* ── Search bar ───────────────────────────────────────────────────── */
.jd-searchbar {
  background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(52,19,79,0.08);
  padding: .6rem .75rem; display: flex; align-items: stretch; gap: .5rem;
}
.jd-searchbar .form-select, .jd-searchbar .form-control {
  border: none; background: transparent; font-family: var(--font-body); font-size: .9rem; box-shadow: none;
}
.jd-searchbar .divider { width: 1px; background: var(--jd-gray-300); margin: .25rem 0; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.jd-hero { background: linear-gradient(135deg, var(--jd-cream) 0%, #fef2e3 100%); overflow: hidden; position: relative; padding: 3rem 0 4rem; }
.jd-hero-pattern {
  position: absolute; top: -40px; right: -40px; width: 360px; height: 360px;
  background-image: radial-gradient(var(--jd-orange-500) 2px, transparent 2px);
  background-size: 18px 18px; opacity: .12; pointer-events: none;
}
.jd-hero-headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.1rem, 4.2vw, 3rem); line-height: 1.15; }
.jd-hero-headline .l1 { color: var(--jd-gray-900); }
.jd-hero-headline .l2-a { color: var(--jd-purple-700); }
.jd-hero-headline .l2-b { color: var(--jd-orange-600); }
.jd-hero-headline .l2-c { color: var(--jd-gray-900); }
.jd-hero-sub { color: var(--jd-gray-600); max-width: 480px; font-size: .98rem; line-height: 1.6; }
.jd-hero-photo-wrap { position: relative; }
.jd-hero-photo { border: 6px solid #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(52,19,79,0.14); width: 100%; }
.jd-hero-badge {
  position: absolute; bottom: -18px; left: -18px; background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(52,19,79,0.18); padding: .7rem 1.1rem; display: flex; align-items: center; gap: .6rem;
}
.jd-hero-badge .icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--jd-orange-100); color: var(--jd-orange-600);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.jd-hero-badge .num { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--jd-purple-800); display: block; }
.jd-hero-badge .lbl { font-size: .72rem; color: var(--jd-gray-600); display: block; }

/* ── Section title ────────────────────────────────────────────────── */
.jd-section-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); display: flex; align-items: center; gap: .6rem; }
.jd-section-title .arrow { color: var(--jd-orange-500); }
.jd-view-all { color: var(--jd-purple-700); font-weight: 600; font-size: .88rem; transition: gap .2s; display: inline-flex; align-items: center; gap: .3rem; }
.jd-view-all:hover { color: var(--jd-purple-800); gap: .5rem; }

/* ── Category grid ────────────────────────────────────────────────── */
.jd-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: .9rem; }
.jd-cat-card {
  background: #fff; border: 1px solid var(--jd-gray-300); border-radius: 12px; padding: 1.1rem .5rem;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  transition: .2s; text-decoration: none;
}
.jd-cat-card:hover { border-color: transparent; box-shadow: 0 14px 32px rgba(52,19,79,0.14); transform: translateY(-4px); }
.jd-cat-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.jd-cat-name { font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--jd-gray-900); }

/* ── Row scroll grid (coupons / businesses) — custom breakpoints ───── */
.jd-row-scroll { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1199px) { .jd-row-scroll { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .jd-row-scroll { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .jd-row-scroll { grid-template-columns: 1fr; } }

/* ── Coupon card ──────────────────────────────────────────────────── */
.jd-coupon-card {
  display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid var(--jd-gray-300); border-radius: 14px; overflow: hidden; transition: .2s;
}
.jd-coupon-card:hover { box-shadow: 0 14px 32px rgba(52,19,79,0.14); transform: translateY(-4px); }
.jd-coupon-logo {
  height: 78px; display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; text-align: center; padding: 0 .5rem;
}
.jd-coupon-body { padding: 1rem; text-align: center; display: flex; flex-direction: column; flex: 1; }
.jd-coupon-discount { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--jd-red-600); }
.jd-coupon-desc { font-size: .82rem; color: var(--jd-gray-600); margin: .3rem 0 .7rem; }
.jd-coupon-expiry { font-size: .74rem; color: var(--jd-gray-600); margin-top: .5rem; }

/* ── Business card ────────────────────────────────────────────────── */
.jd-biz-card {
  display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid var(--jd-gray-300); border-radius: 14px; overflow: hidden; transition: .2s;
}
.jd-biz-card:hover { box-shadow: 0 14px 32px rgba(52,19,79,0.14); transform: translateY(-4px); }
.jd-biz-photo {
  height: 130px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem;
}
.jd-biz-body { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.jd-biz-name { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--jd-gray-900); }
.jd-stars { color: #f5a623; font-size: .82rem; }
.jd-review-count { color: var(--jd-gray-600); font-size: .78rem; }
.jd-biz-meta { font-size: .8rem; color: var(--jd-gray-600); display: flex; align-items: center; gap: .35rem; margin-top: .25rem; }
.jd-biz-meta i { color: var(--jd-orange-600); }
.jd-biz-coupons { font-weight: 700; color: var(--jd-purple-700); font-size: .82rem; margin: .4rem 0 .6rem; }

/* ── City grid — custom breakpoints ──────────────────────────────── */
.jd-city-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .8rem; }
@media (max-width: 1199px) { .jd-city-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .jd-city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .jd-city-grid { grid-template-columns: repeat(2, 1fr); } }
.jd-city-card {
  position: relative; height: 110px; border-radius: 12px; overflow: hidden; display: flex;
  align-items: flex-end; padding: .6rem .7rem; transition: .2s; text-decoration: none;
}
.jd-city-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.jd-city-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(52,19,79,0.18); }
.jd-city-card .city-txt { position: relative; z-index: 1; color: #fff; }
.jd-city-card .city-name { font-weight: 700; font-size: .88rem; display: block; }
.jd-city-card .city-state { font-size: .7rem; opacity: .85; display: block; }

/* ── Spotlight / ticket ───────────────────────────────────────────── */
.jd-spotlight {
  background: linear-gradient(120deg, var(--jd-purple-900) 0%, var(--jd-purple-700) 100%);
  border-radius: 18px; overflow: hidden; position: relative; color: #fff;
}
.jd-spotlight::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 2px);
  background-size: 34px 34px; opacity: .08;
}
.jd-spotlight-photo {
  height: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: rgba(255,255,255,0.55);
}
.jd-spotlight-badge {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--jd-orange-500); color: #fff;
  font-weight: 700; font-size: .74rem; border-radius: 50px; padding: .35rem .9rem; margin-bottom: .6rem;
}
.jd-ticket {
  background: #fff; border-radius: 12px; padding: 1.25rem 1rem; position: relative; text-align: center;
}
.jd-ticket::before, .jd-ticket::after {
  content: ''; position: absolute; width: 22px; height: 22px; background: var(--jd-purple-700);
  border-radius: 50%; top: 50%; transform: translateY(-50%);
}
.jd-ticket::before { left: -11px; }
.jd-ticket::after { right: -11px; }
.jd-ticket .offer-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--jd-gray-600); font-weight: 700; }
.jd-ticket .offer-pct { font-family: var(--font-head); font-weight: 800; font-size: 1.8rem; color: var(--jd-red-600); }
.jd-ticket .offer-desc { font-size: .85rem; color: var(--jd-gray-900); }

/* ── Trust badges ─────────────────────────────────────────────────── */
.jd-trust-icon {
  width: 50px; height: 50px; border-radius: 50%; background: var(--jd-orange-100); color: var(--jd-orange-600);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.jd-trust-title { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--jd-gray-900); }
.jd-trust-sub { font-size: .8rem; color: var(--jd-gray-600); }

/* ── Footer (Just4Desi, used by the rebuilt footer.blade.php) ──────── */
/* styles.css has footer { background: url(../userassets/bkg2.jpg) !important; padding: 80px 20px 100px !important } — beat it */
.jd-footer { background: var(--jd-gray-100) !important; border-top: 1px solid var(--jd-gray-300); padding: 3.5rem 0 1.5rem !important; }
.jd-footer .footer-heading { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--jd-gray-900); margin-bottom: 1rem; }
.jd-footer .footer-link { display: block; font-size: .86rem; color: var(--jd-gray-600); margin-bottom: .55rem; transition: color .2s; }
.jd-footer .footer-link:hover { color: var(--jd-purple-700); }
.jd-footer .footer-tagline { font-size: .86rem; color: var(--jd-gray-600); max-width: 280px; line-height: 1.55; }
.jd-footer .footer-social {
  width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--jd-gray-300);
  display: inline-flex; align-items: center; justify-content: center; color: var(--jd-gray-900); transition: .2s; margin-right: .4rem;
}
.jd-footer .footer-social:hover { background: var(--jd-purple-700); color: #fff; border-color: var(--jd-purple-700); }
.jd-footer .footer-newsletter-input {
  border: 1px solid var(--jd-gray-300); border-radius: 8px 0 0 8px; font-size: .88rem; background: #fff;
}
.jd-footer .footer-newsletter-btn { background: var(--jd-purple-700); color: #fff; border-radius: 0 8px 8px 0; font-weight: 600; font-size: .88rem; padding: .5rem 1.1rem; border: 1px solid var(--jd-purple-700); }

/* ── Modals (public site — Just4Desi-branded) ───────────────────────
   styles.css ships a pre-rebrand global rule: .modal-header { background:#030F1F; }
   plus .btn.btn-lg.btn-success{ background:var(--indigo) } where --indigo is the
   old brown (#96421d) — neither matches the Just4Desi purple/orange identity.
   Rather than override the bare .modal-* selectors globally (which would tie
   in specificity with scoped rules like .socialshare's own white-header
   styles and risk white-on-white collisions), this is opt-in: add the
   "jd-modal" class to a modal's root .modal element to theme it. Modals
   that already have their own working design (e.g. .socialshare share/
   refer-a-friend) simply don't get the class and are untouched. */
.jd-modal .modal-content { border: none; border-radius: var(--bd-radius-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(52,19,79,.22); }
.jd-modal .modal-header {
  background: linear-gradient(135deg, var(--jd-purple-900), var(--jd-purple-700));
  padding: 1.1rem 1.4rem; border: none;
}
.jd-modal .modal-title { color: #fff; font-size: 1.05rem; font-weight: 700; font-family: var(--font-head); }
.jd-modal .btn-close { filter: invert(1) brightness(2); opacity: .75; }
.jd-modal .modal-body { padding: 1.5rem; font-size: .92rem; color: var(--jd-gray-900); font-family: var(--font-body); line-height: 1.6; }
.jd-modal .modal-footer { padding: 1rem 1.4rem; border-top: 1px solid var(--jd-gray-300); background: var(--jd-gray-100); gap: .6rem; }
.jd-footer .footer-newsletter-btn:hover { background: var(--jd-purple-800); }
.jd-footer .footer-bottom { border-top: 1px solid var(--jd-gray-300); padding-top: 1.25rem; margin-top: 2rem; font-size: .82rem; color: var(--jd-gray-600); }