/*
 * components/popup.css — canonical .popup main block
 *
 * Extracted in M6 from:
 *   main.v28.css lines 2030-2246 (the main contiguous .popup block)
 *
 * NOT MIGRATED (multi-selector rules — stay in main):
 *   line 2155 — .faq__item-heading span, .help span, .popup__tab span
 *   line 2194 — .form-group, .popup.popup--about h4, img.support_hello_img
 *   line 2230 — .keno__bet-settings, .popup__fair-item
 *
 * NOT MIGRATED YET (scattered .popup rules in other locations of main.v28
 *   and 15 rules in auth.v5.css — to be cleaned in subsequent passes):
 *   main:47, 550, 723, 728, 1549, 1970, 2003, 2937, 2943, 2951, 2960,
 *   3247, 3252, 9561, 9567, 9575, 9584, 9867, 10709, 11847, 12256+
 *
 * Loaded AFTER main.v28.css to preserve cascade.
 */

/* === Base === */
.popup {
    width: 700px;
    max-width: calc(100% - 20px);
    border-radius: 2rem;
    display: none;
    visibility: hidden;
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-border, #2e3750);
    padding: 19px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

/* Mobile: popup shrinks to fit narrow viewport */
@media (max-width: 768px) {
    .popup {
        width: calc(100% - 20px);
        border-radius: 1rem;
        padding: 15px;
    }
    .popup.popup--about {
        width: calc(100% - 20px);
    }
}

.popup.active {
    display: block;
}

/* === Title === */
.popup__title {
    position: relative;
    padding: 20px;
}

.popup__title span {
    font-weight: 600;
    font-size: 20px;
}

/* === Form fields inside popup === */
.popup .bx-input__input label,
.popup .bx-input__text {
    font-size: 12px;
}

.popup .bx-input__create-coupon {
    display: -ms-grid;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.popup .bx-input__create-coupon:nth-child(2) {
    display: -ms-grid;
    display: grid;
    margin-top: 10px;
    grid-template-rows: 1fr;
    grid-template-columns: 3fr 1fr;
    grid-gap: 10px;
}

/* === Close button — glass tile, accent-on-hover. The legacy lavender
   radial-gradient looked out of place on the dark wallet/withdraw modals,
   especially on mobile where it occupied a big purple square in the top-
   right. New look: subtle glass with a light border, accent ring on hover.
   On touch devices :hover is gated so it doesn't stick after a tap. === */
.popup .close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    cursor: pointer;
    color: #c5c8d8;
    transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}

@media (hover: hover) and (pointer: fine) {
    .popup .close:hover {
        background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.14);
        border-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.45);
        color: #fff;
    }
}

.popup .close:active { transform: scale(0.94); }

.popup .close .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

@media (max-width: 600px) {
    .popup .close {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
    .popup .close .icon {
        width: 12px;
        height: 12px;
    }

    /* Title row — heading and close button must sit on the same horizontal
       baseline. Equal vertical padding + align-items:center on the row, and
       a min-height ≥ close button so the row has a stable axis. */
    .popup.popup--wallet .popup__title,
    .popup.popup--coupon .popup__title,
    .popup.popup--rules .popup__title {
        padding: 8px 4px !important;
        min-height: 40px;
        align-items: center !important;
    }
    .popup.popup--wallet .popup__title > .close,
    .popup.popup--coupon .popup__title > .close,
    .popup.popup--rules .popup__title > .close,
    .popup.popup--wallet .popup__title > .popup__tabs,
    .popup.popup--coupon .popup__title > .popup__tabs,
    .popup.popup--rules .popup__title > .popup__tabs,
    .popup.popup--rules .popup__title > span {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Rules popup heading — line-height equal to close button height so
       descenders/cap-height don't pull it visually off-axis. */
    .popup.popup--rules .popup__title > span {
        line-height: 32px !important;
        display: inline-flex;
        align-items: center;
    }
}

/* === Content + tabs === */
.popup__content {
    padding: 22px 22px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.popup__tabs {
    position: relative;
    color: #7987ae;
    border: 1px solid #252c40;
    border-radius: 16px;
}

.popup__tabs span {
    font-weight: 600;
    font-size: 14px;
}

.popup__tab {
    position: relative;
    padding: 14px 22px;
    border-radius: 14px;
    cursor: pointer;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border: 2px solid transparent;
}

.popup__tab:hover {
    color: #475a89;
}

.popup__tab .icon {
    width: 0;
    height: 16px;
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
}

.popup__tab--active {
    border: 2px solid #eaecf4;
    color: #475a89;
}

.popup__tab--active .icon {
    width: 16px;
    opacity: 1;
    margin-right: 10px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    color: #fff;
}

/* === popup--about variant === */
.popup.popup--about {
    width: 320px;
}

.popup.popup--about p {
    font-size: 12px;
    line-height: 21px;
    text-align: justify;
    color: #475a89;
}

.popup.popup--about .borders {
    position: relative;
    width: 100%;
    background: url(../images/borders.svg);
    height: 8px;
    margin: 15px 0;
}

.popup.popup--about .bets {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
}

.popup.popup--about .bets .x30__bet-heading {
    border-radius: 15px;
}

/* === Tables inside popup === */
.popup table thead > tr > td {
    font-weight: 500;
    color: #9daac9;
    padding-bottom: 8px;
    font-size: 12px;
}

.popup table tbody > tr > td {
    font-weight: 600;
    color: #fff;
}

/* === Fair (provably-fair) section === */
.popup__fair {
    position: relative;
    margin-top: 20px;
    word-break: break-all;
}

.popup__fair-item b {
    margin-right: 10px;
    width: 90px;
}

.popup__fair-item span {
    width: calc(100% - 90px);
}/* =================================================================
 * Wallet popup v2 redesign — matches jackpot/profile-v2 dark theme
 * ================================================================= */

/* Modal shell — translucent glass,
tenant-accent rim glow */
.popup.popup--wallet,
.popup.popup--coupon,
.popup.popup--rules {
    background: linear-gradient(180deg, rgba(20, 18, 32, 0.55), rgba(12, 10, 22, 0.62));
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 22px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(var(--color-accent-rgb, 184, 58, 58), 0.14) inset;
}/* Crypto methods — 2-column grid.
   HTML: .wallet__methods > .wallet__scroll[ss-container] > .wallet__method (× N)
   slimscroll may wrap children into .ss-content at runtime — handle both cases. */
.popup.popup--wallet .wallet__methods,
.popup.popup--coupon .wallet__methods,
.popup.popup--rules .wallet__methods {
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: 0 0;
    margin: 0;
}.popup.popup--wallet .wallet__scroll,
.popup.popup--coupon .wallet__scroll,
.popup.popup--rules .wallet__scroll {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}/* When slimscroll wraps cards into .ss-content,
lift the grid one level deeper */
.popup.popup--wallet .wallet__scroll:has(.ss-content),
.popup.popup--coupon .wallet__scroll:has(.ss-content),
.popup.popup--rules .wallet__scroll:has(.ss-content) {
    display: block;
}.popup.popup--wallet .wallet__scroll .ss-content,
.popup.popup--coupon .wallet__scroll .ss-content,
.popup.popup--rules .wallet__scroll .ss-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    flex-wrap: unset;
}
@media (max-width: 480px) {
.popup.popup--wallet .wallet__scroll,
.popup.popup--coupon .wallet__scroll,
.popup.popup--wallet .wallet__scroll .ss-content,
.popup.popup--coupon .wallet__scroll .ss-content {
        grid-template-columns: 1fr;
    }}

/* Withdraw form fields — strip the liquid-glass pseudo only on input wrappers (it
   makes input fields look "liquid" and inconsistent with the modal's flat dark style).
   IMPORTANT: do NOT strip it on .liq-effect__button — that's what gives action buttons
   the homepage Deposit/Start Game look. */
.popup.popup--wallet .bx-input.liq-effect::before,
.popup.popup--coupon .bx-input.liq-effect::before,
.popup.popup--wallet .bx-input.liq-effect::after,
.popup.popup--coupon .bx-input.liq-effect::after,
.popup.popup--wallet .bx-input__input.liq-effect::before,
.popup.popup--coupon .bx-input__input.liq-effect::before,
.popup.popup--wallet .bx-input__input.liq-effect::after,
.popup.popup--coupon .bx-input__input.liq-effect::after,
.popup.popup--rules .bx-input.liq-effect::before,
.popup.popup--rules .bx-input.liq-effect::after,
.popup.popup--rules .bx-input__input.liq-effect::before,
.popup.popup--rules .bx-input__input.liq-effect::after {
    display: none;
    content: none;
    background: none;
}.popup.popup--wallet .bx-input.liq-effect,
.popup.popup--coupon .bx-input.liq-effect,
.popup.popup--wallet .bx-input__input.liq-effect,
.popup.popup--coupon .bx-input__input.liq-effect,
.popup.popup--rules .bx-input.liq-effect,
.popup.popup--rules .bx-input__input.liq-effect {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}/* Method tile — full-width inside its grid cell,
name wraps if long */
.popup.popup--wallet .wallet__method,
.popup.popup--coupon .wallet__method,
.popup.popup--wallet .wallet__method.liq-effect,
.popup.popup--coupon .wallet__method.liq-effect,
.popup.popup--rules .wallet__method,
.popup.popup--rules .wallet__method.liq-effect {
    max-width: 100%;
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid transparent;
    border-radius: 8px;
    transition: background 0.16s, border-color 0.16s;
    line-height: 1.2;
    backdrop-filter: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
}.popup.popup--wallet .wallet__method.liq-effect::before,
.popup.popup--coupon .wallet__method.liq-effect::before,
.popup.popup--wallet .wallet__method.liq-effect::after,
.popup.popup--coupon .wallet__method.liq-effect::after,
.popup.popup--rules .wallet__method.liq-effect::before,
.popup.popup--rules .wallet__method.liq-effect::after {
    display: none;
    content: none;
}.popup.popup--wallet .wallet__method:hover,
.popup.popup--coupon .wallet__method:hover,
.popup.popup--rules .wallet__method:hover {
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.10);
    border-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.35);
    border-left-color: var(--color-accent, #B83A3A);
}.popup.popup--wallet .wallet__method.active,
.popup.popup--coupon .wallet__method.active,
.popup.popup--wallet .wallet__method[class*="--active"],
.popup.popup--coupon .wallet__method[class*="--active"],
.popup.popup--rules .wallet__method.active,
.popup.popup--rules .wallet__method[class*="--active"] {
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.16);
    border-color: var(--color-accent, #B83A3A);
    border-left-color: var(--color-accent, #B83A3A);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb, 184, 58, 58), 0.20);
}
/* Picker — pointer cursor MUST cascade through inner text/img too. The
   global `span { cursor: default }` in reset.css would otherwise win. */
.popup.popup--wallet .wallet__methods .wallet__method,
.popup.popup--wallet .wallet__methods .wallet__method *,
.popup.popup--coupon .wallet__methods .wallet__method,
.popup.popup--coupon .wallet__methods .wallet__method *,
.popup.popup--rules .wallet__methods .wallet__method,
.popup.popup--rules .wallet__methods .wallet__method * {
    cursor: pointer !important;
}

/* History rows — the same .wallet__method block is reused, but here the
   row is non-clickable. Force default cursor on row + every inner node. */
.popup.popup--wallet .wallet__history .wallet__history-item,
.popup.popup--wallet .wallet__history .wallet__history-item *,
.popup.popup--wallet .wallet__history .wallet__method,
.popup.popup--wallet .wallet__history .wallet__method * {
    cursor: default !important;
}
/* Cancel link in the pending-status pill is the ONE clickable thing in a
   history row — restore pointer for it. */
.popup.popup--wallet .wallet__history .wallet__history-status a {
    cursor: pointer !important;
}

/* When this row is the user's CURRENTLY-active deposit (the one already
   shown in full inside the wallet modal), hide the "Open payment" and
   "Cancel" links from the row — both actions are reachable from the
   active-deposit panel above. The pending text "Expectation..." stays. */
.popup.popup--wallet .wallet__history .wallet__history-item.is-active-deposit .wallet__history-status a {
    display: none !important;
}
.popup.popup--wallet .wallet__history .wallet__history-item.is-active-deposit .wallet__history-status br {
    display: none;
}

/* History row internal spacing: separate the crypto-method tile from
   the amount block so the figure isn't pressed up against the icon. */
.popup.popup--wallet .wallet__history .wallet__history-left {
    gap: 14px;
}
.popup.popup--wallet .wallet__history .wallet__method {
    margin-right: 0;
}

.popup.popup--wallet .wallet__method img,
.popup.popup--coupon .wallet__method img,
.popup.popup--rules .wallet__method img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 10px;
}.popup.popup--wallet .wallet__method > .d-flex,
.popup.popup--coupon .wallet__method > .d-flex,
.popup.popup--rules .wallet__method > .d-flex {
    flex: 1 1 auto;
    min-width: 0;
}.popup.popup--wallet .wallet__method span,
.popup.popup--coupon .wallet__method span,
.popup.popup--rules .wallet__method span {
    color: #e8e8f0;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    display: block;
    width: 100%;
}.popup.popup--wallet .wallet__method b,
.popup.popup--coupon .wallet__method b,
.popup.popup--rules .wallet__method b {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
}/* Section titles inside the popup */
.popup.popup--wallet .popup__title span,
.popup.popup--coupon .popup__title span,
.popup.popup--wallet h3,
.popup.popup--coupon h3,
.popup.popup--wallet .wallet__title,
.popup.popup--coupon .wallet__title,
.popup.popup--rules .popup__title span,
.popup.popup--rules h3,
.popup.popup--rules .wallet__title {
    color: #fff;
    font-family: 'Inter', 'Google Sans', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.4px;
}/* Inputs inside popup — flat,
accent focus ring */
.popup.popup--wallet .bx-input,
.popup.popup--coupon .bx-input,
.popup.popup--wallet .bx-input__input,
.popup.popup--coupon .bx-input__input,
.popup.popup--rules .bx-input,
.popup.popup--rules .bx-input__input {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: border-color 0.18s, box-shadow 0.18s;
}.popup.popup--wallet .bx-input:focus-within,
.popup.popup--coupon .bx-input:focus-within,
.popup.popup--wallet .bx-input__input:focus-within,
.popup.popup--coupon .bx-input__input:focus-within,
.popup.popup--rules .bx-input:focus-within,
.popup.popup--rules .bx-input__input:focus-within {
    border-color: var(--color-accent, #B83A3A);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 184, 58, 58), 0.15);
}/* Action buttons — re-use the homepage Deposit/Start Game look.
   The .liq-effect__button class (defined in components/card.css) provides the
   liquid-glass + rotating border via ::before/::after pseudo-elements.
   We only set typography + sizing here; the visual fill comes from liq-effect. */
.popup.popup--wallet .banner__button,
.popup.popup--coupon .banner__button,
.popup.popup--wallet .liq-effect__button,
.popup.popup--coupon .liq-effect__button,
.popup.popup--rules .banner__button,
.popup.popup--rules .liq-effect__button {
    color: #fff;
    border-radius: 12px;
    padding: 12px 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 13px;
    line-height: 1;
    min-height: 48px;
    gap: 8px;
    cursor: pointer;
    background: transparent;
}/* =========================================================================
 * Wallet form — compact,
identical structure for deposit and withdraw.
 *
 *   .wallet__form
 *     .wallet__hint            <- Min. DEPOSIT/WITHDRAW (small inline text)
 *     .bx-input                <- amount input
 *     .wallet__row             <- promo|wallet input + CTA button (one row)
 *     .wallet__summary         <- Total / Will be credited (small line)
 * ========================================================================= */
.popup.popup--wallet .wallet__form,
.popup.popup--coupon .wallet__form,
.popup.popup--rules .wallet__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
}/* Min hint — single subdued line; small top breathing room
   to separate it from the crypto-method tiles above. */
.popup.popup--wallet .wallet__hint,
.popup.popup--coupon .wallet__hint,
.popup.popup--rules .wallet__hint {
    color: #8a8aa0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    margin: 8px 2px 4px 2px;
}.popup.popup--wallet .wallet__hint b,
.popup.popup--coupon .wallet__hint b,
.popup.popup--wallet .wallet__hint b > span,
.popup.popup--coupon .wallet__hint b > span,
.popup.popup--rules .wallet__hint b,
.popup.popup--rules .wallet__hint b > span {
    color: #e8e8f0;
    font-weight: 700;
}/* Only the immediate child <span> (the "USD" unit) is accent-colored —
   not nested spans like #min_sum_withdraws which sit inside <b>. */
.popup.popup--wallet .wallet__hint > span,
.popup.popup--coupon .wallet__hint > span,
.popup.popup--rules .wallet__hint > span {
    color: var(--color-accent, #B83A3A);
    font-weight: 700;
}/* Inputs — single compact tile */
.popup.popup--wallet .wallet__form .bx-input,
.popup.popup--coupon .wallet__form .bx-input,
.popup.popup--rules .wallet__form .bx-input {
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}.popup.popup--wallet .wallet__form .bx-input__input,
.popup.popup--coupon .wallet__form .bx-input__input,
.popup.popup--rules .wallet__form .bx-input__input {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}.popup.popup--wallet .wallet__form .bx-input__input input,
.popup.popup--coupon .wallet__form .bx-input__input input,
.popup.popup--rules .wallet__form .bx-input__input input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 13px;
    text-align: left;
    width: 100%;
    padding: 0;
    height: 28px;
}
.popup.popup--wallet .wallet__form .bx-input__suffix,
.popup.popup--coupon .wallet__form .bx-input__suffix,
.popup.popup--rules .wallet__form .bx-input__suffix {
    color: var(--color-accent, #B83A3A);
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* Leading icon inside input — sits before the placeholder/value as a visual hint */
.popup.popup--wallet .bx-input__leading-icon,
.popup.popup--coupon .bx-input__leading-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.55);
    stroke: currentColor;
    fill: none;
    margin-right: 6px;
    pointer-events: none;
}
/* Brighten the icon to the tenant accent when the field is focused */
.popup.popup--wallet .bx-input__input:focus-within .bx-input__leading-icon,
.popup.popup--coupon .bx-input__input:focus-within .bx-input__leading-icon {
    color: var(--color-accent, #B83A3A);
}/* Row: input (flex) + button (auto) */
.popup.popup--wallet .wallet__row,
.popup.popup--coupon .wallet__row,
.popup.popup--rules .wallet__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}/* Compact CTA — height matches the inputs */
/* =================================================================
 * Active-deposit view inside popup--wallet. Shown by JS when the
 * user already has a pending deposit; hides the regular form so the
 * modal acts as a "your deposit is live" panel — address + QR +
 * countdown + rules + cancel — instead of redirecting to /pay.
 *
 * Layout switch: when the active-view sibling is rendered (no [hidden]),
 * the deposit picker (.wallet__methods) and the form (.wallet__form
 * --deposit) collapse to display:none so the active view occupies the
 * full modal width with no awkward leftover space.
 * ================================================================= */
.popup.popup--wallet .wallet wallet--refill,
.popup.popup--wallet .wallet--refill {
    /* Override the legacy `flex-wrap` that left a thin column on the
       left when methods are hidden — once active view shows, the modal
       reads as a single full-width card. */
}
.popup.popup--wallet .wallet--refill:has(.wallet__deposit-active:not([hidden])) .wallet__methods,
.popup.popup--wallet .wallet--refill:has(.wallet__deposit-active:not([hidden])) .wallet__form--deposit {
    display: none !important;
}
.popup.popup--wallet .wallet--refill:has(.wallet__deposit-active:not([hidden])) .wallet__deposit-active {
    width: 100%;
    flex: 1 1 100%;
}

.popup.popup--wallet .wallet__deposit-active {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 2px 4px 2px;
}
.popup.popup--wallet .wallet__deposit-active[hidden] { display: none; }

/* Coin amount header — emphasises what to send. Center alignment (not
   baseline) so the round coin icon sits vertically centred against the
   tall amount text rather than dropping to its baseline. */
.popup.popup--wallet .wallet__deposit-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
}
.popup.popup--wallet .wallet__deposit-coin-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px;
}
.popup.popup--wallet .wallet__deposit-coin-icon:not([src]),
.popup.popup--wallet .wallet__deposit-coin-icon[src=""] { display: none; }

.popup.popup--wallet .wallet__deposit-amount {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    word-break: break-all;
}
/* Copy-amount icon — sits inline with the big crypto figure */
.popup.popup--wallet .wallet__deposit-copy-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #b6b6cc;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    margin-left: 2px;
    flex: 0 0 auto;
}
.popup.popup--wallet .wallet__deposit-copy-amount:hover {
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.18);
    border-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.55);
    color: #fff;
}
.popup.popup--wallet .wallet__deposit-copy-amount:active { transform: scale(0.92); }
.popup.popup--wallet .wallet__deposit-copy-amount.copied {
    background: rgba(46, 170, 110, 0.20);
    border-color: rgba(46, 170, 110, 0.65);
    color: #6fe0a3;
}
.popup.popup--wallet .wallet__deposit-copy-amount svg { display: block; }
.popup.popup--wallet .wallet__deposit-ticker {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent, #B83A3A);
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.popup.popup--wallet .wallet__deposit-usd {
    width: 100%;
    font-size: 12px;
    color: #8a8aa0;
    margin-top: 2px;
}
.popup.popup--wallet .wallet__deposit-usd b { color: #b6b6cc; }

/* QR code — light background so the QR is scannable on dark theme */
.popup.popup--wallet .wallet__deposit-qr {
    align-self: center;
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.popup.popup--wallet .wallet__deposit-qr img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 4px;
}

/* Address row — readonly input + copy button */
.popup.popup--wallet .wallet__deposit-addr {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.popup.popup--wallet .wallet__deposit-addr-input {
    flex: 1 1 auto;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    outline: 0;
    text-overflow: ellipsis;
}
.popup.popup--wallet .wallet__deposit-copy {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(180deg, rgba(var(--color-accent-rgb, 184, 58, 58), 0.85) 0%, rgba(var(--color-accent-rgb, 184, 58, 58), 0.65) 100%);
    border: 0;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.18s;
    box-shadow: 0 4px 14px rgba(var(--color-accent-rgb, 184, 58, 58), 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.popup.popup--wallet .wallet__deposit-copy:hover { transform: translateY(-1px); }
.popup.popup--wallet .wallet__deposit-copy:active { transform: scale(0.98); }
.popup.popup--wallet .wallet__deposit-copy.copied {
    background: linear-gradient(180deg, #2eaa6e 0%, #228855 100%);
}

/* Countdown pill */
.popup.popup--wallet .wallet__deposit-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: #b6b6cc;
}
.popup.popup--wallet .wallet__deposit-timer-value {
    color: #fff;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 1px;
}
.popup.popup--wallet .wallet__deposit-timer.expiring .wallet__deposit-timer-value {
    color: #ff6363;
    animation: walletTimerPulse 1.2s ease-in-out infinite;
}
@keyframes walletTimerPulse {
    50% { opacity: 0.55; }
}

/* Rules text */
.popup.popup--wallet .wallet__deposit-rules {
    font-size: 12px;
    color: #8a8aa0;
    line-height: 1.5;
    text-align: center;
    padding: 0 4px;
}
.popup.popup--wallet .wallet__deposit-rules b { color: #d6d6e0; }

/* Cancel button — translucent danger style, less prominent than a CTA */
.popup.popup--wallet .wallet__deposit-actions {
    display: flex;
    justify-content: center;
}
.popup.popup--wallet .wallet__deposit-cancel {
    height: 36px;
    padding: 0 22px;
    border-radius: 10px;
    background: rgba(255, 80, 80, 0.10);
    border: 1px solid rgba(255, 80, 80, 0.40);
    color: #ff8a8a;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.popup.popup--wallet .wallet__deposit-cancel:hover {
    background: rgba(255, 80, 80, 0.22);
    border-color: rgba(255, 80, 80, 0.70);
    color: #ffb0b0;
}

@media (max-width: 600px) {
    .popup.popup--wallet .wallet__deposit-qr { width: 170px; height: 170px; }
    .popup.popup--wallet .wallet__deposit-amount { font-size: 22px; }
}

.popup.popup--wallet .wallet__cta,
.popup.popup--coupon .wallet__cta,
.popup.popup--rules .wallet__cta {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    border-radius: 10px;
    line-height: 1;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
}.popup.popup--wallet .wallet__cta .icon,
.popup.popup--coupon .wallet__cta .icon,
.popup.popup--rules .wallet__cta .icon {
    width: 12px;
    height: 12px;
}/* Summary line — label and value sit next to each other,
not split across the row. */
.popup.popup--wallet .wallet__summary,
.popup.popup--coupon .wallet__summary,
.popup.popup--rules .wallet__summary {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    color: #8a8aa0;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 2px 0 2px;
}.popup.popup--wallet .wallet__summary b,
.popup.popup--coupon .wallet__summary b,
.popup.popup--wallet .wallet__summary b > span,
.popup.popup--coupon .wallet__summary b > span,
.popup.popup--wallet .wallet__summary .payDep,
.popup.popup--coupon .wallet__summary .payDep,
.popup.popup--wallet .wallet__summary #get_withdraw,
.popup.popup--coupon .wallet__summary #get_withdraw,
.popup.popup--rules .wallet__summary b,
.popup.popup--rules .wallet__summary b > span,
.popup.popup--rules .wallet__summary .payDep,
.popup.popup--rules .wallet__summary #get_withdraw {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}.popup.popup--wallet .wallet__summary-unit,
.popup.popup--coupon .wallet__summary-unit,
.popup.popup--rules .wallet__summary-unit {
    color: var(--color-accent, #B83A3A);
    font-weight: 700;
    font-size: 12px;
    margin-left: 2px;
}/* Make the modal itself a touch tighter to match the dense form */
.popup.popup--wallet .popup__content,
.popup.popup--coupon .popup__content,
.popup.popup--rules .popup__content {
    padding: 14px 16px;
}/* Title bar — keep close button anchored to the top-right corner of the popup
   regardless of how its siblings flex out. Without this the .close anchor
   was falling out of the title row and ending up rendered inline at the
   bottom-left (looked like a stray "#" link). */
.popup.popup--wallet .popup__title,
.popup.popup--coupon .popup__title,
.popup.popup--rules .popup__title {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    padding: 4px 4px 14px 4px;
    margin: 0;
    width: 100%;
}
/* Force the close button to vertically center on the title row regardless
   of legacy theme overrides — was visually drifting below the tab strip
   on mobile. align-self pins it to the cross-axis center. */
.popup.popup--wallet .popup__title > .close,
.popup.popup--coupon .popup__title > .close,
.popup.popup--rules .popup__title > .close {
    align-self: center !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}.popup.popup--wallet .popup__title > .popup__tabs,
.popup.popup--coupon .popup__title > .popup__tabs,
.popup.popup--rules .popup__title > .popup__tabs {
    flex: 1 1 auto;
    min-width: 0;
    /* legacy popup__tabs has a 1px outline + 16px radius — not wanted here */
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    gap: 4px;
}.popup.popup--wallet .popup__tab,
.popup.popup--coupon .popup__tab,
.popup.popup--rules .popup__tab {
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    color: #8a8aa0;
    font-size: 13px;
}.popup.popup--wallet .popup__tab:hover,
.popup.popup--coupon .popup__tab:hover,
.popup.popup--rules .popup__tab:hover {
    color: #e8e8f0;
}/* Active tab — solid translucent accent fill instead of the legacy 2px white outline */
.popup.popup--wallet .popup__tab--active,
.popup.popup--coupon .popup__tab--active,
.popup.popup--rules .popup__tab--active {
    border: 0;
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.16);
    color: #fff;
}
/* Single-tab popups (promo / rules) — the only tab is just a title, not clickable.
   Kill the pointer cursor that .popup__tab { cursor: pointer } sets globally. */
.popup.popup--coupon .popup__tab,
.popup.popup--coupon .popup__tab span,
.popup.popup--coupon .popup__tab .icon,
.popup.popup--rules .popup__tab,
.popup.popup--rules .popup__tab span,
.popup.popup--rules .popup__tab .icon {
    cursor: default;
}.popup.popup--wallet .popup__tab--active .icon,
.popup.popup--coupon .popup__tab--active .icon,
.popup.popup--rules .popup__tab--active .icon {
    color: #fff;
}/* Close button — single-layer dark tile.
   Resets the legacy radial-gradient + inset box-shadow from `.popup .close`
   that was bleeding through (the "double-cross / patch of other background"). */
.popup.popup--wallet .close,
.popup.popup--coupon .close,
.popup.popup--rules .close {
    background: rgba(255, 255, 255, 0.05);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #b6b6cc;
    border-radius: 10px;
    box-shadow: none;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
}.popup.popup--wallet .close::before,
.popup.popup--coupon .close::before,
.popup.popup--wallet .close::after,
.popup.popup--rules .close::before { display: none; content: none; }.popup.popup--wallet .close .icon,
.popup.popup--coupon .close .icon,
.popup.popup--rules .close .icon {
    width: 14px;
    height: 14px;
}.popup.popup--wallet .close:hover,
.popup.popup--coupon .close:hover,
.popup.popup--rules .close:hover {
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.20);
    color: #fff;
    border-color: var(--color-accent, #B83A3A);
}

/* Same look on promo-history popup */
.popup.popup--promo-history { background: linear-gradient(180deg, rgba(20, 18, 32, 0.92), rgba(12, 10, 22, 0.94)) !important; backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 22px !important; }

/* === popup--rules content (Chat rules list) === */
.popup.popup--rules .rules__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #e8e8f0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.popup.popup--rules .rules__list li {
    position: relative;
    margin: 0;
    padding: 6px 10px 6px 28px;
}
/* Round accent bullet for each list item */
.popup.popup--rules .rules__list li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent, #B83A3A);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 184, 58, 58), 0.18);
    flex-shrink: 0;
}
/* Force pointer cursor on every interactive button surface across the wallet/
   coupon/rules popups. Without this the global `span { cursor: default }` rule
   in reset.css makes the cursor flicker to default whenever it crosses a
   <span> child of a button (text label, icon wrapper). */
.popup.popup--wallet .wallet__cta,
.popup.popup--coupon .wallet__cta,
.popup.popup--rules .wallet__cta,
.popup.popup--wallet .wallet__cta *,
.popup.popup--coupon .wallet__cta *,
.popup.popup--rules .wallet__cta *,
.popup.popup--wallet .wallet__cta::before,
.popup.popup--coupon .wallet__cta::before,
.popup.popup--rules .wallet__cta::before,
.popup.popup--wallet .wallet__cta::after,
.popup.popup--coupon .wallet__cta::after,
.popup.popup--rules .wallet__cta::after,
.popup.popup--wallet .close,
.popup.popup--coupon .close,
.popup.popup--rules .close,
.popup.popup--wallet .close *,
.popup.popup--coupon .close *,
.popup.popup--rules .close * {
    cursor: pointer;
}
.popup.popup--rules .rules__note {
    color: #b6b6cc;
    font-size: 13px;
    line-height: 1.5;
    margin: 14px 0 0 0;
    padding: 12px 14px;
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.08);
    border-left: 3px solid var(--color-accent, #B83A3A);
    border-radius: 8px;
}
.popup.popup--rules .wallet__cta {
    align-self: stretch;
    margin-top: 14px;
}

/* ============================================================
   Wallet history rows — redesigned (deposit + withdraw)
   ============================================================ */

.popup.popup--wallet .wallet__history .wallet__history-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 14px 16px !important;
    background: rgba(10, 6, 18, 0.4) !important;
    border: 1px solid rgba(var(--color-accent-rgb, 184, 58, 58), 0.12) !important;
    border-radius: 14px !important;
    transition: border-color 0.15s, background 0.15s;
}
.popup.popup--wallet .wallet__history .wallet__history-item:hover {
    border-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.22) !important;
}
.popup.popup--wallet .wallet__history .wallet__history-row {
    width: 100%;
    gap: 12px;
}
.popup.popup--wallet .wallet__history .wallet__history-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 14px;
    flex-wrap: wrap;
}

/* Compact crypto-method tile (icon + ticker) */
.popup.popup--wallet .wallet__history .wallet__method {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 180px;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    margin: 0 !important;
}
.popup.popup--wallet .wallet__history .wallet__method img {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    flex: 0 0 18px;
}
.popup.popup--wallet .wallet__history .wallet__method > .d-flex,
.popup.popup--wallet .wallet__history .wallet__method span {
    width: auto !important;
    min-width: 0;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
}
.popup.popup--wallet .wallet__history .wallet__method span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #e8e8f0 !important;
    white-space: nowrap;
}

/* Amount block */
.popup.popup--wallet .wallet__history .wallet__history-sum {
    gap: 6px;
    flex: 0 0 auto;
}
.popup.popup--wallet .wallet__history .wallet__history-sum > span {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.popup.popup--wallet .wallet__history .wallet__history-sum > p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.4px;
    align-self: center;
}

/* Wallet address — own row, full width, monospace, truncate with ellipsis */
.popup.popup--wallet .wallet__history .wallet__history-wallet {
    display: flex !important;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    cursor: text;
    user-select: all;
}
.popup.popup--wallet .wallet__history .wallet__history-wallet svg {
    flex: 0 0 12px;
    color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.7);
}
.popup.popup--wallet .wallet__history .wallet__history-wallet span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== STATUS PILL ===== */
.popup.popup--wallet .wallet__history .wallet__history-status--pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px;
    text-transform: capitalize;
    white-space: nowrap;
    flex: 0 0 auto;
    border: 1px solid transparent;
    background: transparent !important;
}
.popup.popup--wallet .wallet__history .wallet__history-status--pill .wallet__history-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 6px;
    box-shadow: 0 0 0 3px currentColor;
    opacity: 0.32;
}
.popup.popup--wallet .wallet__history .wallet__history-status--pill .wallet__history-status-text {
    color: inherit;
    font-weight: 700;
}

/* Pending / Awaiting — neutral info-cyan (processing, not a warning) */
.popup.popup--wallet .wallet__history .wallet__history-status--pill.warning {
    color: #5dc9e8 !important;
    background: rgba(93, 201, 232, 0.10) !important;
    border-color: rgba(93, 201, 232, 0.30) !important;
}
.popup.popup--wallet .wallet__history .wallet__history-status--pill.warning .wallet__history-status-dot {
    background: #5dc9e8;
    color: #5dc9e8;
    animation: walletStatusPulse 1.6s ease-in-out infinite;
}
@keyframes walletStatusPulse {
    0%, 100% { opacity: 0.32; }
    50% { opacity: 0.7; }
}

/* Successfully — green */
.popup.popup--wallet .wallet__history .wallet__history-status--pill.success {
    color: #5ee06a !important;
    background: rgba(94, 224, 106, 0.10) !important;
    border-color: rgba(94, 224, 106, 0.30) !important;
}
.popup.popup--wallet .wallet__history .wallet__history-status--pill.success .wallet__history-status-dot {
    background: #5ee06a;
    color: #5ee06a;
}

/* Cancelled / Error — red */
.popup.popup--wallet .wallet__history .wallet__history-status--pill.error {
    color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.10) !important;
    border-color: rgba(255, 107, 107, 0.32) !important;
}
.popup.popup--wallet .wallet__history .wallet__history-status--pill.error .wallet__history-status-dot {
    background: #ff6b6b;
    color: #ff6b6b;
}

/* Inline cancel link inside processing pill (withdraw) */
.popup.popup--wallet .wallet__history .wallet__history-status--pill .wallet__history-status-cancel {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(93, 201, 232, 0.35);
    color: rgba(93, 201, 232, 0.85) !important;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.popup.popup--wallet .wallet__history .wallet__history-status--pill .wallet__history-status-cancel:hover {
    color: #ff6b6b !important;
}

/* Action row beneath deposit pending row (Open payment + Cancel) */
.popup.popup--wallet .wallet__history .wallet__history-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.popup.popup--wallet .wallet__history .wallet__history-action {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    cursor: pointer;
}
.popup.popup--wallet .wallet__history .wallet__history-action--open {
    color: #fff !important;
}
.popup.popup--wallet .wallet__history .wallet__history-action--open:hover {
    background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.18);
    border-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.4);
}
.popup.popup--wallet .wallet__history .wallet__history-action--cancel {
    color: #ff6b6b !important;
}
.popup.popup--wallet .wallet__history .wallet__history-action--cancel:hover {
    background: rgba(255, 107, 107, 0.10);
    border-color: rgba(255, 107, 107, 0.35);
}

@media (max-width: 480px) {
    .popup.popup--wallet .wallet__history .wallet__history-row {
        flex-wrap: wrap;
    }
    .popup.popup--wallet .wallet__history .wallet__history-status--pill {
        font-size: 10px !important;
        padding: 4px 9px !important;
    }
    .popup.popup--wallet .wallet__history .wallet__history-wallet {
        font-size: 11px;
    }
}