/*
 * =========================================================
 * PICKLE MANIA SHARED OWNER PAYMENT VIEW
 * PM-SHARED-OWNER-PAYMENT-VIEW-R2-20260903
 * =========================================================
 */

.payment-settings-page .pm-owner-payment-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin:0 0 20px;
}

.payment-settings-page .pm-owner-payment-tabs button{
    min-width:0;
    min-height:90px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 16px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:13px;
    background:#fff;
    color:#0f1d3d;
    text-align:left;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(15,23,42,.045);
}

.payment-settings-page .pm-owner-payment-tabs button.active{
    border-color:#1677ff;
    box-shadow:
        0 0 0 1px rgba(22,119,255,.08),
        0 10px 25px rgba(22,119,255,.10);
}

.pm-payment-tab-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#e7f1ff;
    color:#0869ec;
    font-size:22px;
    font-weight:900;
}

.pm-payment-tab-icon.maya{
    background:#111827;
    color:#20e2a1;
}

.pm-payment-tab-icon.bank{
    color:#174b9a;
}

.pm-payment-tab-icon.paymongo{
    color:#14b86f;
    background:#e8fbf2;
}

.pm-payment-tab-copy{
    min-width:0;
    display:grid;
    gap:5px;
}

.pm-payment-tab-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}

.pm-payment-tab-copy small{
    display:flex;
    align-items:center;
    gap:6px;
    color:#8995a8;
    font-size:12px;
    white-space:nowrap;
}

.pm-payment-tab-copy small i{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#adb7c6;
}

.pm-payment-tab-copy small.ok{
    color:#28a91f;
}

.pm-payment-tab-copy small.ok i{
    display:grid;
    place-items:center;
    background:#32bb28;
}

.pm-payment-tab-copy small.ok i::after{
    content:"✓";
    color:#fff;
    font-size:9px;
    font-style:normal;
}


/* =========================================================
   GCASH APPROVED DETAIL VIEW
   ========================================================= */

.payment-settings-page .payment-tab-gcash{
    display:grid !important;
    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.95fr);
    gap:18px 36px;
    align-items:start;
    padding:28px !important;
}

.payment-tab-gcash .pm-payment-panel-head{
    grid-column:1;
    grid-row:1;
}

.payment-tab-gcash
> .setting-toggle{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:start;
}

.pm-payment-panel-head h3{
    margin:0 0 6px;
    color:#091a3b;
    font-size:22px;
}

.pm-payment-panel-head p{
    margin:0;
    color:#71809a;
}

.payment-tab-gcash
.gcash-detected-account{
    display:none !important;
}

.payment-tab-gcash > label,
.payment-tab-gcash > small{
    grid-column:1;
}

.payment-tab-gcash
input:not([type="file"]){
    width:100%;
}

.payment-tab-gcash
.qr-upload img{
    width:150px;
    height:150px;
    object-fit:contain;
    border-radius:10px;
}


/* PLAYER PREVIEW */

.pm-owner-payment-preview{
    grid-column:2;
    grid-row:2 / span 20;

    padding:18px;

    border:1px solid #dce4ef;
    border-radius:12px;

    background:#f9fbfe;
}

.pm-owner-payment-preview > header{
    display:flex;
    gap:5px;
    margin-bottom:12px;
    color:#20304f;
    font-size:13px;
}

.pm-owner-payment-preview > header span{
    color:#7887a0;
}

.pm-owner-payment-preview-card{
    display:grid;
    gap:20px;

    min-height:330px;

    padding:24px;

    border:1px solid #e0e7f0;
    border-radius:11px;

    background:#fff;
}

.pm-preview-brand{
    display:flex;
    align-items:center;
    gap:13px;
}

.pm-preview-gcash-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:#e6f1ff;
    color:#0872ee;

    font-size:26px;
    font-weight:900;
}

.pm-preview-main{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        120px;

    gap:18px;
    align-items:center;
}

.pm-preview-main > div:first-child{
    display:grid;
    gap:7px;
}

.pm-preview-main small{
    color:#71819e;
}

.pm-preview-main b,
.pm-preview-main strong{
    color:#07183c;
    font-size:18px;
}

.pm-preview-main img{
    width:120px;
    height:120px;

    object-fit:contain;

    border:1px solid #e2e8f0;
    border-radius:10px;
}

.pm-preview-qr-empty{
    width:120px;
    height:120px;

    display:grid;
    place-items:center;

    border:1px dashed #cbd5e1;
    border-radius:10px;

    color:#94a3b8;
}

.pm-preview-note{
    display:flex;
    gap:12px;

    padding:15px 17px;

    border-radius:10px;

    background:#eef7ff;
    color:#536987;

    font-size:13px;
    line-height:1.5;
}

.pm-preview-note i{
    flex:0 0 20px;

    width:20px;
    height:20px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#2681ed;
    color:#fff;

    font-style:normal;
    font-weight:800;
}


/* APPROVED SAVE BUTTON */

.payment-settings-page .save-payment-methods{
    width:min(320px,100%);
    margin-left:auto;
}


/* RESPONSIVE */

@media(max-width:1050px){

    .payment-settings-page
    .pm-owner-payment-tabs{
        display:flex;
        overflow-x:auto;
        padding-bottom:4px;
    }

    .payment-settings-page
    .pm-owner-payment-tabs button{
        flex:0 0 190px;
    }

    .payment-settings-page
    .payment-tab-gcash{
        grid-template-columns:1fr;
    }

    .payment-tab-gcash
    .pm-payment-panel-head{
        grid-column:1;
    }

    .payment-tab-gcash
    > .setting-toggle{
        grid-column:1;
        grid-row:auto;
        justify-self:start;
    }

    .pm-owner-payment-preview{
        grid-column:1;
        grid-row:auto;
    }
}

@media(max-width:600px){

    .payment-settings-page
    .payment-tab-gcash{
        padding:18px !important;
    }

    .pm-owner-payment-preview{
        padding:12px;
    }

    .pm-owner-payment-preview-card{
        padding:16px;
    }

    .pm-preview-main{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   PM-WIDEN-GCASH-ONLY-V1-20260903
   GCash-only full-width staging layout.
   ========================================================= */

/*
 * When GCash is selected, force the parent payment grid
 * to a single full-width column.
 */
.payment-settings-page[data-payment-tab="gcash"]
.payment-settings-grid{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
}

/*
 * Let the GCash card stretch from the left edge under
 * GCash to the right edge under Terms & Conditions.
 */
.payment-settings-page[data-payment-tab="gcash"]
.payment-tab-gcash{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
}

/*
 * Keep the approved two-column interior:
 * left = GCash fields
 * right = player preview
 */
@media (min-width:1051px){

    .payment-settings-page[data-payment-tab="gcash"]
    .payment-tab-gcash{
        grid-template-columns:
            minmax(0,1fr)
            minmax(420px,1fr) !important;
    }
}

/* =========================================================
   PM-MAYA-BANK-OWNER-PARITY-V11-20260903
   Maya + Bank use approved GCash-wide layout.
   ========================================================= */

.payment-settings-page[data-payment-tab="maya"]
.payment-settings-grid,
.payment-settings-page[data-payment-tab="bank"]
.payment-settings-grid{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
}


.payment-settings-page[data-payment-tab="maya"]
.payment-tab-maya,
.payment-settings-page[data-payment-tab="bank"]
.payment-tab-bank{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,1fr) !important;

    gap:18px 36px;

    align-items:start;
    justify-self:stretch !important;

    padding:28px !important;
}


.payment-tab-maya .pm-payment-panel-head,
.payment-tab-bank .pm-payment-panel-head{
    grid-column:1;
    grid-row:1;
}


.payment-tab-maya > .setting-toggle,
.payment-tab-bank > .setting-toggle{
    grid-column:2;
    grid-row:1;

    justify-self:end;
    align-self:start;
}


.payment-tab-maya > label,
.payment-tab-maya > small,
.payment-tab-bank > label,
.payment-tab-bank > small{
    grid-column:1;
}


.payment-tab-maya input:not([type="file"]),
.payment-tab-bank input:not([type="file"]){
    width:100%;
}


.payment-tab-maya .qr-upload img,
.payment-tab-bank .qr-upload img{
    width:150px;
    height:150px;

    object-fit:contain;
    border-radius:10px;
}


.payment-tab-maya .pm-owner-payment-preview,
.payment-tab-bank .pm-owner-payment-preview{
    grid-column:2;
    grid-row:2 / span 20;
}


.pm-preview-method-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:12px;

    font-size:24px;
    font-weight:900;
}


.pm-preview-method-icon.maya{
    background:#111827;
    color:#20e2a1;
}


.pm-preview-method-icon.bank{
    background:#e7f1ff;
    color:#174b9a;
}


@media(max-width:1050px){

    .payment-settings-page[data-payment-tab="maya"]
    .payment-tab-maya,

    .payment-settings-page[data-payment-tab="bank"]
    .payment-tab-bank{
        grid-template-columns:1fr !important;
    }


    .payment-tab-maya > .setting-toggle,
    .payment-tab-bank > .setting-toggle{
        grid-column:1;
        grid-row:auto;

        justify-self:start;
    }


    .payment-tab-maya .pm-owner-payment-preview,
    .payment-tab-bank .pm-owner-payment-preview{
        grid-column:1;
        grid-row:auto;
    }
}


@media(max-width:600px){

    .payment-settings-page[data-payment-tab="maya"]
    .payment-tab-maya,

    .payment-settings-page[data-payment-tab="bank"]
    .payment-tab-bank{
        padding:18px !important;
    }
}