/* gift-light.css — the 4 streamer pages (/{user}/gift, /{user}/gift/stream, /{user}/gift/lives, a Live Recap) in the
   NEW THEME, over gift.css (their dark look): the page has .gift-page.gl. gift.css paints with its --g-* variables —
   here they take the new theme's palette (white cards, navy text, red action, gold / diamond figures); the few rules
   that wrote white text on what is now white become navy. The boards (podium + list) are the /gift ones
   (gift-top.css :is(.gt, .gl)). The site's zoom and wide width (1300px on screen). */
body:has(.gift-page.gl) {
    --g-bg: #F7FAFC; --g-panel: #fff; --g-panel2: #F4F9FC; --g-line: #CFE6F5; --g-line-soft: #CFE6F5;
    --g-text-dim: #6C8098; --g-text-mute: #5B6B80;
    --g-violet: #E63329; --g-blue: #1F7BC0; --g-grad: linear-gradient(135deg, #E63329 0%, #C4271E 100%);
    --g-diamond: #1F9CD8; --g-gold: #B7791F; --g-danger: #E63329; --g-success: #1E9E55; --g-amber: #E0731B;
}
.gift-page.gl, .sg-modal .box.gl {
    /* the /gift board's palette (gift-top.css reads these under .gl) — also the windows' boxes (outside the page) */
    --navy: #0B2C57; --navy2: #0A2340; --blue: #1F7BC0; --cyan: #2BB3E3; --red: #E63329; --redD: #C4271E;
    --text: #0B2C57; --muted: #6C8098; --border: #CFE6F5; --line: #E3EEF6; --section: #E9F5FC; --section2: #F4F9FC;
    --gold: #B7791F; --gold2: #8B6508; --diamond: #1F9CD8; --green: #E7F7EE; --greenB: #BFE8CF; --greenT: #1E7A45;
}
.gift-page.gl {
    zoom: var(--mo-zoom, 1); max-width: calc(var(--mo-wide, 1300px) / var(--mo-zoom, 1)); margin: 0 auto; padding: 26px 20px 64px;
    font-family: 'Nunito', system-ui, sans-serif; color: var(--navy);
}
.gift-page.gl h1, .gift-page.gl h2, .gift-page.gl h3, .gift-page.gl b, .gift-page.gl .pname { font-family: 'Poppins', system-ui, sans-serif; }

/* white text that now sits on white → navy (on the page and in its windows, which sit outside .gl) */
:is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-head h1, :is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-stat-card .value, :is(.gl, body:has(.gift-page.gl) .sg-modal) .giftcard .gname, :is(.gl, body:has(.gift-page.gl) .sg-modal) .ac-name, :is(.gl, body:has(.gift-page.gl) .sg-modal) .lc-name, :is(.gl, body:has(.gift-page.gl) .sg-modal) .cline .who,
:is(.gl, body:has(.gift-page.gl) .sg-modal) .gperson .pname, :is(.gl, body:has(.gift-page.gl) .sg-modal) .lb-podium-body .pname, :is(.gl, body:has(.gift-page.gl) .sg-modal) .lb-podium-amt, :is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-note b, :is(.gl, body:has(.gift-page.gl) .sg-modal) .sheader .snm b,
:is(.gl, body:has(.gift-page.gl) .sg-modal) .oga-rail .oh b, :is(.gl, body:has(.gift-page.gl) .sg-modal) .oga-rail .og .t b, :is(.gl, body:has(.gift-page.gl) .sg-modal) .lv-row .nm b, :is(.gl, body:has(.gift-page.gl) .sg-modal) .lb-rows .r .nm b, :is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-tray .h b,
:is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-tray .g .n, :is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-tray .qty span, :is(.gl, body:has(.gift-page.gl) .sg-modal) .donor-panel .dph b, :is(.gl, body:has(.gift-page.gl) .sg-modal) .donor-panel .dr .nm, :is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-punch b,
:is(.gl, body:has(.gift-page.gl) .sg-modal) .recap-hero .n, :is(.gl, body:has(.gift-page.gl) .sg-modal) table.sg-gt td .gg, :is(.gl, body:has(.gift-page.gl) .sg-modal) .fx-goal-top .lbl, :is(.gl, body:has(.gift-page.gl) .sg-modal) .fx-alert .body .txt, :is(.gl, body:has(.gift-page.gl) .sg-modal) .cline.sc-gold .msg,
:is(.gl, body:has(.gift-page.gl) .sg-modal) .pin-name, :is(.gl, body:has(.gift-page.gl) .sg-modal) .pin-msg, :is(.gl, body:has(.gift-page.gl) .sg-modal) .modal-head .gift-preview, :is(.gl, body:has(.gift-page.gl) .sg-modal) .toast,
body:has(.gift-page.gl) .sg-modal .box .hd b, body:has(.gift-page.gl) table.sg-gt td .gg { color: var(--navy, #0B2C57); }
:is(.gl, body:has(.gift-page.gl) .sg-modal) select, :is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-search, :is(.gl, body:has(.gift-page.gl) .sg-modal) input[type=text], :is(.gl, body:has(.gift-page.gl) .sg-modal) input[type=date], :is(.gl, body:has(.gift-page.gl) .sg-modal) .sc-composer textarea, :is(.gl, body:has(.gift-page.gl) .sg-modal) .sc-qp-btn,
:is(.gl, body:has(.gift-page.gl) .sg-modal) .gift-tray .qty button { color: #0B2C57; background: #fff; border-color: #CFE6F5; }
.gl .gift-stat-card { background: #fff; border: 1.5px solid #CFE6F5; border-radius: 18px; }
.gl .gift-stat-card.global { background: linear-gradient(135deg, #FFF4F3 0%, #fff 70%); border-color: #F6C9C5; }
.gl .gift-stat-card .label { font-weight: 800; color: #6C8098; }
.gl .gift-stat-card .value { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; }
.gl .gift-note { color: #6C8098; }
.gl .gift-tabbtn { color: #6C8098; } .gl .gift-tabbtn.on { color: #fff; }
.gl a.lnk, .gl .lnk { color: var(--red) !important; }

/* ---- the streamer header: the avatar, the name, the stats; the pages' menu on the right ---- */
.gl .shd { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; padding: 20px 22px; background: #fff; border: 1.5px solid #CFE6F5; border-radius: 22px; }
.gl .shd-av { position: relative; flex: none; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0B2C57, #1F5FA0); color: #fff; font: 800 32px 'Poppins', sans-serif; }
.gl .shd-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gl .shd-live { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); z-index: 1; padding: 1px 8px; border-radius: 6px; background: #E63329; color: #fff; font: 800 10.5px 'Poppins', sans-serif; letter-spacing: .05em; }
.gl .shd-info { text-align: left; align-items: flex-start; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gl .shd-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gl .shd-name a { color: #0B2C57; text-decoration: none; font-size: 22px; }
.gl .shd-name .tag-ok { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #E7F7EE; color: #1E7A45; font-size: 12px; font-weight: 800; }
.gl .shd-handle { font-size: 14px; font-weight: 700; color: #6C8098; }
.gl .shd-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 800; color: #0B2C57; }
.gl .shd-top { font-size: 13.5px; font-weight: 700; color: #6C8098; }
.gl .shd-top b { color: #E63329; }
.gl .shd-menu { flex: none; align-self: flex-start; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #F4F9FC; border: 1.5px solid #CFE6F5; }
.gl .shd-menu a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; color: #6C8098; font: 700 14.5px 'Poppins', sans-serif; text-decoration: none; white-space: nowrap; }
.gl .shd-menu a:hover { color: #0B2C57; }
.gl .shd-menu a.on { background: #E63329; color: #fff; box-shadow: 0 6px 14px rgba(230,51,41,.28); }
.gl .shd-menu a.is-live:not(.on) i { color: #E63329; }
.gl .shd-oga { color: #B7791F; }
/* tablet / phone: everything centred — the avatar, the name, the handle, the stats, n°1 Oga — then the menu at the
   bottom, full width (its 3 tabs share the row) */
@media (max-width: 991px) {
    .gl .shd { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .gl .shd-info { align-items: center; text-align: center; }
    .gl .shd-name, .gl .shd-stats { justify-content: center; }
    .gl .shd-menu { align-self: stretch; width: 100%; }
    .gl .shd-menu a { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* the avatar's size as before the new theme: 120px, 80px on a phone */
@media (max-width: 767px) { .gl .shd-av { width: 80px; height: 80px; font-size: 26px; } }
@media (max-width: 600px) {
    .gift-page.gl { padding: 14px 12px 48px; }
    .gl .shd { padding: 18px 14px 14px; }
    .gl .shd-name a { font-size: 19px; }
    .gl .shd-stats { gap: 4px 12px; font-size: 13.5px; }
    .gl .shd-menu a { height: 40px; padding: 0 6px; gap: 6px; font-size: 12.5px; }
    .gl .shd-menu a span { overflow: hidden; text-overflow: ellipsis; }
    .gl .shd-menu a i { display: none; }
}

/* the boards on these pages: the /gift look — the podium's photo cards open what an Oga gave */
.gl .lb-card.sg-donor { cursor: pointer; }
.gl .lb-card .clickcue { margin-top: 8px; font-size: 12.5px; font-weight: 800; color: #E63329; }
.gl .lb-rows .r.sg-donor { cursor: pointer; }
.gl .lb-rows .r .r-see { flex: none; font-size: 12px; font-weight: 800; color: #E63329; display: inline-flex; align-items: center; gap: 4px; }

/* windows over these pages (sg-modal), the site's modal look: a white card, rounded on every corner (the navy header
   band is clipped by it), a compact header, navy text, red links, the close button in a round white-alpha chip */
body:has(.gift-page.gl) .sg-modal { background: rgba(11,44,87,.55); backdrop-filter: blur(2px); }
body:has(.gift-page.gl) .sg-modal .box { background: #fff; border: none; border-radius: 20px; overflow: hidden; color: #0B2C57; box-shadow: 0 24px 60px rgba(11,44,87,.3); font-family: 'Nunito', system-ui, sans-serif; }
body:has(.gift-page.gl) .sg-modal .box .hd { flex: none; padding: 14px 18px 14px 22px; background: #0B2C57; color: #fff; border-bottom: none; }
body:has(.gift-page.gl) .sg-modal .box .hd b { color: #fff; font: 800 16px 'Poppins', system-ui, sans-serif; }
body:has(.gift-page.gl) .sg-modal .box .hd .x { width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; }
body:has(.gift-page.gl) .sg-modal .box .hd .x:hover { background: rgba(255,255,255,.22); }
body:has(.gift-page.gl) .sg-modal .box .bd { padding: 18px 22px 22px; color: #0B2C57; font-size: 15px; line-height: 1.55; }
body:has(.gift-page.gl) .sg-modal .box .bd:empty { display: none; }
body:has(.gift-page.gl) .sg-modal .box .bd a { color: #E63329 !important; font-weight: 800; text-decoration: underline; }
body:has(.gift-page.gl) .sg-modal table.sg-gt th { color: #6C8098; border-color: #E3EEF6; }
body:has(.gift-page.gl) .sg-modal table.sg-gt td { border-color: #E3EEF6; }
body:has(.gift-page.gl) .sg-modal .col-feed { background: transparent; }

/* the past lives: rows as white cards, 30 per page */
.gl .lv-rows { display: flex; flex-direction: column; gap: 10px; }
.gl .lv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: #fff; border: 1.5px solid #CFE6F5; border-radius: 16px; }
.gl .lv-row:hover { border-color: #2BB3E3; }
.gl .lv-row[hidden] { display: none; }
.gl .lv-row .nm b { font-size: 15px; }
.gl .lv-row .nm span { color: #6C8098; font-weight: 700; }
.gl .lv-row .amt { color: #1F9CD8; font-family: 'Poppins', sans-serif; font-weight: 800; text-align: right; }
.gl .lv-row .amt small { display: block; color: #6C8098; font-family: 'Nunito', sans-serif; }
.gl .lv-rows .lb-pager { margin-top: 8px; }
.gl .lb-pg { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #CFE6F5; background: #fff; color: #0B2C57; font: 800 14px 'Poppins', sans-serif; cursor: pointer; }
.gl .lb-pg.on { background: #0B2C57; border-color: #0B2C57; color: #fff; }
.gl-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 800; color: #1F7BC0 !important; text-decoration: none !important; }
/* the recap's hero */
.gl .recap-hero { background: linear-gradient(135deg, #0B2C57 0%, #123B70 100%); border: none; border-radius: 20px; color: #fff; }
.gl .recap-hero .n { color: #fff; }
.gl .recap-hero .k, .gl .recap-hero .d { color: rgba(255,255,255,.8); }
/* the "View all" window: its cards from #4, 2 per row (1 on a phone) */
.sg-modal .box.gl { width: min(900px, 94vw); }
.sg-modal .box.gl .lb-rows-platform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .sg-modal .box.gl .lb-rows-platform { grid-template-columns: 1fr; } }
.sg-modal .box.gl .lb-pager { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.sg-modal .box.gl .lb-pager[hidden] { display: none; }

/* the live: the compact podium (a small photo beside the name — the page has a lot of content) */
.gl .rail-podium .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gl .rail-podium .lb-podium-card { align-items: center; padding: 10px 12px; background: #fff; border: 1.5px solid #CFE6F5; border-radius: 16px; }
.gl .rail-podium .lb-podium-card.click:hover { border-color: #2BB3E3; box-shadow: 0 8px 20px rgba(11,44,87,.1); }
/* the avatar as it was in this podium: square, as tall as the 4 lines beside it */
.gl .rail-podium .lb-podium-av { width: 94px; height: 94px; aspect-ratio: auto; align-self: center; background: linear-gradient(135deg, #0B2C57, #1F5FA0); border-radius: 14px; }
.gl .rail-podium .lb-podium-img { border-radius: 11px; }
.gl .rail-podium .lb-podium-badge { border-color: #fff; }
.gl .rail-podium .lb-podium-body .pname { font: 800 14.5px 'Poppins', sans-serif; }
.gl .rail-podium .lb-podium-body .role { color: #6C8098; }
.gl .rail-podium .lb-podium-amt { font-size: 14px; color: #1F9CD8; }
.gl .rail-podium .clickcue { margin-top: 4px; font-size: 12px; font-weight: 800; color: #E63329; }
@media (max-width: 700px) { .gl .rail-podium .podium { grid-template-columns: 1fr; } }
/* the key figures (as on /gift) */
.gl .gt-stats-wrap { margin: 0 0 22px; }

/* the live's columns: the header on ONE line (title · View all · Auto-scroll), the title never cut; the lines
   enter at the top (Gifts, Messages, Notifications) so the list starts at the top — no empty space above it */
.gl .col-head-4 { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
.gl .col-head-4 .left { flex: 1 1 auto; min-width: 0; gap: 8px; }
.gl .col-head-4 .title { flex: none; letter-spacing: .03em; }
.gl .col-head-4 .col-viewall { flex: none; white-space: nowrap; }
.gl .col-head-4 .autoscroll-toggle { flex: none; white-space: nowrap; padding: 3px 8px; font-size: 11px; }
.gl :is(#giftFeedMini, #chatFeedMini, #notifFeedMini):not(.empty) { justify-content: flex-start; }
/* the past lives' period filter: as wide as its text, no border (a white pill on the page) */
.gl #livesFilter select { width: auto; max-width: none; flex: none; border: none; border-radius: 12px; padding: 9px 36px 9px 14px; font: 800 14px 'Nunito', system-ui, sans-serif; box-shadow: 0 1px 3px rgba(11,44,87,.08); }

/* ---- the gift-history pass (history-pass.js) ---- */
/* the gifts modal: totals, the blurred locked lines, Débloquer */
.sg-modal table.sg-gt .hp-tot td { padding: 12px 0 2px; border: none; }
.sg-modal .hp-tot-in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; padding: 10px 14px; border-radius: 12px;
    background: #E7F7EE; border: 1.5px solid #BFE8CF; color: #1E7A45; font-weight: 700; }
.sg-modal .hp-tot-in b { color: #1E7A45; }
.sg-modal .box .hd b .hp-who { color: #FF6B5E; }   /* the gifter's name, red on the navy band */
.sg-modal table.sg-gt .hp-tot .hp-dia { color: #1F9CD8; }
.sg-modal table.sg-gt .hp-fake td { filter: blur(5px); opacity: .55; user-select: none; }
.sg-modal table.sg-gt .hp-lockrow td { padding: 0; border: none; }
.hp-lockcta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: -70px; padding: 18px 10px; position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 45%); color: #0B2C57; }
.hp-lockcta i.fa-lock { color: #0B2C57; }
/* the payment window */
.sg-modal .box.hp-box { max-width: 520px; }
.hp-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: #F4F9FC; border: 1.5px solid #CFE6F5; }
.hp-tabs button { flex: 1; min-width: 0; height: 40px; border: none; border-radius: 9px; background: none; color: #6C8098; font: 700 14px 'Poppins', sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-tabs button.on { background: #0B2C57; color: #fff; }
.hp-save { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #E7F7EE; color: #1E7A45; font-size: 11px; }
.hp-price { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.hp-price img { width: 34px; height: 34px; }
.hp-price b { font: 800 34px 'Poppins', sans-serif; color: #0B2C57; }
.hp-price span { font-weight: 700; color: #6C8098; }
.hp-gives { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-gives li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #0B2C57; }
.hp-gives i { width: 18px; color: #E63329; }
.hp-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border: 1.5px solid #CFE6F5; border-radius: 12px; font-size: 14px; line-height: 1.45; color: #0B2C57; cursor: pointer; }
.hp-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #E63329; flex: none; }
.hp-bal { margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; font-weight: 800; color: #0B2C57; }
.hp-bal img { width: 20px; height: 20px; }
.hp-msg { min-height: 20px; margin: 4px 0 10px; font-size: 14px; font-weight: 700; color: #6C8098; }
.hp-msg.err { color: #E63329; } .hp-msg.ok { color: #1E9E55; }
.hp-msg a { color: #E63329; text-decoration: underline; }
.lb-unlock.hp-pay { width: 100%; justify-content: center; }
.lb-unlock:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.lb-unlock.busy { opacity: .6; cursor: progress; }
.hp-ok { color: #1E9E55; font-weight: 800; }
/* the past lives: an old live without the pass, blurred with Débloquer */
.gl .lv-row.lv-locked { position: relative; overflow: hidden; cursor: default; }
.gl .lv-row.lv-locked > :not(.lv-lock) { filter: blur(5px); opacity: .55; user-select: none; }
.gl .lv-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.95) 70%); }
.gl .lv-lock .lb-unlock { margin: 0; height: 40px; padding: 0 18px; font-size: 14px; }
.gl .lv-lock span { font-weight: 800; color: #0B2C57; }