/* =========================================================
   LUTHERBET
   DEPOSIT PAGE
========================================================= */

.deposit-page {
    --deposit-bg: var(--bg-panel);
    --deposit-card: var(--bg-panel);
    --deposit-card-2: var(--bg-panel);

    --deposit-border: var(--border);
    --deposit-border-gold: rgba(var(--primary-rgb), .32);

    --deposit-text: var(--text-primary);
    --deposit-muted: var(--text-muted);
    --deposit-muted-2: var(--text-dim);

    --deposit-gold: var(--menu-gold);
    --deposit-gold-light: var(--primary-light);
    --deposit-gold-dark: var(--primary-dark);

    --deposit-danger: var(--danger);
    --deposit-success: var(--success);

    width: 100%;
    max-width: 1180px;

    margin:
        0
        auto;

    padding:
        4px
        0
        34px;

    color:
        var(--deposit-text);
}


/* =========================================================
   PAGE HEADER
========================================================= */

.deposit-page-head {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        20px;
}


.deposit-page-heading {
    min-width:
        0;
}


.deposit-page-kicker {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        22px;

    margin-bottom:
        7px;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(var(--primary-rgb), .18);

    border-radius:
        999px;

    color:
        var(--deposit-gold-light);

    background:
        rgba(var(--primary-rgb), .055);

    font-size:
        .58rem;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.deposit-page-heading h1 {
    margin:
        0;

    color:
        var(--text-primary);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );

    font-weight:
        900;

    line-height:
        1.1;

    letter-spacing:
        -.035em;
}


.deposit-page-heading p {
    max-width:
        600px;

    margin:
        8px
        0
        0;

    color:
        var(--deposit-muted);

    font-size:
        .78rem;

    line-height:
        1.55;
}


.deposit-page-security {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        34px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(var(--success-rgb), .15);

    border-radius:
        9px;

    color:
        var(--success);

    background:
        rgba(var(--success-rgb), .05);

    font-size:
        .65rem;

    font-weight:
        800;
}


.deposit-page-security i {
    font-size:
        1rem;
}


/* =========================================================
   FILTERS
========================================================= */

.deposit-filters {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        16px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.deposit-filters::-webkit-scrollbar {
    display:
        none;
}


.deposit-filter {
    flex:
        0 0 auto;

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0
        14px;

    border:
        1px solid
        var(--deposit-border);

    border-radius:
        10px;

    color:
        var(--text-muted);

    background:
        var(--glass-bg-subtle);

    font-family:
        inherit;

    font-size:
        .68rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.deposit-filter i {
    font-size:
        .95rem;
}


.deposit-filter:hover {
    color:
        var(--text-primary);

    border-color:
        rgba(var(--primary-rgb), .22);

    background:
        rgba(var(--primary-rgb), .045);
}


.deposit-filter.is-active {
    color:
        var(--text-inverse);

    border-color:
        rgba(var(--primary-rgb), .6);

    background:
        linear-gradient(
            180deg,
            var(--primary-light) 0%,
            var(--primary) 55%,
            var(--primary-dark) 100%
        );

    box-shadow:
        inset
        0
        1px
        rgba(var(--primary-rgb),.42),

        0
        7px
        18px
        rgba(var(--primary-rgb), .16);
}


/* =========================================================
   PAGE ALERT
========================================================= */

.deposit-page-alert {
    margin-bottom:
        13px;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(var(--danger-rgb), .22);

    border-radius:
        10px;

    color:
        var(--danger-light);

    background:
        rgba(var(--danger-rgb), .075);

    font-size:
        .72rem;

    line-height:
        1.5;
}


.deposit-page-alert.is-success {
    border-color:
        rgba(var(--success-rgb), .24);

    color:
        var(--success-light);

    background:
        rgba(var(--success-rgb), .07);
}


/* =========================================================
   METHOD LIST
========================================================= */

.deposit-method-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;

    align-items:
        start;
}


/* =========================================================
   METHOD CARD
========================================================= */

.deposit-method-card {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--deposit-border);

    border-radius:
        13px;

    background:
        linear-gradient(
            180deg,
            var(--bg-panel) 0%,
            var(--bg-panel) 100%
        );

    box-shadow:
        0
        10px
        28px
        rgba(0, 0, 0, .15);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.deposit-method-card:hover {
    border-color:
        rgba(var(--primary-rgb), .17);
}


.deposit-method-card.is-open {
    border-color:
        rgba(var(--primary-rgb), .34);

    box-shadow:
        0
        14px
        34px
        rgba(0, 0, 0, .25),

        0
        0
        0
        1px
        rgba(var(--primary-rgb), .035);
}


/* =========================================================
   METHOD SUMMARY
========================================================= */

.deposit-method-summary {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        62px
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    min-height:
        90px;

    padding:
        13px
        14px
        11px;
}


/* =========================================================
   LOGO
========================================================= */

.deposit-method-logo {
    width:
        62px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-subtle);

    border-radius:
        11px;

    background:
        var(--text-primary);
}


.deposit-method-logo img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    padding:
        5px;
}


/* =========================================================
   METHOD TEXT
========================================================= */

.deposit-method-main {
    min-width:
        0;
}


.deposit-method-name {
    display:
        block;

    overflow:
        hidden;

    margin-bottom:
        5px;

    color:
        var(--text-primary);

    font-size:
        .79rem;

    font-weight:
        900;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.deposit-method-time {
    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    margin-bottom:
        7px;

    color:
        var(--text-muted);

    font-size:
        .59rem;

    font-weight:
        700;
}


.deposit-method-time i {
    color:
        var(--deposit-gold);

    font-size:
        .78rem;
}


/* =========================================================
   LIMITS
========================================================= */

.deposit-method-limits {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    flex-wrap:
        wrap;
}


.deposit-method-limits > span:not(
    .deposit-limit-separator
) {
    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        3px;
}


.deposit-method-limits small {
    color:
        var(--text-dim);

    font-size:
        .51rem;

    font-weight:
        700;
}


.deposit-method-limits b {
    color:
        var(--text-secondary);

    font-size:
        .59rem;

    font-weight:
        800;
}


.deposit-limit-separator {
    color:
        var(--text-dim);

    font-size:
        .54rem;
}


/* =========================================================
   TYPE BADGE
========================================================= */

.deposit-method-type {
    align-self:
        flex-start;

    padding-top:
        2px;
}


.deposit-method-type span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        21px;

    padding:
        0
        7px;

    border:
        1px solid
        rgba(var(--primary-rgb), .13);

    border-radius:
        999px;

    color:
        var(--primary);

    background:
        rgba(var(--primary-rgb), .045);

    font-size:
        .47rem;

    font-weight:
        900;

    white-space:
        nowrap;

    text-transform:
        uppercase;
}


/* =========================================================
   PRIMARY TOGGLE
========================================================= */

.deposit-method-toggle {
    width:
        calc(
            100% - 28px
        );

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    margin:
        0
        14px
        13px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(var(--primary-rgb), .55);

    border-radius:
        9px;

    color:
        var(--primary-dark);

    background:
        linear-gradient(
            180deg,
            var(--primary-light) 0%,
            var(--menu-gold) 53%,
            var(--primary-dark) 100%
        );

    box-shadow:
        inset
        0
        1px
        rgba(var(--primary-rgb),.42),

        0
        7px
        18px
        rgba(var(--primary-rgb), .15);

    font-family:
        inherit;

    font-size:
        .65rem;

    font-weight:
        950;

    letter-spacing:
        .045em;

    cursor:
        pointer;

    transition:
        filter .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.deposit-method-toggle:hover {
    filter:
        brightness(1.07);

    box-shadow:
        inset
        0
        1px
        var(--text-muted),

        0
        9px
        22px
        rgba(var(--primary-rgb), .22);
}


.deposit-method-toggle:active {
    transform:
        scale(.992);
}


.deposit-method-toggle i {
    font-size:
        .95rem;

    transition:
        transform .2s ease;
}


.deposit-method-card.is-open
.deposit-method-toggle i {
    transform:
        rotate(180deg);
}


/* =========================================================
   EXPAND AREA
========================================================= */

.deposit-method-expand {
    border-top:
        1px solid
        var(--glass-bg-medium);

    background:
        rgba(0, 0, 0, .11);
}


.deposit-method-expand[hidden] {
    display:
        none !important;
}


.deposit-method-expand-inner {
    padding:
        14px;
}


/* =========================================================
   FIELD
========================================================= */

.deposit-field label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--text-muted);

    font-size:
        .59rem;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .055em;
}


/* =========================================================
   MONEY INPUT
========================================================= */

.deposit-amount-input {
    min-height:
        46px;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        7px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--bg-panel);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.deposit-amount-input:focus-within {
    border-color:
        rgba(var(--primary-rgb), .48);

    background:
        var(--bg-deep);

    box-shadow:
        0
        0
        0
        3px
        rgba(var(--primary-rgb), .065);
}


.deposit-currency-symbol {
    color:
        var(--deposit-gold);

    font-size:
        .95rem;

    font-weight:
        900;
}


.deposit-amount-input input {
    width:
        100%;

    min-width:
        0;

    height:
        44px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    color:
        var(--text-primary);

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        .78rem;

    font-weight:
        800;
}


.deposit-amount-input input::placeholder {
    color:
        var(--text-dim);

    font-weight:
        600;
}


.deposit-amount-input input::-webkit-outer-spin-button,
.deposit-amount-input input::-webkit-inner-spin-button {
    margin:
        0;

    -webkit-appearance:
        none;
}


.deposit-amount-input input[type="number"] {
    -moz-appearance:
        textfield;

    appearance:
        textfield;
}


.deposit-currency-code {
    color:
        var(--text-dim);

    font-size:
        .57rem;

    font-weight:
        850;
}


/* =========================================================
   QUICK AMOUNTS
========================================================= */

.deposit-quick-amounts {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        6px;

    margin-top:
        8px;
}


.deposit-quick-amounts button {
    min-height:
        32px;

    padding:
        0
        5px;

    border:
        1px solid
        var(--border-subtle);

    border-radius:
        8px;

    color:
        var(--text-muted);

    background:
        var(--glass-bg-subtle);

    font-family:
        inherit;

    font-size:
        .55rem;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        border-color .16s ease,
        color .16s ease,
        background .16s ease;
}


.deposit-quick-amounts button:hover {
    color:
        var(--deposit-gold-light);

    border-color:
        rgba(var(--primary-rgb), .24);

    background:
        rgba(var(--primary-rgb), .055);
}


/* =========================================================
   CARD MESSAGE
========================================================= */

.deposit-method-message {
    margin-top:
        10px;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(var(--danger-rgb), .18);

    border-radius:
        8px;

    color:
        var(--danger-light);

    background:
        rgba(var(--danger-rgb), .06);

    font-size:
        .6rem;

    line-height:
        1.45;
}


.deposit-method-message.is-success {
    border-color:
        rgba(var(--success-rgb), .2);

    color:
        var(--success-light);

    background:
        rgba(var(--success-rgb), .06);
}


/* =========================================================
   SUBMIT
========================================================= */

.deposit-submit {
    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        11px;

    padding:
        0
        14px;

    border:
        1px solid
        rgba(var(--primary-rgb), .58);

    border-radius:
        9px;

    color:
        var(--primary-dark);

    background:
        linear-gradient(
            180deg,
            var(--primary-light) 0%,
            var(--primary) 54%,
            var(--primary-dark) 100%
        );

    box-shadow:
        inset
        0
        1px
        var(--text-muted),

        0
        8px
        20px
        rgba(var(--primary-rgb), .18);

    font-family:
        inherit;

    font-size:
        .65rem;

    font-weight:
        950;

    letter-spacing:
        .05em;

    cursor:
        pointer;

    transition:
        filter .18s ease,
        transform .18s ease,
        opacity .18s ease;
}


.deposit-submit:hover {
    filter:
        brightness(1.07);
}


.deposit-submit:active {
    transform:
        scale(.992);
}


.deposit-submit:disabled {
    opacity:
        .58;

    cursor:
        wait;

    filter:
        grayscale(.2);
}


.deposit-submit i {
    font-size:
        1rem;
}


/* =========================================================
   SUCCESS RESULT
========================================================= */

.deposit-result {
    margin:
        0
        14px
        14px;

    padding:
        13px;

    border:
        1px solid
        rgba(var(--success-rgb), .18);

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            rgba(var(--success-rgb), .065),
            rgba(var(--success-rgb), .025)
        );
}


.deposit-result[hidden] {
    display:
        none !important;
}


.deposit-result-head {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        12px;
}


.deposit-result-check {
    width:
        31px;

    height:
        31px;

    flex:
        0 0
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--primary-dark);

    background:
        var(--success);

    font-size:
        1rem;

    font-weight:
        900;
}


.deposit-result-head strong {
    display:
        block;

    color:
        var(--success-light);

    font-size:
        .69rem;
}


.deposit-result-head small {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--success-dark);

    font-size:
        .53rem;
}


.deposit-result-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        7px;
}


.deposit-result-grid > div {
    min-width:
        0;

    padding:
        9px;

    border:
        1px solid
        var(--glass-bg-subtle);

    border-radius:
        8px;

    background:
        rgba(0, 0, 0, .12);
}


.deposit-result-grid span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--text-dim);

    font-size:
        .48rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.deposit-result-grid strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--text-secondary);

    font-size:
        .59rem;

    font-weight:
        800;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;
}


.deposit-result-instructions {
    margin:
        9px
        0
        0;

    padding:
        9px
        10px;

    border-radius:
        8px;

    color:
        var(--text-muted);

    background:
        var(--glass-bg-subtle);

    font-size:
        .57rem;

    line-height:
        1.5;
}


/* =========================================================
   LOADING
========================================================= */

.deposit-loading {
    grid-column:
        1 / -1;

    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px dashed
        var(--border);

    border-radius:
        12px;

    color:
        var(--text-dim);

    background:
        var(--glass-bg-subtle);

    font-size:
        .68rem;
}


.deposit-loading i {
    color:
        var(--deposit-gold);

    font-size:
        1.35rem;
}


/* =========================================================
   EMPTY
========================================================= */

.deposit-empty {
    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        10px;

    padding:
        20px;

    border:
        1px dashed
        var(--border);

    border-radius:
        12px;

    text-align:
        center;

    background:
        var(--glass-bg-subtle);
}


.deposit-empty[hidden] {
    display:
        none !important;
}


.deposit-empty-icon {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        9px;

    border-radius:
        11px;

    color:
        var(--deposit-gold);

    background:
        rgba(var(--primary-rgb), .075);

    font-size:
        1.3rem;
}


.deposit-empty strong {
    color:
        var(--text-secondary);

    font-size:
        .72rem;
}


.deposit-empty p {
    max-width:
        340px;

    margin:
        5px
        0
        0;

    color:
        var(--text-dim);

    font-size:
        .58rem;

    line-height:
        1.5;
}


/* =========================================================
   INFO BOX
========================================================= */

.deposit-info-box {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        16px;

    padding:
        12px
        13px;

    border:
        1px solid
        rgba(var(--primary-rgb), .08);

    border-radius:
        10px;

    background:
        rgba(var(--primary-rgb), .025);
}


.deposit-info-icon {
    width:
        31px;

    height:
        31px;

    flex:
        0 0
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    color:
        var(--deposit-gold);

    background:
        rgba(var(--primary-rgb), .07);

    font-size:
        .95rem;
}


.deposit-info-box strong {
    display:
        block;

    color:
        var(--text-secondary);

    font-size:
        .62rem;
}


.deposit-info-box p {
    margin:
        4px
        0
        0;

    color:
        var(--text-dim);

    font-size:
        .55rem;

    line-height:
        1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .deposit-method-list {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .deposit-page {
        padding:
            0
            0
            24px;
    }


    .deposit-page-head {
        margin-bottom:
            15px;
    }


    .deposit-page-security {
        display:
            none;
    }


    .deposit-page-heading h1 {
        font-size:
            1.45rem;
    }


    .deposit-page-heading p {
        font-size:
            .68rem;
    }


    .deposit-filter {
        min-height:
            35px;

        padding:
            0
            11px;

        border-radius:
            9px;

        font-size:
            .59rem;
    }


    .deposit-method-list {
        gap:
            9px;
    }


    .deposit-method-card {
        border-radius:
            11px;
    }


    .deposit-method-summary {
        grid-template-columns:
            55px
            minmax(0, 1fr);

        min-height:
            82px;

        gap:
            10px;

        padding:
            11px
            11px
            8px;
    }


    .deposit-method-logo {
        width:
            55px;

        height:
            55px;

        border-radius:
            9px;
    }


    .deposit-method-name {
        font-size:
            .73rem;
    }


    .deposit-method-time {
        margin-bottom:
            5px;

        font-size:
            .55rem;
    }


    .deposit-method-limits b {
        font-size:
            .55rem;
    }


    .deposit-method-type {
        position:
            absolute;

        top:
            10px;

        right:
            10px;

        padding:
            0;
    }


    .deposit-method-type span {
        min-height:
            18px;

        padding:
            0
            6px;

        font-size:
            .4rem;
    }


    .deposit-method-toggle {
        width:
            calc(
                100% - 22px
            );

        min-height:
            36px;

        margin:
            0
            11px
            11px;

        border-radius:
            8px;

        font-size:
            .6rem;
    }


    .deposit-method-expand-inner {
        padding:
            11px;
    }


    .deposit-quick-amounts {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .deposit-submit {
        min-height:
            40px;
    }


    .deposit-result {
        margin:
            0
            11px
            11px;
    }


    .deposit-info-box {
        margin-top:
            12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 420px
) {

    .deposit-page-kicker {
        font-size:
            .52rem;
    }


    .deposit-page-heading h1 {
        font-size:
            1.3rem;
    }


    .deposit-filter span {
        white-space:
            nowrap;
    }


    .deposit-result-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.deposit-filter:focus-visible,
.deposit-method-toggle:focus-visible,
.deposit-submit:focus-visible,
.deposit-quick-amounts button:focus-visible,
.deposit-amount-input input:focus-visible {
    outline:
        2px solid
        rgba(var(--primary-rgb), .8);

    outline-offset:
        2px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .deposit-method-card,
    .deposit-filter,
    .deposit-method-toggle,
    .deposit-method-toggle i,
    .deposit-submit,
    .deposit-quick-amounts button,
    .deposit-amount-input {
        transition:
            none !important;
    }

}

/* =========================================================
   DEPOSIT INPUT FOCUS FIX
   Inputa tıklanınca sarı iç çerçeve çıkmasın
========================================================= */

.deposit-amount-input input:focus,
.deposit-amount-input input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}