/* 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;
    }
}