/* ══════════════════════════════════════════════════════════════════════
   lb11-polish.css — UI polish layer. Loaded AFTER lb11-pro.css on every
   page, so nothing in the working stylesheets had to be rewritten.
   Covers: contrast, small-phone layout, the race-lane finish line,
   first-visit guidance, share UI, and iOS / Android safe areas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. CONTRAST ───────────────────────────────────────────────────────
   The Arena (blue) skin painted near-black ink on a mid-blue foil, which
   is what made chips and buttons hard to read. Deepen the blue so white
   ink clears AA, and keep every other skin untouched.                   */
html[data-skin="arena"]{
  --lp-foil:linear-gradient(115deg,#4D97FF 0%,#2D6FE0 46%,#1B4FB8 100%);
  --lp-gold-ink:#FFFFFF;
}
html[data-skin="arena"][data-theme="light"]{
  --lp-foil:linear-gradient(115deg,#2E6FE6 0%,#1F5FE0 46%,#123C97 100%);
  --lp-gold-ink:#FFFFFF;
}
/* Same for the purple skin, where white reads better than the dark ink. */
html[data-skin="cosmic"]{ --lp-gold-ink:#FFFFFF; }

.lp-btn.gold,.lp-tag.gold,.lp-steps i,.st-done .tick{ color:var(--lp-gold-ink); }
/* Gold-text links on light backgrounds were washing out on the lighter skins. */
html[data-theme="light"] .lp-eyebrow,
html[data-theme="light"] .lp-sec-h a{ color:var(--lp-gold-deep,var(--lp-gold-text)); }

/* Shop quick-add and pill chips: a visible edge in every skin/theme. */
.lb-pills button,.lp-chips button{ border:1px solid var(--lp-line-2); }
.lb-pills button[aria-pressed="true"],.lp-chips button[aria-pressed="true"]{
  background:var(--lp-foil); color:var(--lp-gold-ink); border-color:transparent; }

/* ── 2. RACE LANES: a finish line that looks like a finish line ───────── */
.lp-track{ height:18px; overflow:visible; }
.lp-track .fin{
  right:-4px; top:-10px; bottom:-10px; width:16px; border-radius:4px;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  opacity:1;
}
/* Flag pole + pennant above the tape — reads as "finish" at a glance. */
.lp-track .fin::before{
  content:""; position:absolute; left:50%; top:-13px; width:2px; height:13px;
  border-radius:2px; background:var(--lp-ink-3); opacity:.75;
}
.lp-track .fin::after{
  content:""; position:absolute; left:calc(50% + 2px); top:-13px;
  width:11px; height:8px; background:var(--lp-gold);
  clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
/* Cleared: the tape lights up green and gives one soft pulse. */
.lp-lane.done .fin{
  box-shadow:0 0 0 2px rgba(34,197,110,.45),0 4px 16px rgba(34,197,110,.45),inset 0 0 0 1px rgba(255,255,255,.4);
  animation:lbFinPop .7s var(--lp-ease,ease) 1;
}
.lp-lane.done .fin::after{ background:var(--lp-green-hi,#6EE7A0); }
.lp-lane.stop .fin{ opacity:.45; filter:grayscale(1); }
@keyframes lbFinPop{ 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }
/* Ball gets a short motion trail so the lane reads as movement, not a dot. */
.lp-track .ball{ z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.08); }
.lp-lane.done .ball{ box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 4px rgba(34,197,110,.25); }

/* Readable numbers: on the dark hero panel the "current score" was dark
   ink on a dark surface, so it disappeared. */
.lp-hero-art .lp-lane-foot b,
.lp-hero-art .lp-lane-foot .lp-num{ color:var(--lp-on-night,#fff); }
.lp-lane-foot b{ font-size:13.5px; letter-spacing:.01em; }
.lp-lane-foot{ font-size:11.5px; align-items:baseline; }
.lp-lane-foot>span:last-child{ text-align:right; }

/* Names: wrap to a second line instead of being cut off mid-word. */
.lp-lane-top{ align-items:flex-start; gap:10px; }
.lp-lane-top b{ white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.lp-lane-top .who{ flex:1 1 auto; align-items:flex-start; }
.lp-lane-top .no{ margin-top:1px; }
.lp-lane-top .pick{ flex:0 0 auto; padding-top:2px; }
@media (max-width:360px){
  .lp-lane{ padding:12px 13px 11px; }
  .lp-lane-top b{ font-size:13px; }
  .lp-lane-foot{ font-size:11px; }
}

/* ── 3. SMALL PHONES (≤380px): header, ticker, hero ───────────────────── */
@media (max-width:420px){
  .lp-wrap{ --lp-gut:13px; }
  .lp-top-row{ height:56px; gap:8px; }
  /* height only — the logo is 3:2; setting both dimensions squashed it */
  .lp-brand img{ height:34px; width:auto; }
  .lp-brand b{ font-size:15px; letter-spacing:.01em; }
  .lp-top-right{ gap:6px; }
  .lp-chip{ height:38px; padding:0 10px; }
  .lp-chip b{ font-size:13px; }
  .lp-icon-btn{ width:36px; height:36px; }
  .lp-btn.sm{ padding:8px 12px; font-size:12.5px; }
  /* The trust ticker scrolls sideways instead of wrapping into a block. */
  .lp-strip .lp-wrap{
    justify-content:flex-start; gap:8px; height:28px; font-size:10px;
    overflow-x:auto; white-space:nowrap; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .lp-strip .lp-wrap::-webkit-scrollbar{ display:none; }
  .lp-strip span{ flex:0 0 auto; }
  .lp-hero{ padding:22px 16px; gap:18px; }
  .lp-hero h1{ font-size:clamp(28px,9vw,38px); }
}
/* On the narrowest phones the header's own right-hand cluster needs ~260px,
   so the logo scales down proportionally rather than being squashed square. */
@media (max-width:360px){
  .lp-brand img{ height:23px; }
}
/* The header must fit a 360px phone without the account button falling off. */
@media (max-width:430px){
  .lp-brand{ min-width:0; flex:0 1 auto; overflow:hidden; max-width:42vw; }
  .lp-brand>div{ min-width:0; overflow:hidden; }
  /* no `display` here — lb11-pro.css hides the wordmark below 560px by design */
  .lp-brand b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lp-brand span{ display:none; }
  .lp-top-right{ gap:5px; min-width:0; }
  /* Narrower, not scaled. transform:scale() shrank the rendered tap target
     below the CSS height, so the language switch measured 29px instead of
     the 34px it declares. Trimming padding and min-width fits the same
     space with the hit area intact. */
  .lp-lang button,.lp-lang a{ padding:0 7px; font-size:11px; min-width:32px; }
  .lp-skinbox,.lp-icon-btn{ width:34px; height:34px; }
  .lb-signin,.lp-btn.gold.sm{ padding:8px 11px; font-size:12px; }
  #lpAcct{ display:none; }                 /* Sign in / the user menu already covers this */
  .lb-user[hidden]~#lpAcct{ display:grid; }
}
/* Below 380px the wordmark goes and the logo carries the brand, so the
   Sign in button and the account menu always stay reachable. */
@media (max-width:380px){
  .lp-brand{ max-width:none; flex:0 0 auto; }
  .lp-brand>div{ display:none; }
  .lp-top-right{ gap:4px; }
}
/* 320px, signed in: the account button keeps the avatar and drops the name,
   so the menu never falls off the right edge on the smallest phones. */
@media (max-width:400px){
  .lb-user{ min-width:0; }
  .lb-user-btn{ padding:4px; gap:4px; }
  .lb-user-name{ display:none; }
  .lb-user-av{ width:30px; height:30px; flex:0 0 30px; }
  .lb-user-menu{ right:0; left:auto; max-width:min(260px,calc(100vw - 20px)); }
}
@media (max-width:360px){
  /* Keep the points value visible but compact — information is not dropped. */
  .lp-chip.gold.plain{ padding:0 8px; height:34px; }
  .lp-chip.gold b{ font-size:12px; }
  .lp-top-row{ gap:8px; }
}
@media (max-width:340px){
  .lp-lang button,.lp-lang a{ padding:0 5px; font-size:10.5px; min-width:30px; }
  .lp-skinbox,.lp-icon-btn{ width:32px; height:32px; }
  .lb-signin,.lp-btn.gold.sm{ padding:7px 9px; font-size:11.5px; }
}
/* Orders list: on a phone the status + Remove move under the product text
   instead of being squeezed off the left edge. */
@media (max-width:560px){
  .st-orders .st-order{ grid-template-columns:48px minmax(0,1fr); grid-template-areas:"img txt" "state state"; row-gap:10px; padding:12px; }
  .st-orders .st-order>img{ grid-area:img; width:48px; height:48px; }
  .st-orders .st-order>div{ grid-area:txt; min-width:0; }
  .st-orders .st-order>.st-ostate{ grid-area:state; display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; gap:10px; }
  .st-orders .st-order .st-status{ white-space:nowrap; }
  .st-orders-tools{ justify-content:stretch; }
  .st-orders-tools .st-clear{ width:100%; padding:10px 14px; }
}

/* Nothing should ever push the page sideways. */
html,body{ max-width:100%; overflow-x:hidden; }
.lp-wrap,.lp-main{ min-width:0; }

/* ── 4. iOS / ANDROID ─────────────────────────────────────────────────── */
/* 16px stops iOS Safari zooming in when a field gets focus. */
input,select,textarea{ font-size:max(16px,1em); }
/* Real viewport height on mobile browsers with a collapsing toolbar. */
@supports (height:100dvh){ .lp-fullh{ min-height:100dvh; } }
/* Keep fixed bars clear of the home indicator / gesture bar. */
.lp-top{ padding-top:env(safe-area-inset-top); }
.lp-dock,.lp-slip.dock,.lb-dock{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
.lp-main{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
/* Touch targets and tap highlight. */
button,.lp-btn,a.lp-btn{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.lp-btn,.lp-icon-btn,.lb-pills button{ min-height:40px; }

/* ── 5. EMPTY / OFFLINE STATES ────────────────────────────────────────── */
/* "No match yet" should look designed, not broken. */
.lb-nomatch{
  text-align:center; padding:34px 22px 28px; display:grid; gap:12px; justify-items:center;
  border:1px solid var(--lp-line); border-radius:20px;
  background:radial-gradient(120% 100% at 50% 0%,rgba(var(--lp-acc-rgb),.12),transparent 70%),var(--lp-surface);
}
.lb-nomatch .ic{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--lp-foil); color:var(--lp-gold-ink);
  box-shadow:0 14px 34px -10px rgba(var(--lp-acc-rgb),.55);
}
.lb-nomatch .ic svg{ width:26px; height:26px; }
.lb-nomatch b{ font:800 22px/1.15 var(--lp-head); text-transform:uppercase; }
.lb-nomatch p{ margin:0; max-width:46ch; color:var(--lp-ink-2); font-size:14px; line-height:1.6; }
.lb-nomatch-steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:2px; }
.lb-nomatch-steps div{
  display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:99px;
  background:var(--lp-surface-2); border:1px solid var(--lp-line);
  font:700 12.5px var(--lp-font); color:var(--lp-ink-2);
}
.lb-nomatch-steps i{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  background:var(--lp-foil); color:var(--lp-gold-ink); font:800 10.5px var(--lp-font); flex:0 0 20px;
}
.lb-nomatch-cta{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:4px; }
.lb-offline{ border-color:rgba(224,65,58,.45); background:rgba(224,65,58,.06); margin-bottom:16px; }
.lb-offline b{ display:block; font:800 16px var(--lp-head); }

/* Home: the live-data notice as guidance instead of an error. */
.lb-guide{
  display:grid; gap:14px; justify-items:center; text-align:center;
  padding:30px 22px; border-radius:20px; border:1px solid var(--lp-line);
  background:radial-gradient(120% 100% at 50% 0%,rgba(var(--lp-acc-rgb),.10),transparent 70%),var(--lp-surface);
}
.lb-guide b{ font:800 21px/1.15 var(--lp-head); text-transform:uppercase; }
.lb-guide p{ margin:0; max-width:48ch; color:var(--lp-ink-2); font-size:14px; line-height:1.6; }
.lb-guide .lb-guide-cta{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }

/* ── 6. SHARE ─────────────────────────────────────────────────────────── */
.lb-share{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 16px; border-radius:99px; border:1px solid var(--lp-line-2);
  background:var(--lp-surface-2); color:var(--lp-ink);
  font:800 13px var(--lp-font); transition:.16s;
}
.lb-share:hover,.lb-share:focus-visible{ border-color:var(--lp-gold); color:var(--lp-gold-text); transform:translateY(-1px); }
.lb-share svg{ width:16px; height:16px; }
.lb-share.ok{ color:var(--lp-green-hi); border-color:var(--lp-green-hi); }

/* ── 7. FIRST-VISIT GUIDE ─────────────────────────────────────────────── */
.lb-fv{ position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:18px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(4px); animation:lbFvIn .22s ease; }
.lb-fv-card{
  width:min(440px,100%); max-height:88vh; overflow:auto; border-radius:22px; padding:26px 22px 20px;
  background:var(--lp-surface); border:1px solid var(--lp-line); text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.lb-fv-card h2{ margin:10px 0 4px; font:800 26px/1.1 var(--lp-head); text-transform:uppercase; }
.lb-fv-card>p{ margin:0 0 16px; color:var(--lp-ink-2); font-size:14px; line-height:1.6; }
.lb-fv-steps{ display:grid; gap:10px; text-align:left; margin-bottom:18px; }
.lb-fv-steps div{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px;
  background:var(--lp-surface-2); border:1px solid var(--lp-line); }
.lb-fv-steps i{ flex:0 0 26px; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  font-style:normal; background:var(--lp-foil); color:var(--lp-gold-ink); font:800 12px var(--lp-font); }
.lb-fv-steps b{ display:block; font:800 14px var(--lp-font); margin-bottom:1px; }
.lb-fv-steps small{ display:block; color:var(--lp-ink-3); font:600 12.5px/1.45 var(--lp-font); }
.lb-fv-cta{ display:grid; gap:9px; }
.lb-fv-skip{ background:none; border:0; color:var(--lp-ink-3); font:700 12.5px var(--lp-font); cursor:pointer; padding:6px; }
@keyframes lbFvIn{ from{opacity:0} }

@media (prefers-reduced-motion:reduce){
  .lb-fv,.lp-lane.done .fin{ animation:none; }
  .lb-share:hover{ transform:none; }
}


/* ══════════════════════════════════════════════════════════════════════
   R3 — Home daily banner. Uses the supplied crowd photograph.
   Colours come from the existing --brass / --card tokens on index.php, so
   it follows every dashboard theme.
   ══════════════════════════════════════════════════════════════════════ */
.lb-daily{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--radius,20px); border:1px solid var(--line,rgba(255,255,255,.1));
  background:var(--card,#12151d);
  min-height:168px; display:flex; align-items:center;
}
.lb-daily-photo{position:absolute; inset:0; z-index:-1; overflow:hidden;
  background:#0d1017 url('../arena/cheer-blur.jpg') center/cover no-repeat}
.lb-daily-photo.off{display:none}
.lb-daily-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; opacity:.85; filter:saturate(1.08) contrast(1.04)}
.lb-daily-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,10,16,.94) 0%, rgba(8,10,16,.80) 38%, rgba(8,10,16,.18) 72%, rgba(8,10,16,.34) 100%);
}
.lb-daily-in{position:relative; display:flex; align-items:center; gap:clamp(14px,3vw,30px);
  flex-wrap:wrap; width:100%; padding:clamp(20px,3vw,28px) clamp(18px,3vw,30px)}
.lb-daily-copy{flex:1 1 320px; min-width:0}
.lb-daily-eyebrow{display:inline-block; font:800 10.5px/1 Inter,sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-2,#f4d876); margin-bottom:9px}
.lb-daily h2{margin:0 0 7px; font:800 clamp(21px,3vw,30px)/1.12 var(--lp-head,Inter),sans-serif;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.lb-daily p{margin:0; font:600 13.5px/1.6 Inter,sans-serif; color:#cfd8e6; max-width:52ch;
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.lb-daily-cta{display:flex; gap:9px; flex-wrap:wrap; flex:0 0 auto}
.lb-daily-cta .btn{white-space:nowrap}
@media (max-width:760px){
  .lb-daily{min-height:0}
  .lb-daily-photo img{object-position:50% 32%; opacity:.7}
  .lb-daily-photo::after{background:linear-gradient(to bottom, rgba(8,10,16,.48) 0%, rgba(8,10,16,.84) 58%, rgba(8,10,16,.95) 100%)}
  .lb-daily-in{flex-direction:column; align-items:stretch; text-align:left}
  .lb-daily-cta{width:100%}
  .lb-daily-cta .btn{flex:1 1 0; min-width:0; justify-content:center}
}
@media (prefers-reduced-motion:no-preference){
  .lb-daily-photo img{animation:lbDailyIn 1s ease both}
}
@keyframes lbDailyIn{from{opacity:0;transform:scale(1.05)}}

/* ── Notification bell in the shared header (lb11-bell.js) ───────────────
   The slot existed on every page but only index.php ever filled it. These
   rules style the shared bell; index.php's own bell keeps its own styling. */
.lb-bell-slot{position:relative; display:inline-flex; align-items:center}
.lb-bell-btn{
  position:relative; display:grid; place-items:center; width:38px; height:38px;
  border-radius:12px; cursor:pointer; color:var(--lp-ink,#e8eefc);
  background:var(--lp-card-2,rgba(255,255,255,.06));
  border:1px solid var(--lp-line,rgba(140,192,255,.22));
  transition:background .16s ease, border-color .16s ease;
}
.lb-bell-btn:hover{background:var(--lp-card-3,rgba(255,255,255,.1))}
.lb-bell-btn svg{width:19px; height:19px}
.lb-bell-badge{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; display:grid; place-items:center;
  font:800 10.5px/1 var(--lp-font-b,Manrope),sans-serif;
  background:#E0393E; color:#fff; border:2px solid var(--lp-bg,#0a0e18);
}
.lb-bell-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  width:min(330px,calc(100vw - 28px)); max-height:min(420px,70vh); overflow:auto;
  border-radius:16px; padding:6px;
  background:var(--lp-card,#0e1526); border:1px solid var(--lp-line,rgba(140,192,255,.24));
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.lb-bell-row{display:flex; gap:10px; padding:10px 11px; border-radius:11px; align-items:flex-start}
.lb-bell-row + .lb-bell-row{border-top:1px solid var(--lp-line,rgba(140,192,255,.14))}
.lb-bell-row.is-unread{background:rgba(61,139,255,.1)}
.lb-bell-ico{flex:0 0 auto; font-size:16px; line-height:1.3}
.lb-bell-row b{display:block; font:800 12.5px/1.35 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink,#e8eefc)}
.lb-bell-row small{display:block; margin-top:2px; font:600 11.5px/1.45 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink-3,#8fa3c6)}
.lb-bell-row time{display:block; margin-top:3px; font:700 10.5px/1 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink-3,#8fa3c6); opacity:.85}
.lb-bell-empty{padding:26px 16px; text-align:center;
  font:600 12.5px/1.6 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink-3,#8fa3c6)}
@media (max-width:460px){ .lb-bell-panel{right:-56px} }

/* ── Touch targets on phones ─────────────────────────────────────────────
   Audit at 320–428px found the brand link at 23px, the language toggles at
   26–28px and the primary CTAs at 30px. Only the brand link actually fails
   WCAG 2.2 AA (24x24), but none of them are comfortable to hit on a phone.
   Minimum heights only — nothing here changes the visual size of the logo,
   the type or the button fills, so the layout is unmoved. */
@media (max-width:428px){
  .lp-brand{ min-height:36px; display:inline-flex; align-items:center }
  .lp-lang button, .lp-lang a{ min-height:34px; min-width:34px }
  .lp-icon-btn{ min-width:36px; min-height:36px }
  /* index.php already sets .btn{min-height:44px} under @media (pointer:coarse);
     this covers the shared pages that do not carry that rule. */
  .lp-btn{ min-height:36px }
  .lb-bell-btn{ min-width:38px; min-height:38px }
}

/* ══════════════════════════════════════════════════════════════════════
   Permanently-dark surfaces need text that does not follow the theme.

   Both the notification dropdown and the site footer are deliberately deep
   navy in BOTH themes, but their text colours were `var(--ink)` and
   `var(--ink-dim)`, which flip to near-black in light mode. Measured on the
   light theme: footer links 2.04, notification title 1.16, body 1.67 —
   against a 4.5 requirement. Dark theme was already fine (10.78 / 13.88 /
   8.45) and is left exactly as it was.

   These rules set local tokens on the dark surface itself, so the text is
   light regardless of theme. No background, spacing, font or layout value
   is changed — only colour.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Notification dropdown (index.php) ───────────────────────────────── */
.notif-panel{
  --nf-title: #EEF3FF;          /* near-white  */
  --nf-body:  #B4C0DB;          /* light blue-grey */
  --nf-muted: #8FA3C6;          /* readable muted */
  --nf-line:  rgba(140,192,255,.18);
  --nf-accent:#5FA2FF;          /* electric blue */
}
.notif-panel .notif-head b{ color:var(--nf-title) }
.notif-panel .notif-item{ color:var(--nf-body) }
.notif-panel .notif-text b{ color:var(--nf-title) }
.notif-panel .notif-text span{ color:var(--nf-body) }
.notif-panel .notif-time,
.notif-panel .notif-text small,
.notif-panel time{ color:var(--nf-muted) }
.notif-panel .notif-item{ border-bottom-color:var(--nf-line) }
.notif-panel .notif-head{ border-bottom-color:var(--nf-line) }
.notif-panel .notif-empty{ color:var(--nf-body) }
/* Unread marker and hover in electric blue rather than brass, per the brief. */
.notif-panel .notif-item.unread{ background:rgba(95,162,255,.12) }
.notif-panel .notif-item.unread .notif-text b::after{ background:var(--nf-accent) }
.notif-panel .notif-item:hover,
.notif-panel .notif-item:focus-visible{ background:rgba(95,162,255,.16) }
.notif-panel .notif-item:focus-visible{ outline:2px solid var(--nf-accent); outline-offset:-2px }
/* Long Hindi strings wrap instead of overflowing their row. */
.notif-panel .notif-text{ min-width:0 }
.notif-panel .notif-text b,
.notif-panel .notif-text span{ overflow-wrap:anywhere; word-break:break-word }
/* A scrollbar that can be seen against deep navy. */
.notif-panel .notif-list{ scrollbar-width:thin; scrollbar-color:rgba(140,192,255,.45) transparent }
.notif-panel .notif-list::-webkit-scrollbar{ width:8px }
.notif-panel .notif-list::-webkit-scrollbar-thumb{
  background:rgba(140,192,255,.42); border-radius:999px;
  border:2px solid transparent; background-clip:content-box }
.notif-panel .notif-list::-webkit-scrollbar-thumb:hover{ background:rgba(140,192,255,.62); background-clip:content-box }
/* On a phone the panel stays inside the viewport. */
@media (max-width:560px){
  .notif-panel{ right:auto; left:50%; transform:translateX(-50%);
    width:min(360px, calc(100vw - 20px)); max-height:min(70vh, 460px) }
}

/* ── The OTHER notification panel ────────────────────────────────────────
   There are two. index.php renders its own bell as .notif-panel (styled
   above). Every other page — Shop, Cart, Career, Pick 3, Mystery Box — gets
   the shared bell from assets/js/lb11-bell.js, which emits .lb-bell-panel
   with completely different class names. Fixing .notif-panel alone left the
   bell broken on every page except Home, which is where it was being looked
   at, so the fix looked like it had not been applied.

   Same root cause as .notif-panel: the panel background resolves to a dark
   navy on BOTH themes, while the text used theme-following tokens. Measured
   in light theme before this, on Shop, Career and Cart alike:
       title 1.02:1   body 3.46:1   time 3.46:1
   Dark theme was already fine (16.38 / 5.68 / 5.68) and is left alone in
   substance. Fixed colours, because the surface is always dark. */
.lb-bell-panel{
  --nb-title:#EEF3FF; --nb-body:#B4C0DB; --nb-muted:#9FB2D2;
  --nb-line:rgba(140,192,255,.18); --nb-accent:#5FA2FF;
  background:#101a2e;
}
.lb-bell-row b{ color:var(--nb-title) }
.lb-bell-row small{ color:var(--nb-body) }
.lb-bell-row time{ color:var(--nb-muted); opacity:1 }
.lb-bell-empty{ color:var(--nb-body) }
.lb-bell-row + .lb-bell-row{ border-top-color:var(--nb-line) }
.lb-bell-row.is-unread{ background:rgba(95,162,255,.14) }
.lb-bell-row:hover{ background:rgba(95,162,255,.10) }
/* Long titles and long Hindi strings wrap instead of forcing the panel wide. */
.lb-bell-row > div{ min-width:0 }
.lb-bell-row b, .lb-bell-row small{ overflow-wrap:anywhere; word-break:break-word }
/* A scrollbar that is visible against the dark panel. */
.lb-bell-panel{ scrollbar-width:thin; scrollbar-color:rgba(140,192,255,.45) transparent }
.lb-bell-panel::-webkit-scrollbar{ width:8px }
.lb-bell-panel::-webkit-scrollbar-thumb{
  background:rgba(140,192,255,.42); border-radius:999px;
  border:2px solid transparent; background-clip:content-box }
.lb-bell-btn:focus-visible{ outline:2px solid var(--nb-accent); outline-offset:2px }

/* ── Site footer ─────────────────────────────────────────────────────── */
.site-footer{
  --ft-title:#EAF0FF;
  --ft-body: #B4C0DB;
  --ft-muted:#8FA3C6;
}
.site-footer, .site-footer p, .site-footer li, .site-footer small{ color:var(--ft-body) }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer b, .site-footer strong{ color:var(--ft-title) }
.site-footer a{ color:var(--ft-body) }
.site-footer a:hover, .site-footer a:focus-visible{ color:var(--ft-title) }
.site-footer a:focus-visible{ outline:2px solid #5FA2FF; outline-offset:2px; border-radius:4px }
.site-footer .muted, .site-footer .copy, .site-footer .legal{ color:var(--ft-muted) }
/* The social buttons are icon chips, not body links: their glyph colour is set
   by index.php and is already correct against the chip's own fill. The generic
   link rule above has the same specificity as index.php's rule and was winning
   on source order, which washed the glyphs out. Restoring them explicitly. */
/* These two carry their own colour declaration in index.php, so they beat the
   inherited rule above and kept following the theme while the footer stayed
   dark. Measured in LIGHT theme before this: the wordmark 1.06:1 (it is the
   washed-out "LUCKY BHARAT 11" in the reported screenshot) and the column
   headings 3.75:1 at 11px, which is below AA for text that size. */
.site-footer .footer-brand-name{ color:var(--ft-title) }
.site-footer .footer-col-title{ color:var(--ft-muted) }
.site-footer .footer-social a{ color:var(--ink-dim) }
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible{ color:var(--brass-2) }

/* ── Space between the light page and the dark footer ────────────────────
   Measured before this at 1440px and 390px, both themes: the gap between the
   last painted element and the top of the footer was 0px, with the footer's
   own margin-top at 0. In light theme the page is rgb(237,241,249) and the
   footer is rgb(7,11,20), so the two slabs met edge to edge with no
   separation at all — the "space missing between black and white area at the
   bottom". The footer's 48px padding sits INSIDE the dark block, so it does
   nothing for the transition.

   A margin above the footer shows the page colour through, which is the gap.
   In dark theme both sides are already dark, so this is invisible there and
   changes nothing. */
.site-footer{ margin-top:56px }
@media (max-width:768px){ .site-footer{ margin-top:40px } }
@media (max-width:428px){ .site-footer{ margin-top:32px } }

/* ── Checkout button label, dark theme ───────────────────────────────────
   The label used --lp-gold-ink, which in dark theme is the near-black
   rgb(4,16,40), on the Electric Blue gradient: measured 3.23:1 from rendered
   pixels, below AA for 14px bold. Light theme is already white on blue at
   4.80:1 and is untouched.

   Scoped to the checkout bar's own buttons, NOT to the --lp-gold-ink token,
   so every other primary button on the site keeps the approved treatment.
   The gradient, the radius and the weight are unchanged — only the ink. */
:root[data-theme="dark"] .hud .cbtn:not(:disabled),
:root[data-theme="dark"] .hud .cbtn:not(:disabled):hover{ color:#FFFFFF }

/* Shared mobile-first notification rows: one quiet inbox, no oversized emojis. */
.notif-panel,.lb-bell-panel{background:#111925!important;border:1px solid #2b374a!important;border-radius:14px!important;box-shadow:0 16px 42px rgba(0,0,0,.42)!important}
.notif-item,.lb-bell-row{
  display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;
  align-items:start!important;gap:10px!important;
  position:relative;min-height:64px;padding:11px 12px!important;
  border-radius:0!important;background:transparent;
}
.notif-item:not(:last-child),.lb-bell-row:not(:last-child){border-bottom:1px solid rgba(160,180,210,.13)!important}
.notif-item.unread,.lb-bell-row.is-unread{background:rgba(68,118,188,.08)!important}
.notif-item.unread::before,.lb-bell-row.is-unread::before{
  content:'';position:absolute;left:0;top:18px;width:2px;height:26px;border-radius:2px;background:#67a4f8;
}
.notif-icon,.lb-bell-ico{
  display:grid!important;place-items:center!important;width:28px;height:28px;
  border:1px solid rgba(150,180,215,.22);border-radius:9px;
  background:rgba(105,139,184,.08);color:#9cbbdb;
  font-size:0!important;line-height:1!important;flex:0 0 28px!important;
}
.notif-icon svg,.lb-bell-ico svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.notif-text,.lb-bell-content{display:flex;flex-direction:column;min-width:0;gap:3px!important;padding-right:62px}
.notif-text b,.lb-bell-content b{display:block;color:#ecf2fc!important;font-size:12.5px!important;line-height:1.35!important;font-weight:650!important;letter-spacing:0!important;overflow-wrap:anywhere}
.notif-text span,.lb-bell-content small{display:block;color:#9caec6!important;font-size:11.5px!important;line-height:1.35!important;margin:0!important}
.notif-text small,.lb-bell-content time{
  position:absolute;right:12px;top:13px;color:#8da2be!important;
  font:500 10.5px/1.3 Inter,system-ui,sans-serif!important;opacity:1!important;white-space:nowrap;
}
.notif-head{padding:11px 14px!important;border-bottom:1px solid rgba(160,180,210,.16)!important}
.notif-head b{font-size:13.5px!important}
.notif-markall{font-size:11px!important}
@media(max-width:460px){
  .notif-panel{left:8px!important;right:8px!important;top:62px!important;width:auto!important;max-height:72vh!important}
  .lb-bell-panel{width:min(345px,calc(100vw - 16px))!important;max-height:72vh!important}
  .notif-item,.lb-bell-row{padding:10px!important;gap:9px!important;min-height:62px}
  .notif-text,.lb-bell-content{padding-right:52px}
  .notif-text small,.lb-bell-content time{right:10px}
}


/* Reward Emblem: no floating square icon; gold is reserved for a real reward. */
.notif-icon,.lb-bell-ico{border:0!important;background:transparent!important;border-radius:0!important}
.notif-item.is-keychain::before,.lb-bell-row.is-keychain::before{
  content:'';position:absolute;left:0;top:14px;width:3px;height:38px;
  border-radius:3px;background:#c6a65d!important;
}
.notif-item.is-keychain .notif-icon,.lb-bell-row.is-keychain .lb-bell-ico{color:#c6a65d!important}
.notif-item.is-keychain .notif-icon svg,.lb-bell-row.is-keychain .lb-bell-ico svg{width:19px!important;height:19px!important;stroke-width:1.6!important}