/* ============================================================
   Design tokens - matched to the client's design doc mockups
   Mobile-first: base styles are mobile; @media (min-width) scales up
   ============================================================ */
:root {
    --navy: #0b1120;
    --navy-soft: #0d1b3d;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --teal: #14b8a6;
    --green: #16a34a;
    --green-soft: #dcfce7;
    --red: #dc2626;
    --red-soft: #fee2e2;
    --amber: #d97706;
    --amber-soft: #fef3c7;
    --gold: #f59e0b;
    --ink: #0f172a;
    --muted: #64748b;
    --border: #e5e7eb;
    --panel-bg: #f8f9fb;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

body { background: var(--panel-bg); color: var(--ink); }
.mono { font-family: var(--mono); }
.page-container { max-width: 1100px; }

/* --- Banner strip (dark, always stacked) --- */
.banner-strip {
    background: var(--navy);
    color: #e5e7eb;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.6;
}
.banner-strip .banner-msg { display: block; }
@media (min-width: 576px) {
    .banner-strip { font-size: 0.85rem; }
}

/* --- Brand mark --- */
.brand-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.brand-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
@media (min-width: 576px) {
    .brand-icon { width: 40px; height: 40px; }
    .brand-name { font-size: 1.1rem; }
}

/* --- Top nav --- */
.site-navbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0;
}

/* Header grid: brand | nav | actions, reflows to 2 rows on mobile
   (brand+actions on row 1, nav spanning full width on row 2) so nothing
   gets pushed around unpredictably the way flex + order did. */
.site-navbar-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "nav nav";
    align-items: center;
    row-gap: 0.6rem;
    column-gap: 0.75rem;
}
.nav-area-brand { grid-area: brand; }
.nav-area-actions { grid-area: actions; justify-self: end; }
.nav-area-nav { grid-area: nav; display: flex; justify-content: center; }

@media (min-width: 768px) {
    .site-navbar-grid {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav actions";
        row-gap: 0;
    }
}

/* --- Pill nav: wraps on mobile (no cut-off scroll), single line on desktop --- */
.pill-nav {
    background: #f1f2f5;
    border-radius: 999px;
    padding: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
    max-width: 100%;
}
.pill-nav a {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}
.pill-nav a.active {
    background: #fff; color: var(--blue); font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.pill-nav a:hover:not(.active) { color: var(--ink); }

@media (min-width: 768px) {
    .pill-nav { flex-wrap: nowrap; }
}

.balance-chip {
    background: #eaf1fe;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem;
    white-space: nowrap;
    color: inherit;
    transition: background-color 0.15s ease;
}
.balance-chip:hover { background: #dbe9fd; color: inherit; }
.balance-chip .balance-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.7rem;
}
.balance-chip .balance-amount { font-family: var(--mono); font-weight: 700; }
@media (min-width: 576px) {
    .balance-chip { padding: 0.35rem 0.9rem; font-size: 0.8rem; }
    .balance-chip .balance-icon { width: 26px; height: 26px; }
}

.avatar-circle {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), #10b981);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}

/* --- Admin Center badge --- */
.admin-center-badge {
    background: var(--navy); color: #fff; border-radius: 999px;
    padding: 0.45rem 0.9rem; font-size: 0.8rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    text-decoration: none; white-space: nowrap;
}
.admin-center-badge:hover { color: #fff; opacity: 0.9; }

/* --- Cards --- */
.panel-card {
    background: #fff; border-radius: 0.9rem; border: 1px solid var(--border);
    padding: 1.1rem;
}
@media (min-width: 576px) { .panel-card { padding: 1.5rem; } }

/* --- Number grid --- */
.number-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    max-width: 100%;
}
.powerball-number-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 360px; }
@media (min-width: 576px) {
    .number-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.45rem; max-width: 640px; }
    .powerball-number-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 420px; }
}
@media (min-width: 992px) {
    .number-grid { grid-template-columns: repeat(14, minmax(0, 1fr)); max-width: 720px; }
    .powerball-number-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 520px; }
}

.number-cell {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
@media (min-width: 576px) { .number-cell { font-size: 0.85rem; } }
.number-cell:hover { border-color: var(--blue); }
.number-cell.selected { background: var(--blue); color: #fff; border-color: var(--blue); }

.chosen-badge {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gold); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.78rem;
}
@media (min-width: 576px) { .chosen-badge { width: 34px; height: 34px; font-size: 0.85rem; } }

.chosen-badge.bonus-pick {
    background: linear-gradient(135deg, #ef4444, #991b1b);
}

.chosen-plus {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    padding: 0 0.1rem;
}

.btn-quick-pick {
    background: var(--teal); color: #fff; border: none;
    border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600;
}
.btn-quick-pick:hover { background: #0d9488; color: #fff; }
.btn-clear-pick {
    background: #fff; color: var(--muted); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem;
}

.badge-soft { border-radius: 999px; padding: 0.25rem 0.65rem; font-size: 0.72rem; font-weight: 600; }
.badge-soft-blue { background: #dbeafe; color: var(--blue-dark); }
.badge-soft-green { background: var(--green-soft); color: var(--green); }
.badge-soft-amber { background: var(--amber-soft); color: var(--amber); }
.badge-soft-red { background: var(--red-soft); color: var(--red); }

/* --- Wallet hero card --- */
.wallet-balance-card {
    background: linear-gradient(135deg, var(--navy-soft), var(--blue));
    color: #fff; border-radius: 0.9rem; padding: 1.25rem;
}
.wallet-balance-card .label { font-size: 0.68rem; letter-spacing: 0.06em; opacity: 0.8; text-transform: uppercase; }
.wallet-balance-card .amount { font-family: var(--mono); font-size: 1.8rem; font-weight: 700; }
@media (min-width: 576px) {
    .wallet-balance-card { padding: 1.5rem; }
    .wallet-balance-card .amount { font-size: 2.2rem; }
}

.topup-pill {
    border-radius: 999px; border: 1px solid var(--border); background: #fff;
    padding: 0.45rem 1rem; font-weight: 600; font-size: 0.85rem;
}
.topup-pill:hover { border-color: var(--blue); color: var(--blue); }

/* --- Ticket cards --- */
.ticket-active-card {
    background: linear-gradient(135deg, var(--blue-dark), var(--navy-soft));
    color: #fff; border-radius: 0.9rem; padding: 1.25rem;
}
.ticket-number-chip {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.78rem;
}
.ticket-number-chip.on-light { background: #fff; border: 1px solid var(--border); color: var(--ink); }

/* --- Admin: KPI cards --- */
.kpi-card { background: #fff; border: 1px solid var(--border); border-radius: 0.9rem; padding: 1rem; }
.kpi-card .kpi-label { color: var(--muted); font-size: 0.8rem; }
.kpi-card .kpi-value { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; }
.kpi-card .kpi-sub { color: var(--green); font-size: 0.75rem; }
@media (min-width: 576px) { .kpi-card .kpi-value { font-size: 1.6rem; } }

.btn-pill-green { background: var(--green); color: #fff; border: none; border-radius: 999px; padding: 0.35rem 1rem; font-weight: 600; font-size: 0.82rem; }
.btn-pill-red { background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 0.35rem 1rem; font-weight: 600; font-size: 0.82rem; }
.btn-pill-soft-red { background: var(--red-soft); color: var(--red); border: none; border-radius: 999px; padding: 0.35rem 1rem; font-weight: 600; font-size: 0.82rem; }
.btn-pill-soft-green { background: var(--green-soft); color: var(--green); border: none; border-radius: 999px; padding: 0.35rem 1rem; font-weight: 600; font-size: 0.82rem; }

table.doc-table thead th {
    text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em;
    color: var(--muted); background: #f8f9fb; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.doc-table td { vertical-align: middle; }
.table-responsive-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Support chat --- */
.chat-bubble-mine {
    background: var(--blue); color: #fff; border-radius: 1rem 1rem 0.25rem 1rem;
    padding: 0.65rem 0.9rem; max-width: 88%;
}
.chat-bubble-theirs {
    background: #fff; border: 1px solid var(--border); border-radius: 1rem 1rem 1rem 0.25rem;
    padding: 0.65rem 0.9rem; max-width: 88%;
}
@media (min-width: 576px) { .chat-bubble-mine, .chat-bubble-theirs { max-width: 75%; } }
.quick-issue-btn {
    background: #fff; border: 1px solid var(--border); border-radius: 0.6rem;
    padding: 0.55rem 0.8rem; text-align: left; width: 100%; font-size: 0.85rem;
}
.quick-issue-btn:hover { border-color: var(--blue); }

/* ============================================================
   Home page: per-draw-type theming (Lotto gold/brown, Powerball blue)
   ============================================================ */
.theme-lotto {
    --dt-accent: #d97706;
    --dt-accent-dark: #92400e;
    --dt-panel-grad: linear-gradient(135deg, #3d2410, #78350f);
    --dt-ball-grad: linear-gradient(135deg, #f2c14e, #b8860b);
}
.theme-powerball {
    --dt-accent: #2563eb;
    --dt-accent-dark: #1e3a8a;
    --dt-panel-grad: linear-gradient(135deg, #0d1b3d, #1d4ed8);
    --dt-ball-grad: linear-gradient(135deg, #7fa8f5, #2563eb);
}

/* --- Draw-type top-level tabs (SA LOTTO / POWERBALL) - pill toggle matching mockup --- */
.draw-type-tabs {
    display: flex; gap: 0.35rem; margin-bottom: 1rem;
    background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.3rem;
}
.draw-type-tab {
    flex: 1; text-align: center; padding: 0.6rem 1rem;
    border-radius: 999px; border: none;
    background: transparent; font-weight: 700; letter-spacing: 0.03em;
    color: rgba(255,255,255,0.75); cursor: pointer; font-size: 0.85rem;
    text-decoration: none;
}
.draw-type-tab.active { background: rgba(0,0,0,0.28); color: #fff; }

/* Badge used inline with headings ("Ticket Selection") on a band */
.badge-gold { background: #ffd25c; color: #211a06; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 700; }

/* --- Jackpot card --- */
.jackpot-card {
    border-radius: 0.9rem; padding: 1.25rem; color: #fff;
    background: rgba(0,0,0,0.16);
    border: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 1rem;
}
.jackpot-card .jackpot-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; text-align: center; }
.jackpot-card .jackpot-amount { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; text-align: center; color: #fde68a; }
@media (min-width: 576px) { .jackpot-card .jackpot-amount { font-size: 2.4rem; } }
.jackpot-countdown { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.jackpot-countdown .cd-unit {
    background: rgba(255,255,255,0.12); border-radius: 0.4rem;
    padding: 0.35rem 0.6rem; font-family: var(--mono); font-size: 0.85rem; min-width: 48px; text-align: center;
}
.jackpot-meta { display: flex; justify-content: space-between; font-size: 0.72rem; opacity: 0.85; margin-top: 0.5rem; }

/* --- Sub-tabs: Play / Prize Money / Results --- */
.subtab-nav {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 0.3rem;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    margin-left: auto;
    margin-right: auto;
}
.subtab-btn {
    padding: 0.45rem 1.1rem; border-radius: 999px; border: none;
    background: transparent; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75);
    white-space: nowrap;
}
.subtab-btn.active { background: #ffd25c; color: #211a06; }

/* --- Result / prize balls --- */
.result-ball {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; color: #fff;
    background: var(--dt-ball-grad);
    box-shadow: inset 0 -3px 4px rgba(0,0,0,0.25);
}
.result-ball.bonus-ball { background: linear-gradient(135deg, #ef4444, #991b1b); }

/* --- Prize money table (on-band: white text) --- */
table.prize-money-table,
table.prize-money-table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #fff !important;
}
table.prize-money-table thead th {
    text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.7); border-bottom: 2px solid #ffd25c;
}
table.prize-money-table td { border-color: rgba(255,255,255,0.15) !important; }
table.prize-money-table td:first-child { font-weight: 700; }
table.prize-money-table tr:first-child td { font-weight: 700; color: #ffd25c !important; }

/* --- My Tickets: per-draw-type gradient cards (matching Cart mockup) --- */
.ticket-gradient-card {
    border-radius: 1rem; padding: 1.1rem 1.25rem; color: #fff; margin-bottom: 1rem;
}
@media (min-width: 576px) { .ticket-gradient-card { padding: 1.25rem 1.5rem; } }
.ticket-gradient-card.theme-lotto { background: linear-gradient(135deg, #8a5a1e, #5c3a10); }
.ticket-gradient-card.theme-powerball { background: linear-gradient(135deg, #2563eb, #123761); }
.popup-clock-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: #fef3c7; color: #d97706;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 0.75rem;
}

/* ============================================================
   Full-bleed page color band (Phase 1.1) - blue by default for
   every customer page; Home overrides with dynamic brown/blue
   per active draw-type tab, applied to its own wrapper directly.
   ============================================================ */
.page-theme-band {
    width: 100%;
    min-height: 60vh;
    padding-bottom: 2rem;
    color: #fff;
}
.page-theme-band.band-blue { background: linear-gradient(180deg, #1a4a82 0%, #123761 100%); }
.page-theme-band.band-lotto { background: linear-gradient(180deg, #6b4018 0%, #4a2c10 100%); }
.page-theme-band.band-powerball { background: linear-gradient(180deg, #1a4a82 0%, #123761 100%); }

/* Card sitting on a color band - translucent lighter panel, not stark white,
   matching the mockups' subtle-contrast card style. Form controls inside keep
   Bootstrap's default white background, which already gives the right contrast
   without any override. */
.panel-card-on-band {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 1rem;
    padding: 1.1rem;
    color: #fff;
}
@media (min-width: 576px) { .panel-card-on-band { padding: 1.5rem; } }
.panel-card-on-band h2, .panel-card-on-band h3, .panel-card-on-band h4,
.panel-card-on-band h5, .panel-card-on-band h6 { color: #fff; }
.panel-card-on-band .text-muted { color: rgba(255,255,255,0.72) !important; }
.panel-card-on-band label.form-label { color: rgba(255,255,255,0.9); }
.panel-card-on-band hr { border-color: rgba(255,255,255,0.25); }
.panel-card-on-band a:not(.btn) { color: #ffd25c; }

/* Balance hero card on a band (Wallet's big balance number) */
.band-balance-hero {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.band-balance-hero .label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; opacity: 0.75; }
.band-balance-hero .amount { font-family: var(--mono); font-size: 2rem; font-weight: 700; }

/* Table on a band (Wallet transaction history) */
table.band-table,
table.band-table > :not(caption) > * > * {
    background-color: transparent !important;
}
table.band-table thead th {
    text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
table.band-table td { color: #fff; border-color: rgba(255,255,255,0.12) !important; }

/* --- Gold primary CTA, used across every band page --- */
.btn-gold {
    background: linear-gradient(135deg, #ffd25c, #f5b800);
    border: none; color: #211a06; font-weight: 700;
}
.btn-gold:hover { background: linear-gradient(135deg, #ffdb7a, #ffc61a); color: #211a06; }
.btn-gold:disabled { opacity: 0.5; }

.btn-outline-gold {
    background: transparent; border: 2px solid #ffd25c; color: #ffd25c; font-weight: 700;
}
.btn-outline-gold:hover { background: rgba(255,210,92,0.12); color: #ffd25c; }
.btn-outline-gold:disabled { opacity: 0.4; border-color: rgba(255,210,92,0.4); color: rgba(255,210,92,0.4); }

/* --- Cart icon placeholder in the header (visual only for now) --- */
.cart-icon-placeholder {
    color: var(--ink);
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
    position: relative;
}

    .cart-icon-placeholder:hover {
        color: var(--ink);
        opacity: 1;
    }

.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
}

/* --- UPI app deep-link buttons on the wallet top-up QR page - hidden until JS
   confirms Android (see the inline script in WalletTopUpQr.cshtml), since these
   deep links only work reliably on Android. Not using Bootstrap's d-none here
   deliberately - it would conflict with d-flex once JS reveals the container,
   since both apply !important and the winner depends on stylesheet order. */
.upi-app-buttons-hidden { display: none; }