/* Deposit / withdrawal form surfaces, and the two gold utilities that replace
 * the hand-written orange gradients scattered through views.js.
 *
 * A separate stylesheet rather than more of theme-sun.css: theme-sun is a
 * 4,000-line theme whose job is to repaint Tailwind output from a distance,
 * and these are components with their own markup. Loading it after theme-sun
 * also means these rules win without a single !important.
 *
 * Why the deposit page needed more than a recolour: its orange was eight
 * `bg-orange-500` quick-amount buttons written straight into views.js, which
 * is why the hue rotation that gilded the rest of the site left this screen
 * untouched. Those eight solid blocks also made choosing an amount the
 * heaviest thing on the page, while the two facts that decide whether the
 * money actually arrives — which account to send to, and that the reference
 * must be the player's own id — were grey rows and a line of small print.
 * Support's most common ticket is a transfer that arrives with no reference.
 *
 * Every colour here is an existing theme token.
 */

/* ------------------------------------------------------------------ */
/* gold utilities (replace from-yellow-500 to-orange-500 and friends)  */
/* ------------------------------------------------------------------ */
.s96-cta-gold {
    background: linear-gradient(90deg, var(--lava-core, #C9A227), var(--lava-orange, #E3C04A) 50%, var(--lava-yellow, #FFD700));
    color: #1a1403;
}
.s96-cta-gold:hover { filter: brightness(1.1); }

.s96-bar-gold {
    background: linear-gradient(90deg, var(--lava-core, #C9A227), var(--lava-bright, #FFD24A));
}

/* ------------------------------------------------------------------ */
/* deposit                                                             */
/* ------------------------------------------------------------------ */
.dep2 { padding: 16px; }

/* step rail: three steps, so the player knows a slip is still coming */
.dep-rail-bars { display: flex; gap: 6px; }
.dep-rail-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.09); }
.dep-rail-bars span.on {
    background: linear-gradient(90deg, var(--lava-core, #C9A227), var(--lava-orange, #E3C04A));
}
.dep-rail-lbl {
    display: flex; justify-content: space-between; margin: 7px 0 18px;
    font-size: 10.5px; letter-spacing: .3px;
}
.dep-rail-lbl b { color: var(--text-accent, #FFD24A); font-weight: 600; }
.dep-rail-lbl i { color: var(--text-muted, #8a909c); font-style: normal; }

/* advisory: one quiet block. It used to be a standing caution, a rule and a
   temporary outage shouting at the same weight, which a player reads once. */
.dep-advisory {
    margin-bottom: 16px; padding: 11px 13px; border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-left: 2px solid var(--lava-core, #C9A227);
}
.dep-advisory h5 { font-size: 11.5px; font-weight: 600; color: #f2f4f7; margin-bottom: 5px; }
.dep-advisory ul { list-style: none; margin: 0; padding: 0; }
.dep-advisory li { font-size: 10.5px; line-height: 1.65; color: var(--text-muted, #8a909c); }

/* amount: the thing being typed, at the size of the thing being typed */
.dep-amount {
    background: var(--sun-slate-card, #20242b);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; padding: 14px 16px 12px;
}
.dep-amount > label {
    display: block; font-size: 10.5px; letter-spacing: .9px;
    text-transform: uppercase; color: var(--text-muted, #8a909c);
}
.dep-amount-row { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.dep-amount-row > span { font-size: 14px; font-weight: 700; color: var(--text-muted, #8a909c); }
.dep-amount input {
    flex: 1; width: 100%; min-width: 0; background: none; border: 0; outline: 0; padding: 0;
    color: #fff; font-size: 31px; font-weight: 700; letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
/* the native spinners clip a 31px field */
.dep-amount input::-webkit-outer-spin-button,
.dep-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dep-amount input[type=number] { -moz-appearance: textfield; }
.dep-amount-rule {
    height: 2px; margin-top: 9px; border-radius: 2px;
    background: linear-gradient(90deg, var(--lava-core, #C9A227), rgba(227,192,74,0));
}
.dep-amount-hint { font-size: 10.5px; color: var(--text-muted, #8a909c); margin-top: 8px; }

/* quick amounts: outlined, because choosing 50 is not the hard part */
.dep-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 12px; }
.dep-chips-3 { grid-template-columns: repeat(3, 1fr); margin-top: 7px; }
.dep-chip {
    padding: 9px 0; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer;
    color: var(--text-muted, #8a909c); background: var(--sun-slate-card, #20242b);
    border: 1px solid rgba(255,255,255,.07);
    transition: color .15s, border-color .15s;
}
.dep-chip:hover { color: #f2f4f7; border-color: rgba(227,192,74,.35); }
.dep-chip.is-on {
    color: #1a1403; font-weight: 800; border-color: transparent;
    background: linear-gradient(180deg, var(--lava-orange, #E3C04A), var(--lava-core, #C9A227));
}

/* sections */
.dep-sec { margin-top: 22px; }
.dep-sec > h4 {
    display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
    font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--text-muted, #8a909c); font-weight: 600;
}
.dep-sec > h4::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.07); }

.dep-list {
    background: var(--sun-slate-card, #20242b); border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; overflow: hidden;
}
.dep-li { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dep-li:last-child { border-bottom: 0; }
.dep-li .k { width: 104px; flex-shrink: 0; font-size: 12px; color: var(--text-muted, #8a909c); }
.dep-li .v {
    font-size: 14px; font-weight: 600; color: #f2f4f7; letter-spacing: .2px;
    overflow-wrap: anywhere;
}

.dep-copy {
    margin-left: auto; flex-shrink: 0; padding: 4px 9px; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    color: var(--text-accent, #FFD24A); background: none;
    border: 1px solid rgba(227,192,74,.28);
}
.dep-copy.is-done { color: #7ddc9a; border-color: rgba(125,220,154,.4); }

/* the reference — the one value a wrong entry makes unrecoverable without
   support, so it is the only thing on this page that is coloured */
.dep-ref {
    margin-top: 22px; border-radius: 14px; overflow: hidden;
    background: rgba(201,162,39,.07); border: 1px solid var(--border-lava, rgba(214,172,20,.2));
}
.dep-ref-row { display: flex; align-items: center; padding: 12px 15px; }
.dep-ref-row .k { width: 104px; flex-shrink: 0; font-size: 12px; color: var(--text-muted, #8a909c); }
.dep-ref-row .v {
    font-size: 17px; font-weight: 700; letter-spacing: .4px;
    color: var(--text-accent, #FFD24A); overflow-wrap: anywhere;
}
.dep-ref-note {
    padding: 0 15px 12px; font-size: 11.5px; line-height: 1.5;
    color: var(--text-muted, #8a909c);
}
.dep-ref-note b { color: #f2f4f7; }

/* your transfer */
.dep-fields { display: flex; gap: 8px; }
.dep-field {
    flex: 1; min-width: 0; display: block; padding: 10px 13px; border-radius: 11px;
    background: var(--sun-slate-card, #20242b); border: 1px solid rgba(255,255,255,.07);
}
.dep-field > span {
    display: block; font-size: 10px; letter-spacing: .7px;
    text-transform: uppercase; color: var(--text-muted, #8a909c);
}
.dep-field select {
    width: 100%; margin-top: 3px; padding: 0; background: none; border: 0; outline: 0;
    font-size: 13.5px; font-weight: 600; color: #f2f4f7;
}
.dep-time { display: flex; gap: 4px; margin-top: 3px; }
.dep-time select {
    flex: 1; min-width: 0; padding: 0; background: none; border: 0; outline: 0;
    font-size: 13.5px; font-weight: 600; color: #f2f4f7;
}

.dep-drop {
    display: block; width: 100%; margin-top: 9px; padding: 22px 12px; cursor: pointer;
    border: 1px dashed rgba(255,255,255,.14); border-radius: 13px; background: none;
    text-align: center;
}
.dep-drop .ic { display: block; font-size: 19px; color: var(--text-muted, #8a909c); }
.dep-drop .t { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #f2f4f7; }
.dep-drop .s { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-muted, #8a909c); }
.dep-drop.has-file { border-style: solid; border-color: rgba(227,192,74,.35); }
.dep-drop.has-file .s { color: var(--text-accent, #FFD24A); }

.dep-preview { margin-top: 10px; }
.dep-preview img {
    max-height: 180px; border-radius: 11px; border: 1px solid rgba(255,255,255,.07);
}

/* actions */
.dep-submit {
    display: block; width: 100%; margin-top: 20px; padding: 15px 0; cursor: pointer;
    border: 0; border-radius: 13px; font-size: 14px; font-weight: 800; letter-spacing: .7px;
    color: #1a1403;
    background: linear-gradient(180deg, var(--lava-orange, #E3C04A), var(--lava-core, #C9A227));
    box-shadow: 0 6px 18px rgba(201,162,39,.2);
}
.dep-submit:hover { filter: brightness(1.06); }
.dep-submit:disabled { opacity: .45; box-shadow: none; }
.dep-cancel {
    display: block; width: 100%; margin: 9px 0 0; padding: 13px 0; cursor: pointer;
    border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: none;
    font-size: 12px; font-weight: 600; letter-spacing: .7px; color: var(--text-muted, #8a909c);
}
.dep-cancel:hover { color: #f2f4f7; }

/* ------------------------------------------------------------------ */
/* promo card: an offer you cannot claim must look like one           */
/* ------------------------------------------------------------------ */
/*
 * An image promo card is a picture and nothing else — no button, no state. So
 * a player who used their first-deposit bonus months ago kept seeing the same
 * bright "100% FIRST DEPOSIT" artwork, and one of them deposited $100 and
 * opened a chat asking when it would be matched. The API knew he could not
 * claim it; the card just had nowhere to say so.
 *
 * Dimmed, desaturated, and stamped with the reason. Not hidden: he should
 * still be able to open it and read the terms.
 */
.bonus-card.is-spent { position: relative; }
.bonus-card.is-spent > img {
    filter: grayscale(.5) brightness(.62);
}
.s96-promo-spent {
    position: absolute; z-index: 2;
    left: 0; right: 0; bottom: 0;
    padding: 4px 4px 5px;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.82) 45%);
    color: #fff;
    /* The card can be 100px wide. A rotated stamp in the middle wrapped to
       three lines and covered the artwork; a band across the foot stays
       readable at any tile size and leaves the offer visible behind it. */
    font-size: 8px; font-weight: 800; letter-spacing: .5px; line-height: 1.2;
    text-align: center; text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    pointer-events: none;
}