/* DEWPOINT OWNER PAYMENTS MODULE CSS */

/* =========================================================
   DEWPOINT OWNER PAYMENTS BASE CSS - MIGRATED FROM APP
   Payment-only structural rules.

   NOTE:
   Generic .setting-toggle and .owner-success remain
   in dewpoint-app.css because they are shared.
   ========================================================= */

.payment-settings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    display:grid;
}

.payment-setting-card{
    flex-direction:column;
    gap:11px;
    display:flex;
}

.payment-setting-card label{
    font-size:8px;
    font-weight:800;
}

.payment-setting-card input{
    width:100%;
    margin-top:5px;
}

.qr-upload img{
    object-fit:contain;
    border:1px solid #cfe0d8;
    border-radius:8px;
    width:90px;
    height:90px;
    margin-top:8px;
    display:block;
}

.gateway-card{
    justify-content:flex-start;
}

.save-payment-methods{
    max-width:480px;
    margin:0 auto;
}

@media (width<=950px){
    .payment-settings-grid{
        grid-template-columns:1fr;
    }
}

/* ===== 4R PAYMENT SETTINGS LAYOUT CLEANUP ===== */

.payment-settings-grid{
    align-items:start !important;
    grid-auto-rows:auto !important;
}

.payment-setting-card{
    height:auto !important;
    min-height:0 !important;
}

.payment-setting-card>small{
    display:block;
    margin-top:14px;
}

/* Disabled payment methods remain visible but clearly inactive */
.payment-setting-card:has(input:disabled){
    opacity:.72;
}


/* =========================================================
   4R PAYMENT METHODS - STRONG FORM FIELD OVERRIDE
   ========================================================= */

.payment-settings-page .payment-setting-card{
    background:#ffffff !important;
    border:1px solid #d5e1dc !important;
    border-radius:18px !important;
    padding:26px 28px !important;
    box-shadow:0 8px 26px rgba(5,50,60,.08) !important;
}

/* Labels */
.payment-settings-page .payment-setting-card > label{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    margin-top:16px !important;
    font-size:9px !important;
    font-weight:900 !important;
    color:#072f39 !important;
}

/* TEXT INPUT BOXES */
.payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]){
    display:block !important;
    width:100% !important;
    min-height:42px !important;

    box-sizing:border-box !important;

    margin-top:3px !important;
    padding:10px 12px !important;

    background:#ffffff !important;

    border:1.5px solid #b8cac3 !important;
    border-radius:8px !important;

    color:#082f39 !important;
    font-size:10px !important;
    font-weight:700 !important;

    outline:none !important;

    box-shadow:
        inset 0 1px 2px rgba(5,50,60,.03),
        0 1px 3px rgba(5,50,60,.05) !important;
}

.payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]):hover{
    border-color:#7baa96 !important;
}

.payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]):focus{
    border-color:#00b957 !important;

    box-shadow:
        0 0 0 3px rgba(0,185,87,.12),
        inset 0 1px 2px rgba(5,50,60,.03) !important;
}

/* QR UPLOAD FIELD */
.payment-settings-page .qr-upload{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}

.payment-settings-page .qr-upload input[type="file"]{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;

    padding:18px !important;
    margin-top:3px !important;

    background:#f8fcfa !important;

    border:2px dashed #a9c9b7 !important;
    border-radius:10px !important;

    color:#617a72 !important;
    cursor:pointer !important;
}

/* Existing uploaded QR preview */
.payment-settings-page .qr-upload img{
    display:block !important;

    width:170px !important;
    height:170px !important;

    object-fit:contain !important;

    margin:10px auto 0 !important;
    padding:8px !important;

    background:#fff !important;
    border:1px solid #cbdad3 !important;
    border-radius:12px !important;

    box-shadow:0 5px 16px rgba(5,50,60,.08) !important;
}

/* Payment method title */
.payment-settings-page .payment-setting-card h3,
.payment-settings-page .payment-setting-card h4{
    margin-bottom:12px !important;
}

/* Grid spacing */
.payment-settings-page .payment-settings-grid{
    gap:20px !important;
    align-items:start !important;
}

@media(max-width:700px){
    .payment-settings-page .payment-setting-card{
        padding:20px !important;
    }
}

/* =========================================================
   DEWPOINT PAYMENT PAGE
   EXACT SELECTED-THEME OVERRIDES
   ========================================================= */


/* =========================================================
   VENUE PAYMENTS HERO
   ========================================================= */

.payment-settings-page .booking-page-head{
    background:
        linear-gradient(
            115deg,
            var(--dp-sidebar),
            var(--dp-accent)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--dp-accent) 35%,
            transparent
        ) !important;

    box-shadow:
        0 14px 32px
        color-mix(
            in srgb,
            var(--dp-accent) 12%,
            transparent
        ) !important;
}


/* VENUE PAYMENTS */
.payment-settings-page
.booking-page-head small{
    color:
        color-mix(
            in srgb,
            var(--dp-accent-2) 35%,
            white
        ) !important;
}


/* Payment Methods */
.payment-settings-page
.booking-page-head h2{
    color:#fff !important;
}


/* Hero description */
.payment-settings-page
.booking-page-head p{
    color:rgba(255,255,255,.84) !important;
}


/* =========================================================
   PAYMENT METHOD CARDS
   ========================================================= */

.payment-settings-page .payment-setting-card{
    background:#fff !important;

    border:
        1px solid
        #dbe3e8 !important;

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


/* Soft hover */
.payment-settings-page .payment-setting-card:hover{
    border-color:var(--dp-theme-border) !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--dp-accent) 7%,
            transparent
        ) !important;
}


/* =========================================================
   PAYMENT TOGGLES
   ========================================================= */

/* OFF */
.payment-settings-page
.setting-toggle button{
    background:#cbd5d1 !important;
}


/* ON */
.payment-settings-page
.setting-toggle button.on{
    background:
        linear-gradient(
            90deg,
            var(--dp-accent),
            var(--dp-accent-2)
        ) !important;
}


/* Toggle knob */
.payment-settings-page
.setting-toggle button i{
    background:#fff !important;
}


/* Disabled toggle */
.payment-settings-page
.setting-toggle button:disabled{
    opacity:.55;
}


/* =========================================================
   FORM INPUTS
   ========================================================= */

.payment-settings-page
.payment-setting-card input:not([type="file"]){
    border-color:#ccd8d5 !important;
    background:#fff !important;
}


/* Focus */
.payment-settings-page
.payment-setting-card input:not([type="file"]):focus{
    border-color:var(--dp-accent) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dp-accent) 12%,
            transparent
        ) !important;

    outline:none !important;
}


/* =========================================================
   QR UPLOAD
   ========================================================= */

.payment-settings-page .qr-upload input[type="file"]{
    border:
        2px dashed
        var(--dp-theme-border) !important;

    background:
        var(--dp-theme-faint) !important;

    color:#475569 !important;
}


/* Hover */
.payment-settings-page
.qr-upload input[type="file"]:hover{
    border-color:var(--dp-accent) !important;
    background:var(--dp-theme-soft) !important;
}


/* QR image */
.payment-settings-page .qr-upload img{
    border:
        2px solid
        var(--dp-theme-border) !important;

    border-radius:12px;
}


/* =========================================================
   CARD HELPER TEXT
   ========================================================= */

.payment-settings-page
.payment-setting-card > small{
    color:var(--dp-accent-text) !important;
}


/* =========================================================
   GATEWAY CARD
   ========================================================= */

.payment-settings-page
.gateway-card > b{
    color:var(--dp-accent-text) !important;
}


/* =========================================================
   SAVE PAYMENT METHODS
   ========================================================= */

.payment-settings-page
.save-payment-methods{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            var(--dp-accent),
            var(--dp-accent-2)
        ) !important;

    border-color:var(--dp-accent) !important;

    box-shadow:
        0 8px 20px
        color-mix(
            in srgb,
            var(--dp-accent) 18%,
            transparent
        ) !important;
}


/* Hover */
.payment-settings-page
.save-payment-methods:hover:not(:disabled){
    filter:brightness(1.05);
    transform:translateY(-1px);
}


/* Disabled */
.payment-settings-page
.save-payment-methods:disabled{
    opacity:.65;
}


/* =========================================================
   SMOOTH THEME SWITCH
   ========================================================= */

.payment-settings-page .booking-page-head,
.payment-settings-page .payment-setting-card,
.payment-settings-page .setting-toggle button,
.payment-settings-page .qr-upload input[type="file"],
.payment-settings-page .save-payment-methods{
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* =========================================================
   DEWPOINT PAYMENT INPUT FOCUS
   REMOVE OLD PICKLE MANIA GREEN GLOW
   ========================================================= */

.payment-settings-page
.payment-setting-card input:not([type="file"]):focus,
.payment-settings-page
.payment-setting-card input:not([type="file"]):focus-visible{
    border-color:var(--dp-accent) !important;

    outline:none !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dp-accent) 18%,
            transparent
        ) !important;
}


/* QR file box focus */
.payment-settings-page
.qr-upload input[type="file"]:focus,
.payment-settings-page
.qr-upload input[type="file"]:focus-visible{
    border-color:var(--dp-accent) !important;

    outline:none !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dp-accent) 16%,
            transparent
        ) !important;
}


/* Browser autofill / active edge cleanup */
.payment-settings-page
.payment-setting-card input{
    caret-color:var(--dp-accent-text) !important;
}


/* Prevent inherited green outline */
.payment-settings-page input:focus,
.payment-settings-page input:focus-visible{
    outline-color:var(--dp-accent) !important;
}


/* =========================================================
   DEWPOINT PAYMENT PAGE
   EXACT INPUT FOCUS OVERRIDE
   Replaces hard-coded Pickle Mania green glow
   ========================================================= */

.payment-settings-page
.payment-setting-card
label
input:not([type="checkbox"]):not([type="file"]):focus,

.payment-settings-page
.payment-setting-card
label
input:not([type="checkbox"]):not([type="file"]):focus-visible{

    border-color:var(--dp-accent) !important;

    outline:none !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dp-accent) 18%,
            transparent
        ),
        inset 0 1px 2px rgba(15,23,42,.03)
        !important;
}


/* Hover also follows selected theme */
.payment-settings-page
.payment-setting-card
label
input:not([type="checkbox"]):not([type="file"]):hover{

    border-color:
        color-mix(
            in srgb,
            var(--dp-accent) 55%,
            #cbd5e1
        ) !important;
}


/* Caret follows theme */
.payment-settings-page
.payment-setting-card
label
input:not([type="checkbox"]):not([type="file"]){

    caret-color:var(--dp-accent) !important;
}


/* =========================================================



/* =========================================================
   DEWPOINT PAYMENT TERMS EDITOR V1
   ========================================================= */

.payment-terms-editor{
    grid-column:1/-1;
    display:grid;
    gap:14px;
}

.payment-terms-editor > h3{
    margin:0;
}

.payment-terms-editor > p{
    margin:0;
    color:#66756f;
}

.payment-terms-field{
    display:grid;
    gap:7px;
    font-weight:700;
}

.payment-terms-field textarea{
    width:100%;
    min-height:120px;
    box-sizing:border-box;
    resize:vertical;
    padding:12px 14px;
    border:1px solid #d8e0dd;
    border-radius:12px;
    background:#fff;
    color:#17201d;
    font:inherit;
    font-weight:400;
    line-height:1.55;
}

.payment-terms-field:first-of-type textarea{
    min-height:320px;
}

.payment-terms-field textarea:focus{
    outline:none;
    border-color:#7357d4;
    box-shadow:0 0 0 3px rgba(115,87,212,.10);
}

@media (max-width:700px){

    .payment-terms-field:first-of-type textarea{
        min-height:380px;
    }

}


/* =========================================================
   COMPACT PAYMENT CARDS
   ========================================================= */

.payment-settings-page .payment-settings-grid{
    grid-template-columns:repeat(2,minmax(0,560px)) !important;
    justify-content:center !important;
    max-width:1160px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

@media(max-width:800px){
    .payment-settings-page .payment-settings-grid{
        grid-template-columns:minmax(0,560px) !important;
        max-width:560px !important;
    }
}

/* =========================================================
   PAYMONGO OWNER CONFIGURATION
   Native Owner Payments module styles
   ========================================================= */

.payment-settings-page .paymongo-settings-card{
    background:#fff;
    border:1px solid #dbe3e8;
    padding:24px;
}

.payment-settings-page .paymongo-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.payment-settings-page .paymongo-card-head small{
    display:block;
    margin-bottom:5px;
    font-weight:800;
    letter-spacing:.08em;
    color:var(--dp-accent-text);
}

.payment-settings-page .paymongo-card-head h3{
    margin:0 0 7px;
}

.payment-settings-page .paymongo-card-head p{
    margin:0;
    max-width:720px;
    color:#64748b;
    line-height:1.55;
}

.payment-settings-page .paymongo-status{
    flex:0 0 auto;
    padding:7px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    border:1px solid #cbd5e1;
    background:#f8fafc;
    color:#475569;
}

.payment-settings-page .paymongo-status.connected{
    border-color:#86efac;
    background:#f0fdf4;
    color:#166534;
}

.payment-settings-page .paymongo-status.error{
    border-color:#fecaca;
    background:#fef2f2;
    color:#b91c1c;
}

.payment-settings-page .paymongo-status.pending{
    border-color:#fde68a;
    background:#fffbeb;
    color:#92400e;
}

.payment-settings-page .paymongo-message{
    margin-bottom:18px;
    padding:11px 13px;
    border-radius:10px;
    border:1px solid #fecaca;
    background:#fef2f2;
    color:#b91c1c;
    font-size:13px;
    font-weight:700;
}

.payment-settings-page .paymongo-message.success{
    border-color:#bbf7d0;
    background:#f0fdf4;
    color:#166534;
}

.payment-settings-page .paymongo-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.payment-settings-page .paymongo-form-grid label{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:13px;
    font-weight:700;
    color:#334155;
}

.payment-settings-page .paymongo-form-grid input,
.payment-settings-page .paymongo-form-grid select{
    width:100%;
    min-height:44px;
    border:1px solid #ccd8d5;
    border-radius:10px;
    background:#fff;
    color:#0f172a;
    padding:10px 12px;
    font:inherit;
    box-sizing:border-box;
}

.payment-settings-page .paymongo-form-grid input:focus,
.payment-settings-page .paymongo-form-grid select:focus{
    border-color:var(--dp-accent);
    outline:none;
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--dp-accent) 14%,
            transparent
        );
}

.payment-settings-page .paymongo-form-grid label small{
    font-size:11px;
    font-weight:600;
    color:#64748b;
}

.payment-settings-page .paymongo-enable-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:20px;
    padding:15px 16px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#f8fafc;
}

.payment-settings-page .paymongo-enable-row > small{
    color:#64748b;
    text-align:right;
    line-height:1.45;
}

.payment-settings-page .paymongo-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.payment-settings-page .paymongo-actions button{
    min-height:42px;
}

.payment-settings-page .paymongo-test-button{
    border:1px solid var(--dp-theme-border);
    border-radius:10px;
    background:var(--dp-theme-faint);
    color:var(--dp-accent-text);
    padding:10px 16px;
    font-weight:800;
    cursor:pointer;
}

.payment-settings-page .paymongo-test-button:hover:not(:disabled){
    border-color:var(--dp-accent);
    background:var(--dp-theme-soft);
}

.payment-settings-page .paymongo-actions button:disabled{
    cursor:not-allowed;
    opacity:.55;
}

.payment-settings-page .paymongo-last-verified{
    margin:15px 0 0;
    color:#475569;
    font-size:12px;
}

.payment-settings-page .paymongo-last-error{
    margin:10px 0 0;
    color:#b91c1c;
    font-size:12px;
    font-weight:700;
}

@media (max-width:760px){
    .payment-settings-page .paymongo-card-head{
        flex-direction:column;
    }

    .payment-settings-page .paymongo-form-grid{
        grid-template-columns:1fr;
    }

    .payment-settings-page .paymongo-enable-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .payment-settings-page .paymongo-enable-row > small{
        text-align:left;
    }

    .payment-settings-page .paymongo-actions{
        flex-direction:column;
    }

    .payment-settings-page .paymongo-actions button{
        width:100%;
    }
}

/* =========================================================
   GCASH QR OCR ACCOUNT SUMMARY
   Owner: modules/owner/payments
   ========================================================= */

.gcash-detected-account{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px 16px;
    background:#ffffff;
    border:1px solid #d7dee8;
    border-radius:10px;
}

.gcash-detected-account>strong{
    font-size:10px;
    font-weight:900;
    color:#1d3557;
}

.gcash-detected-account>div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.gcash-detected-account small{
    font-size:8px;
    font-weight:800;
    color:#1d3557;
}

.gcash-detected-account span{
    font-size:11px;
    font-weight:900;
    color:#1d3557;
}

/* =========================================================
   PM-OWNER-PAYMENT-TABS-V1-20260902
   Canonical Owner Payments tab layout.
   ========================================================= */

.payment-settings-page .payment-tabs-shell{
    display:grid;
    gap:10px;
    margin:0 0 18px;
}

.payment-settings-page .payment-settings-tabs{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    overflow-x:auto;
    padding:6px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:16px;
    background:rgba(255,255,255,.74);
    box-shadow:0 8px 24px rgba(15,23,42,.05);
    scrollbar-width:thin;
}

.payment-settings-page .payment-settings-tabs button{
    appearance:none;
    flex:0 0 auto;
    min-height:42px;
    padding:9px 16px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#334155;
    font:inherit;
    font-weight:750;
    cursor:pointer;
    white-space:nowrap;
    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.payment-settings-page .payment-settings-tabs button:hover{
    border-color:rgba(15,23,42,.12);
    background:rgba(15,23,42,.045);
}

.payment-settings-page .payment-settings-tabs button.active{
    border-color:#102f4d;
    background:#102f4d;
    color:#fff;
    box-shadow:0 5px 14px rgba(16,47,77,.18);
}

.payment-settings-page .payment-settings-tabs button:focus-visible{
    outline:3px solid rgba(37,99,235,.20);
    outline-offset:2px;
}

.payment-settings-page .payment-provider-note{
    margin:0;
    padding:10px 13px;
    border:1px solid rgba(15,23,42,.09);
    border-radius:11px;
    background:rgba(248,250,252,.86);
    color:#475569;
    font-size:13px;
    line-height:1.55;
}

/*
 * Keep the existing cards/components intact.
 * We hide only panels that do not belong to the
 * currently selected tab.
 */

.payment-settings-page[data-payment-tab="gcash"]
.payment-tab-panel:not(.payment-tab-gcash),

.payment-settings-page[data-payment-tab="maya"]
.payment-tab-panel:not(.payment-tab-maya),

.payment-settings-page[data-payment-tab="bank"]
.payment-tab-panel:not(.payment-tab-bank),

.payment-settings-page[data-payment-tab="paymongo"]
.payment-tab-panel:not(.payment-tab-paymongo),

.payment-settings-page[data-payment-tab="terms"]
.payment-tab-panel:not(.payment-tab-terms){
    display:none !important;
}

/*
 * The old payment grid supported several cards side by side.
 * Tabs display one provider at a time, so let the active
 * provider use the full available width.
 */

.payment-settings-page .payment-settings-grid{
    grid-template-columns:minmax(0,1fr);
}

.payment-settings-page .payment-tab-panel{
    width:100%;
    max-width:none;
}

/*
 * The shared save button follows the selected tab.
 * PayMongo retains its existing separate secure credential
 * Save/Test actions plus the checkout-publish button.
 */

.payment-settings-page .save-payment-methods{
    width:100%;
}

@media (max-width:720px){

    .payment-settings-page .payment-tabs-shell{
        margin-bottom:14px;
    }

    .payment-settings-page .payment-settings-tabs{
        margin-left:-2px;
        margin-right:-2px;
        width:calc(100% + 4px);
        border-radius:13px;
    }

    .payment-settings-page .payment-settings-tabs button{
        min-height:40px;
        padding:8px 13px;
        font-size:13px;
    }
}