/* ==========================================================================
   Bachpan.com Design System — v3.0
   Mobile-first · MDB5 (Bootstrap 5) base · Poppins + Noto Sans
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --bp-nav:        #0077B6;
    --bp-nav-dark:   #005f91;
    --bp-register:   #E8920C;
    --bp-bg:         #FAFAF7;
    --bp-surface:    #FFFFFF;

    /* Accent — blue interactive states */
    --bp-accent:     #0077B6;
    --bp-accent-lt:  #E3F1FA;
    --bp-accent-md:  #A8D4F0;

    /* Gender */
    --bp-boy:        #3D82C4;
    --bp-boy-lt:     #EAF3FB;
    --bp-boy-text:   #0B3D6E;
    --bp-boy-border: #7BB5E8;
    --bp-girl:       #B5294E;
    --bp-girl-lt:    #FBE9EF;
    --bp-girl-text:  #6B0F2A;
    --bp-girl-border:#D9637F;
    --bp-unisex:     #6D3FC0;
    --bp-unisex-lt:  #F0EBFF;

    /* Astrology */
    --bp-rashi:      #534AB7;
    --bp-rashi-lt:   #F0EEF8;

    /* Religion */
    --hindu:         #E8901A; --hindu-lt:#FFF4E0; --hindu-md:#FFD88A; --hindu-text:#7A3C00;
    --muslim:        #1A7A4A; --muslim-lt:#E2F5EC; --muslim-md:#86D4A8; --muslim-text:#0A3D25;
    --christian:     #1A4A8A; --christian-lt:#E3ECF8; --christian-md:#A8C0E8; --christian-text:#0D2855;
    --sikh:          #8B6914; --sikh-lt:#FEF9E7; --sikh-md:#F7D76A; --sikh-text:#5A3E00;

    /* Status */
    --status-popular-lt:  #FFF0E6;
    --status-trending-lt: #FBF5DC;
    --status-celeb-lt:    #F0EBFF;
    --status-modern-lt:   #E0F5FA;
    --status-new-lt:      #E2F6EB;

    /* Text */
    --bp-text-1: #1A1A1A;
    --bp-text-2: #585450;
    --bp-text-3: #9A948E;

    /* Borders */
    --bp-border:    #EAE6E1;
    --bp-border-md: #D0CBC3;

    /* Radius */
    --r-sm:5px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

    /* Shadows */
    --shadow-sm:0 1px 4px rgba(0,0,0,.06);
    --shadow-md:0 4px 16px rgba(0,0,0,.09);
    --shadow-lg:0 8px 32px rgba(0,0,0,.14);
    --shadow-mega:0 20px 60px rgba(0,0,0,.16);
    --shadow-hover:0 6px 20px rgba(181,41,78,.12);

    /* Status badge backgrounds (shorthand aliases) */
    --bp-popular-lt: #FFF0E6;
    --bp-trending-lt:#FBF5DC;
    --bp-celeb-lt:   #F0EBFF;
    --bp-modern-lt:  #E0F5FA;
    --bp-new-lt:     #E2F6EB;

    /* Transition */
    --bp-ease: .2s ease;

    /* ── Backward-compat aliases (old variable names → new values) ── */
    --bp-primary:       #0077B6;
    --bp-primary-dark:  #005f91;
    --bp-primary-light: #0096D6;
    --bp-secondary:     #00B4D8;
    --bp-secondary-dark:#0096BA;
    --bp-secondary-light:#40C8E8;
    --bp-text-primary:  #1A1A1A;
    --bp-text-secondary:#585450;
    --bp-error:         #C0392B;
    --bp-warning:       #E67E22;
    --bp-success:       #27AE60;
    --bp-border-light:  #EAE6E1;
    --bp-boy-light:     #EAF3FB;
    --bp-girl-light:    #FBE9EF;
    --bp-unisex-light:  #F0EBFF;

    /* Font families */
    --font-brand:   'Poppins', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-body:    'Noto Sans', sans-serif;
    --font-script:  'Noto Sans', serif;

    /* Radius aliases */
    --bp-radius-sm:  5px;
    --bp-radius:     8px;
    --bp-radius-md:  10px;
    --bp-radius-lg:  14px;
    --bp-radius-xl:  20px;
    --bp-radius-pill: 999px;

    /* Shadow aliases */
    --bp-shadow-xs:  0 1px 3px rgba(0,0,0,.06);
    --bp-shadow-sm:  0 1px 4px rgba(0,0,0,.06);
    --bp-shadow:     0 4px 16px rgba(0,0,0,.09);
    --bp-shadow-md:  0 4px 16px rgba(0,0,0,.09);
    --bp-shadow-lg:  0 8px 32px rgba(0,0,0,.14);
    --bp-shadow-primary: 0 4px 16px rgba(0,119,182,.25);

    /* Transition alias */
    --bp-transition: .2s ease;
    --bp-transition-slow: .35s ease;

    /* Header */
    --bp-header-height: 64px;
    --bp-header-height-mobile: 56px;

    /* Entity colours */
    --ec-rashi:#534AB7; --ec-rashi-lt:#F0EEF8;
    --ec-nak:#0F6E56; --ec-nak-lt:#E1F5EE;
    --ec-religion:#E8901A; --ec-religion-lt:#FFF4E0;
    --ec-deity:#7A3C00; --ec-deity-lt:#FFF4E0;
    --ec-lang:#185FA5; --ec-lang-lt:#E6F1FB;
    --ec-myth:#993C1D; --ec-myth-lt:#FAECE7;
    --ec-theme:#3B6D11; --ec-theme-lt:#EAF3DE;
    --ec-tag:#854F0B; --ec-tag-lt:#FAEEDA;
    --ec-meaning:#0077B6; --ec-meaning-lt:#E3F1FA;
    --ec-num:#6D3FC0; --ec-num-lt:#F0EEF8;
}

/* --------------------------------------------------------------------------
   2. BASE & TYPOGRAPHY
   -------------------------------------------------------------------------- */
/* Bump the rem baseline from the browser default (16px) to 18px — every
   rem-based size in the design system scales proportionally (~12.5%) so
   body copy reads comfortably on mobile. Fixed-px containers (topbar
   32px, icon buttons 28-34px, alphabet grid 28px) were audited for
   overflow headroom at this scale before raising past 106.25%. */
html {
    font-size: 112.5%;
}

/* Name-detail pages render at 16px root (1rem = 16px) so the
   bachpan-name-detail-v3 mock's rem values map 1:1 to the intended pixel
   sizes. The rest of the site keeps the 18px root from the 2026-05-21
   typography baseline (see feedback_typography.md). Scoped via :has()
   so listing/hub/card pages are unaffected. Browser support for :has()
   is universal in evergreen browsers since 2023 — older browsers fall
   back to the 18px root (graceful degradation: text is slightly larger,
   page still works). */
html:has(.bp-page--detail) {
    font-size: 100%;
}

/* Reset the default underline that vanilla Bootstrap adds to every <a>
   (MDB used to suppress this; Bachpan never had its own rule because it
   wasn't needed). No hover underline either — per design preference,
   affordance comes from cursor + colour changes on specific link
   classes. Specific :hover rules elsewhere (e.g. .bp-sec-link:hover)
   can still re-add underline where authored — this is the lowest-
   specificity baseline. */
a {
    text-decoration: none;
}

body {
    font-family: 'Poppins', 'Noto Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--bp-text-1);
    background: var(--bp-bg);
    overflow-x: hidden;
}

/* Native script */
.bp-script     { font-family: 'Noto Sans', sans-serif; font-weight: 500; color: var(--bp-text-2); }
.bp-script-rtl { font-family: 'Noto Sans', sans-serif; direction: rtl; text-align: right; }

/* Heading hierarchy */
h1, .h1 { font-size: 1.5rem;  font-weight: 700; line-height: 1.25; }
h2, .h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
h3, .h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
h4, .h4 { font-size: .88rem;  font-weight: 600; line-height: 1.4; }
h5, .h5 { font-size: .78rem;  font-weight: 600; }
h6, .h6 { font-size: .72rem;  font-weight: 500; }
@media (min-width: 768px) {
    h1, .h1 { font-size: 2rem; }
}
h1.sr-only, .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bp-browse-h1{font-size:1.35rem;font-weight:700;margin-bottom:.75rem;}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--bp-nav);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. UTILITY CLASSES (Section M)
   -------------------------------------------------------------------------- */
.bp-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.bp-sec-hd {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.bp-sec-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--bp-text-1);
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Reset browser h2 defaults — bp-sec-title may be rendered as <h2> for SEO */
    margin: 0;
    line-height: 1.3;
}
.bp-sec-bar {
    display: inline-block;
    width: 3px;
    height: 16px;
    background: var(--bp-nav);
    border-radius: 2px;
    flex-shrink: 0;
}
.bp-sec-link {
    color: var(--bp-nav);
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
}
.bp-sec-link:hover { text-decoration: underline; }
.bp-two-col { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--bp-border); }
@media (min-width: 768px) { .bp-two-col { grid-template-columns: 1fr 1fr; } }
.bp-mb-sm { margin-bottom: .5rem; }
.bp-mb-lg { margin-bottom: 1.75rem; }
.chip-boy   { background: var(--bp-boy-lt); color: var(--bp-boy-text); border-color: var(--bp-boy-border); }
.chip-girl  { background: var(--bp-girl-lt); color: var(--bp-girl-text); border-color: var(--bp-girl-border); }

/* --------------------------------------------------------------------------
   4A. TOP BAR
   -------------------------------------------------------------------------- */
.bp-topbar {
    background: #2C3E50;
    height: 32px; display: flex; align-items: center;
    padding: 0 1.5rem; gap: 1rem; font-size: .68rem;
}
.bp-topbar-left { display: flex; align-items: center; gap: .85rem; color: rgba(255,255,255,.6); }
.bp-topbar-sep { color: rgba(255,255,255,.2); }
.bp-topbar-link {
    color: rgba(255,255,255,.6); cursor: pointer; transition: color .12s;
    text-decoration: none; display: flex; align-items: center; gap: .25rem;
}
.bp-topbar-link:hover { color: rgba(255,255,255,.9); }
.bp-topbar-link svg { width: 11px; height: 11px; }
.bp-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .65rem; }

/* MOBILE: single-row topbar. Advertise is dropped entirely (icon + label),
   Suggest a Name keeps its icon + label, Preferences collapses to an icon only
   (see .bp-topbar-prefs in bp-mobile-responsive.css), and the language picker is
   unchanged. The tagline is hidden and the row no longer wraps. */
@media (max-width: 767px) {
    .bp-topbar { padding: .25rem .65rem; gap: .35rem; min-height: 40px; height: auto; font-size: .75rem; flex-wrap: nowrap; }
    .bp-topbar-left { gap: .65rem; flex-shrink: 1; min-width: 0; }
    .bp-topbar-tagline { display: none; }
    /* Drop Advertise + every left separator → only Suggest a Name remains. */
    .bp-topbar-left .bp-topbar-link[href="/advertise"] { display: none; }
    .bp-topbar-left .bp-topbar-sep { display: none; }
    .bp-topbar-link { font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.9); gap: .35rem; }
    .bp-topbar-link-label { display: inline; }
    .bp-topbar-link svg,
    .bp-topbar-ico { width: 18px; height: 18px; }
    .bp-topbar-right { gap: .4rem; flex-shrink: 0; }
    .bp-topbar-right .bp-topbar-sep { display: none; }
}
@media (max-width: 374px) {
    /* Ultra-narrow phones (~320px): tighten spacing so the single row fits.
       Preferences is already icon-only and Advertise is dropped at <=767px. */
    .bp-topbar { padding: .25rem .4rem; gap: .3rem; }
    .bp-topbar-left { gap: .4rem; }
}

/* Language selector */
.bp-lang-wrap { position: relative; }
.bp-lang-btn {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
    color: rgba(255,255,255,.85); font-size: .68rem; font-weight: 600;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-full); height: 22px; padding: 0 .65rem; transition: all .15s;
    box-sizing: border-box;
}
.bp-lang-btn:hover { background: rgba(255,255,255,.18); }
.bp-lang-btn svg { width: 10px; height: 10px; }
.bp-lang-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bp-surface); border: 1px solid var(--bp-border);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    min-width: 170px; z-index: 600; display: none; overflow: hidden;
}
.bp-lang-wrap.open .bp-lang-dropdown { display: block; }

/* Two-column variant — Core Indian (left) + Additional (right). Used by the
   topbar quick-switch dropdown per Prompts/Language Display Order.txt. The
   inner .bp-lang-col blocks hold a column title + the ordered options. */
.bp-lang-dropdown--2col {
    min-width: 360px;
    padding: .3rem;
}
.bp-lang-wrap.open .bp-lang-dropdown--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem;
}
.bp-lang-col { min-width: 0; }
.bp-lang-col-title {
    font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--bp-text-3, #9A948E);
    padding: .35rem .65rem .25rem;
}

.bp-lang-opt {
    display: flex; align-items: center; gap: .5rem;
    padding: .48rem .85rem; font-size: .75rem; color: var(--bp-text-2);
    cursor: pointer; transition: background .1s;
    border-radius: var(--r-sm);
}
.bp-lang-opt:hover { background: var(--bp-accent-lt); }
.bp-lang-opt.active { color: var(--bp-nav); font-weight: 600; background: var(--bp-accent-lt); }
.bp-lang-flag { font-size: .85rem; width: 18px; text-align: center; }

/* Below 480px the two-column grid collapses to a single column stack —
   keeps the dropdown reachable inside the mobile viewport (the
   bp-mobile-responsive.css rule already caps width at 100vw - 1rem). */
@media (max-width: 480px) {
    .bp-lang-dropdown--2col { min-width: 220px; }
    .bp-lang-wrap.open .bp-lang-dropdown--2col {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   4B. NAVIGATION
   -------------------------------------------------------------------------- */
/* Header band matches the launch popup + preferences modal — same navy→cyan
   gradient, same .07 white dot pattern, and a soft circle anchored top-right.
   Implemented entirely with layered background-images (no ::before/::after,
   no overflow:hidden) so the mega-menu dropdowns absolutely-positioned at
   top:54px aren't clipped. */
.bp-nav {
    background:
        radial-gradient(circle at calc(100% - 60px) -30px,
            rgba(255, 255, 255, .08) 78px,
            transparent 80px),
        radial-gradient(circle,
            rgba(255, 255, 255, .07) 1px,
            transparent 1px) 0 0 / 18px 18px,
        linear-gradient(135deg, #004F7C 0%, var(--bp-nav) 55%, #0095E0 100%);
    height: 54px;
    display: flex; align-items: center; padding: 0 1.5rem; gap: 0;
    position: sticky; top: 0; z-index: 300;
    box-shadow: 0 2px 8px rgba(0,50,100,.18);
}
.bp-logo {
    font-size: 1.25rem; font-weight: 700; color: #fff;
    white-space: nowrap; margin-right: 1.5rem; flex-shrink: 0;
    cursor: pointer;
}
.bp-logo span { opacity: .7; font-weight: 400; }

/* Mega nav links */
.bp-nav-links { display: none; gap: 0; height: 54px; flex: 1; }
@media (min-width: 960px) { .bp-nav-links { display: flex; } }
.bp-nav-item { position: relative; height: 54px; display: flex; align-items: center; }
.bp-nav-link {
    color: rgba(255,255,255,.88); font-size: .82rem; font-weight: 500;
    cursor: pointer; padding: 0 1.1rem; height: 100%;
    display: flex; align-items: center; gap: .22rem;
    transition: all .15s; border-bottom: 3px solid transparent; white-space: nowrap;
}
.bp-nav-link svg { width: 10px; height: 10px; transition: transform .2s; flex-shrink: 0; }
.bp-nav-item:hover .bp-nav-link { color: #fff; background: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.7); }
.bp-nav-item:hover .bp-nav-link svg { transform: rotate(180deg); }

/* Mega dropdown */
.bp-mega {
    position: absolute;
    top: 54px;
    left: 0;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-top: none;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    display: none; z-index: 500;
    min-width: 860px;
}
.bp-mega::before{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--bp-register,#E8920C);}
.bp-nav-item:hover .bp-mega { display: flex; }
.bp-mega-inner {
    padding: 1.5rem;
    display: flex; gap: 0;
    width: 100%;
}

/* Per-menu width overrides */
.bp-mega--az{min-width:520px;}
.bp-mega--tools{min-width:560px;}

/* Mega column */
.bp-mc { flex: 1; padding-right: 1.5rem; min-width: 0; border-right: 1px solid var(--bp-border); margin-right: 1.5rem; }
.bp-mc:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.bp-mc-last { flex-shrink: 0; width: 200px; }

/* Section title -- dark, bold, with accent underline */
.bp-mc-title {
    font-size: .7rem; font-weight: 700; color: var(--bp-text-1);
    text-transform: uppercase; letter-spacing: .06em;
    padding-bottom: .4rem; margin-bottom: .5rem;
    border-bottom: 2px solid var(--bp-nav);
    display: inline-block;
}

/* Mega link */
.bp-ml {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .4rem; border-radius: var(--r-sm);
    font-size: .78rem; color: var(--bp-text-2);
    cursor: pointer; text-decoration: none; transition: all .12s;
    margin-bottom: 1px;
}
.bp-ml:hover { background: var(--bp-accent-lt); }
.bp-ml:hover .bp-ml-name { color: var(--bp-nav); }
.bp-ml-info { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.bp-ml-icon {
    width: 30px; height: 30px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0; font-family: 'Noto Sans', sans-serif;
}
.bp-ml-icon svg { width: 16px; height: 16px; }
.bp-ml-name { font-weight: 600; color: var(--bp-text-1); display: block; font-size: .78rem; line-height: 1.2; }
.bp-ml-sub  { font-size: .65rem; color: var(--bp-text-3); display: block; }
.bp-ml-more { font-size: .72rem; font-weight: 600; color: var(--bp-nav); padding: .3rem .4rem; display: block; cursor: pointer; text-decoration:none; }
.bp-ml-more:hover { color: var(--bp-register); }
.bp-ml-info{flex:1;min-width:0;}
.bp-ml-native{font-family:'Noto Sans',sans-serif;font-size:.65rem;color:var(--bp-text-3);display:block;}

/* Mega menu gender hover buttons */
.bp-ml-gender{display:flex;gap:.2rem;flex-shrink:0;opacity:0;transition:opacity .15s;}
.bp-ml:hover .bp-ml-gender{opacity:1;}

/* Compact mega-link variant — used by Astrology > Rashi / Nakshatra so each
   entry takes exactly two rows: row 1 = name (hover reveals Boy/Girl chips
   on the right), row 2 = letters spanning full width. Replaces the previous
   3-line layout (icon + name + sub-line + chips wrapping below) that was
   stretching the dropdown to 5-6 rows per item at narrow widths. */
.bp-ml-compact {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: .4rem;
    row-gap: .15rem;
    padding: .3rem .4rem;
    border-radius: var(--r-sm);
    transition: background .12s;
    margin-bottom: 1px;
}
.bp-ml-compact:hover { background: var(--bp-accent-lt); }
.bp-ml-compact-head {
    grid-row: 1; grid-column: 1;
    display: inline-flex; align-items: center; gap: .4rem;
    min-width: 0;
    text-decoration: none;
    font-size: .78rem; font-weight: 600;
    color: var(--bp-text-1);
}
.bp-ml-compact:hover .bp-ml-compact-name { color: var(--bp-nav); }
.bp-ml-compact-icon {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
    font-family: 'Noto Sans', sans-serif;
}
.bp-ml-compact-name {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-ml-compact-gender {
    grid-row: 1; grid-column: 2;
    display: flex; gap: .2rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
    align-self: center;
}
.bp-ml-compact:hover .bp-ml-compact-gender { opacity: 1; }
.bp-ml-compact-letters {
    grid-row: 2; grid-column: 1 / -1;
    font-size: .68rem;
    color: var(--bp-text-3);
    letter-spacing: .02em;
}
.bp-ml-gb{height:24px;padding:0 .55rem;border-radius:var(--r-full);font-size:.72rem;font-weight:700;border:1.5px solid;display:inline-flex;align-items:center;gap:.15rem;text-decoration:none;transition:all .12s;white-space:nowrap;}
.bp-ml-gb-boy{border-color:var(--bp-boy-border);color:var(--bp-boy-text);background:var(--bp-boy-lt);}
.bp-ml-gb-boy:hover{background:var(--bp-boy);color:#fff;border-color:var(--bp-boy);}
.bp-ml-gb-girl{border-color:var(--bp-girl-border);color:var(--bp-girl-text);background:var(--bp-girl-lt);}
.bp-ml-gb-girl:hover{background:var(--bp-girl);color:#fff;border-color:var(--bp-girl);}

/* Mega menu divider */
.bp-mm-divider{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--bp-text-3);margin:.85rem 0 .55rem;display:flex;align-items:center;gap:.4rem;}
.bp-mm-divider::after{content:'';flex:1;height:1px;background:var(--bp-border);}

/* Mega menu icon colour classes */
.bp-ml-icon.ic-hindu{background:var(--hindu-lt,#FFF4E0);color:var(--hindu,#E8901A);}
.bp-ml-icon.ic-lang{background:var(--bp-accent-lt);color:var(--bp-nav);}
.bp-ml-icon.ic-lang span{font-size:.65rem;font-weight:700;font-family:'Noto Sans',sans-serif;}
.bp-ml-icon.ic-rashi{background:var(--bp-rashi-lt,#F0EEF8);color:var(--bp-rashi,#534AB7);}
.bp-ml-icon.ic-rashi-num{background:var(--bp-rashi-lt,#F0EEF8);color:var(--bp-rashi,#534AB7);font-weight:700;font-size:.78rem;}
.bp-ml-icon.ic-num{background:var(--bp-accent-lt);color:var(--bp-nav);font-weight:800;font-size:.88rem;}
.bp-ml-icon.ic-boy{background:var(--bp-boy-lt);color:var(--bp-boy);}
.bp-ml-icon.ic-girl{background:var(--bp-girl-lt);color:var(--bp-girl);}
.bp-ml-icon.ic-girl-text{background:var(--bp-girl-lt);color:var(--bp-girl-text);}
.bp-ml-icon.ic-nature{background:#EAF3DE;color:#2E5A0E;}
.bp-ml-icon.ic-celeb{background:#F0EBFF;color:#4A1D8C;}
.bp-ml-icon.ic-modern{background:var(--bp-accent-lt);color:var(--bp-nav);}
.bp-ml-icon.ic-twin{background:var(--bp-girl-lt);color:var(--bp-girl);}
.bp-ml-icon.ic-royal{background:#FFF4E0;color:#7A3C00;}
.bp-ml-icon.ic-neutral{background:#F1EFE8;color:var(--bp-text-2);}
.bp-ml-icon.ic-fire{background:#FFF0E6;color:#7A3C00;}
.bp-ml-icon.ic-tool-rashi{background:var(--bp-rashi-lt);color:var(--bp-rashi);}
.bp-ml-icon.ic-tool-nak{background:#E1F5EE;color:#0F6E56;}
.bp-ml-icon.ic-tool-gen{background:#F0EBFF;color:#4A1D8C;}
.bp-ml-icon.ic-tool-search{background:var(--bp-accent-lt);color:var(--bp-nav);}
.bp-ml-icon.ic-tool-fav{background:var(--bp-girl-lt);color:var(--bp-girl);}
.bp-ml-icon.ic-tool-suggest{background:#E2F6EB;color:#1A7A4A;}
.bp-ml-icon.ic-tool-num{background:var(--bp-accent-lt);color:var(--bp-nav);}

/* Mega menu badge pill */
.bp-mm-badge{font-size:.58rem;padding:.1rem .45rem;border-radius:var(--r-full);font-weight:700;margin-left:.3rem;}
.bp-mm-badge-boy{background:var(--hindu-lt,#FFF4E0);color:var(--hindu-text,#7A3C00);}
.bp-mm-badge-girl{background:var(--bp-girl-lt);color:var(--bp-girl-text);}

/* Mega menu column sizing */
.bp-mc.bp-mc--narrow{flex:.7;max-width:200px;}
.bp-mc.bp-mc--wide{flex:1.5;}

/* Letter grid in A-Z menu */
.bp-mm-letter-grid{display:flex;flex-wrap:wrap;gap:.3rem;padding:.2rem 0;}
.bp-mm-letter-grid .bp-az-letter{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:5px;border:1.5px solid var(--bp-border);background:var(--bp-surface);font-size:.75rem;font-weight:600;color:var(--bp-text-2);text-decoration:none;transition:all .15s;}
.bp-mm-letter-grid .bp-az-letter:hover{border-color:var(--bp-nav);color:var(--bp-nav);background:var(--bp-accent-lt);}
/* Drawer variant: same grid in the mobile hamburger drawer. Slightly
   larger chips so they're finger-tappable, tighter gap so all 26
   letters fit a 4-row grid without horizontal scroll. */
.bp-mm-letter-grid--drawer { gap: .35rem; margin-bottom: .85rem; }
.bp-mm-letter-grid--drawer .bp-az-letter { width: 36px; height: 36px; font-size: .82rem; }

/* Saved names panel */
.bp-saved-panel{background:#1A2535;border-radius:var(--r-md);padding:.9rem;color:#fff;}
.bp-saved-panel-title{font-size:.72rem;font-weight:700;margin-bottom:.5rem;color:rgba(255,255,255,.9);}
.bp-saved-panel-sub{font-size:.72rem;color:rgba(255,255,255,.65);margin-bottom:.65rem;}
.bp-saved-panel-btn{display:block;text-align:center;background:var(--bp-nav);color:#fff;padding:.38rem;border-radius:var(--r-full);font-size:.7rem;font-weight:700;text-decoration:none;}

/* Featured panel */
.bp-mega-feat {
    background: var(--bp-accent-lt); border: 1px solid var(--bp-accent-md);
    border-radius: var(--r-md); padding: .9rem;
}
.bp-mega-feat-title { font-size: .78rem; font-weight: 700; color: var(--bp-nav); margin-bottom: .3rem; display: flex; align-items: center; gap: .3rem; }
.bp-mega-feat-sub { font-size: .7rem; color: var(--bp-text-2); line-height: 1.5; margin-bottom: .65rem; }
.bp-mega-feat-btn {
    display: block; background: var(--bp-nav); color: #fff;
    padding: .45rem .85rem; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 700; text-align: center;
    cursor: pointer; text-decoration: none; border: none;
    font-family: 'Poppins', sans-serif; transition: background .15s;
}
.bp-mega-feat-btn:hover { background: #005f91; }

/* A-Z mega -- religion tabs */
.bp-az-tabs { display: flex; gap: .3rem; margin-bottom: .85rem; }
.bp-az-tab {
    padding: .28rem .85rem; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--bp-border-md);
    background: transparent; color: var(--bp-text-2);
    font-family: 'Poppins', sans-serif; transition: all .15s;
}
.bp-az-tab.active-hindu { background: var(--hindu); border-color: var(--hindu); color: #fff; }
.bp-az-tab.active-muslim { background: var(--muslim); border-color: var(--muslim); color: #fff; }
.bp-az-tab.active-christian { background: var(--christian); border-color: var(--christian); color: #fff; }
.bp-az-tab.active-sikh { background: var(--sikh); border-color: var(--sikh); color: #fff; }

/* A-Z alphabet grid */
.bp-az-section { display: none; }
.bp-az-section.active { display: block; }
.bp-az-letter {
    display: flex; flex-direction: column; align-items: center;
    padding: .42rem .2rem; border-radius: var(--r-sm);
    border: 1.5px solid var(--bp-border-md); background: var(--bp-surface);
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.bp-az-letter:hover { border-color: var(--bp-boy); background: var(--bp-boy-lt); }
.bp-az-letter.girl:hover { border-color: var(--bp-girl); background: var(--bp-girl-lt); }

/* NAV RIGHT */
.bp-nav-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav-icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85); cursor: pointer; transition: background .15s;
    border: none; background: transparent; position: relative;
}
.nav-icon-btn:hover { background: rgba(255,255,255,.12); }
.nav-icon-btn svg { width: 18px; height: 18px; }
.nav-login { color: rgba(255,255,255,.88); font-size: .8rem; font-weight: 500; cursor: pointer; white-space: nowrap; display: none; }
@media (min-width: 576px) { .nav-login { display: block; } }

/* Favourites badge */
.nav-fav-badge {
    position: absolute; top: 3px; right: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bp-register); color: #fff;
    font-size: .55rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Logged-in user avatar */
.bp-user-wrap { position: relative; }
.bp-user-btn {
    display: flex; align-items: center; gap: .4rem; cursor: pointer;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-full); padding: .28rem .75rem .28rem .35rem;
    transition: all .15s;
}
.bp-user-btn:hover { background: rgba(255,255,255,.2); }
.bp-user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bp-register); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.bp-user-name { font-size: .75rem; font-weight: 600; color: #fff; }
.bp-user-chevron { width: 10px; height: 10px; color: rgba(255,255,255,.7); }
.bp-user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bp-surface); border: 1px solid var(--bp-border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    min-width: 200px; z-index: 500; display: none; overflow: hidden;
}
/* JS toggles .open on the dropdown itself (see bachpan-ui.js userBtn handler). */
.bp-user-dropdown.open { display: block; }
.bp-user-dd-header {
    padding: .85rem 1rem; background: var(--bp-accent-lt);
    border-bottom: 1px solid var(--bp-border);
}
.bp-user-dd-name { font-size: .85rem; font-weight: 700; color: var(--bp-text-1); }
.bp-user-dd-link {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; font-size: .78rem; color: var(--bp-text-2);
    cursor: pointer; transition: background .12s;
}
.bp-user-dd-link:hover { background: var(--bp-bg); color: var(--bp-nav); }
.bp-user-dd-link svg { width: 15px; height: 15px; color: var(--bp-text-3); }
.bp-user-dd-link:hover svg { color: var(--bp-nav); }
.bp-user-dd-sep { height: 1px; background: var(--bp-border); }
.bp-user-dd-link.logout { color: #C0392B; }
.bp-user-dd-link.logout:hover { background: #FEF0EE; color: #C0392B; }
.bp-saved-count {
    margin-left: auto; background: var(--bp-nav); color: #fff;
    font-size: .6rem; font-weight: 700; padding: 1px 5px;
    border-radius: var(--r-full);
}
.nav-register {
    background: var(--bp-register); color: #fff; font-size: .78rem; font-weight: 700;
    padding: .38rem 1.1rem; border-radius: var(--r-full); border: none;
    cursor: pointer; font-family: 'Poppins', sans-serif; white-space: nowrap;
    transition: background .15s;
    /* Hide on mobile — clipped at the right edge in narrow viewports because
       the inline button doesn't shrink. Login + Register remain accessible
       from the mobile nav drawer (_MobileNav.cshtml). */
    display: none;
}
@media (min-width: 960px) { .nav-register { display: inline-block; } }
.nav-register:hover { background: #c97a08; }

/* Hamburger */
.nav-hamburger { color: #fff; background: none; border: none; cursor: pointer; display: flex; }
@media (min-width: 960px) { .nav-hamburger { display: none; } }

/* --------------------------------------------------------------------------
   4C. NAME CARD — Grid mode
   -------------------------------------------------------------------------- */
.bp-name-card{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-girl);overflow:hidden;position:relative;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-name-card:hover{border-color:var(--bp-girl-border);box-shadow:0 6px 20px rgba(181,41,78,.12);transform:translateY(-2px);}
.bp-name-card--boy{border-top-color:var(--bp-boy);}
.bp-name-card--boy:hover{border-color:var(--bp-boy-border);box-shadow:0 6px 20px rgba(61,130,196,.12);}
.bp-name-card--girl{border-top-color:var(--bp-girl);}
.bp-card-status{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.25rem;flex-wrap:wrap;justify-content:flex-end;max-width:60%;}
.bp-cstatus{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem;border-radius:var(--r-full);font-size:.6rem;font-weight:700;line-height:1;}
.cs-popular{background:var(--bp-popular-lt,#FFF0E6);color:#7B3200;border:1px solid #FFD4B0;}
.cs-celeb{background:var(--bp-celeb-lt,#F0EBFF);color:#4A1D8C;border:1px solid #C9B8F5;}
.cs-modern{background:var(--bp-modern-lt,#E0F5FA);color:#0A5470;border:1px solid #86D4E8;}
.cs-new{background:var(--bp-new-lt,#E2F6EB);color:#0F5A30;border:1px solid #6FD0A0;}
.bp-card-body{padding:.85rem;flex:1;display:flex;flex-direction:column;}
.bp-card-name{font-size:1.15rem;font-weight:700;color:var(--bp-girl);line-height:1.2;padding-right:2.5rem;margin-bottom:.22rem;}
.bp-name-card--boy .bp-card-name{color:var(--bp-boy);}
.bp-card-deva{font-size:.95rem;font-weight:500;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;margin-bottom:.5rem;display:block;line-height:1.4;}
.bp-card-meaning{font-size:.88rem;color:var(--bp-text-2);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bp-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--bp-border);}
.bp-lucky{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--bp-text-3);font-weight:500;}
.bp-lucky-num{font-size:.95rem;font-weight:700;color:var(--bp-text-2);min-width:18px;line-height:1;}
.bp-card-right{display:flex;align-items:center;gap:.3rem;}
.bp-card-fav{width:36px;height:36px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--bp-text-3);display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:all .15s;flex-shrink:0;line-height:1;}
.bp-card-fav:hover{color:#E63946;background:#FDECEE;}
/* Markup applies .bp-card-fav--active (BEM modifier); the earlier .saved
   class is dead. Saved/liked = standard heart-red regardless of card gender. */
.bp-card-fav--active{color:#E63946;}
.bp-card-fav--active svg{fill:#E63946;}
.bp-name-card--boy .bp-card-fav:hover{color:#E63946;background:#FDECEE;}

/* Name Card — List mode (v4 matching mockup).
   2-row CSS Grid: col 1 = name (auto, min 110px), col 2 = meaning (1fr),
   cols 3+4 = share + like buttons. Row 2 puts the Devanagari/English name
   in col 1 and the chip cluster in col 2 (spanning to end) so chips
   visually start at the same x-position as the meaning above. */
.bp-names-list { display: flex; flex-direction: column; gap: 3px; }
.bp-name-row {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: .7rem 1rem; border-radius: var(--r-md);
    border: 1px solid var(--bp-border); background: var(--bp-surface);
    cursor: pointer; transition: all .15s; position: relative;
    border-left: 3px solid var(--bp-boy);
    text-decoration: none; color: inherit;
}
.bp-name-row:hover { border-color: var(--bp-boy); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.bp-name-row--girl { border-left-color: var(--bp-girl); }
.bp-name-row--girl:hover { border-color: var(--bp-girl); }

/* Highlighted rows for popular/trending */
.bp-name-row.popular { background: #FFF7F2; border-color: #FFCFAD; border-left-color: var(--bp-accent, #FF8C42); }
.bp-name-row.trending { background: #FFFBF0; border-color: #FFE8A0; border-left-color: #F9A825; }

.bp-row-name { font-size: .95rem; font-weight: 700; color: var(--bp-boy); min-width: 110px; }
.bp-name-row--girl .bp-row-name { color: var(--bp-girl); }
.bp-row-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: var(--r-full);
    font-size: .62rem; font-weight: 700; letter-spacing: .03em; flex-shrink: 0;
}
.rb-boy  { background: var(--bp-boy-lt); color: var(--bp-boy-text); }
.rb-girl { background: var(--bp-girl-lt); color: var(--bp-girl-text); }
.bp-row-meaning { font-size: .88rem; color: var(--bp-text-2); flex: 1; line-height: 1.4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-row-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: var(--r-full);
    font-size: .62rem; font-weight: 700;
}
.rt-popular  { background: var(--bp-popular-lt, #FFF0E6); color: #7B3200; border: 1px solid #FFD4B0; }
.bp-row-num {
    min-width: 28px; height: 28px;
    background: var(--bp-bg); border: 1px solid var(--bp-border);
    border-radius: var(--r-sm); display: flex; align-items: center;
    justify-content: center; font-size: .7rem; font-weight: 600;
    color: var(--bp-text-3); flex-shrink: 0;
}
.bp-row-fav {
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%; cursor: pointer;
    color: var(--bp-text-3); transition: all .15s; border: none;
    background: transparent; font-size: 1rem; flex-shrink: 0;
}
.bp-row-fav:hover { color: #E63946; background: #FDECEE; }
.bp-name-row--girl .bp-row-fav:hover { color: #E63946; background: #FDECEE; }
/* Markup applies .bp-row-fav--active (BEM modifier); the earlier .saved
   class is dead. Saved/liked = standard heart-red regardless of row gender. */
.bp-row-fav--active { color: #E63946; }

/* Inline ad between list rows */
.bp-ad-inline {
    background: var(--bp-bg); border: 1.5px dashed var(--bp-border-md);
    border-radius: var(--r-md); height: 90px;
    display: flex; align-items: center; justify-content: center;
    color: var(--bp-text-3); font-size: .7rem; gap: 6px; margin: 4px 0;
}

/* --------------------------------------------------------------------------
   4D. REFINER SIDEBAR
   -------------------------------------------------------------------------- */
.bp-refiner {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--r-lg);
    padding: 16px;
}

/* ── Refiner box (v2 mock) ──
   New wrapper around the shared _FilterSidebar partial. Scoped CSS — every
   selector here starts with .refiner-box so existing usages of .bp-rg /
   .bp-ci / .bp-cb on Rashi/Nakshatra/Numerology Detail views are unaffected. */
.refiner-box {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
/* Header bar — Filters icon + count badge + Clear all */
.refiner-box .bp-filter-hd {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--bp-border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bp-bg);
    margin-bottom: 0; text-transform: none; letter-spacing: 0;
}
.refiner-box .bp-filter-title {
    font-size: .82rem; font-weight: 700; color: var(--bp-text-1);
    text-transform: none; letter-spacing: 0;
    display: flex; align-items: center; gap: .42rem;
}
.refiner-box .bp-filter-title svg { width: 13px; height: 13px; color: var(--bp-nav); }
.refiner-box .bp-filter-badge {
    font-size: .58rem; font-weight: 700;
    background: var(--bp-nav); color: #fff;
    padding: .12rem .45rem; border-radius: var(--r-full);
    min-width: 18px; text-align: center;
}
.refiner-box .bp-filter-clear {
    font-size: .7rem; color: var(--bp-nav); font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.refiner-box .bp-filter-clear:hover { text-decoration: underline; }

/* Active pills row — cream background, scoped so non-refiner usage of
   .bp-active-pills (none today, but future-proof) keeps the original look */
.refiner-box .bp-active-pills {
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--bp-border);
    background: #F9F6F2;
    margin-bottom: 0;
    display: flex; flex-wrap: wrap; gap: .3rem;
}
/* Religion-specific pills — only resolve inside the refiner box */
.refiner-box .pill-hindu     { background: var(--hindu-lt);    border-color: var(--hindu);    color: var(--hindu-text); }
.refiner-box .pill-muslim    { background: #E8F5EC; border-color: #1A7A4A; color: #0E4A2D; }
.refiner-box .pill-christian { background: #EAF0FA; border-color: #1A4A8A; color: #0E2D58; }
.refiner-box .pill-sikh      { background: #FDF5E0; border-color: #8B6914; color: #5A4208; }
.refiner-box .pill-jain      { background: #F0F8F0; border-color: #2E7A2E; color: #164016; }

/* Group toggle — slightly tighter spacing + hover background + selected pill
   to the right of the title. */
.refiner-box .bp-rg          { border-bottom: 1px solid var(--bp-border); }
.refiner-box .bp-rg:last-child { border-bottom: none; }
.refiner-box .bp-rg-toggle {
    padding: .58rem .9rem;
    cursor: pointer;
    transition: background .1s;
}
.refiner-box .bp-rg-toggle:hover { background: #F9F6F2; }
.refiner-box .bp-rg-label {
    font-size: .73rem; font-weight: 700; color: var(--bp-text-1);
}
.refiner-box .bp-rg-body { padding: .42rem .9rem .65rem; }
.refiner-box .bp-rg-toggle-right {
    display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
}
.refiner-box .bp-rg-selected {
    font-size: .62rem; color: var(--bp-nav); font-weight: 600;
    background: var(--bp-accent-lt, #EAF3FB);
    padding: .1rem .42rem; border-radius: var(--r-full);
    max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Small rashi-symbol prefix on each rashi checkbox row */
.refiner-box .bp-ci-rashi-sym {
    color: var(--bp-rashi, #534AB7);
    font-size: .9rem; line-height: 1;
}

/* Show-more link inside refiner box — match the v2 mock minimal accent style */
.refiner-box .bp-show-more {
    display: inline-block; margin: .2rem 0 .1rem;
    font-size: .68rem; color: var(--bp-nav); font-weight: 600;
    background: none; border: none; cursor: pointer;
    padding: .35rem 0;
}
.refiner-box .bp-show-more:hover { text-decoration: underline; }

.bp-refiner-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.bp-filter-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--bp-text-3);
}
.bp-active-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--bp-border);
}
.bp-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 600; text-decoration: none;
    border: 1px solid var(--bp-border); background: var(--bp-surface);
    color: var(--bp-text-1); transition: all var(--bp-ease); cursor: pointer;
}
.bp-pill:hover { text-decoration: none; }
.pill-boy   { background: var(--bp-boy-lt); border-color: var(--bp-boy-border); color: var(--bp-boy-text); }
.pill-girl  { background: var(--bp-girl-lt); border-color: var(--bp-girl-border); color: var(--bp-girl-text); }
.pill-rashi { background: var(--bp-rashi-lt); border-color: var(--bp-rashi); color: var(--bp-rashi); }
.pill-tag   { background: var(--bp-accent-lt); border-color: var(--bp-accent); color: var(--bp-accent); }

/* Refiner group accordion */
.bp-rg { border-bottom: 1px solid var(--bp-border); }
.bp-rg-toggle { display: flex; align-items: center; justify-content: space-between; padding: .65rem 0; cursor: pointer; user-select: none; background: none; border: none; width: 100%; text-align: left; }
.bp-rg-toggle:hover .bp-rg-label { color: #0077B6; }
.bp-rg-label { font-size: .8rem; font-weight: 600; color: var(--bp-text-1); transition: color .15s; display: flex; align-items: center; gap: .4rem; }
.bp-rg-chevron { width: 14px; height: 14px; color: var(--bp-text-3); transition: transform .2s; flex-shrink: 0; }
.bp-rg.open .bp-rg-chevron { transform: rotate(180deg); }
.bp-rg-body { padding-bottom: .75rem; display: none; }
.bp-rg.open .bp-rg-body { display: block; }
.bp-rg-count { display: inline-flex; align-items: center; justify-content: center; background: var(--bp-accent); color: #fff; font-size: .58rem; font-weight: 700; min-width: 15px; height: 15px; border-radius: var(--r-full); padding: 0 3px; }

/* Unified count pill */
.bp-cnt { font-size: .65rem; color: var(--bp-text-3); background: var(--bp-bg); border: 1px solid var(--bp-border); padding: .1rem .42rem; border-radius: var(--r-full); flex-shrink: 0; white-space: nowrap; }
.bp-ci.on .bp-cnt { background: #E3F1FA; border-color: #A8D4F0; color: #003D5C; }

/* Checkbox list */
.bp-check-list { display: flex; flex-direction: column; gap: 1px; }
.bp-ci {
    display: flex; align-items: center; justify-content: space-between;
    padding: .32rem .45rem; border-radius: var(--r-sm);
    cursor: pointer; transition: background .12s; gap: .5rem;
    text-decoration: none; color: inherit;
}
.bp-ci:hover { background: var(--bp-bg); text-decoration: none; color: inherit; }
.bp-ci.on { background: #E3F1FA; }
.bp-ci-left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.bp-cb {
    width: 15px; height: 15px; border-radius: 3px;
    border: 1.5px solid var(--bp-border-md);
    background: var(--bp-surface); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.bp-ci.on .bp-cb { background: #0077B6; border-color: #0077B6; }
.bp-cb-tick { color: #fff; font-size: .6rem; display: none; line-height: 1; }
.bp-ci.on .bp-cb-tick { display: block; }
.bp-ci-label { font-size: .78rem; font-weight: 500; color: var(--bp-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-ci.on .bp-ci-label { color: #003D5C; font-weight: 600; }

/* Show more */
.bp-show-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; margin-left: .45rem; font-size: .72rem; font-weight: 600; color: #0077B6; cursor: pointer; background: none; border: none; padding: 0; font-family: 'Poppins', sans-serif; transition: color .15s; }
.bp-show-more:hover { color: var(--bp-accent); }
.bp-show-more svg { width: 12px; height: 12px; }

/* Inline-truncation for refiner option lists (Numerology, AksharaCount,
   any other group without a modal-wired ShowMoreUrl). When the list
   carries .bp-check-list--truncated, options past the 5th are hidden
   until the user clicks the paired [data-action="toggle-truncate"]
   button, which flips the .expanded class via bachpan-ui.js. */
.bp-check-list--truncated:not(.expanded) > .bp-ci:nth-child(n+6) { display: none; }

/* Gender row */
.bp-gender-row { display: flex; gap: .4rem; }
.bp-gb { flex: 1; padding: .4rem 0; border-radius: var(--r-full); border: 1.5px solid var(--bp-border-md); font-size: .72rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--bp-text-2); font-family: 'Poppins', sans-serif; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: .28rem; }
.bp-gb svg { width: 12px; height: 12px; flex-shrink: 0; }
.bp-gb.boy { background: var(--bp-boy); border-color: var(--bp-boy-border); color: #fff; }
.bp-gb.girl { background: var(--bp-girl); border-color: var(--bp-girl-border); color: #fff; }
.bp-gb.uni { background: var(--bp-unisex); border-color: var(--bp-unisex); color: #fff; }

/* Nakshatra scroll */
.bp-nak-scroll { max-height: 180px; overflow-y: auto; padding-right: 2px; }
.bp-nak-scroll::-webkit-scrollbar { width: 3px; }
.bp-nak-scroll::-webkit-scrollbar-thumb { background: var(--bp-border-md); border-radius: 2px; }

/* Syllable grid */
.bp-syll-note { font-size: .65rem; color: var(--bp-text-3); margin-bottom: .4rem; font-style: italic; }
.bp-syll-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bp-syll-btn { background: var(--bp-surface); border: 1.5px solid #A8D4F0; border-radius: var(--r-sm); padding: .32rem .1rem; text-align: center; cursor: pointer; transition: all .15s; }
.bp-syll-btn:hover { background: #E3F1FA; }
.bp-syll-btn.on { background: #0077B6; border-color: #0077B6; }
.bp-syll-btn.on .syl-rm { color: #fff; }
.syl-rm { font-size: .7rem; font-weight: 600; color: var(--bp-text-1); display: block; }

/* Numerology grid — 5 columns */
.bp-num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.bp-num-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: .42rem .1rem; border-radius: var(--r-sm);
    border: 1.5px solid var(--bp-border-md);
    background: var(--bp-surface); cursor: pointer; transition: all .15s;
}
.bp-num-btn:hover { border-color: #0077B6; background: #E3F1FA; }
.bp-num-btn.on { background: #0077B6; border-color: #0077B6; }

/* Sidebar CTA + Ad */
.bp-sidebar-cta { margin-top: .9rem; background: var(--bp-accent-lt); border: 1px solid var(--bp-accent-md); border-radius: var(--r-lg); padding: .85rem; text-align: center; }
.bp-sidebar-cta-title { font-size: .78rem; font-weight: 700; margin-bottom: .2rem; }
.bp-sidebar-cta-sub { font-size: .68rem; color: var(--bp-text-2); margin-bottom: .6rem; }
.bp-sidebar-cta-btn { display: block; background: var(--bp-accent); color: #fff; padding: .5rem 0; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; width: 100%; border: none; font-family: 'Poppins', sans-serif; cursor: pointer; }
.bp-ad-label { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bp-border-md); }

/* --------------------------------------------------------------------------
   4E. SHOW MORE MODAL
   -------------------------------------------------------------------------- */
.bp-modal-backdrop {
    display: none; position: fixed; inset: 0;
    /* Above the fixed .bachpan-bottom-nav (z-index 1030) — otherwise on mobile the
       nav strip (Home/Browse/Search…) covers the bottom of the bottom-sheet modal,
       hiding the share card's "Copy link" / action row. */
    background: rgba(0,0,0,.5); z-index: 1100;
    align-items: flex-end; justify-content: center;
}
@media(min-width:600px) { .bp-modal-backdrop { align-items: center; } }
.bp-modal-backdrop.open { display: flex; }
.bp-modal {
    background: var(--bp-surface);
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 100%;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) {
    .bp-modal {
        border-radius: var(--r-lg);
        max-width: 520px; max-height: 70vh;
    }
}
.bp-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--bp-border);
}
.bp-modal-title { font-size: 1rem; font-weight: 700; }
.bp-modal-close {
    background: none; border: none; font-size: 1.25rem;
    color: var(--bp-text-3); cursor: pointer;
}
.bp-modal-search { padding: 12px 20px; border-bottom: 1px solid var(--bp-border); }
.bp-modal-search-wrap {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--bp-border); border-radius: var(--r-md);
    padding: 8px 12px;
}
.bp-modal-search-wrap input {
    border: none; outline: none; flex: 1; font-size: .85rem; background: transparent;
}
.bp-modal-selected {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 20px;
}
.bp-sel-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 600;
    background: var(--bp-accent-lt); color: var(--bp-nav);
    border: 1px solid var(--bp-accent-md);
    cursor: pointer;
}
.bp-modal-body { flex: 1; overflow-y: auto; padding: 12px 20px; }
.bp-mci {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: .85rem; color: var(--bp-text-1);
    cursor: pointer;
}
.bp-mci:hover { color: var(--bp-nav); }
.bp-mci.on { color: var(--bp-nav); font-weight: 600; }
.bp-mcb {
    width: 18px; height: 18px; border: 1.5px solid var(--bp-border-md);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all var(--bp-ease);
}
.bp-mci.on .bp-mcb { background: var(--bp-accent-lt); border-color: var(--bp-nav); }
.bp-mcb-tick { display: none; font-size: .7rem; color: var(--bp-nav); }
.bp-mci.on .bp-mcb-tick { display: block; }
.bp-mci-label { flex: 1; }
.bp-modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid var(--bp-border);
    gap: 12px;
}
.bp-modal-clear {
    background: none; border: none; font-size: .85rem;
    color: var(--bp-text-2); cursor: pointer; font-weight: 600;
}
.bp-modal-clear:hover { color: var(--bp-text-1); }
.bp-modal-apply {
    padding: 8px 24px; background: var(--bp-nav); color: #fff;
    border: none; border-radius: var(--r-md); font-size: .85rem;
    font-weight: 700; cursor: pointer; transition: background var(--bp-ease);
}
.bp-modal-apply:hover { background: var(--bp-nav-dark); }

/* --------------------------------------------------------------------------
   4F. RASHI HERO CARD
   -------------------------------------------------------------------------- */
.bp-rashi-hero{background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:var(--r-lg);border-left:4px solid var(--bp-girl);padding:1.1rem 1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.bp-rashi-hero--boy{border-left-color:var(--bp-boy);}
.bp-rashi-hero--girl{border-left-color:var(--bp-girl);}
.bp-rashi-icon-wrap{width:54px;height:54px;flex-shrink:0;background:var(--bp-rashi-lt);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--bp-rashi);font-family:'Noto Sans',sans-serif;}
.bp-rashi-main{flex:1;min-width:180px;}
.bp-rashi-page-title{font-size:1.2rem;font-weight:700;color:var(--bp-text-1);margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
@media(min-width:768px){.bp-rashi-page-title{font-size:1.35rem;}}
.bp-rashi-page-title .gender-dot{width:10px;height:10px;border-radius:50%;background:var(--bp-girl);flex-shrink:0;display:inline-block;}
.bp-rashi-page-title .gender-dot--boy{background:var(--bp-boy);}
.bp-rashi-sub{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem;}
.bp-rashi-deva{font-size:.82rem;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;}
.bp-rashi-lat{font-size:.78rem;color:var(--bp-text-3);}
.bp-rashi-badges{display:flex;gap:.4rem;flex-wrap:wrap;}
.bp-rbadge{display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;font-weight:600;padding:.2rem .65rem;border-radius:var(--r-full);}
.rb-planet{background:var(--bp-boy-lt);color:var(--bp-boy-text);}
.rb-element{background:var(--bp-accent-lt);color:#7B3200;}
.bp-rashi-count{font-size:.85rem;color:var(--bp-text-2);white-space:nowrap;font-weight:500;flex-shrink:0;}
.bp-rashi-count strong{color:var(--bp-text-1);font-weight:700;font-size:1rem;}
/* Inline left-aligned count line (Misc UI fixes 3 + 5). Sits between the H1
   and the descriptor row inside .bp-rashi-main, replacing the right-side
   .bp-rashi-count card for pages that go through _BrowseInfoPanel. */
.bp-rashi-count-line{font-size:.82rem;color:var(--bp-text-2);margin-bottom:.35rem;}
.bp-rashi-count-line strong{color:var(--bp-text-1);font-weight:700;}

/* Compact 2-row hero (header-optimization). Row 1 = title + inline count pill,
   Row 2 = Name · NativeName · Subtitle · Badge1 · Badge2 …
   Layout reuses .bp-rashi-hero so all variants (Rashi, Nakshatra, Numerology,
   Tag, Religion, Language) get the same compact rhythm. */
.bp-rashi-hero--compact{padding:.85rem 1rem;margin-bottom:.75rem;align-items:flex-start;}
.bp-rashi-hero--compact .bp-rashi-main{display:flex;flex-direction:column;gap:.25rem;}
.bp-rashi-row1{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.bp-rashi-row1 .bp-rashi-page-title{margin-bottom:0;}
.bp-rashi-count-pill{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;color:var(--bp-text-2);background:var(--bp-bg);border:1px solid var(--bp-border);border-radius:999px;padding:.15rem .55rem;white-space:nowrap;}
.bp-rashi-count-pill strong{color:var(--bp-text-1);font-weight:700;margin-right:.18rem;}
.bp-rashi-row2{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--bp-text-2);line-height:1.4;}
.bp-rashi-row2-item{display:inline-flex;align-items:baseline;}
.bp-rashi-row2-sep{width:3px;height:3px;border-radius:50%;background:var(--bp-text-3);flex-shrink:0;display:inline-block;}
/* When the compact hero is in play, hide any legacy stacked rows that may
   still slip through from older partial callers. Keeps the markup safe even
   if a future view forgets to fold descriptor + badges into Row 2. */
.bp-rashi-hero--compact .bp-rashi-count-line,
.bp-rashi-hero--compact .bp-rashi-sub,
.bp-rashi-hero--compact .bp-rashi-badges,
.bp-rashi-hero--compact > .bp-rashi-count{display:none;}

/* --------------------------------------------------------------------------
   4G. BROWSE / SEARCH LISTING
   -------------------------------------------------------------------------- */
/* Layout — flex-based matching mockup */
.bp-layout { display: flex; min-height: calc(100vh - 72px); }
.bp-sidebar {
    width: 300px; flex-shrink: 0;
    background: var(--bp-surface); border-right: 1px solid var(--bp-border);
    padding: 1rem; display: none; overflow-y: auto;
    position: sticky; top: 52px; max-height: calc(100vh - 52px);
}
@media (min-width: 992px) { .bp-sidebar { display: block; } }
.bp-drawer {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 300px; background: var(--bp-surface); z-index: 500;
    overflow-y: auto; padding: 1rem;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
.bp-drawer.open { transform: translateX(0); }
.bp-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 490; }
.bp-overlay.open { display: block; }
.bp-main { flex: 1; padding: 1rem 1.25rem 2rem; min-width: 0; }
@media (min-width: 768px) { .bp-main { padding: 1.25rem 1.5rem 2rem; } }

/* Mobile filter bar */
.bp-mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 8px 0; margin-bottom: 8px;
}
@media (min-width: 992px) { .bp-mobile-bar { display: none; } }
.bp-filter-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1.5px solid var(--bp-border);
    border-radius: var(--r-full); background: var(--bp-surface);
    font-size: .8rem; font-weight: 600; color: var(--bp-text-1);
    cursor: pointer;
}
.bp-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--r-full);
    font-size: .75rem; font-weight: 600;
    background: var(--bp-accent-lt); color: var(--bp-nav);
    border: 1px solid var(--bp-accent-md);
    text-decoration: none;
}

/* Letter Filter */
.bp-lf{display:flex;gap:.4rem;margin-bottom:.9rem;flex-wrap:wrap;}
.bp-lf-btn{padding:.3rem .85rem;border-radius:var(--r-full);font-size:.75rem;font-weight:600;border:1.5px solid var(--bp-border-md);background:var(--bp-surface);color:var(--bp-text-2);cursor:pointer;font-family:'Poppins',sans-serif;transition:all .15s;}
.bp-lf-btn:hover{border-color:var(--bp-girl);color:var(--bp-girl);}
.bp-lf-btn.active{background:var(--bp-nav);border-color:var(--bp-nav);color:#fff;}
/* Rashi-purple variant — Rashi/Nakshatra syllable rows use the Rashi token
   for the active state instead of nav-blue, so syllable selectors visually
   tie to the Rashi system (header optimization Change 4). */
.bp-lf--rashi .bp-lf-btn:hover{border-color:var(--bp-rashi);color:var(--bp-rashi);}
.bp-lf--rashi .bp-lf-btn.active{background:var(--bp-rashi);border-color:var(--bp-rashi);color:#fff;}

/* Card-style variant for the letter/syllable filter row (matches mock
   bachpan-header-optimization.html — .al tiles). Buttons are a tight 36x34
   column tile with the letter on top and optional count below. Used on
   Rashi / Nakshatra / Tag / Numerology / Search listings; the Religion
   alphabet already has the look via .bp-lf--counts / .bp-ab. Multi-char
   syllables ("Chu") and the "All" tile expand width via .bp-lf-btn--all. */
.bp-lf--cards{gap:4px;}
.bp-lf--cards .bp-lf-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 4px;border-radius:var(--r-sm);gap:0;line-height:1;}
.bp-lf--cards .bp-lf-btn__letter{font-size:.78rem;font-weight:700;line-height:1;}
.bp-lf--cards .bp-lf-btn__count{font-size:.44rem;color:var(--bp-text-3);font-weight:500;line-height:1;}
.bp-lf--cards .bp-lf-btn.active .bp-lf-btn__count{color:rgba(255,255,255,.72);}
.bp-lf--cards .bp-lf-btn--all{min-width:44px;padding:0 8px;}
.bp-lf--cards .bp-lf-btn--all .bp-lf-btn__letter{font-size:.7rem;}
.bp-lf--cards .bp-lf-btn--dimmed{opacity:.38;pointer-events:none;cursor:default;}

/* Letter Filter — with-counts variant. Each chip shows the letter on top
   and the matching name-count underneath in a smaller muted weight. The
   "All" chip uses the same vertical layout so the row height stays uniform. */
.bp-lf--counts{gap:.28rem;}
.bp-lf--counts .bp-lf-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:42px;padding:.32rem .55rem;border-radius:var(--r-md);text-decoration:none;line-height:1;}
.bp-lf--counts .bp-lf-btn__letter{font-size:.85rem;font-weight:700;}
.bp-lf--counts .bp-lf-btn__count{font-size:.55rem;font-weight:600;color:var(--bp-text-3);letter-spacing:.02em;}
.bp-lf--counts .bp-lf-btn.active .bp-lf-btn__count{color:rgba(255,255,255,.78);}
.bp-lf--counts .bp-lf-btn--all{min-width:54px;padding:.32rem .7rem;}
.bp-lf--counts .bp-lf-btn--all .bp-lf-btn__letter{font-size:.78rem;}
/* Dimmed state — letters with zero names. Render but visually disabled. */
.bp-lf--counts .bp-lf-btn--dimmed{opacity:.35;pointer-events:none;cursor:default;}

/* Sort bar */
.bp-sort-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem 0 .9rem;flex-wrap:wrap;}
/* Discrete divider line below the sort bar — emitted by _BrowseToolbar so
   every list page (Rashi, Nakshatra, Numerology, Tag/Search, Religion,
   Language) gets the same separator between toolbar and name grid. */
.bp-sort-divider{height:1px;background:var(--bp-border);margin:0 0 .15rem;}
.bp-sort-lbl{font-size:.72rem;color:var(--bp-text-3);font-weight:500;white-space:nowrap;}
.bp-sort-pills{display:flex;gap:.3rem;flex-wrap:wrap;}
.bp-sort-pill{padding:.3rem .85rem;border-radius:var(--r-full);font-size:.72rem;font-weight:500;border:1px solid var(--bp-border-md);background:var(--bp-surface);color:var(--bp-text-2);cursor:pointer;font-family:'Poppins',sans-serif;transition:all .15s;}
.bp-sort-pill.active{background:var(--bp-nav);border-color:var(--bp-nav);color:#fff;}
.bp-res-count{font-size:.72rem;color:var(--bp-text-3);font-weight:500;white-space:nowrap;margin-left:auto;}
.bp-view-btns{display:flex;gap:.25rem;}
.bp-vbtn{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--bp-border-md);background:var(--bp-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--bp-text-3);}
.bp-vbtn.active{background:var(--bp-nav);border-color:var(--bp-nav);color:#fff;}
.bp-vbtn svg{width:13px;height:13px;}

/* Names grid / list containers */
.bp-names-grid{display:grid;gap:.75rem;padding-top:.5rem;grid-template-columns:1fr;}
@media(min-width:480px){.bp-names-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:768px){.bp-names-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1200px){.bp-names-grid{grid-template-columns:repeat(4,1fr);}}
.bp-names-list { display: flex; flex-direction: column; gap: 8px; }

/* Ad in grid */
.bp-ad-grid-card{background:var(--bp-bg);border:1.5px dashed var(--bp-border-md);border-radius:var(--r-lg);min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--bp-text-3);font-size:.7rem;gap:.25rem;}
@media(min-width:1200px){.bp-ad-grid-card{grid-column:span 2;min-height:130px;}}

/* Pagination v4 */
.bp-pagination-wrap{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 0 .5rem;border-top:1px solid var(--bp-border);margin-top:.5rem;flex-wrap:wrap;gap:.75rem;}
.bp-page-info{font-size:.78rem;color:var(--bp-text-3);}
.bp-page-info strong{color:var(--bp-text-2);}
.bp-pagination{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.bp-page-btn{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);border:1px solid var(--bp-border-md);background:var(--bp-surface);font-size:.85rem;font-weight:500;cursor:pointer;color:var(--bp-text-2);font-family:'Poppins',sans-serif;transition:all .12s;padding:0 .65rem;text-decoration:none;}
.bp-page-btn:hover{border-color:var(--bp-nav);color:var(--bp-nav);background:var(--bp-accent-lt);}
.bp-page-btn.active{background:var(--bp-nav);border-color:var(--bp-nav);color:#fff;font-weight:700;}
.bp-page-btn.active:hover{background:var(--bp-nav);color:#fff;}
.bp-page-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.bp-page-btn.prev-next{gap:.3rem;display:flex;align-items:center;font-weight:600;}
.bp-page-btn.prev-next svg{width:13px;height:13px;}
.bp-page-ellipsis{font-size:.85rem;color:var(--bp-text-3);padding:0 .35rem;align-self:center;min-width:18px;text-align:center;}
.bp-per-page{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--bp-text-3);}
.bp-per-page select{padding:.3rem .6rem;border-radius:var(--r-sm);border:1px solid var(--bp-border-md);background:var(--bp-surface);font-size:.75rem;font-family:'Poppins',sans-serif;color:var(--bp-text-2);cursor:pointer;}

/* --------------------------------------------------------------------------
   4H. NAME DETAIL PAGE
   -------------------------------------------------------------------------- */

/* Name Detail Page */
.bp-page--detail { padding-top: 1.25rem; padding-bottom: 3rem; }

/* Name Hero */
.bp-name-hero{background:var(--bp-surface);border:1px solid var(--bp-border);border-top:4px solid var(--bp-boy);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm);position:relative;}
.bp-name-actions{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;}
@media(max-width:480px){.bp-name-actions{position:static;justify-content:flex-end;margin-bottom:.5rem;}.bp-hero-name{padding-right:0;}}
.bp-action-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--bp-border-md);background:var(--bp-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--bp-text-3);transition:all .15s;}
.bp-action-btn svg{width:16px;height:16px;}
.bp-action-btn:hover{border-color:var(--bp-boy);color:var(--bp-boy);}
.bp-action-btn.saved{color:var(--bp-girl);border-color:var(--bp-girl-border);}
.bp-hero-name{font-size:2.5rem;font-weight:700;line-height:1.1;margin-bottom:.2rem;padding-right:5rem;}
@media(min-width:600px){.bp-hero-name{font-size:3rem;}}
.bp-hero-deva{font-size:1.2rem;font-weight:500;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;margin-bottom:.75rem;display:block;}
.bp-hero-meaning{font-size:1rem;font-weight:500;color:var(--bp-text-1);line-height:1.6;padding:.75rem 1rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-bottom:1rem;}
@media(min-width:600px){.bp-hero-meaning{font-size:1.1rem;}}

/* ────────────────────────────────────────────────────────────
   Section title accent bar — used by Spelling Variants & Similar Names headings.
   Mock used inline `style="background:var(--bp-boy)"`; we want the same colour
   without inline CSS, so the bar uses the gender variable resolved at the page level.
   ──────────────────────────────────────────────────────────── */
.bp-sec-bar--accent{background:var(--bp-boy);}
.bp-page.girl .bp-sec-bar--accent{background:var(--bp-girl);}
.bp-sec-subtitle{font-size:.85rem;font-weight:500;color:var(--bp-text-2);margin-left:.25rem;}

/* ────────────────────────────────────────────────────────────
   Spelling Variants — main content grid
   ──────────────────────────────────────────────────────────── */
.bp-variants__intro{font-size:.95rem;color:var(--bp-text-1);margin-bottom:1rem;line-height:1.55;}
.variant-names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.55rem;}
.vn-card{background:var(--bp-bg);border:1.5px solid var(--bp-border-md);border-radius:var(--r-md);padding:.65rem .8rem;cursor:pointer;transition:all .15s;text-decoration:none;display:block;color:inherit;}
.vn-card:hover{border-color:var(--bp-boy);background:var(--bp-boy-lt);}
.vn-card--current{border-color:var(--bp-boy);background:var(--bp-boy-lt);position:relative;}
.vn-card--current::after{content:'Current';position:absolute;top:-.55rem;right:.5rem;font-size:.55rem;font-weight:700;background:var(--bp-boy);color:#fff;padding:.08rem .42rem;border-radius:var(--r-full);}
.vn-name{font-size:1.05rem;font-weight:700;color:var(--bp-boy);display:block;margin-bottom:.15rem;}
.vn-deva{font-family:'Noto Sans',sans-serif;font-size:.9rem;color:var(--bp-text-2);}
.vn-pop{font-size:.6rem;color:var(--bp-text-3);margin-top:.18rem;display:flex;align-items:center;gap:.2rem;}
.vn-pop__label{font-size:.58rem;white-space:nowrap;}
.vn-pop__value{font-size:.58rem;}
.vn-pop-bar{flex:1;height:3px;background:var(--bp-border-md);border-radius:2px;overflow:hidden;}
.vn-pop-fill{height:100%;background:var(--bp-boy);border-radius:2px;width:0;}
/* width is applied at runtime via bachpan-ui.js using the data-pct attribute. */

/* ────────────────────────────────────────────────────────────
   Similar Names — tab switcher + rich card grid (main content)
   ──────────────────────────────────────────────────────────── */
.bp-similar{}
.sim-tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.sim-tab{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .8rem;border-radius:var(--r-full);font-size:.73rem;font-weight:600;cursor:pointer;border:1.5px solid var(--bp-border-md);background:transparent;color:var(--bp-text-2);font-family:'Poppins',sans-serif;transition:all .15s;white-space:nowrap;}
.sim-tab:hover{border-color:var(--bp-nav);color:var(--bp-nav);}
.sim-tab.active{background:var(--bp-nav);border-color:var(--bp-nav);color:#fff;}
.sim-tab .tab-count{font-size:.6rem;font-weight:700;padding:.05rem .38rem;border-radius:var(--r-full);background:rgba(0,0,0,.1);}
.sim-tab.active .tab-count{background:rgba(255,255,255,.25);}
.sim-tab-desc{font-size:.95rem;color:var(--bp-text-1);margin-bottom:1rem;padding:.55rem .85rem;background:var(--bp-bg);border-radius:var(--r-sm);border-left:3px solid var(--bp-nav);line-height:1.55;}
.sim-panel{display:none;}
.sim-panel.active{display:block;}
.sim-names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.65rem;}
.sn-card{background:var(--bp-bg);border:1px solid var(--bp-border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .18s;text-decoration:none;display:block;color:inherit;}
.sn-card:hover{border-color:var(--bp-boy);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.sn-stripe{height:3px;background:var(--bp-boy);}
.sn-body{padding:.65rem .75rem .6rem;}
.sn-name{font-size:1.05rem;font-weight:700;color:var(--bp-boy);display:block;margin-bottom:.15rem;}
.sn-deva{font-family:'Noto Sans',sans-serif;font-size:.88rem;color:var(--bp-text-2);display:block;margin-bottom:.35rem;}
.sn-meaning{font-size:.82rem;color:var(--bp-text-1);line-height:1.45;margin-bottom:.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sn-sim-reason{display:inline-flex;align-items:center;gap:.2rem;font-size:.6rem;font-weight:600;padding:.1rem .42rem;border-radius:var(--r-full);border:1px solid;}
.sr-sound{background:#FEF9E7;color:#7A5900;border-color:#F0D080;}
.sr-meaning{background:var(--bp-accent-lt,#EAF1F8);color:var(--bp-nav);border-color:var(--bp-accent-md,#B9D2E5);}
.sr-style{background:#F0EBFF;color:#4A1D8C;border-color:#C9B8F5;}
.sr-myth{background:var(--hindu-lt,#FEEED4);color:var(--hindu-text,#7A4500);border-color:var(--hindu-md,#F5C887);}
.sr-origin{background:#EAF3DE;color:#2E5A0E;border-color:#B8DBA0;}

/* ────────────────────────────────────────────────────────────
   Sidebar — compact, type-grouped Similar Names + Spelling Variants
   ──────────────────────────────────────────────────────────── */
.sdsim-group{margin-bottom:.75rem;}
.sdsim-group:last-child{margin-bottom:0;}
.sdsim-type-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bp-text-3);margin-bottom:.32rem;display:flex;align-items:center;gap:.3rem;}
.sdsim-type-label::after{content:'';flex:1;height:1px;background:var(--bp-border);}
.sdsim-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--bp-border);transition:background .1s;text-decoration:none;color:inherit;}
.sdsim-row:last-child{border-bottom:none;}
.sdsim-row:hover{background:var(--bp-accent-lt,#EAF1F8);padding-left:.25rem;border-radius:var(--r-sm);}
.sdsim-name{font-size:.8rem;font-weight:600;color:var(--bp-boy);min-width:60px;}
.sdsim-meaning{font-size:.68rem;color:var(--bp-text-3);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sdsim-arrow{color:var(--bp-text-3);font-size:.72rem;}

.sdvar-pills{display:flex;flex-wrap:wrap;gap:.3rem;}
.sdvar-pill{display:inline-flex;align-items:center;padding:.22rem .65rem;border-radius:var(--r-full);font-size:.72rem;font-weight:600;border:1.5px solid var(--bp-border-md);color:var(--bp-text-2);background:var(--bp-surface);text-decoration:none;transition:all .15s;}
.sdvar-pill:hover{background:var(--bp-boy-lt);border-color:var(--bp-boy-border);color:var(--bp-boy-text);}
.sdvar-pill--current{border-color:var(--bp-boy-border);background:var(--bp-boy-lt);color:var(--bp-boy-text);}
.sdvar-note{font-size:.67rem;color:var(--bp-text-3);margin-top:.5rem;line-height:1.5;}

/* Badges */
.bp-hero-badges{display:flex;gap:.35rem;flex-wrap:wrap;}
.bp-hbadge{display:inline-flex;align-items:center;gap:.28rem;padding:.25rem .7rem;border-radius:var(--r-full);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;border:1px solid transparent;}
.hb-boy{background:var(--bp-boy-lt);color:var(--bp-boy-text);border-color:var(--bp-boy-border);}
.hb-girl{background:var(--bp-girl-lt);color:var(--bp-girl-text);border-color:var(--bp-girl-border);}
.hb-rashi{background:var(--bp-rashi-lt);color:var(--bp-rashi);border-color:#C9C4ED;}
.hb-nak{background:var(--bp-rashi-lt);color:var(--bp-rashi);border-color:#C9C4ED;}
.hb-num{background:var(--bp-accent-lt);color:var(--bp-nav);border-color:var(--bp-accent-md);}
.hb-tag{background:#EAF3DE;color:#2E5A0E;border-color:#B8DBA0;}
.hb-origin{background:#F0EEF8;color:#3C3489;border-color:#C9C4ED;}
.hb-verified{background:#E2F6EB;color:#0F5A30;border-color:#6FD0A0;}

/* Stat Dashboard */
.bp-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem;}
@media(min-width:500px){.bp-stat-grid{grid-template-columns:repeat(4,1fr);}}
.bp-stat-card{background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:var(--r-lg);padding:.9rem .85rem;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .15s;text-decoration:none;display:block;}
.bp-stat-card:hover{border-color:var(--bp-boy);box-shadow:var(--shadow-md);}
.bp-stat-icon{width:40px;height:40px;border-radius:var(--r-md);margin:0 auto .5rem;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-family:'Noto Sans',sans-serif;}
.bp-stat-label{font-size:.65rem;font-weight:600;color:var(--bp-text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem;}
.bp-stat-value{font-size:.9rem;font-weight:700;color:var(--bp-text-1);line-height:1.2;}
.bp-stat-sub{font-size:.65rem;color:var(--bp-text-3);margin-top:.15rem;}
.si-rashi      { background: var(--bp-rashi-lt); color: var(--bp-rashi); }
.si-num        { background: #FFF0E6; color: #C05C00; }
.si-religion-h { background: var(--hindu-lt); color: var(--hindu); }

/* Inline Ad */
.bp-inline-ad{background:var(--bp-bg);border:1.5px dashed var(--bp-border-md);border-radius:var(--r-md);height:90px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;}

/* Detail layout (2 col) */
.bp-detail-layout{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media(min-width:900px){.bp-detail-layout{grid-template-columns:1fr 300px;}}

/* Content Sections */
.bp-section{background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm);}
.bp-section:last-child { border-bottom: none; }

/* Rashi detail */
.bp-rashi-detail{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:500px){.bp-rashi-detail{grid-template-columns:1fr;}}
.bp-rashi-box{background:var(--bp-rashi-lt);border:1px solid #C9C4ED;border-radius:var(--r-md);padding:.8rem .88rem;}
.bp-rashi-box-label{font-size:.58rem;font-weight:700;color:var(--bp-rashi);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.22rem;}
.bp-rashi-box-name{font-size:.92rem;font-weight:700;color:var(--bp-rashi);margin-bottom:.1rem;}
.bp-rashi-box-deva{font-size:.75rem;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;}
.bp-rashi-box-meta{font-size:.67rem;color:var(--bp-text-3);margin-top:.25rem;line-height:1.5;}
.bp-letters-row{display:flex;gap:.2rem;flex-wrap:wrap;margin-top:.4rem;margin-bottom:.55rem;}
.bp-letter-pill{width:26px;height:24px;border-radius:var(--r-sm);background:var(--bp-rashi);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* Numerology detail — sized to match name-detail v5 mock (.num-circ / .num-n).
   Tighter circle + line-height:1 keeps the digit perfectly centred for both
   single-digit and double-digit (11 / 22) values. */
.bp-num-detail{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;}
.bp-num-circle{width:68px;height:68px;border-radius:50%;background:var(--bp-accent-lt);border:3px solid var(--bp-accent-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;padding:0;}
.bp-num-big{font-size:1.9rem;font-weight:700;color:var(--bp-nav);line-height:1;display:block;text-align:center;}
.bp-num-info{flex:1;min-width:150px;}
.bp-num-planet{font-size:.82rem;font-weight:600;color:var(--bp-text-1);margin-bottom:.2rem;}
.bp-num-traits{display:flex;gap:.22rem;flex-wrap:wrap;margin-top:.3rem;margin-bottom:.55rem;}
.bp-num-trait{font-size:.62rem;font-weight:500;background:var(--bp-accent-lt);color:var(--bp-nav);padding:.1rem .42rem;border-radius:var(--r-full);border:1px solid var(--bp-accent-md);}

/* Language variants */
/* Languages section — matches Mock HTML/bachpan-name-detail-v3.html .bp-lang-*
   spec (2026-05-23 restyle). Compact card with tiny uppercase language label,
   native script as the prominent line, romanised in nav-blue, meaning beneath
   in muted text. Hover lifts border + bg to nav accent. */
.bp-lang-variants{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
@media(min-width:600px){.bp-lang-variants{grid-template-columns:repeat(3,1fr);}}
.bp-lang-card{background:var(--bp-bg);border:1px solid var(--bp-border);border-radius:var(--r-md);padding:.7rem .85rem;cursor:pointer;transition:border-color .15s,background-color .15s;text-decoration:none;display:block;color:inherit;}
.bp-lang-card:hover{border-color:var(--bp-nav);background:var(--bp-accent-lt);}
.bp-lang-name{font-size:.65rem;font-weight:700;color:var(--bp-text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;}
.bp-lang-variant{font-size:1rem;font-weight:700;color:var(--bp-text-1);font-family:'Noto Sans',sans-serif;display:block;margin-bottom:.12rem;line-height:1.25;}
.bp-lang-roman{font-size:.72rem;font-weight:600;color:var(--bp-nav);margin-bottom:.1rem;}
.bp-lang-meaning{font-size:.68rem;color:var(--bp-text-2);line-height:1.45;}
.bp-lang-pron{font-size:.65rem;color:var(--bp-text-3);font-style:italic;margin-top:.2rem;}

/* Meaning section body text — matches Mock HTML/bachpan-name-detail-v3.html
   inline style on the meaning paragraph. Slightly larger leading for
   readability since this is the prose part of the page. */
.bp-meaning-body{font-size:.85rem;color:var(--bp-text-2);line-height:1.8;margin-bottom:.75rem;}
.bp-meaning-native{font-size:.85rem;color:var(--bp-text-2);line-height:1.8;margin-bottom:.5rem;}
.bp-meaning-en{font-size:.82rem;color:var(--bp-text-3);line-height:1.7;margin-bottom:.5rem;}

/* Tags row */
.bp-tags-row{display:flex;gap:.35rem;flex-wrap:wrap;}
.bp-tag-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .75rem;border-radius:var(--r-full);font-size:.7rem;font-weight:600;border:1px solid;}

/* FAQ */
.bp-faq-item { border-bottom: 1px solid var(--bp-border); }
.bp-faq-item:last-child { border-bottom: none; }
/* FAQ — sized to match Mock HTML/bachpan-name-detail-v3.html (2026-05-23
   restyle). Tighter question/answer + compact "suggest" footer row. */
.bp-faq-q {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 0; cursor: pointer;
    font-size: .82rem; font-weight: 600; color: var(--bp-text-1);
    gap: .75rem; user-select: none;
    background: none; border: none; width: 100%; text-align: left;
    font-family: 'Poppins', sans-serif;
}
.bp-faq-q:hover { color: var(--bp-nav); }
.bp-faq-chevron { width: 14px; height: 14px; color: var(--bp-text-3); transition: transform .2s; flex-shrink: 0; }
.bp-faq-item.open .bp-faq-chevron { transform: rotate(180deg); }
.bp-faq-a { font-size: .8rem; color: var(--bp-text-2); line-height: 1.7; padding: 0 0 .85rem; display: none; }
.bp-faq-item.open .bp-faq-a { display: block; }
.bp-suggest{margin-top:1rem;padding:.7rem 1rem;background:var(--bp-bg);border:1px solid var(--bp-border);border-radius:var(--r-md);display:flex;align-items:center;gap:.75rem;}
.bp-suggest-text{font-size:.72rem;color:var(--bp-text-3);flex:1;line-height:1.5;}
.bp-suggest-link{font-size:.72rem;font-weight:600;color:var(--bp-nav);cursor:pointer;white-space:nowrap;text-decoration:none;background:none;border:none;font-family:inherit;}

/* Name navigation (prev/next) */
.bp-name-nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:var(--r-lg);margin-bottom:1.25rem;box-shadow:var(--shadow-sm);}
.bp-nnav-btn{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--bp-nav);cursor:pointer;background:none;border:none;font-family:'Poppins',sans-serif;padding:.32rem .7rem;border-radius:var(--r-full);transition:all .15s;text-decoration:none;}
.bp-nnav-btn:hover{background:var(--bp-accent-lt);}
.bp-nnav-btn svg{width:13px;height:13px;}
.bp-nnav-center{font-size:.72rem;color:var(--bp-text-3);}
/* Empty side (first / last name in scope) — kept in flow so the centre label stays centred. */
.bp-nnav-placeholder{display:inline-block;width:6rem;}

/* Astro strip — Rashi · Nakshatra · Lucky No. in one horizontal compact row.
   Replaces the older 4-column stat-grid; matches name-detail v5 mock. */
.bp-astro-strip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--bp-border);border-radius:var(--r-md);overflow:hidden;margin-bottom:1.25rem;background:var(--bp-surface);}
.bp-as-item{padding:.55rem .85rem;border-right:1px solid var(--bp-border);flex:1;min-width:0;cursor:pointer;transition:background .12s;text-decoration:none;display:block;color:inherit;}
.bp-as-item:last-child{border-right:none;}
.bp-as-item:hover{background:var(--bp-accent-lt);}
.bp-as-lbl{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bp-text-3);display:block;margin-bottom:.18rem;}
.bp-as-val{font-size:.82rem;font-weight:700;color:var(--bp-text-1);display:block;line-height:1.2;}
.bp-as-val--num{color:var(--bp-nav);font-size:1rem;font-weight:800;}
.bp-as-sub{font-size:.6rem;color:var(--bp-text-3);margin-top:.08rem;display:block;}
@media(max-width:500px){
  .bp-as-item{flex:0 0 50%;border-bottom:1px solid var(--bp-border);}
  .bp-as-item:nth-child(even){border-right:none;}
  .bp-as-item:nth-last-child(-n+2){border-bottom:none;}
}

/* Sidebar feedback invitation card — uses the global feedback widget via data-action="open-feedback". */
.bp-sidebar-feedback{text-align:center;}
.bp-sidebar-feedback__icon{font-size:1.25rem;margin-bottom:.35rem;}
.bp-sidebar-feedback__title{font-size:.78rem;font-weight:600;color:var(--bp-text-1);margin-bottom:.25rem;}
.bp-sidebar-feedback__sub{font-size:.68rem;color:var(--bp-text-3);line-height:1.5;margin-bottom:.65rem;}
.bp-sidebar-feedback__btn{height:32px;padding:0 1rem;border-radius:var(--r-full);border:none;background:var(--bp-nav);color:#fff;font-size:.72rem;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;transition:opacity .15s;}
.bp-sidebar-feedback__btn:hover{opacity:.88;}

/* Sidebar pieces */
.bp-detail-sidebar{display:flex;flex-direction:column;gap:1rem;}
@media(min-width:900px){.bp-detail-sidebar{position:sticky;top:68px;align-self:start;}}
.bp-sidebar-ad{background:var(--bp-bg);border:1.5px dashed var(--bp-border-md);border-radius:var(--r-lg);height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--bp-text-3);font-size:.7rem;gap:.25rem;}
.bp-sidebar-card{background:var(--bp-surface);border:1px solid var(--bp-border);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--shadow-sm);}
.bp-sidebar-title{font-size:.82rem;font-weight:700;color:var(--bp-text-1);margin-bottom:.65rem;}
/* star styles consolidated in section 5 below */
.bp-rating-count{font-size:.7rem;color:var(--bp-text-3);}
.bp-sibling-pills{display:flex;flex-wrap:wrap;gap:.3rem;}
.bp-sib-pill{display:inline-flex;align-items:center;padding:.22rem .65rem;border-radius:var(--r-full);font-size:.7rem;font-weight:600;cursor:pointer;border:1px solid var(--bp-border-md);color:var(--bp-text-2);background:var(--bp-surface);transition:all .15s;text-decoration:none;}
.bp-sib-pill:hover{background:var(--bp-boy-lt);border-color:var(--bp-boy-border);color:var(--bp-boy-text);}
.bp-sib-girl{color:var(--bp-girl-text);border-color:var(--bp-girl-border);}
.bp-sib-girl:hover{background:var(--bp-girl-lt);}
.bp-sub-lbl{font-size:.65rem;font-weight:600;color:var(--bp-text-3);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .3rem;}

/* --------------------------------------------------------------------------
   4I. HUB PAGES
   -------------------------------------------------------------------------- */
.bp-hub-quick-browse { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-hub-qb-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 18px; border-radius: var(--r-full);
    font-size: .85rem; font-weight: 700; text-decoration: none;
    background: rgba(255,255,255,.2); color: #fff;
    border: 1.5px solid rgba(255,255,255,.4);
    transition: background var(--bp-ease);
}
.bp-hub-qb-btn:hover { background: rgba(255,255,255,.35); color: #fff; text-decoration: none; }
.bp-hub-qb-boy  { }
.bp-hub-qb-girl { }

/* --------------------------------------------------------------------------
   4J. HOMEPAGE
   -------------------------------------------------------------------------- */
.bp-hero {
    background: linear-gradient(150deg, #EAF5FF 0%, #F5F0FF 35%, #FFF5F0 65%, #FAFAF7 100%);
    padding: 2.75rem 1.5rem 2.25rem;
    text-align: center;
    position: relative;
    overflow: visible;
}
.bp-hero::before { content:''; position:absolute; top:-80px; right:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(61,130,196,.08) 0%,transparent 70%); pointer-events:none; }
.bp-hero::after { content:''; position:absolute; bottom:-60px; left:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(181,41,78,.06) 0%,transparent 70%); pointer-events:none; }
.bp-hero-trust {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 600; color: var(--bp-nav);
    background: var(--bp-accent-lt); border: 1px solid var(--bp-accent-md);
    padding: .3rem .85rem; border-radius: var(--r-full); margin-bottom: 1rem;
}
.bp-hero-title { font-size: 1.9rem; font-weight: 800; color: var(--bp-text-1); line-height: 1.2; margin-bottom: .5rem; }
@media (min-width: 600px) { .bp-hero-title { font-size: 2.5rem; } }
.bp-hero-title span { color: var(--bp-nav); }
.bp-hero-sub { font-size: 1rem; color: var(--bp-text-2); margin-bottom: .35rem; line-height: 1.55; }
.bp-hero-faiths { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.bp-faith-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .75rem; border-radius: var(--r-full);
    font-size: .7rem; font-weight: 600; border: 1px solid;
    cursor: pointer; transition: all .15s;
}
.fc-hindu { background: var(--hindu-lt); color: var(--hindu-text); border-color: var(--hindu-md); }
.fc-hindu:hover { background: var(--hindu); color: #fff; border-color: var(--hindu); }
.fc-muslim { background: var(--muslim-lt); color: var(--muslim-text); border-color: var(--muslim-md); }
.fc-muslim:hover { background: var(--muslim); color: #fff; border-color: var(--muslim); }
.fc-christian { background: var(--christian-lt); color: var(--christian-text); border-color: var(--christian-md); }
.fc-christian:hover { background: var(--christian); color: #fff; border-color: var(--christian); }
.fc-sikh { background: var(--sikh-lt); color: var(--sikh-text); border-color: var(--sikh-md); }
.fc-sikh:hover { background: var(--sikh); color: #fff; border-color: var(--sikh); }

/* Gender toggle */
.bp-gender-toggle { display: inline-flex; gap: 0; margin-bottom: 1rem; border-radius: var(--r-full); overflow: hidden; border: 1.5px solid var(--bp-border-md); background: var(--bp-surface); box-shadow: var(--shadow-sm); }
.bp-gt-btn {
    padding: .42rem 1.25rem; font-size: .78rem; font-weight: 600;
    cursor: pointer; background: transparent; border: none;
    font-family: 'Poppins', sans-serif; color: var(--bp-text-2);
    transition: all .15s; display: flex; align-items: center; gap: .3rem;
}
.bp-gt-btn svg { width: 12px; height: 12px; }
.bp-gt-sep { width: 1px; background: var(--bp-border-md); flex-shrink: 0; }
.bp-gt-btn.active-all  { background: var(--bp-nav); color: #fff; }
.bp-gt-btn.active-boy  { background: var(--bp-boy); color: #fff; }
.bp-gt-btn.active-girl { background: var(--bp-girl); color: #fff; }

/* Search container */
.bp-search-container { max-width: 620px; margin: 0 auto 1rem; position: relative; z-index: 50; }
.bp-search-box {
    display: flex; align-items: center;
    background: var(--bp-surface); border: 2px solid var(--bp-border-md);
    border-radius: var(--r-full); overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,119,182,.12);
    transition: border-color .15s, box-shadow .15s;
}
.bp-search-box:focus-within { border-color: var(--bp-nav); box-shadow: 0 2px 20px rgba(0,119,182,.22); }
.bp-search-icon-wrap { padding: 0 .85rem 0 1.1rem; display: flex; align-items: center; flex-shrink: 0; }
.bp-search-icon-wrap svg { width: 18px; height: 18px; color: var(--bp-text-3); }
.bp-search-input {
    flex: 1; height: 50px; border: none; outline: none;
    font-size: .9rem; font-family: 'Poppins', sans-serif;
    color: var(--bp-text-1); background: transparent; padding: 0;
}
.bp-search-input::placeholder { color: var(--bp-text-3); }
.bp-search-divider { width: 1px; height: 28px; background: var(--bp-border-md); flex-shrink: 0; }
.bp-search-btn {
    height: 50px; padding: 0 1.5rem;
    background: var(--bp-register); color: #fff;
    font-size: .85rem; font-weight: 700; border: none;
    cursor: pointer; font-family: 'Poppins', sans-serif;
    transition: background .15s; white-space: nowrap;
    display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
}
.bp-search-btn:hover { background: #c97a08; }
.bp-search-btn svg { width: 15px; height: 15px; }

/* Popular chips */
.bp-popular-chips { display: flex; align-items: center; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.bp-popular-label { font-size: .85rem; color: var(--bp-text-2); font-weight: 500; }
.bp-popular-chip {
    padding: .22rem .75rem; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 600;
    cursor: pointer; background: var(--bp-surface);
    border: 1px solid var(--bp-border-md); color: var(--bp-text-2);
    transition: all .15s;
}
.bp-popular-chip:hover { border-color: var(--bp-nav); color: var(--bp-nav); background: var(--bp-accent-lt); }

/* Container */
.bp-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .bp-container { padding: 0 2rem; } }

/* Meta */
.bp-meta { font-size: .78rem; color: var(--bp-text-3); }

/* Name of the Day */
.bp-notd {
    background: var(--bp-surface); border: 1px solid var(--bp-border);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.bp-notd-hdr {
    background: linear-gradient(135deg, var(--bp-nav) 0%, #005f91 100%);
    /* Asymmetric right padding leaves clearance for the absolute-positioned
       favourite button (.bp-notd-fav, 30px wide at right:.85rem) so it doesn't
       overlap the date on the right. */
    padding: .75rem 3rem .75rem 1.1rem;
    display: flex; align-items: center;
    justify-content: space-between;
}
.bp-notd-lbl {
    font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.9);
    text-transform: uppercase;
}
.bp-notd-date { font-size: .68rem; color: rgba(255,255,255,.65); }
.bp-notd-body { padding: 1.1rem; position: relative; }
.bp-notd-fav {
    /* Vertically centred against the header. Header height ≈ 2.58rem (top/bottom
       padding .75rem + text line-height ~1.08rem); 30px heart needs top ≈
       (2.58rem - 1.875rem)/2 ≈ .35rem so its centre lines up with the header text. */
    position: absolute; top: .35rem; right: .85rem;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--bp-border-md); background: var(--bp-surface);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
}
.bp-notd-fav svg { width: 15px; height: 15px; color: var(--bp-text-3); }
.bp-notd-fav:hover svg { color: var(--bp-girl); }
.bp-notd-name { font-size: 2rem; font-weight: 800; color: var(--bp-boy); line-height: 1; margin-bottom: .3rem; }
.bp-notd-deva { font-size: .9rem; color: var(--bp-text-2); font-family: 'Noto Sans', sans-serif; margin-bottom: .5rem; display: block; }
.bp-notd-badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .6rem; }
.bp-notd-badge {
    display: inline-flex; align-items: center; padding: .18rem .55rem;
    border-radius: var(--r-full); font-size: .65rem; font-weight: 600;
}
.nb-m         { background: var(--muslim-lt); color: var(--muslim-text); border: 1px solid var(--muslim-md); }
.nb-o         { background: #F0EEF8; color: #3C3489; border: 1px solid #C9C4ED; }
.nb-n         { background: var(--bp-accent-lt); color: var(--bp-nav); border: 1px solid var(--bp-accent-md); }
.bp-notd-meaning { font-size: .82rem; color: var(--bp-text-2); line-height: 1.6; margin-bottom: .85rem; }
.bp-notd-btn {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--bp-nav); color: #fff; padding: .55rem 0;
    border-radius: var(--r-full); font-size: .78rem; font-weight: 700;
    width: 100%; border: none; cursor: pointer;
    font-family: 'Poppins', sans-serif; transition: background .15s;
}
.bp-notd-btn:hover { background: #005f91; }
.bp-notd-btn svg { width: 14px; height: 14px; }

/* Trending section */
.bp-trending {
    background: var(--bp-surface); border: 1px solid var(--bp-border);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.bp-tt-row { display: flex; gap: .3rem; }
.bp-tt-btn {
    padding: .22rem .65rem; border-radius: var(--r-full);
    font-size: .68rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--bp-border-md); background: transparent;
    font-family: 'Poppins', sans-serif; transition: all .15s;
}
/* Coloured fill only when the tab is actually active. .boy-a / .girl-a remain on
   both buttons permanently as role markers; the .active class (toggled by the
   switch-rank handler in bachpan-ui.js) flips the highlight between them. */
.bp-tt-btn.boy-a.active  { background: var(--bp-boy);  border-color: var(--bp-boy);  color: #fff; }
.bp-tt-btn.girl-a.active { background: var(--bp-girl); border-color: var(--bp-girl); color: #fff; }
.bp-trend-item {
    display: flex; align-items: center; padding: .5rem 1.1rem;
    gap: .75rem; cursor: pointer; transition: background .12s;
}
.bp-trend-item:hover { background: var(--bp-bg); }
.bp-trend-rank {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700;
}
.rn { background: var(--bp-bg); color: var(--bp-text-3); border: 1px solid var(--bp-border); }
.bp-trend-name { font-size: .82rem; font-weight: 700; flex: 1; }
.boy-n { color: var(--bp-boy); }
.girl-n{ color: var(--bp-girl); }
.bp-trend-meaning { font-size: .7rem; color: var(--bp-text-3); flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-trend-arr svg { width: 13px; height: 13px; color: var(--bp-text-3); }
.bp-trend-footer { padding: .65rem 1.1rem; border-top: 1px solid var(--bp-border); text-align: center; }
.bp-trend-footer a { font-size: .75rem; color: var(--bp-nav); font-weight: 600; cursor: pointer; text-decoration: none; }

/* Rashi section */
.bp-rashi-sec { padding: 1.75rem 0; border-top: 1px solid var(--bp-border); }
.bp-rashi-strip {
    display: grid; gap: .65rem;
    grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 480px) { .bp-rashi-strip { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px) { .bp-rashi-strip { grid-template-columns: repeat(12, 1fr); } }

/* Stats bar */
.bp-stats-bar { background: var(--bp-nav); padding: 1.5rem; }
.bp-stats-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
}
@media (min-width: 576px) { .bp-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.bp-stat-item { text-align: center; }
.bp-stat-num { font-size: 1.75rem; font-weight: 800; color: #fff; display: block; line-height: 1; margin-bottom: .2rem; }
.bp-stat-lbl { font-size: .72rem; color: rgba(255,255,255,.75); font-weight: 500; }

/* Name generator section */
.bp-gen-sec { padding: 2rem 0; border-top: 1px solid var(--bp-border); }
.bp-gen-inner {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center;
}
@media (min-width: 768px) { .bp-gen-inner { grid-template-columns: 1fr 1fr; } }
/* Variant used when the tool-cards grid has been removed (issue #18) —
   keep the section centred and single-column at every viewport. */
.bp-gen-inner--single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
@media (min-width: 768px) { .bp-gen-inner--single { grid-template-columns: 1fr; } }
.bp-gen-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--bp-accent-lt); border: 1px solid var(--bp-accent-md);
    color: var(--bp-nav); font-size: .7rem; font-weight: 700;
    padding: .25rem .75rem; border-radius: var(--r-full); margin-bottom: .75rem;
}
.bp-gen-title { font-size: 1.3rem; font-weight: 800; color: var(--bp-text-1); line-height: 1.3; margin-bottom: .5rem; }
@media (min-width: 600px) { .bp-gen-title { font-size: 1.5rem; } }
.bp-gen-title span { color: var(--bp-nav); }
.bp-gen-desc  { font-size: .82rem; color: var(--bp-text-2); line-height: 1.7; margin-bottom: 1rem; }
.bp-gen-btns  { display: flex; gap: .65rem; flex-wrap: wrap; }
.bp-gen-btn-p {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--bp-nav); color: #fff;
    padding: .6rem 1.4rem; border-radius: var(--r-full);
    font-size: .82rem; font-weight: 700; border: none;
    cursor: pointer; font-family: 'Poppins', sans-serif;
    transition: background .15s;
}
.bp-gen-btn-p:hover { background: #005f91; }
.bp-gen-btn-p svg { width: 14px; height: 14px; }
.bp-gen-btn-s {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; color: var(--bp-nav);
    padding: .6rem 1.4rem; border-radius: var(--r-full);
    font-size: .82rem; font-weight: 700;
    border: 2px solid var(--bp-nav); cursor: pointer;
    font-family: 'Poppins', sans-serif; transition: all .15s;
}
.bp-gen-btn-s:hover { background: var(--bp-accent-lt); }

/* Tools grid */
.bp-tools-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
}
.bp-tool-card {
    background: var(--bp-surface); border: 1px solid var(--bp-border);
    border-radius: var(--r-lg); padding: .9rem 1rem;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: flex-start; gap: .7rem;
    box-shadow: var(--shadow-sm);
}
.bp-tool-card:hover { border-color: var(--bp-nav); box-shadow: var(--shadow-md); }
.bp-tool-icon {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.bp-tool-icon svg { width: 18px; height: 18px; }
.bp-tool-name { font-size: .78rem; font-weight: 700; color: var(--bp-text-1); margin-bottom: .15rem; }
.bp-tool-sub  { font-size: .65rem; color: var(--bp-text-3); }

/* --------------------------------------------------------------------------
   4K. FOOTER
   -------------------------------------------------------------------------- */
.bp-footer { background: #1A2535; padding: 2.5rem 1.5rem 1.5rem; }
.bp-footer-inner { max-width: 1200px; margin: 0 auto; }
/* Footer grids */
.bp-footer-grid {
    display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem;
}
@media (min-width: 576px) { .bp-footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.bp-footer-logo {
    font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .5rem;
}
.bp-footer-logo span { opacity: .65; font-weight: 400; }
.bp-footer-desc { font-size: .72rem; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: .85rem; }
.bp-footer-social { display: flex; gap: .45rem; }
.bp-soc-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.6); cursor: pointer; transition: all .15s;
}
.bp-soc-btn:hover { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08); }
.bp-soc-btn svg { width: 14px; height: 14px; }
.bp-footer-col-title {
    font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.9);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem;
}
.bp-footer-link {
    display: flex; align-items: center; gap: .35rem;
    font-size: .72rem; color: rgba(255,255,255,.5);
    margin-bottom: .4rem; cursor: pointer; transition: color .12s;
    text-decoration: none;
}
.bp-footer-link:hover { color: rgba(255,255,255,.88); }
.bp-footer-link svg { width: 10px; height: 10px; flex-shrink: 0; opacity: .5; }
.bp-footer-link.accent { color: #7BB5E8; }
.bp-footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.08);
    flex-wrap: wrap; gap: .5rem;
}
.bp-footer-copy { font-size: .68rem; color: rgba(255,255,255,.35); }
.bp-footer-copy-links { display: flex; gap: 1rem; }
.bp-footer-copy-link {
    font-size: .68rem; color: rgba(255,255,255,.35);
    cursor: pointer; transition: color .12s; text-decoration: none;
}
.bp-footer-copy-link:hover { color: rgba(255,255,255,.65); }

/* --------------------------------------------------------------------------
   4L. AD SLOTS
   -------------------------------------------------------------------------- */

/* Shared Ad Placeholder (_AdPlaceholder partial) */
.bp-ad-placeholder{background:var(--bp-bg);border:1.5px dashed var(--bp-border-md);border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:1rem auto;max-width:100%;gap:.25rem;}
.bp-ad-placeholder__label{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--bp-border-md);}
.bp-ad-placeholder__inner{width:100%;display:flex;align-items:center;justify-content:center;}
.bp-ad-placeholder--leaderboard{width:728px;height:90px;}
.bp-ad-placeholder--rectangle{width:300px;height:250px;}
.bp-ad-placeholder--halfpage{width:300px;height:600px;}
@media(max-width:767px){.bp-ad-placeholder--leaderboard{width:100%;height:auto;min-height:60px;padding:.5rem;}}

.bp-ad-lbl {
    font-size: .62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--bp-border-md);
}
.bp-ad-inline {
    min-height: 100px; margin: 1rem 0;
    background: var(--bp-bg); border: 1px dashed var(--bp-border);
    border-radius: var(--r-md); display: flex; align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   5. EXISTING COMPONENT COMPAT — Ratings, Share, Breadcrumb
   -------------------------------------------------------------------------- */
.bp-stars { display: flex; gap: 4px; margin-bottom: .35rem; }
.bp-star {
    background: none; border: none; padding: 2px; cursor: pointer;
    color: #D0CBC3; transition: color .15s; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.bp-star svg { width: 22px; height: 22px; }
.bp-star.lit { color: #E8920C; }
.bp-star:hover { color: #F5A623; }
.bp-rating-summary { font-size: .72rem; color: var(--bp-text-3); }
.bp-rating-avg { font-weight: 700; color: var(--bp-text-2); }

.bp-bc{background:var(--bp-surface);border-bottom:1px solid var(--bp-border);padding:.5rem 1.25rem;font-size:.72rem;color:var(--bp-text-3);margin-bottom:0;}
.bp-bc a{color:var(--bp-text-3);text-decoration:none;}
.bp-bc strong{color:var(--bp-text-1);}
.bp-bc+.bachpan-main{padding-top:0;}
.bp-bc+.bachpan-main>.bp-page-layout>.bp-main{padding-top:.5rem;}

/* --------------------------------------------------------------------------
   6. EXISTING NAV COMPAT (bachpan-navbar, bachpan-mobile etc.)
   Kept for backward compatibility until views are fully migrated.
   -------------------------------------------------------------------------- */
/* Bottom nav compat */
.bachpan-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 56px; background: var(--bp-surface);
    border-top: 1.5px solid var(--bp-border);
    z-index: 1030; box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    display: flex; justify-content: space-around; align-items: stretch;
}
@media (min-width: 992px) { .bachpan-bottom-nav { display: none; } }
.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; color: var(--bp-text-2);
    font-size: 0.65rem; font-weight: 600;
    text-decoration: none; transition: color .15s; padding: 4px 0;
}
.bottom-nav-item i { font-size: 22px; line-height: 1; }
.bottom-nav-item:hover, .bottom-nav-item.active { color: var(--bp-nav); text-decoration: none; }
.bottom-nav-item__icon { position: relative; display: inline-flex; line-height: 1; }
.bottom-nav-badge {
    position: absolute; top: -6px; right: -10px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--bp-register); color: #fff;
    font-size: .6rem; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--bp-surface);
}
@media (max-width: 991px) { body { padding-bottom: 56px; } }

.bachpan-main { min-height: calc(100vh - 60px); padding-bottom: 70px; }
@media (min-width: 960px) { .bachpan-main { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   7. SEARCH COMPAT / REFINER COMPAT
   -------------------------------------------------------------------------- */
/* Active filters bar */
.active-filters-bar {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 1rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bp-border);
}
/* Refiner option compat */
.show-more-btn {
    font-size: 0.8rem; color: var(--bp-nav); font-weight: 600;
    background: none; border: none; cursor: pointer; padding: 4px 0;
}
.show-more-btn:hover { text-decoration: underline; }

/* Letter grid compat */
.letter-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 4px;
    border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 700;
    text-decoration: none; border: 1.5px solid var(--bp-border);
    color: var(--bp-text-1); background: var(--bp-surface);
    transition: all var(--bp-ease); cursor: pointer;
}
.letter-chip:hover { border-color: var(--bp-nav); color: var(--bp-nav); text-decoration: none; }

/* --------------------------------------------------------------------------
   8. AUTOCOMPLETE COMPAT
   -------------------------------------------------------------------------- */
.ac-wrapper { position: relative; }
/* Autocomplete dropdown */
.ac-dropdown {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0;
    z-index: 500; background: var(--bp-surface);
    border: 1px solid var(--bp-border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); max-height: 400px;
    overflow: hidden; text-align: left;
}
.ac-dropdown[hidden] { display: none; }
.ac-dropdown::-webkit-scrollbar { width: 4px; }
.ac-dropdown::-webkit-scrollbar-track { background: transparent; }
.ac-dropdown::-webkit-scrollbar-thumb { background: var(--bp-border); border-radius: 2px; }

/* --------------------------------------------------------------------------
   9. MISC COMPAT (search page, astrology cards, pinned, etc.)
   -------------------------------------------------------------------------- */
.bp-name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bp-empty-state { text-align: center; padding: 60px 20px; }

/* Zero results */
.zero-results { padding: 2rem 0; }
.zero-results__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--bp-text-1); }
.zero-results__hint { font-size: 0.9375rem; color: var(--bp-text-3); }
.zero-results__hint a { color: var(--bp-nav); text-decoration: underline; }

/* Refiner accordion compat */
.bp-refiner-group { margin-bottom: 12px; background: var(--bp-surface); border: 1.5px solid var(--bp-border); border-radius: var(--r-xl); overflow: hidden; }
.bp-refiner-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 12px 16px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bp-text-3); cursor: pointer; }

/* --------------------------------------------------------------------------
   10. BADGE COMPAT
   -------------------------------------------------------------------------- */
.bp-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .7rem; font-weight: 700; padding: 2px 8px;
    border-radius: var(--r-full); white-space: nowrap;
}
.bp-badge-primary   { background: var(--bp-accent-lt); color: var(--bp-nav); }

/* --------------------------------------------------------------------------
   11. BUTTON SYSTEM (btn-bp)
   -------------------------------------------------------------------------- */
.btn-bp {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; font-family: 'Poppins', sans-serif;
    font-size: .85rem; font-weight: 600; line-height: 1;
    padding: 10px 20px; border-radius: var(--r-md);
    border: 2px solid transparent; cursor: pointer;
    text-decoration: none; transition: all var(--bp-ease);
    white-space: nowrap; min-height: 44px;
}
.btn-bp:focus-visible { outline: 2px solid var(--bp-nav); outline-offset: 2px; }
.btn-bp-primary { background: var(--bp-nav); border-color: var(--bp-nav); color: #fff; }
.btn-bp-primary:hover { background: var(--bp-nav-dark); border-color: var(--bp-nav-dark); color: #fff; text-decoration: none; }
.btn-bp-secondary { background: var(--bp-accent); border-color: var(--bp-accent); color: #fff; }
.btn-bp-outline { background: transparent; border-color: var(--bp-border); color: var(--bp-text-1); }
.btn-bp-outline:hover { border-color: var(--bp-nav); color: var(--bp-nav); text-decoration: none; }
.btn-bp-outline.active { background: var(--bp-nav); border-color: var(--bp-nav); color: #fff; }
.btn-bp-ghost { background: transparent; border-color: transparent; color: var(--bp-nav); padding: 6px 8px; }
.btn-bp-ghost:hover { background: rgba(0,119,182,.06); text-decoration: none; }
.btn-bp-sm { font-size: .78rem; padding: 6px 14px; min-height: 36px; }
.btn-bp-lg { font-size: 1rem; padding: 14px 28px; min-height: 52px; border-radius: var(--r-lg); }
.btn-bp-fav {
    background: var(--bp-surface); border: 1.5px solid var(--bp-border);
    color: var(--bp-text-3); border-radius: 50%;
    padding: 8px; min-height: 40px; min-width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-bp-fav:hover, .btn-bp-fav.active { background: #fff0f0; border-color: #e05252; color: #e05252; }
.btn-bp-icon { padding: 8px; border-radius: 50%; background: transparent; border: none; color: var(--bp-text-1); cursor: pointer; }
.btn-bp-icon:hover { background: rgba(0,0,0,.06); color: var(--bp-nav); }

/* --------------------------------------------------------------------------
   12. HOMEPAGE COMPAT CLASSES
   -------------------------------------------------------------------------- */

/* Body text helper */
.bp-body { font-size: .9rem; line-height: 1.65; color: var(--bp-text-1); }

/* Skip nav */
.bp-skip-nav {
    position: absolute; top: -100%; left: 16px;
    background: var(--bp-nav); color: #fff;
    padding: 8px 16px; border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: .85rem; font-weight: 600; text-decoration: none;
    z-index: 9999;
}
.bp-skip-nav:focus { top: 0; }

/* --------------------------------------------------------------------------
   14. DEITY HUB PAGE
   -------------------------------------------------------------------------- */
/* Hub-page hero card — three-layer background matching the launch popup /
   preferences modal / main nav. The --hero-color custom property is set
   inline per-page (see _HubHero.cshtml); every hub keeps its own brand
   colour, only the dot-pattern + soft-corner-circle overlays are shared.

   Layers (bottom → top):
     1. linear-gradient from --hero-color → 80% darker tone — the existing
        2-stop look, unchanged in colour.
     2. 18×18 white-dot tile at .07 opacity — same as popup/modal/nav.
     3. ~78px soft circle at .08 white anchored top-right — same as the
        decorative ::after the popup uses. Inlined into background so we
        don't need a pseudo (which would have to navigate the existing
        overflow:hidden + child stacking). */
.bp-page-hero {
    border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.25rem;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.15); color: #fff;
    background:
        radial-gradient(circle at calc(100% - 60px) -30px,
            rgba(255, 255, 255, .10) 78px,
            transparent 80px),
        radial-gradient(circle,
            rgba(255, 255, 255, .07) 1px,
            transparent 1px) 0 0 / 18px 18px,
        linear-gradient(135deg,
            var(--hero-color, var(--bp-nav)) 0%,
            color-mix(in srgb, var(--hero-color, var(--bp-nav)) 80%, black) 100%);
}
.bp-hero-top { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.bp-hero-icon {
    width: 52px; height: 52px; border-radius: var(--r-md);
    background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; flex-shrink: 0; color: #fff;
}
.bp-hero-icon img { border-radius: var(--r-sm); }
.bp-hero-text { flex: 1; }
.bp-page-hero .bp-hero-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: .3rem; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
@media(min-width:768px) { .bp-page-hero .bp-hero-title { font-size: 1.5rem; } }
.bp-hero-desc { font-size: .82rem; color: rgba(255,255,255,.9); line-height: 1.6; max-width: 520px; }
.bp-hero-stats { display: flex; gap: 2rem; margin-top: 1rem; flex-wrap: wrap; }
.bp-hero-stat-num { font-size: 1.35rem; font-weight: 700; color: #FFF3CD; display: block; }
.bp-hero-stat-lbl { font-size: .68rem; color: rgba(255,255,255,.75); }

/* Intro content block */
.bp-info-intro {
    background: var(--bp-surface); border: 1px solid var(--bp-border);
    border-left: 3px solid var(--bp-nav); border-radius: var(--r-md);
    padding: .9rem 1.1rem; margin-bottom: 1.25rem;
    font-size: .82rem; color: var(--bp-text-2); line-height: 1.7;
}
.bp-info-intro strong { color: var(--bp-text-1); }

/* Per-religion addenda — emitted by _HubIntro.cshtml when the category
   carries a byReligion map. Visually de-emphasised relative to .bp-info-intro
   so they read as "additional context", except when the visitor's preferred
   religion matches (.bp-info-religion--preferred) — then they pop. */
.bp-info-religion {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-left: 3px solid var(--bp-border);
    border-radius: var(--r-md);
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    font-size: .78rem;
    color: var(--bp-text-2);
    line-height: 1.65;
    opacity: .85;
}
.bp-info-religion strong { color: var(--bp-text-1); }
.bp-info-religion__label {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bp-text-3, #9A948E);
    margin-bottom: .35rem;
}
.bp-info-religion--preferred {
    border-left-width: 4px !important;
    opacity: 1;
    background: linear-gradient(180deg, rgba(0, 119, 182, .035), transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.bp-info-religion--preferred .bp-info-religion__label {
    color: var(--bp-nav);
}

/* "See more / See less" toggle for hub-page intro on mobile (issue #15).
   The clamp + button visibility are mobile-only — desktop always shows
   the full text and hides the button. JS in BP.InfoIntro.init() flips
   the --expanded class on click. */
.bp-info-toggle {
    display: none;
    background: none; border: none;
    color: var(--bp-nav); font-weight: 600; font-size: .9rem;
    font-family: 'Poppins', sans-serif; cursor: pointer;
    padding: .25rem 0; margin: -.6rem 0 1rem;
}
.bp-info-toggle:hover { color: #005f91; }
@media (max-width: 767.98px) {
    .bp-info-intro--collapsible {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .bp-info-intro--collapsible.bp-info-intro--expanded {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .bp-info-toggle { display: inline-block; }
}

/* Footer content block */
.bp-info-content {
    margin-top: 1.75rem; padding-top: 1.25rem;
    border-top: 1px solid var(--bp-border);
}
.bp-info-content-title {
    font-size: .95rem; font-weight: 700; color: var(--bp-text-1);
    display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.bp-info-content p { font-size: .82rem; color: var(--bp-text-2); line-height: 1.7; margin-bottom: .75rem; }
.bp-info-content details { margin-top: .5rem; }
.bp-info-content summary { font-size: .82rem; font-weight: 600; color: var(--bp-nav); cursor: pointer; }

/* Deity grid */
.bp-boy-btn, .bp-girl-btn {
    flex: 1; padding: .3rem 0; border-radius: var(--r-full);
    font-size: .65rem; font-weight: 600; text-align: center;
    border: 1px solid; cursor: pointer; text-decoration: none;
    transition: all .15s;
}
.bp-boy-btn { background: var(--bp-boy-lt); color: var(--bp-boy-text); border-color: var(--bp-boy-border); }
.bp-boy-btn:hover { background: var(--bp-boy); color: #fff; }
.bp-girl-btn { background: var(--bp-girl-lt); color: var(--bp-girl-text); border-color: var(--bp-girl-border); }
.bp-girl-btn:hover { background: var(--bp-girl); color: #fff; }

/* --------------------------------------------------------------------------
   15. SHARED HUB CARD (used by all hub grids)
   -------------------------------------------------------------------------- */
.bp-hub-card-grid { display: grid; gap: .85rem; margin-bottom: 1.75rem; grid-template-columns: repeat(2, 1fr); }
@media(min-width:576px) { .bp-hub-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:768px) { .bp-hub-card-grid { grid-template-columns: repeat(4, 1fr); } }
@media(min-width:1100px) { .bp-hub-card-grid { grid-template-columns: repeat(5, 1fr); } }

.bp-hub-card {
    background: var(--bp-surface); border-radius: var(--r-lg);
    border: 1px solid var(--bp-border); border-top: 3px solid var(--bp-nav);
    overflow: hidden; position: relative;
    transition: all .2s; display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.bp-hub-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.bp-hub-card__link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; padding: .75rem .75rem .25rem; flex: 1; cursor: pointer; }
.bp-hub-card__link:hover { text-decoration: none; color: inherit; }
.bp-hub-card__count {
    position: absolute; top: .5rem; right: .5rem;
    font-size: .62rem; font-weight: 700; color: var(--bp-text-3);
    background: var(--bp-bg); border: 1px solid var(--bp-border);
    padding: .1rem .4rem; border-radius: var(--r-full);
}
.bp-hub-card__icon {
    width: 48px; height: 48px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: .5rem; align-self: center;
}
.bp-hub-card__icon img { border-radius: var(--r-sm); width: 28px; height: 28px; }
.bp-hub-card__body { flex: 1; text-align: center; }
.bp-hub-card__title { font-size: .85rem; font-weight: 700; color: var(--bp-nav); margin-bottom: .15rem; }
.bp-hub-card__subtitle { font-size: .75rem; color: var(--bp-text-2); font-family: 'Noto Sans', sans-serif; }
.bp-hub-card__desc { font-size: .68rem; color: var(--bp-text-3); line-height: 1.4; margin-top: .25rem; }
.bp-hub-card__meta { font-size: .65rem; color: var(--bp-text-3); margin-top: .2rem; }
.bp-hub-card__footer { display: flex; gap: .4rem; padding: .5rem .75rem .75rem; justify-content: center; border-top: 1px solid var(--bp-border); }

/* --------------------------------------------------------------------------
   16. SEARCH PAGE
   -------------------------------------------------------------------------- */
.search-hero {
    background: linear-gradient(160deg, #E0F2FF 0%, #ECE8FF 50%, #F0EEFF 100%);
    padding: 1.75rem 1.25rem 1.25rem;
    border-top: 3px solid var(--bp-nav);
    border-bottom: 1px solid var(--bp-border);
}
.search-hero-inner { max-width: 860px; margin: 0 auto; }
.search-box-wrap { position: relative; margin-bottom: .85rem; }
.search-box {
    display: flex; align-items: center;
    background: #fff; border: 2.5px solid var(--bp-nav);
    border-radius: var(--r-full); overflow: hidden;
    box-shadow: 0 6px 28px rgba(0,119,182,.25), 0 1px 4px rgba(0,0,0,.08);
}
.search-icon { padding: 0 .85rem 0 1.1rem; display: flex; align-items: center; flex-shrink: 0; }
.search-icon svg { width: 18px; height: 18px; color: var(--bp-text-3); }
.search-input {
    flex: 1; height: 52px; border: none; outline: none;
    font-size: .95rem; font-family: 'Poppins', sans-serif;
    color: var(--bp-text-1); background: transparent; min-width: 0;
}
.search-input::placeholder { color: var(--bp-text-3); }
.search-clear {
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: var(--bp-border); display: flex; align-items: center;
    justify-content: center; cursor: pointer; margin-right: .35rem; flex-shrink: 0;
}
.search-clear svg { width: 11px; height: 11px; color: var(--bp-text-2); }
.search-divider { width: 1px; height: 26px; background: var(--bp-border-md); flex-shrink: 0; }
.search-btn {
    height: 52px; padding: 0 1.5rem; background: var(--bp-register); color: #fff;
    font-size: .84rem; font-weight: 700; border: none; cursor: pointer;
    font-family: 'Poppins', sans-serif; display: flex; align-items: center;
    gap: .35rem; flex-shrink: 0; transition: background .15s;
}
.search-btn:hover { background: #c97a08; }
.search-btn svg { width: 14px; height: 14px; }

/* Quick filters */
.quick-filters { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.qf-label { font-size: .68rem; color: var(--bp-text-3); font-weight: 500; white-space: nowrap; margin-right: .1rem; }
.qf-chip {
    padding: .2rem .65rem; border-radius: var(--r-full); font-size: .68rem;
    font-weight: 600; cursor: pointer; border: 1.5px solid var(--bp-border-md);
    background: var(--bp-surface); color: var(--bp-text-2);
    transition: all .15s; white-space: nowrap; line-height: 1;
    text-decoration: none; display: inline-flex; align-items: center;
}
.qf-chip:hover { border-color: var(--bp-nav); color: var(--bp-nav); text-decoration: none; }
.qf-chip.q-boy { border-color: var(--bp-boy); background: var(--bp-boy-lt); color: var(--bp-boy-text); }
.qf-chip.q-girl { border-color: var(--bp-girl); background: var(--bp-girl-lt); color: var(--bp-girl-text); }
.qf-chip.q-hindu { border-color: var(--hindu); background: var(--hindu-lt); color: var(--hindu-text); }
.qf-chip.qf-chip--active { border-color: var(--bp-nav); background: var(--bp-accent-lt); color: var(--bp-nav); }
.qf-sep { width: 1px; height: 14px; background: var(--bp-border-md); flex-shrink: 0; }

/* Intent banner */
.intent-banner {
    background: var(--bp-accent-lt); border: 1px solid var(--bp-accent-md);
    border-radius: var(--r-lg); padding: .65rem 1rem; margin-bottom: .85rem;
    display: flex; align-items: center; gap: .65rem;
    font-size: .75rem; color: var(--bp-text-2); line-height: 1.4;
}
.intent-banner strong { color: var(--bp-text-1); }

/* Best match card */
.bmc {
    background: var(--bp-surface); border: 2px solid var(--bp-boy);
    border-radius: var(--r-xl); overflow: hidden;
    box-shadow: var(--shadow-md); margin-bottom: 1.25rem;
}
.bmc--girl { border-color: var(--bp-girl); }
.bmc-inner {
    background: linear-gradient(135deg, var(--bp-boy-lt) 0%, #F0EEFF 100%);
    padding: 1.25rem;
}
.bmc--girl .bmc-inner { background: linear-gradient(135deg, var(--bp-girl-lt) 0%, #FFE8F0 100%); }
.bmc-label {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--bp-boy);
    background: rgba(255,255,255,.7); border: 1px solid var(--bp-boy-border);
    padding: .15rem .6rem; border-radius: var(--r-full); margin-bottom: .75rem;
}
.bmc-label svg { width: 10px; height: 10px; }
.bmc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.bmc-name { font-size: 2.25rem; font-weight: 800; color: var(--bp-boy); line-height: 1; margin-bottom: .25rem; }
.bmc--girl .bmc-name { color: var(--bp-girl); }
.bmc-deva { font-family: 'Noto Sans', sans-serif; font-size: .95rem; color: var(--bp-text-2); display: block; margin-bottom: .6rem; }
.bmc-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.bb { display: inline-flex; align-items: center; padding: .18rem .55rem; border-radius: var(--r-full); font-size: .65rem; font-weight: 600; }
.bb-boy { background: var(--bp-boy-lt); color: var(--bp-boy-text); border: 1px solid var(--bp-boy-border); }
.bb-girl { background: var(--bp-girl-lt); color: var(--bp-girl-text); border: 1px solid var(--bp-girl-border); }
.bb-origin { background: rgba(255,255,255,.8); color: var(--bp-text-2); border: 1px solid var(--bp-border-md); }
.bb-rashi { background: rgba(255,255,255,.8); color: var(--bp-rashi); border: 1px solid #C9C4ED; }
.bb-num { background: rgba(255,255,255,.8); color: var(--bp-nav); border: 1px solid var(--bp-accent-md); }
.bmc-fav {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--bp-boy-border); background: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem; color: var(--bp-text-3);
    transition: all .15s; flex-shrink: 0;
}
.bmc-fav:hover { border-color: var(--bp-girl); color: var(--bp-girl); }
.bmc-actions {
    display: flex; align-items: center; gap: .55rem;
    padding: .85rem 1.25rem; border-top: 1px solid var(--bp-boy-border);
}
.bmc-cta {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 36px; padding: 0 1.1rem; background: var(--bp-nav); color: #fff;
    border: none; border-radius: var(--r-full); font-size: .76rem;
    font-weight: 700; cursor: pointer; font-family: 'Poppins', sans-serif;
    text-decoration: none; transition: background .15s;
}
.bmc-cta:hover { background: var(--bp-nav-dark); color: #fff; text-decoration: none; }
.bmc-cta svg { width: 12px; height: 12px; }
.bmc-tab {
    height: 34px; padding: 0 .8rem; background: transparent;
    border: 1.5px solid var(--bp-border-md); border-radius: var(--r-full);
    font-size: .73rem; font-weight: 600; cursor: pointer;
    font-family: 'Poppins', sans-serif; color: var(--bp-text-2);
    transition: all .15s; text-decoration: none;
}
.bmc-tab:hover { border-color: var(--bp-nav); color: var(--bp-nav); background: var(--bp-accent-lt); text-decoration: none; }

/* Related names label */
.related-label {
    font-size: .8rem; font-weight: 700; color: var(--bp-text-1);
    margin-bottom: .65rem; display: flex; align-items: center; gap: .4rem;
}
.related-count { font-size: .7rem; color: var(--bp-text-3); font-weight: 400; }

/* --------------------------------------------------------------------------
   17. NAV SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.search-overlay { position: fixed; inset: 0; z-index: 9000; display: none; flex-direction: column; align-items: center; }
.search-overlay.open { display: flex; }
.so-backdrop { position: absolute; inset: 0; background: rgba(10,15,25,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.so-panel {
    position: relative; z-index: 1; width: 100%; max-width: 680px;
    margin-top: 80px; padding: 1.25rem;
    background: rgba(255,255,255,.95); border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: soSlideDown .18s ease-out;
}
@keyframes soSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.so-input-wrap {
    display: flex; align-items: center; background: #fff;
    border: 2.5px solid var(--bp-nav); border-radius: var(--r-full);
    box-shadow: 0 6px 28px rgba(0,119,182,.25), 0 1px 6px rgba(0,0,0,.1);
    overflow: hidden; margin-bottom: .65rem;
}
.so-search-icon { padding: 0 .75rem 0 1.1rem; display: flex; align-items: center; flex-shrink: 0; }
.so-search-icon svg { width: 18px; height: 18px; color: var(--bp-text-3); }
.so-input {
    flex: 1; height: 52px; border: none; outline: none;
    font-size: 1rem; font-family: 'Poppins', sans-serif;
    color: var(--bp-text-1); background: transparent;
}
.so-input::placeholder { color: var(--bp-text-3); }
.so-clear {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--bp-border); display: flex; align-items: center;
    justify-content: center; cursor: pointer; margin: 0 .5rem; flex-shrink: 0;
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.so-clear.visible { opacity: 1; pointer-events: all; }
.so-clear:hover { background: var(--bp-border-md); }
.so-clear svg { width: 11px; height: 11px; color: var(--bp-text-2); }
.so-kbd-hint { display: flex; align-items: center; gap: .5rem; padding: .35rem .25rem .5rem; font-size: .68rem; color: var(--bp-text-3); }
.so-kbd { background: var(--bp-bg); border: 1px solid var(--bp-border-md); border-radius: 4px; padding: .1rem .4rem; font-size: .6rem; color: var(--bp-text-2); font-family: monospace; }
.so-popular-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .25rem .2rem; flex-wrap: wrap; }
.spb-label { font-size: .68rem; color: var(--bp-text-3); font-weight: 600; white-space: nowrap; }
.spb-chip {
    padding: .22rem .7rem; border-radius: var(--r-full);
    border: 1px solid var(--bp-border-md); background: var(--bp-surface);
    font-size: .7rem; font-weight: 500; color: var(--bp-text-2);
    cursor: pointer; font-family: 'Poppins', sans-serif; transition: all .15s;
    white-space: nowrap; text-decoration: none;
}
.spb-chip:hover { background: var(--bp-accent-lt); color: var(--bp-nav); border-color: var(--bp-nav); text-decoration: none; }

/* Override ac-dropdown positioning inside overlay */
.so-panel .ac-wrapper { position: relative; }
.so-panel .ac-dropdown {
    position: relative; top: 0; left: 0; right: 0;
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    max-height: 50vh; overflow-y: auto; z-index: 10;
    background: var(--bp-surface);
}
.so-panel .ac-dropdown[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. ALPHABET BROWSER (inside bp-main content area)
   -------------------------------------------------------------------------- */
/* Browse header — inline inside content area */

/* Alphabet controls wrapper — replaces full-width alpha-section */
.bp-alpha-controls { margin-bottom: 1rem; }

/* Religion chips */
.religion-strip { display: flex; align-items: center; gap: .4rem; margin-bottom: .85rem; flex-wrap: wrap; }
.rs-label { font-size: .68rem; color: var(--bp-text-3); font-weight: 500; margin-right: .1rem; }
.rs-chip {
    padding: .18rem .65rem; border-radius: var(--r-full); font-size: .7rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid var(--bp-border-md); background: transparent;
    color: var(--bp-text-2); transition: all .15s; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center;
}
.rs-chip:hover { border-color: var(--bp-nav); color: var(--bp-nav); text-decoration: none; }
.rs-chip.active-hindu { background: var(--hindu-lt); border-color: var(--hindu); color: var(--hindu-text); }
.rs-chip.active-muslim { background: #E8F5EC; border-color: #1A7A4A; color: #0E4A2D; }
.rs-chip.active-christian { background: #EAF0FA; border-color: #1A4A8A; color: #0E2D58; }
.rs-chip.active-sikh { background: #FDF5E0; border-color: #8B6914; color: #5A4208; }
.rs-sep { width: 1px; height: 14px; background: var(--bp-border-md); }

/* Gender toggle */
.gender-toggle {
    display: flex; gap: 0; border-radius: var(--r-full); overflow: hidden;
    border: 1.5px solid var(--bp-border-md); background: var(--bp-bg); margin-left: auto;
}
.gt-btn {
    padding: .3rem .85rem; font-size: .72rem; font-weight: 600; cursor: pointer;
    border: none; background: transparent; font-family: 'Poppins', sans-serif;
    color: var(--bp-text-2); transition: all .15s; display: flex; align-items: center;
    gap: .3rem; text-decoration: none;
}
.gt-btn:hover { text-decoration: none; }
.gt-btn.active-boy { background: var(--bp-boy); color: #fff; border-radius: var(--r-full); }
.gt-btn.active-girl { background: var(--bp-girl); color: #fff; border-radius: var(--r-full); }
.gt-btn.active-all { background: var(--bp-nav); color: #fff; border-radius: var(--r-full); }

/* Status message — inline variant (inside content area, no full-width border) */
.alpha-msg { font-size: .78rem; color: var(--bp-text-3); }
.alpha-msg--inline { padding: .65rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--bp-border); }
.alpha-msg strong { color: var(--bp-text-1); }

/* --------------------------------------------------------------------------
   18. AUTOCOMPLETE ENTITIES
   -------------------------------------------------------------------------- */

/* Group header */
.dd-group-header{display:flex;align-items:center;gap:.45rem;padding:.5rem 1rem .28rem;background:var(--bp-bg);border-top:1px solid var(--bp-border);border-bottom:1px solid var(--bp-border);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--bp-text-3);}
.dd-group-header:first-child{border-top:none;}
.ddgh-icon{width:14px;height:14px;display:flex;align-items:center;justify-content:center;}
.ddgh-icon svg{width:12px;height:12px;}

/* Row base */
.dd-row{display:flex;align-items:center;gap:.75rem;padding:.62rem 1rem;border-bottom:1px solid var(--bp-border);cursor:pointer;transition:background .1s;position:relative;}
.dd-row:last-child{border-bottom:none;}
.dd-row:hover,.dd-row--active{background:#EDF6FF;}
.dd-row-info{flex:1;min-width:0;}
.dd-row-label{font-size:.84rem;font-weight:700;color:var(--bp-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dd-row-label em{color:var(--bp-nav);font-style:normal;}
.dd-row-meta{font-size:.7rem;color:var(--bp-text-3);margin-top:.08rem;}
.dd-arrow{color:var(--bp-border-md);font-size:.7rem;margin-left:.25rem;flex-shrink:0;transition:color .12s;}
.dd-row:hover .dd-arrow{color:var(--bp-nav);}

/* Name avatars */
.dn-avatar{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem;}
.dn-av-girl{background:#FBE9EF;}
.dn-av-boy{background:#EAF3FB;}

/* Entity icons */
.ei{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ei svg{width:17px;height:17px;}
.ei span{font-size:1.05rem;line-height:1;}
.ei-rashi{background:var(--ec-rashi-lt);} .ei-rashi svg,.ei-rashi span{color:var(--ec-rashi);}
.ei-nak{background:var(--ec-nak-lt);} .ei-nak svg,.ei-nak span{color:var(--ec-nak);}
.ei-religion{background:var(--ec-religion-lt);} .ei-religion svg,.ei-religion span{color:var(--ec-religion);}
.ei-deity{background:var(--ec-deity-lt);} .ei-deity svg,.ei-deity span{color:var(--ec-deity);}
.ei-lang{background:var(--ec-lang-lt);} .ei-lang svg,.ei-lang span{color:var(--ec-lang);}
.ei-myth{background:var(--ec-myth-lt);} .ei-myth svg,.ei-myth span{color:var(--ec-myth);}
.ei-theme{background:var(--ec-theme-lt);} .ei-theme svg,.ei-theme span{color:var(--ec-theme);}
.ei-tag{background:var(--ec-tag-lt);} .ei-tag svg,.ei-tag span{color:var(--ec-tag);}
.ei-meaning{background:var(--ec-meaning-lt);} .ei-meaning svg,.ei-meaning span{color:var(--ec-meaning);}
.ei-fallback{background:var(--bp-bg);} .ei-fallback svg{color:var(--bp-text-3);}

/* Numerology circle */
.num-circle{width:36px;height:36px;border-radius:var(--r-md);background:var(--ec-num-lt);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:var(--ec-num);flex-shrink:0;font-family:'Poppins',sans-serif;}

/* Fallback row */
.dd-fallback{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;border-top:1px solid var(--bp-border);cursor:pointer;transition:background .1s;background:var(--bp-bg);}
.dd-fallback:hover,.dd-fallback--active{background:#EDF6FF;}
.df-icon{width:36px;height:36px;border-radius:var(--r-md);background:var(--bp-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.df-icon svg{width:17px;height:17px;color:var(--bp-text-3);}
.df-text{font-size:.84rem;font-weight:600;color:var(--bp-text-2);}
.df-text em{color:var(--bp-nav);font-style:normal;}
.df-arrow{margin-left:auto;color:var(--bp-border-md);font-size:.7rem;}

/* Language browse controls — religion strip + gender + script toggle on same row */
.bp-lang-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem .75rem;margin-bottom:16px;}
.bp-lang-controls__left{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;}
.bp-lang-controls .bp-gender-tabs{margin-bottom:0;}
.bp-lang-controls .religion-strip{margin-bottom:0;padding:0;border:0;background:none;}
.bp-lang-controls .bp-lang-script-toggle{margin-left:auto;}

/* Gender tabs — underline-indicator style (matches mock
   bachpan-header-optimization.html). The tab row sits on a 1.5px baseline;
   each button overlaps the baseline with a 2.5px coloured border-bottom
   when active. No fill — keeps weight off the tab strip. Boy = nav blue,
   Girl = #E91E8C, Unisex = Rashi purple. */
.bp-gender-tabs{display:flex;align-items:flex-end;gap:0;border:0;border-bottom:1.5px solid var(--bp-border,#e9ecef);border-radius:0;overflow:visible;background:none;margin-bottom:.65rem;}
.bp-gender-tabs__btn{display:inline-flex;align-items:center;gap:.3rem;padding:.48rem 1.1rem;font-size:.73rem;font-weight:600;border:0;border-bottom:2.5px solid transparent;background:transparent;color:var(--bp-text-2,#495057);text-decoration:none;cursor:pointer;margin-bottom:-1.5px;white-space:nowrap;transition:color .14s,border-color .14s;}
.bp-gender-tabs__btn svg{width:14px;height:14px;flex-shrink:0;}
.bp-gender-tabs__btn:hover{color:var(--bp-text-1,#212121);background:transparent;}
.bp-gender-tabs__btn--boy-active{color:#0077B6;border-bottom-color:#0077B6;background:transparent;}
.bp-gender-tabs__btn--boy-active:hover{color:#0077B6;background:transparent;}
.bp-gender-tabs__btn--girl-active{color:#E91E8C;border-bottom-color:#E91E8C;background:transparent;}
.bp-gender-tabs__btn--girl-active:hover{color:#E91E8C;background:transparent;}
.bp-gender-tabs__btn--uni-active{color:#534AB7;border-bottom-color:#534AB7;background:transparent;}
.bp-gender-tabs__btn--uni-active:hover{color:#534AB7;background:transparent;}
/* Inert Unisex tab (no public route yet) — same visual weight as a normal
   tab but cursor:default and reduced colour so it doesn't read as a dead
   link. Click is suppressed because the element is a <span>. */
.bp-gender-tabs__btn--inert{cursor:default;color:var(--bp-text-3,#9E9E9E);opacity:.85;}
.bp-gender-tabs__btn--inert:hover{color:var(--bp-text-3,#9E9E9E);}
/* "No selection = all genders" right-aligned hint per mock. */
.bp-gender-tabs__hint{font-size:.6rem;color:var(--bp-text-3,#9E9E9E);margin-left:auto;padding-bottom:.48rem;align-self:flex-end;}

/* ── Alphabet Bar (Browse listing pages) ───────────────────────────────── */
.bp-ab{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:#fff;border-radius:12px;border:1px solid var(--bp-border,#e9ecef);box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:20px;flex-wrap:wrap;}
.bp-ab__all{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;padding:0 12px;border-radius:8px;font-size:.78rem;font-weight:700;text-decoration:none;border:2px solid var(--bp-border,#e9ecef);background:#f8f9fa;color:#495057;transition:all .15s;flex-shrink:0;}
.bp-ab__all:hover{border-color:var(--bp-primary,#0077B6);color:var(--bp-primary,#0077B6);background:#f0f8ff;}
.bp-ab--boy .bp-ab__all--active{background:var(--bp-primary,#0077B6);border-color:var(--bp-primary,#0077B6);color:#fff;}
.bp-ab--girl .bp-ab__all--active{background:#E91E63;border-color:#E91E63;color:#fff;}
.bp-ab__letters{display:flex;flex-wrap:wrap;gap:4px;flex:1;}
.bp-ab__letter{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:34px;height:36px;padding:0 5px;border-radius:7px;font-size:.8rem;font-weight:700;text-decoration:none;border:1.5px solid var(--bp-border,#e9ecef);background:#f8f9fa;color:#495057;transition:all .12s;line-height:1;gap:1px;}
.bp-ab--boy .bp-ab__letter:hover{background:var(--bp-primary,#0077B6);border-color:var(--bp-primary,#0077B6);color:#fff;transform:translateY(-1px);}
.bp-ab--girl .bp-ab__letter:hover{background:#E91E63;border-color:#E91E63;color:#fff;transform:translateY(-1px);}
.bp-ab--boy .bp-ab__letter--active{background:var(--bp-primary,#0077B6);border-color:var(--bp-primary,#0077B6);color:#fff;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,119,182,.35);}
.bp-ab--girl .bp-ab__letter--active{background:#E91E63;border-color:#E91E63;color:#fff;transform:translateY(-1px);box-shadow:0 3px 8px rgba(233,30,99,.35);}
.bp-ab__letter--empty{opacity:.3;pointer-events:none;cursor:default;}
.bp-ab__count{font-size:.52rem;font-weight:600;opacity:.75;line-height:1;}

@media(max-width:575px){
  .bp-ab__letter{min-width:28px;height:30px;font-size:.72rem;}
  .bp-ab__all{height:30px;min-width:38px;font-size:.72rem;}
  .bp-ab__count{font-size:.48rem;}
}

/* ── Rashi Card ────────────────────────────────────────────────────────── */
.bp-rc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-rashi,#534AB7);overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-rc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.bp-rc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-rc__link:hover{text-decoration:none;color:inherit;}
.bp-rc__count{position:absolute;top:.5rem;right:.5rem;font-size:.62rem;font-weight:700;color:var(--bp-rashi,#534AB7);background:var(--bp-rashi-lt,#F0EEF8);border:1px solid #C9C4ED;padding:.1rem .45rem;border-radius:var(--r-full);}
.bp-rc__icon{width:52px;height:52px;border-radius:50%;background:var(--bp-rashi-lt,#F0EEF8);border:2px solid #C9C4ED;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:.45rem;color:var(--bp-rashi,#534AB7);font-family:'Noto Sans',sans-serif;}
.bp-rc__name{font-size:.88rem;font-weight:700;color:var(--bp-nav);}
.bp-rc__hindi{font-size:.74rem;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;margin-top:.1rem;}
.bp-rc__english{font-size:.68rem;color:var(--bp-text-3);margin-top:.15rem;}
.bp-rc__meta{font-size:.62rem;color:var(--bp-text-3);margin-top:.2rem;line-height:1.4;text-align:center;}
.bp-rc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* Rashi Card Compact (Home page strip) */
.bp-rc-sm{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:96px;text-decoration:none;padding:.6rem .4rem;border-radius:var(--r-md);border:1px solid var(--bp-border);background:var(--bp-surface);transition:all .15s;cursor:pointer;gap:.25rem;overflow:hidden;}
.bp-rc-sm:hover{border-color:var(--bp-rashi);background:var(--bp-rashi-lt);transform:translateY(-2px);}
.bp-rc-sm__icon{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--bp-rashi-lt,#F0EEF8);border:1.5px solid #C9C4ED;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--bp-rashi);font-family:'Noto Sans',sans-serif;transition:all .15s;}
.bp-rc-sm:hover .bp-rc-sm__icon{background:var(--bp-rashi);border-color:var(--bp-rashi);color:#fff;}
.bp-rc-sm__name{font-size:.62rem;font-weight:700;color:var(--bp-text-1);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bp-rc-sm__letters{font-size:.55rem;color:var(--bp-text-3);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Nakshatra Card ────────────────────────────────────────────────────── */
.bp-nc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-rashi,#534AB7);overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-nc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.bp-nc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-nc__link:hover{text-decoration:none;color:inherit;}
.bp-nc__count{position:absolute;top:.5rem;right:.5rem;font-size:.62rem;font-weight:700;color:var(--bp-rashi,#534AB7);background:var(--bp-rashi-lt,#F0EEF8);border:1px solid #C9C4ED;padding:.1rem .45rem;border-radius:var(--r-full);}
.bp-nc__icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--bp-rashi-lt,#F0EEF8);border:2px solid #C9C4ED;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;margin-bottom:.45rem;color:var(--bp-rashi,#534AB7);font-family:'Poppins',sans-serif;}
.bp-nc__name{font-size:.88rem;font-weight:700;color:var(--bp-nav);}
.bp-nc__hindi{font-size:.74rem;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;margin-top:.1rem;}
.bp-nc__rashi{font-size:.62rem;color:var(--bp-rashi);font-weight:600;margin-top:.15rem;}
.bp-nc__meta{font-size:.62rem;color:var(--bp-text-3);margin-top:.2rem;line-height:1.4;text-align:center;}
.bp-nc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* ── Deity Card (Gods & Goddesses) ─────────────────────────────────────── */
.bp-dc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-saffron,#E8901A);overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-dc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);border-color:var(--bp-saffron,#E8901A);}
.bp-dc--goddess{border-top-color:#E91E63;}
.bp-dc--goddess:hover{border-color:#E91E63;}
.bp-dc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-dc__link:hover{text-decoration:none;color:inherit;}
.bp-dc__count{position:absolute;top:.5rem;right:.5rem;font-size:.58rem;font-weight:700;color:var(--bp-saffron-text,#7A3C00);background:var(--bp-saffron-lt,#FFF4E0);border:1px solid var(--bp-saffron-md,#FFD88A);padding:.12rem .45rem;border-radius:var(--r-full);}
.bp-dc--goddess .bp-dc__count{color:#AD1457;background:#FCE4EC;border-color:#F48FB1;}
.bp-dc__avatar-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:.35rem;}
.bp-dc__avatar{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.4rem;}
.bp-dc__avatar--god{background:var(--bp-saffron-lt,#FFF4E0);border:2px solid var(--bp-saffron-md,#FFD88A);}
.bp-dc__avatar--goddess{background:#FCE4EC;border:2px solid #F48FB1;}
.bp-dc__initial{font-size:1.45rem;font-weight:700;font-family:'Noto Sans',sans-serif;line-height:1;color:var(--bp-saffron-text,#7A3C00);}
.bp-dc--goddess .bp-dc__initial{color:#AD1457;}
.bp-dc__avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.bp-dc__cat-pill{display:inline-flex;padding:.12rem .5rem;border-radius:var(--r-full);font-size:.58rem;font-weight:700;background:var(--bp-saffron-lt,#FFF4E0);color:var(--bp-saffron-text,#7A3C00);border:1px solid var(--bp-saffron-md,#FFD88A);}
.bp-dc--goddess .bp-dc__cat-pill{background:#FCE4EC;color:#AD1457;border-color:#F48FB1;}
.bp-dc__name{font-size:.92rem;font-weight:700;color:var(--bp-text-1);}
.bp-dc__deva{font-size:.72rem;color:var(--bp-text-3);font-family:'Noto Sans',sans-serif;margin-top:.1rem;}
.bp-dc__desc{font-size:.65rem;color:var(--bp-text-2);line-height:1.4;margin-top:.25rem;text-align:center;flex:1;}
.bp-dc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* ── Category Card ─────────────────────────────────────────────────────── */
.bp-cc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-nav,#0077B6);overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-cc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.bp-cc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-cc__link:hover{text-decoration:none;color:inherit;}
.bp-cc__count{position:absolute;top:.5rem;right:.5rem;font-size:.62rem;font-weight:700;color:var(--bp-nav);background:#E3F2FD;border:1px solid #90CAF9;padding:.1rem .45rem;border-radius:var(--r-full);}
.bp-cc__icon{width:48px;height:48px;border-radius:var(--r-md);background:#E3F2FD;border:2px solid #90CAF9;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.45rem;color:#0D47A1;}
.bp-cc__icon img{width:28px;height:28px;border-radius:var(--r-sm);object-fit:cover;}
.bp-cc__name{font-size:.88rem;font-weight:700;color:var(--bp-nav);}
.bp-cc__desc{font-size:.65rem;color:var(--bp-text-3);line-height:1.4;margin-top:.2rem;text-align:center;}
.bp-cc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* ── Tag Type Card ─────────────────────────────────────────────────────── */
.bp-ttc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-rashi,#534AB7);overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-ttc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.bp-ttc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-ttc__link:hover{text-decoration:none;color:inherit;}
.bp-ttc__count{position:absolute;top:.5rem;right:.5rem;font-size:.62rem;font-weight:700;color:var(--bp-rashi);background:var(--bp-rashi-lt,#F0EEF8);border:1px solid #C9C4ED;padding:.1rem .45rem;border-radius:var(--r-full);}
.bp-ttc__icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--bp-rashi-lt,#F0EEF8);border:2px solid #C9C4ED;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.45rem;color:var(--bp-rashi);}
.bp-ttc__name{font-size:.88rem;font-weight:700;color:var(--bp-nav);}
.bp-ttc__desc{font-size:.65rem;color:var(--bp-text-3);line-height:1.4;margin-top:.2rem;text-align:center;}
.bp-ttc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* ── Tag Card ──────────────────────────────────────────────────────────── */
.bp-tc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid var(--bp-rashi,#534AB7);overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-tc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.bp-tc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-tc__link:hover{text-decoration:none;color:inherit;}
.bp-tc__count{position:absolute;top:.5rem;right:.5rem;font-size:.62rem;font-weight:700;color:var(--bp-rashi);background:var(--bp-rashi-lt,#F0EEF8);border:1px solid #C9C4ED;padding:.1rem .45rem;border-radius:var(--r-full);}
.bp-tc__icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--bp-rashi-lt,#F0EEF8);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.4rem;color:var(--bp-rashi);}
.bp-tc__name{font-size:.88rem;font-weight:700;color:var(--bp-nav);text-align:center;}
.bp-tc__desc{font-size:.65rem;color:var(--bp-text-3);line-height:1.4;margin-top:.2rem;text-align:center;}
.bp-tc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* ── Language Card ─────────────────────────────────────────────────────── */
.bp-lc{background:var(--bp-surface);border-radius:var(--r-lg);border:1px solid var(--bp-border);border-top:3px solid #2E7D32;overflow:hidden;position:relative;transition:all .2s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.bp-lc:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px);}
.bp-lc__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;padding:.75rem .75rem .4rem;flex:1;cursor:pointer;}
.bp-lc__link:hover{text-decoration:none;color:inherit;}
.bp-lc__count{position:absolute;top:.5rem;right:.5rem;font-size:.62rem;font-weight:700;color:#2E7D32;background:#E8F5E9;border:1px solid #A5D6A7;padding:.1rem .45rem;border-radius:var(--r-full);}
.bp-lc__icon{width:48px;height:48px;border-radius:var(--r-md);background:#E8F5E9;border:2px solid #A5D6A7;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.45rem;color:#2E7D32;font-family:'Noto Sans',sans-serif;}
.bp-lc__name{font-size:.88rem;font-weight:700;color:var(--bp-nav);}
.bp-lc__native{font-size:.74rem;color:var(--bp-text-2);font-family:'Noto Sans',sans-serif;margin-top:.1rem;}
.bp-lc__footer{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;justify-content:center;border-top:1px solid var(--bp-border);}

/* ── Page Layout with Sidebar ──────────────────────────────────────────── */
.bp-page-layout{display:flex;min-height:calc(100vh - 86px);}
.bp-left-sidebar{width:240px;flex-shrink:0;background:var(--bp-surface);border-right:1px solid var(--bp-border);padding:1.25rem 1rem;display:none;}
@media(min-width:992px){.bp-left-sidebar{display:block;}}
.bp-qs-title{font-size:.8rem;font-weight:700;color:var(--bp-text-1);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--bp-border);display:flex;align-items:center;gap:.4rem;}
.bp-qs-link{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--bp-nav);text-decoration:none;padding:.45rem 0;border-bottom:1px solid var(--bp-border);transition:color .15s;}
.bp-qs-link:hover{color:var(--bp-accent,#FF8C42);}
.bp-qs-link:last-of-type{border-bottom:none;}
.bp-qs-arrow{color:var(--bp-text-3);font-size:.7rem;}
.bp-ad-label{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--bp-border-md);}

/* Mobile quick links (pills shown below hero on small screens) */
.bp-mobile-ql{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;}
@media(min-width:992px){.bp-mobile-ql{display:none;}}
.bp-ql-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .8rem;border-radius:var(--r-full);font-size:.72rem;font-weight:600;background:var(--bp-surface);border:1px solid var(--bp-border-md);color:var(--bp-nav);text-decoration:none;}
.bp-ql-pill:hover{border-color:var(--bp-nav);background:#f0f8ff;}

/* ── Mobile Nav Drawer ──────────────────────────────────────────────────── */
.bp-mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;display:none;}
.bp-mob-overlay.open{display:block;}
.bp-mob-drawer{position:fixed;top:0;left:-280px;width:280px;height:100%;background:var(--bp-surface);z-index:810;transition:left .25s ease;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.15);}
.bp-mob-drawer.open{left:0;}
.bp-mob-drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--bp-border);background:var(--bp-nav);color:#fff;}
.bp-mob-drawer-title{font-size:.9rem;font-weight:700;}
.bp-mob-drawer-close{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:.2rem .4rem;}
.bp-mob-drawer-body{padding:.5rem 0;}
.bp-mob-link{display:block;padding:.55rem 1rem;font-size:.88rem;font-weight:500;color:var(--bp-text-1);text-decoration:none;transition:background .12s;}
.bp-mob-link:hover{background:var(--bp-accent-lt);color:var(--bp-nav);}

/* 2-level mobile drawer accordion (2026-05-22). Each section is a native
   <details>/<summary> — top-level entry collapses by default, tap to
   reveal sub-items. Matches the desktop mega menu hierarchy with zero
   JS — the chevron rotation is driven by [open] attribute selector. */
.bp-mob-section { border-top: 1px solid var(--bp-border); }
.bp-mob-section:first-of-type { border-top: none; }
.bp-mob-section-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: .9rem 1rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bp-text-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bp-surface);
    transition: background .12s;
}
.bp-mob-section-summary::-webkit-details-marker { display: none; }
.bp-mob-section-summary::marker { content: ''; }
.bp-mob-section-summary:hover { background: var(--bp-accent-lt); color: var(--bp-nav); }
.bp-mob-section-summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--bp-text-3);
    border-bottom: 2px solid var(--bp-text-3);
    transform: rotate(45deg);
    transition: transform .15s;
    flex-shrink: 0;
    margin-right: .25rem;
}
.bp-mob-section[open] > .bp-mob-section-summary::after { transform: rotate(-135deg); }
.bp-mob-section-body { padding: .25rem 0 .65rem; background: var(--bp-bg); }
.bp-mob-section-body .bp-mob-link { padding-left: 1.5rem; font-size: .85rem; font-weight: 500; }
.bp-mob-section-body .bp-mm-letter-grid--drawer { padding: .55rem 1rem .25rem; margin-bottom: .25rem; }

/* ── Language Alphabet Grid ─────────────────────────────────────────────── */
/* Native-script alphabet tiles (Vowels + Consonants on Language pages).
   Matches mock bachpan-header-optimization.html — .na tiles. Compact 40x38
   tile, native script .88rem, roman .44rem, count .44rem. */
.bp-lang-alpha-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:1rem;}
.bp-lang-alpha-grid.bp-rtl{direction:rtl;}
.bp-lang-alpha-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;height:38px;padding:0 4px;border-radius:var(--r-sm);border:1px solid var(--bp-border);background:var(--bp-surface);cursor:pointer;transition:background .12s,border-color .12s,color .12s;gap:0;line-height:1;}
.bp-lang-alpha-btn:hover{border-color:var(--bp-nav);color:var(--bp-nav);}
.bp-lang-alpha-btn--vowel{background:#FFFBF0;border-color:#E8D5A0;}
.bp-lang-alpha-btn--vowel:hover{border-color:#C4960C;background:#FFF4D6;}
.bp-lang-alpha-native{font-size:.88rem;font-weight:600;color:var(--bp-text-1);font-family:var(--f-script,'Noto Sans',sans-serif);line-height:1;}
.bp-lang-alpha-roman{font-size:.44rem;color:var(--bp-text-3);font-weight:500;line-height:1;font-family:'Poppins',sans-serif;}
.bp-lang-alpha-count{font-size:.44rem;color:var(--bp-nav);font-weight:600;line-height:1;}
.bp-lang-alpha-btn--active{border-color:var(--bp-nav) !important;background:var(--bp-nav) !important;}
.bp-lang-alpha-btn--active .bp-lang-alpha-native{color:#fff;}
.bp-lang-alpha-btn--active .bp-lang-alpha-roman{color:rgba(255,255,255,.72);}
.bp-lang-alpha-btn--active .bp-lang-alpha-count{color:rgba(255,255,255,.9);}
.bp-lang-alpha-btn--empty{opacity:.38;pointer-events:none;cursor:default;}
a.bp-lang-alpha-btn{text-decoration:none;color:inherit;}

/* Section label (Vowels / Consonants) */
.bp-lang-section-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--bp-text-3);margin:.75rem 0 .5rem;display:flex;align-items:center;gap:.4rem;}
.bp-lang-section-label::after{content:'';flex:1;height:1px;background:var(--bp-border);}

/* Script toggle (Native / English) */
.bp-lang-script-toggle{display:flex;gap:0;border-radius:var(--r-full);overflow:hidden;border:1.5px solid var(--bp-border);}
.bp-lang-st-btn{padding:.3rem .8rem;font-size:.72rem;font-weight:700;border:none;background:var(--bp-surface);color:var(--bp-text-2);cursor:pointer;font-family:'Poppins',sans-serif;transition:all .15s;}
.bp-lang-st-btn--active{background:var(--bp-nav);color:#fff;}

/* English mode: swap native/roman emphasis. Sized for the compact 40x38
   tile per mock — roman becomes the dominant text. */
.bp-lang-alpha-grid.bp-eng-mode .bp-lang-alpha-native{font-size:.5rem;color:var(--bp-text-3);font-weight:500;}
.bp-lang-alpha-grid.bp-eng-mode .bp-lang-alpha-roman{font-size:.78rem;font-weight:700;color:var(--bp-text-1);}
.bp-lang-alpha-grid.bp-eng-mode .bp-lang-alpha-btn--active .bp-lang-alpha-roman{color:#fff;}
@media(max-width:575px){
  .bp-lang-alpha-btn{min-width:38px;height:36px;}
  .bp-lang-alpha-native{font-size:.82rem;}
}

/* ── Language Name Card/Row extras ──────────────────────────────────────── */
.bp-card-name-native{font-size:1.15rem;font-weight:700;color:var(--bp-nav);font-family:var(--f-script,'Noto Sans',sans-serif);line-height:1.3;margin-bottom:.15rem;}
.bp-card-name-en{font-size:.75rem;font-weight:600;color:var(--bp-text-2);margin-bottom:.3rem;}
.bp-card-meaning--native{font-family:var(--f-script,'Noto Sans',sans-serif);font-size:.88rem;color:var(--bp-text-2);line-height:1.5;}
.bp-card-meaning--en{font-size:.8rem;color:var(--bp-text-2);line-height:1.45;margin-top:.15rem;}
.bp-row-name-native{font-size:.88rem;font-weight:700;color:var(--bp-nav);font-family:var(--f-script,'Noto Sans',sans-serif);flex-shrink:0;}
.bp-row-name-en{font-size:.78rem;color:var(--bp-text-2);font-weight:500;}

/* ── SHARE MODAL (_ShareModal.cshtml) ─────────────────────────────────────── */
.bp-modal--share { max-width: 460px; padding: 0; overflow: hidden; position: relative; }
.bp-modal-close--floating {
    position: absolute; top: .55rem; right: .55rem; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--bp-text-1);
    border: none; font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.bp-modal-close--floating:hover { background: #fff; }

.bp-share-header {
    padding: 1.25rem 1.25rem 1.1rem;
    color: #fff; text-align: center;
    background: linear-gradient(135deg, var(--bp-nav) 0%, #005f91 100%);
}
.bp-share-header__name { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.bp-share-header__deva { display: block; font-size: .95rem; opacity: .85; margin-top: .15rem; font-weight: 500; }
.bp-share-header__meaning { font-size: .78rem; opacity: .9; line-height: 1.5; margin-top: .55rem; }

.bp-share-body { padding: 1.1rem 1.25rem 1.25rem; background: var(--bp-surface); }
.bp-share-eyebrow {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--bp-text-3); margin-bottom: .65rem;
}
.bp-share-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem;
}
.share-soc-btn {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .65rem .5rem; border-radius: var(--r-md);
    font-size: .78rem; font-weight: 600; color: #fff;
    text-decoration: none; border: none; cursor: pointer;
    transition: filter .15s, transform .15s;
}
.share-soc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.share-soc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.share-wa { background: #25D366; }
.share-fb { background: #1877F2; }
.share-tw { background: #1DA1F2; }
.share-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366); }

.bp-share-copy { display: flex; gap: .5rem; }
.bp-share-copy input {
    flex: 1; height: 40px; border: 1.5px solid var(--bp-border-md);
    border-radius: var(--r-md); padding: 0 .75rem;
    font-size: .72rem; color: var(--bp-text-2); background: var(--bp-bg);
    outline: none; font-family: inherit;
}
.bp-share-copy__btn { height: 40px; padding: 0 1rem; font-size: .75rem; border-radius: var(--r-md); }
.bp-share-preview {
    margin-bottom: 1.1rem; border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--bp-border-md); background: var(--bp-bg);
}
.bp-share-preview img { display: block; width: 100%; height: auto; }

/* Share icon on _NameCard (placed next to the favourite button). */
.bp-card-share {
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer;
    color: var(--bp-text-3);
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.bp-card-share:hover { color: var(--bp-nav); background: var(--bp-accent-lt); }

/* Share icon on _NameRow (placed next to the favourite button). */
.bp-row-share {
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: transparent; cursor: pointer;
    color: var(--bp-text-3);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0; margin-right: 2px;
}
.bp-row-share:hover { color: var(--bp-nav); background: var(--bp-accent-lt); }

/* ==========================================================================
   Listing card / row — Header (name + share/heart) + footer chip strip
   (Used by _NameCard, _NameRow, _NameCardLang, _NameRowLang)
   Mirrors the NameDetail hero so chip wording / shape / placement match.
   ========================================================================== */

/* Card header: name on the left grows to fill, share + heart pinned right
   in the same horizontal row. Replaces the bottom-footer share/heart spot. */
.bp-card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .35rem; margin-bottom: .2rem;
}
.bp-card-header .bp-card-name,
.bp-card-header .bp-card-name-stack { flex: 1 1 auto; min-width: 0; padding-right: 0; margin-bottom: 0; }
.bp-card-header .bp-card-name { padding-right: 0; }
.bp-card-name-stack { display: flex; flex-direction: column; gap: 2px; }
.bp-card-actions {
    display: flex; align-items: center; gap: .15rem;
    flex-shrink: 0; margin-top: -4px; /* nudge to top-align with name baseline */
}

/* Card footer — now holds the Rashi/Nakshatra/Lucky chip strip in the
   spot where share/heart used to live. The horizontal divider stays so
   the chips read as a distinct section. */
.bp-card-footer { display: flex; align-items: center; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--bp-border); }
.bp-card-footer--chips { flex-wrap: wrap; gap: .3rem; }
.bp-card-footer--chips .bp-hbadge {
    font-size: .65rem; padding: .18rem .55rem; line-height: 1.3;
}

/* Stacked native + English meaning in the language card. The English line
   is always shown (no toggle), in a lighter italic to keep the native
   meaning the primary call-out. */
.bp-card-meaning--en { font-size: .78rem; color: var(--bp-text-3); margin-top: .25rem; font-style: italic; }

/* Row 2 placement inside the .bp-name-row CSS grid above.
   - bp-row-deva (English row) / bp-row-name-en (Language row) sit in
     column 1, directly under the row 1 name.
   - bp-row-chips spans columns 2 through end, so chips line up under
     the meaning column above regardless of how long the row 2 first
     cell is. */
.bp-row-deva,
.bp-row-name-en {
    grid-row: 2; grid-column: 1;
    min-width: 0;
}
.bp-row-deva {
    font-size: .82rem; font-weight: 500; color: var(--bp-text-3);
    font-family: 'Noto Sans', sans-serif; line-height: 1.25;
}
.bp-row-chips {
    grid-row: 2; grid-column: 2 / -1;
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
    min-width: 0;
}
.bp-row-chips .bp-hbadge {
    font-size: .65rem; padding: .15rem .5rem; line-height: 1.3;
}

/* Bump list-view share + heart to match the card-view 36px target so the
   two view modes feel like the same control. */
.bp-row-share { width: 36px; height: 36px; }
.bp-row-fav { width: 36px; height: 36px; font-size: 1.25rem; }

/* Mobile: shrink chip text so the strip fits a narrow viewport. */
@media (max-width: 640px) {
    .bp-card-footer--chips .bp-hbadge,
    .bp-row-chips .bp-hbadge { font-size: .62rem; padding: .15rem .45rem; }
    .bp-card-footer--chips .bp-hbadge svg,
    .bp-row-chips .bp-hbadge svg { width: 9px; height: 9px; }
}

/* --- END OF DESIGN SYSTEM --- */