/* =========================================================
   PHONEORIGIN WALLET V4
   Quiet / Premium / Minimal
   ========================================================= */

.po-w4-page,
.po-wallet-history-v2 {
    --w4-bg: #111216;
    --w4-inner: #0b0c10;
    --w4-border: rgba(255,255,255,.075);
    --w4-border-hover: rgba(255,255,255,.13);
    --w4-text: #f5f5f7;
    --w4-muted: #858892;
    --w4-faint: #5f626c;
    --w4-accent: #800260;
    --w4-accent-readable: #c02a98;

    width: min(100%, 880px);

    margin-left: auto;
    margin-right: auto;
}


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

.container.po-w4-page {
    display: block;
}


.po-w4-page > .success,
.po-w4-page > .error {
    margin-bottom: 12px;
}


/* =========================================================
   WALLET HEADER
   ========================================================= */

.po-w4-header {
    padding:
        7px
        1px
        22px;
}


.po-w4-title {
    margin-bottom: 18px;

    color: var(--w4-text);

    font-family:
        Poppins,
        sans-serif;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: -.7px;
}


.po-w4-balance {
    color: var(--w4-text);

    font-size:
        clamp(30px,4vw,38px);

    font-weight: 720;

    line-height: 1;

    letter-spacing: -.045em;

    font-variant-numeric:
        tabular-nums;
}


.po-w4-balance-label {
    margin-top: 6px;

    color: var(--w4-muted);

    font-size: 10px;
}


/* ACTIONS */

.po-w4-actions {
    display: flex;

    gap: 7px;

    margin-top: 19px;
}


.po-w4-action {
    min-width: 105px;
    min-height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding:
        7px
        14px;

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

    border-radius: 10px;

    color: #b9bbc1;

    background:
        rgba(255,255,255,.02);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

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


.po-w4-action span {
    font-size: 14px;
    font-weight: 500;
}


.po-w4-action:hover {
    color: #fff;

    border-color:
        var(--w4-border-hover);
}


.po-w4-action.is-active {
    color: #f9edf6;

    border-color:
        rgba(128,2,96,.48);

    background:
        rgba(128,2,96,.14);
}


/* =========================================================
   SELECTED ACTION PANEL
   ========================================================= */

.po-w4-panel {
    width: 100%;

    margin: 0;

    padding:
        17px
        18px;

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

    border-radius: 14px;

    background:
        var(--w4-bg);

    box-shadow: none;
}


.po-w4-panel[hidden] {
    display: none !important;
}


/* =========================================================
   TOP UP
   ========================================================= */

.po-w4-page
.po-wallet-topup-card {
    max-width: none !important;
}


.po-w4-page
.po-wallet-topup-card h2 {
    margin:
        0
        0
        15px;

    color: var(--w4-text);

    font-size: 16px;

    letter-spacing: -.25px;
}


.po-w4-page
.po-wallet-topup-card label {
    display: block;

    margin-bottom: 6px;

    color: var(--w4-muted);

    font-size: 9px;
    font-weight: 700;
}


.po-w4-page
.po-wallet-topup-card
form > div:first-of-type {
    display: flex !important;

    grid-template-columns: none !important;

    gap: 5px !important;

    margin-bottom: 14px !important;

    overflow-x: auto;

    scrollbar-width: none;
}


.po-w4-page
.po-wallet-topup-card
form > div:first-of-type::-webkit-scrollbar {
    display: none;
}


.po-w4-page
.po-wallet-topup-card
.btn-secondary {
    min-width: 67px;
    min-height: 35px;

    flex: 0 0 auto;

    padding:
        6px
        9px;

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

    border-radius: 9px;

    color: #c4c5ca;

    background:
        rgba(255,255,255,.02);

    font-size: 9px;
}


.po-w4-page
.po-wallet-topup-card input {
    width: 100%;

    min-height: 43px;

    padding:
        9px
        11px;

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

    border-radius: 9px;

    color: var(--w4-text);

    background:
        var(--w4-inner);

    font-size: 16px;
}


.po-w4-page
.po-wallet-topup-card
form > .muted {
    display: none;
}


.po-w4-page
.po-wallet-topup-card
form > .btn {
    width: 100%;

    min-height: 42px;

    margin-top: 11px;

    border-radius: 9px;

    font-size: 10px;
}


/* =========================================================
   TRANSFER
   ========================================================= */

.po-w4-page
.po-wallet-transfer {
    margin-top: 0;
}


.po-w4-page
.po-wallet-transfer-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;
}


.po-w4-page
.po-wallet-transfer-eyebrow {
    display: none;
}


.po-w4-page
.po-wallet-transfer-heading h2 {
    margin:
        0
        0
        2px;

    color: var(--w4-text);

    font-size: 16px;
}


.po-w4-page
.po-wallet-transfer-heading p {
    margin: 0;

    color: var(--w4-muted);

    font-size: 9px;
}


.po-w4-page
.po-wallet-transfer-available,
.po-w4-page
.po-wallet-transfer-disabled {
    padding:
        4px
        7px;

    border-radius: 999px;

    font-size: 8px;
}


.po-w4-page
.po-wallet-transfer-fields {
    display: grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(150px,.6fr);

    gap: 8px;
}


.po-w4-page
.po-wallet-transfer-fields label {
    display: block;

    margin-bottom: 5px;

    color: var(--w4-muted);

    font-size: 8px;
    font-weight: 700;
}


.po-w4-page
.po-wallet-transfer-fields input {
    width: 100%;

    min-height: 42px;

    padding:
        8px
        10px;

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

    border-radius: 9px;

    color: var(--w4-text);

    background:
        var(--w4-inner);
}


.po-w4-page
.po-wallet-transfer-amount {
    min-height: 42px;

    display: flex;

    align-items: center;

    overflow: hidden;

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

    border-radius: 9px;

    background:
        var(--w4-inner);
}


.po-w4-page
.po-wallet-transfer-amount span {
    padding-left: 10px;

    color: var(--w4-muted);

    font-size: 10px;
}


.po-w4-page
.po-wallet-transfer-amount input {
    border: 0;
}


.po-w4-page
.po-wallet-transfer-limits,
.po-w4-page
.po-wallet-transfer-footnote {
    display: none;
}


.po-w4-page
.po-wallet-transfer-check {
    min-height: 40px;

    margin-top: 11px;

    padding:
        7px
        13px;

    border:
        1px solid
        rgba(128,2,96,.45);

    border-radius: 9px;

    color: #f4e9f1;

    background:
        rgba(128,2,96,.13);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


/* TRANSFER PREVIEW */

.po-w4-page
.po-wallet-recipient-preview {
    margin-top: 11px;

    padding: 12px;

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

    border-radius: 10px;

    background:
        var(--w4-inner);
}


.po-w4-page
.po-wallet-recipient-success {
    margin-bottom: 8px;

    color: #65d897;

    font-size: 9px;
    font-weight: 700;
}


.po-w4-page
.po-wallet-recipient-row {
    display: grid;

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

    gap: 12px;
}


.po-w4-page
.po-wallet-transfer-warning {
    margin:
        10px
        0;

    color: var(--w4-muted);

    font-size: 8px;

    line-height: 1.45;
}


.po-w4-page
#walletTransferConfirm {
    width: 100%;

    min-height: 41px;

    font-size: 10px;
}


/* OFF STATE */

.po-w4-page
.po-wallet-transfer-off {
    padding:
        11px;

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

    border-radius: 9px;

    color: var(--w4-muted);

    background:
        var(--w4-inner);

    font-size: 9px;
}


.po-w4-page
.po-wallet-transfer-off strong {
    display: none;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.po-wallet-history-v2 {
    margin-top: 27px;
}


.po-wallet-history-v2
> div:first-child {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    margin-bottom: 9px !important;
}


.po-wallet-history-v2
> div:first-child h2 {
    margin: 0 !important;

    color: var(--w4-text);

    font-size: 16px;

    letter-spacing: -.2px;
}


.po-wallet-history-v2
> div:first-child
> div:first-child
.muted {
    display: none;
}


/* FILTERS */

.po-wallet-history-v2
> div:first-child
> div:last-child {
    display: flex !important;

    gap: 3px !important;
}


.po-wallet-history-v2
> div:first-child
> div:last-child
.btn {
    min-height: 29px;

    padding:
        4px
        9px;

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

    border-radius: 999px;

    background:
        transparent;

    font-size: 8px;
}


/* ACTIVITY LIST */

.po-w4-activity-list {
    overflow: hidden;

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

    border-radius: 13px;

    background:
        var(--w4-bg);
}


.po-w4-activity-row {
    display: grid;

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

    align-items: center;

    gap: 16px;

    min-height: 65px;

    padding:
        11px
        13px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}


.po-w4-activity-row:last-child {
    border-bottom: 0;
}


.po-w4-activity-main {
    min-width: 0;
}


.po-w4-activity-main > strong {
    display: block;

    overflow: hidden;

    color: #e8e8eb;

    font-size: 11px;
    font-weight: 650;

    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.po-w4-activity-meta {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 4px;

    margin-top: 4px;

    color: var(--w4-faint);

    font-size: 8px;
}


.po-w4-reference {
    max-width: 230px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.po-w4-activity-value {
    display: grid;

    justify-items: end;

    gap: 3px;
}


.po-w4-activity-value strong {
    font-size: 11px;

    font-variant-numeric:
        tabular-nums;
}


.po-w4-activity-value
.is-credit {
    color: #65d897;
}


.po-w4-activity-value
.is-debit {
    color: #e5e5e8;
}


.po-w4-activity-value small {
    color: var(--w4-faint);

    font-size: 8px;

    white-space: nowrap;
}


/* =========================================================
   PAGINATOR
   ========================================================= */

.po-wallet-history-v2
.po-wallet-paginator {
    display: grid;

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

    align-items: center;

    gap: 7px;

    margin-top: 10px;
}


.po-wallet-history-v2
.po-wallet-page-btn {
    min-height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        6px
        10px;

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

    border-radius: 9px;

    color: #b8bac0;

    background:
        rgba(255,255,255,.02);

    font-size: 8px;

    text-decoration: none;
}


.po-wallet-history-v2
.po-wallet-page-btn.disabled {
    opacity: .38;
}


.po-wallet-history-v2
.po-wallet-page-count {
    color: var(--w4-muted);

    font-size: 8px;

    text-align: center;
}


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

@media (max-width: 767px) {

    .po-w4-page,
    .po-wallet-history-v2 {
        width: 100%;
    }


    .po-w4-header {
        padding:
            2px
            0
            18px;
    }


    .po-w4-title {
        margin-bottom: 16px;

        font-size: 22px;
    }


    .po-w4-balance {
        font-size: 28px;
    }


    .po-w4-actions {
        margin-top: 15px;
    }


    .po-w4-action {
        flex: 1;

        min-width: 0;
        min-height: 42px;

        font-size: 10px;
    }


    .po-w4-panel {
        padding:
            13px
            12px;

        border-radius: 12px;
    }


    .po-w4-page
    .po-wallet-topup-card h2,
    .po-w4-page
    .po-wallet-transfer-heading h2 {
        font-size: 14px;
    }


    .po-w4-page
    .po-wallet-transfer-fields {
        grid-template-columns: 1fr;
    }


    .po-w4-page
    .po-wallet-transfer-fields input,
    .po-w4-page
    .po-wallet-topup-card input {
        font-size: 16px;
    }


    .po-wallet-history-v2 {
        margin-top: 22px;

        padding:
            0
            14px;
    }


    .po-w4-activity-row {
        min-height: 61px;

        gap: 9px;

        padding:
            10px
            11px;
    }


    .po-w4-activity-main > strong {
        font-size: 10px;
    }


    .po-w4-reference {
        max-width: 125px;
    }


    .po-w4-activity-value strong {
        font-size: 10px;
    }

}


@media (max-width: 360px) {

    .po-w4-title {
        font-size: 21px;
    }


    .po-w4-balance {
        font-size: 26px;
    }


    .po-w4-action {
        padding:
            7px
            9px;
    }


    .po-wallet-history-v2
    > div:first-child {
        align-items: flex-end !important;
    }


    .po-wallet-history-v2
    > div:first-child
    > div:last-child
    .btn {
        padding:
            4px
            7px;

        font-size: 7px;
    }

}


/* =========================================================
   WALLET V4 — BALANCE SUMMARY CARD
   ========================================================= */

.po-w4-summary-card {
    position: relative;

    overflow: hidden;

    padding:
        20px
        21px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(128,2,96,.105),
            rgba(17,18,22,.98) 56%
        );

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.16);
}


.po-w4-summary-card::after {
    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    top: -85px;
    right: -55px;

    border-radius: 50%;

    background:
        rgba(128,2,96,.15);

    filter: blur(28px);

    pointer-events: none;
}


.po-w4-summary-card
.po-w4-title {
    position: relative;
    z-index: 1;

    margin:
        0
        0
        17px;

    color: #a4a6ae;

    font-family:
        inherit;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.po-w4-summary-card
.po-w4-balance {
    position: relative;
    z-index: 1;

    font-size:
        clamp(29px,3.7vw,36px);
}


.po-w4-summary-card
.po-w4-balance-label {
    position: relative;
    z-index: 1;

    margin-top: 6px;

    color: #858892;

    font-size: 9px;
}


.po-w4-header
.po-w4-actions {
    margin-top: 10px;
}


/* MOBILE */

@media (max-width: 767px) {

    .po-w4-summary-card {
        padding:
            16px
            15px;

        border-radius: 13px;
    }


    .po-w4-summary-card
    .po-w4-title {
        margin-bottom: 13px;

        font-size: 8px;
    }


    .po-w4-summary-card
    .po-w4-balance {
        font-size: 27px;
    }


    .po-w4-summary-card
    .po-w4-balance-label {
        margin-top: 5px;

        font-size: 8px;
    }


    .po-w4-header
    .po-w4-actions {
        margin-top: 8px;
    }

}


@media (max-width: 360px) {

    .po-w4-summary-card {
        padding:
            14px;
    }


    .po-w4-summary-card
    .po-w4-balance {
        font-size: 25px;
    }

}


/* =========================================================
   WALLET V4 — TRANSFER OTP
   ========================================================= */

.po-w4-otp {
    margin:
        11px
        0;

    padding: 11px;

    border:
        1px solid
        rgba(128,2,96,.25);

    border-radius: 10px;

    background:
        rgba(128,2,96,.055);
}


.po-w4-otp[hidden] {
    display: none !important;
}


.po-w4-otp-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}


.po-w4-otp-heading strong {
    display: block;

    color: #eeeeF1;

    font-size: 10px;
}


.po-w4-otp-heading small {
    display: block;

    margin-top: 2px;

    color: #7f828b;

    font-size: 8px;
}


.po-w4-otp-heading > span {
    padding:
        3px
        6px;

    border:
        1px solid
        rgba(192,42,152,.27);

    border-radius: 999px;

    color: #c95aaa;

    font-size: 7px;

    font-weight: 800;
}


.po-w4-otp-send {
    width: 100%;

    min-height: 38px;

    border:
        1px solid
        rgba(128,2,96,.36);

    border-radius: 8px;

    color: #f0e5ed;

    background:
        rgba(128,2,96,.12);

    font-family: inherit;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;
}


.po-w4-otp-send:disabled {
    opacity: .55;

    cursor: default;
}


.po-w4-otp-entry {
    margin-top: 9px;
}


.po-w4-otp-entry label {
    display: block;

    margin-bottom: 5px;

    color: #858892;

    font-size: 8px;
}


.po-w4-otp-entry input {
    width: 100%;

    min-height: 43px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 8px;

    color: #fff;

    background: #0b0c10;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: .16em;

    text-align: center;
}


.po-w4-otp-message {
    margin-top: 8px;

    color: #8f929b;

    font-size: 8px;

    line-height: 1.45;
}


.po-w4-otp-message.is-error {
    color: #ef8d98;
}


/* =========================================================
   WALLET V4 — FINAL TRANSFER AUTHORIZATION
   ========================================================= */

.po-w4-transfer-password {
    margin:
        11px
        0;
}


.po-w4-transfer-password label {
    display: block;

    margin-bottom: 5px;

    color: #858892;

    font-size: 8px;

    font-weight: 700;
}


.po-w4-transfer-password input {
    width: 100%;

    min-height: 43px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 8px;

    color: #f5f5f7;

    background: #0b0c10;

    font-family: inherit;

    font-size: 12px;

    outline: none;

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


.po-w4-transfer-password input:focus {
    border-color:
        rgba(192,42,152,.45);

    box-shadow:
        0 0 0 3px
        rgba(128,2,96,.08);
}


.po-w4-transfer-password small {
    display: block;

    margin-top: 5px;

    color: #666973;

    font-size: 8px;
}


/* LOCKED STATE */

#walletTransferConfirm:disabled {
    border-color:
        rgba(255,255,255,.055)
        !important;

    color:
        #696c74
        !important;

    background:
        #25262b
        !important;

    box-shadow:
        none
        !important;

    opacity: 1
        !important;

    cursor:
        not-allowed
        !important;

    transform:
        none
        !important;
}


/* READY STATE */

#walletTransferConfirm:not(:disabled) {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #800260,
            #a40d7b
        );

    border-color:
        rgba(192,42,152,.55);

    cursor: pointer;
}


/* =========================================================
   WALLET V4 — TRANSFER AUTHORIZATION V2
   ========================================================= */

.po-w4-transfer-auth {
    margin:
        13px
        0;

    padding: 13px;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(128,2,96,.07),
            rgba(11,12,16,.96)
        );
}


/* HEADER */

.po-w4-transfer-auth-head {
    display: grid;

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

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;
}


.po-w4-transfer-auth-icon {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(192,42,152,.28);

    border-radius: 9px;

    background:
        rgba(128,2,96,.11);
}


.po-w4-transfer-auth-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: #d16ab9;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.po-w4-transfer-auth-copy {
    min-width: 0;
}


.po-w4-transfer-auth-copy strong {
    display: block;

    color: #f1f1f3;

    font-size: 10px;

    font-weight: 750;
}


.po-w4-transfer-auth-copy span {
    display: block;

    margin-top: 2px;

    color: #7f828b;

    font-size: 8px;

    line-height: 1.4;
}


.po-w4-transfer-auth-required {
    padding:
        3px
        6px;

    border:
        1px solid
        rgba(192,42,152,.24);

    border-radius: 999px;

    color: #ca5bad;

    background:
        rgba(128,2,96,.08);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;
}


/* LABEL */

.po-w4-transfer-auth > label {
    display: block;

    margin-bottom: 6px;

    color: #a3a5ad;

    font-size: 8px;

    font-weight: 700;
}


/* PASSWORD CONTROL */

.po-w4-password-control {
    position: relative;

    display: flex;

    align-items: center;
}


.po-w4-password-control input {
    width: 100%;

    min-height: 44px;

    padding:
        9px
        58px
        9px
        11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 9px;

    color: #f5f5f7;

    background: #090a0d;

    font-family: inherit;

    font-size: 12px;

    outline: none;

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


.po-w4-password-control input::placeholder {
    color: #555861;
}


.po-w4-password-control input:focus {
    border-color:
        rgba(192,42,152,.52);

    background: #0b0c10;

    box-shadow:
        0 0 0 3px
        rgba(128,2,96,.09);
}


.po-w4-password-toggle {
    position: absolute;

    right: 7px;

    min-width: 44px;
    min-height: 30px;

    padding:
        4px
        7px;

    border: 0;

    border-radius: 7px;

    color: #a5a7af;

    background:
        rgba(255,255,255,.045);

    font-family: inherit;

    font-size: 8px;

    font-weight: 700;

    cursor: pointer;
}


.po-w4-password-toggle:hover {
    color: #fff;

    background:
        rgba(255,255,255,.075);
}


/* SECURITY NOTE */

.po-w4-transfer-auth-note {
    display: flex;

    align-items: flex-start;

    gap: 5px;

    margin-top: 7px;

    color: #686b74;

    font-size: 7.5px;

    line-height: 1.45;
}


.po-w4-transfer-auth-note span {
    color: #63cb91;

    font-size: 8px;

    font-weight: 800;
}


/* SERVER VALIDATION */

.po-w4-transfer-auth-error {
    margin-top: 7px;

    padding:
        7px
        8px;

    border:
        1px solid
        rgba(239,90,105,.18);

    border-radius: 7px;

    color: #ef8e99;

    background:
        rgba(239,90,105,.055);

    font-size: 8px;
}


/* DISABLED FINAL BUTTON — OBVIOUS LOCKED STATE */

#walletTransferConfirm:disabled {
    color:
        #686b72
        !important;

    border-color:
        rgba(255,255,255,.055)
        !important;

    background:
        #24252a
        !important;

    box-shadow:
        none
        !important;

    opacity: 1
        !important;

    cursor:
        not-allowed
        !important;
}


#walletTransferConfirm:not(:disabled) {
    color: #fff;

    border-color:
        rgba(192,42,152,.55);

    background:
        linear-gradient(
            135deg,
            #800260,
            #a40d7b
        );

    box-shadow:
        0 8px 20px
        rgba(128,2,96,.18);
}


/* MOBILE */

@media (max-width: 480px) {

    .po-w4-transfer-auth {
        padding: 11px;
    }


    .po-w4-transfer-auth-head {
        grid-template-columns:
            32px
            minmax(0,1fr)
            auto;

        gap: 7px;
    }


    .po-w4-transfer-auth-icon {
        width: 32px;
        height: 32px;
    }


    .po-w4-transfer-auth-required {
        font-size: 6px;
    }

}


/* =========================================================
   WALLET V4 — TOP-UP INVOICES
   ========================================================= */

.po-w4-invoices {
    width: min(100%,880px);

    margin:
        24px
        auto
        0;

    padding:
        15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        13px;

    background:
        #111216;
}


.po-w4-invoice-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;
}


.po-w4-invoice-eyebrow {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #a94a91;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .09em;
}


.po-w4-invoice-head h2 {
    margin:
        0;

    color:
        #f1f1f4;

    font-size:
        15px;
}


.po-w4-invoice-head p {
    margin:
        3px
        0
        0;

    color:
        #747780;

    font-size:
        8px;
}


.po-w4-invoice-create {
    min-height:
        36px;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(128,2,96,.42);

    border-radius:
        8px;

    color:
        #f3e9f0;

    background:
        rgba(128,2,96,.13);

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;
}


.po-w4-invoice-create:disabled {
    color:
        #666871;

    border-color:
        rgba(255,255,255,.05);

    background:
        #24252a;

    cursor:
        not-allowed;
}


.po-w4-invoice-cooldown {
    margin-top:
        9px;

    color:
        #777a83;

    font-size:
        8px;
}


.po-w4-invoice-empty {
    margin-top:
        12px;

    color:
        #666973;

    font-size:
        9px;
}


.po-w4-invoice-list {
    margin-top:
        11px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        9px;
}


.po-w4-invoice-row {
    min-height:
        53px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        9px
        11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);
}


.po-w4-invoice-row:last-child {
    border-bottom:
        0;
}


.po-w4-invoice-row strong {
    display:
        block;

    color:
        #e8e8eb;

    font-size:
        9px;
}


.po-w4-invoice-row span {
    display:
        block;

    margin-top:
        2px;

    color:
        #696c75;

    font-size:
        7px;
}


.po-w4-invoice-row-right {
    text-align:
        right;
}


.po-w4-invoice-row-right a {
    display:
        inline-block;

    margin-top:
        3px;

    color:
        #c25aa7;

    font-size:
        8px;

    font-weight:
        700;

    text-decoration:
        none;
}


/* MODAL */

.po-w4-invoice-modal {
    position:
        fixed;

    z-index:
        9999;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;
}


.po-w4-invoice-modal[hidden] {
    display:
        none !important;
}


.po-w4-invoice-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(0,0,0,.72);

    backdrop-filter:
        blur(5px);
}


.po-w4-invoice-dialog {
    position:
        relative;

    z-index:
        1;

    width:
        min(100%,540px);

    max-height:
        min(88vh,760px);

    overflow-y:
        auto;

    padding:
        18px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        16px;

    background:
        #111216;

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.48);
}


.po-w4-invoice-dialog-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        17px;
}


.po-w4-invoice-dialog-head span {
    color:
        #b14996;

    font-size:
        7px;

    font-weight:
        800;
}


.po-w4-invoice-dialog-head h2 {
    margin:
        3px
        0
        0;

    color:
        #f4f4f6;

    font-size:
        18px;
}


.po-w4-invoice-close {
    width:
        34px;

    height:
        34px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        8px;

    color:
        #aaa;

    background:
        rgba(255,255,255,.025);

    font-size:
        19px;

    cursor:
        pointer;
}


.po-w4-invoice-section {
    margin-bottom:
        12px;
}


.po-w4-invoice-label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #9b9da5;

    font-size:
        8px;

    font-weight:
        700;
}


.po-w4-invoice-label span {
    color:
        #60636c;

    font-weight:
        500;
}


.po-w4-invoice-dialog input,
.po-w4-invoice-dialog textarea,
.po-w4-invoice-dialog select {
    width:
        100%;

    min-height:
        42px;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        8px;

    color:
        #f4f4f6;

    background:
        #090a0d;

    font:
        inherit;

    font-size:
        11px;

    outline:
        none;
}


.po-w4-invoice-dialog textarea {
    min-height:
        75px;

    resize:
        vertical;
}


.po-w4-invoice-dialog input:focus,
.po-w4-invoice-dialog textarea:focus,
.po-w4-invoice-dialog select:focus {
    border-color:
        rgba(192,42,152,.45);

    box-shadow:
        0 0 0 3px
        rgba(128,2,96,.08);
}


.po-w4-invoice-grid {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        9px;

    margin-bottom:
        12px;
}


/* TOP-UP SELECTOR */

.po-w4-invoice-deposits {
    max-height:
        190px;

    overflow-y:
        auto;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        9px;

    background:
        #0b0c10;
}


.po-w4-invoice-deposit {
    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px
        10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    cursor:
        pointer;
}


.po-w4-invoice-deposit:last-child {
    border-bottom:
        0;
}


.po-w4-invoice-deposit input {
    width:
        16px;

    min-height:
        auto;

    height:
        16px;

    flex:
        0 0 auto;
}


.po-w4-invoice-deposit strong {
    display:
        block;

    color:
        #ededf0;

    font-size:
        10px;
}


.po-w4-invoice-deposit small {
    display:
        block;

    margin-top:
        2px;

    color:
        #6f727b;

    font-size:
        7px;
}


/* DIGITAL NOTICE */

.po-w4-invoice-digital {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin:
        14px
        0;

    padding:
        10px;

    border:
        1px solid
        rgba(128,2,96,.18);

    border-radius:
        8px;

    background:
        rgba(128,2,96,.045);
}


.po-w4-invoice-digital > span {
    color:
        #64cf92;

    font-size:
        9px;
}


.po-w4-invoice-digital strong {
    display:
        block;

    color:
        #d9d9dd;

    font-size:
        8px;
}


.po-w4-invoice-digital small {
    display:
        block;

    margin-top:
        2px;

    color:
        #71747d;

    font-size:
        7px;

    line-height:
        1.45;
}


.po-w4-invoice-submit {
    width:
        100%;

    min-height:
        44px;

    border:
        1px solid
        rgba(192,42,152,.52);

    border-radius:
        9px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #800260,
            #a40d7b
        );

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        750;

    cursor:
        pointer;
}


.po-w4-invoice-error {
    margin-bottom:
        12px;

    padding:
        9px;

    border:
        1px solid
        rgba(239,90,105,.19);

    border-radius:
        8px;

    color:
        #ee909b;

    background:
        rgba(239,90,105,.055);

    font-size:
        8px;
}


.po-modal-open {
    overflow:
        hidden;
}


@media (max-width: 600px) {

    .po-w4-invoices {
        width:
            calc(100% - 28px);

        margin-top:
            20px;
    }


    .po-w4-invoice-dialog {
        padding:
            14px;

        border-radius:
            13px;
    }


    .po-w4-invoice-grid {
        grid-template-columns:
            1fr;
    }


    .po-w4-invoice-head {
        align-items:
            flex-end;
    }


    .po-w4-invoice-head p {
        max-width:
            180px;
    }

}