/* =========================================================
   VANCE CEYLON — MOBILE CHECKOUT PAYMENT UI
   Mobile only:
   - COD + Bank Deposit stay in one compact straight row
   - all button text remains readable
   - selected payment information sits neatly underneath
   - desktop checkout is unchanged
========================================================= */

@media (max-width:620px){

    /* PAYMENT CARD */
    html body #vanceCheckout .vc-ref-payment{
        padding:14px !important;
        overflow:visible !important;
    }

    html body #vanceCheckout .vc-ref-payment .vc-ref-card-head{
        margin-bottom:12px !important;
    }

    /* Keep BOTH payment methods next to each other on mobile. */
    html body #vanceCheckout .vc-ref-payment .vc-ref-method-row{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        align-items:stretch !important;
        gap:8px !important;
        width:100% !important;
        margin:0 !important;
    }

    /* Compact payment button. */
    html[data-vance-template="daylight"][data-shop-theme="day"]
    body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method,
    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method{
        position:relative !important;
        display:grid !important;
        grid-template-columns:15px 22px minmax(0,1fr) !important;
        grid-template-rows:auto !important;
        align-items:center !important;
        column-gap:6px !important;

        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:58px !important;
        max-height:none !important;

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

        overflow:visible !important;
        box-sizing:border-box !important;

        border:1px solid #d9d9d9 !important;
        border-radius:10px !important;
        background:#fff !important;
        color:#111 !important;
        box-shadow:none !important;

        text-align:left !important;
        transform:none !important;
    }

    html[data-vance-template="daylight"][data-shop-theme="day"]
    body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method:has(input[type="radio"]:checked),
    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method:has(input[type="radio"]:checked){
        border:1.5px solid #111 !important;
        background:#fff !important;
        color:#111 !important;
        box-shadow:inset 0 0 0 1px #111 !important;
    }

    /* Small native radio. */
    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method > input[type="radio"]{
        position:static !important;
        grid-column:1 !important;
        grid-row:1 !important;

        display:block !important;
        width:15px !important;
        height:15px !important;
        min-width:15px !important;
        min-height:15px !important;

        margin:0 !important;
        padding:0 !important;

        opacity:1 !important;
        visibility:visible !important;
        appearance:auto !important;
        -webkit-appearance:radio !important;
        accent-color:#111 !important;
    }

    /* Small delivery / bank icon. */
    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method > .vc-ref-method-icon{
        grid-column:2 !important;
        grid-row:1 !important;

        display:grid !important;
        place-items:center !important;

        width:22px !important;
        min-width:22px !important;
        max-width:22px !important;
        height:22px !important;
        min-height:22px !important;
        max-height:22px !important;

        margin:0 !important;
        padding:0 !important;
        color:#111 !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method > .vc-ref-method-icon svg{
        width:20px !important;
        height:20px !important;
        display:block !important;
    }

    /* Payment title + small description remain INSIDE the button. */
    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon){
        grid-column:3 !important;
        grid-row:1 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:center !important;
        gap:2px !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;
        padding:0 !important;
        color:#111 !important;
        text-align:left !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method
    > span:not(.vc-ref-method-icon) > strong{
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;

        color:#111 !important;
        font-size:10.5px !important;
        line-height:1.15 !important;
        font-weight:800 !important;
        letter-spacing:-.01em !important;

        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        overflow-wrap:normal !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method
    > span:not(.vc-ref-method-icon) > small{
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;

        color:#6b6b6b !important;
        font-size:8.5px !important;
        line-height:1.18 !important;
        font-weight:550 !important;
        letter-spacing:0 !important;

        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        overflow-wrap:normal !important;
    }

    /* Dynamic COD / Bank Deposit information directly below both buttons. */
    html[data-vance-template="daylight"][data-shop-theme="day"]
    body #vanceCheckout .vc-ref-payment #vcBankDetails.vc-ref-bank-details,
    html body #vanceCheckout .vc-ref-payment #vcBankDetails,
    html body #vanceCheckout .vc-ref-payment #vcBankInfo{
        display:block !important;
        width:100% !important;
        max-width:100% !important;

        min-height:0 !important;
        max-height:none !important;

        margin:10px 0 0 !important;
        padding:11px 12px !important;

        overflow:visible !important;
        box-sizing:border-box !important;

        border:1px solid #e4e4e4 !important;
        border-radius:10px !important;
        background:#f6f6f6 !important;
        color:#222 !important;
        box-shadow:none !important;

        font-size:11.5px !important;
        line-height:1.5 !important;
        font-weight:550 !important;
        letter-spacing:0 !important;

        text-align:left !important;
        white-space:pre-wrap !important;
        overflow-wrap:anywhere !important;
    }

    html body #vanceCheckout .vc-ref-payment #vcBankDetails *,
    html body #vanceCheckout .vc-ref-payment #vcBankInfo *{
        color:#222 !important;
        font-size:11.5px !important;
        line-height:1.5 !important;
    }

    /* Any helper note uses the same clean mobile information treatment. */
    html body #vanceCheckout .vc-ref-payment .vance-bank-islandwide-note{
        width:100% !important;
        margin:10px 0 0 !important;
        padding:11px 12px !important;

        border:1px solid #e4e4e4 !important;
        border-radius:10px !important;
        background:#f6f6f6 !important;
        color:#222 !important;

        font-size:11px !important;
        line-height:1.45 !important;
        text-align:left !important;
    }
}

/* Very small phones: preserve the same two-button row but tighten gently. */
@media (max-width:370px){
    html body #vanceCheckout .vc-ref-payment .vc-ref-method-row{
        gap:6px !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method{
        grid-template-columns:14px 18px minmax(0,1fr) !important;
        column-gap:5px !important;
        min-height:56px !important;
        padding:7px 6px !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method > .vc-ref-method-icon{
        width:18px !important;
        min-width:18px !important;
        max-width:18px !important;
        height:18px !important;
        min-height:18px !important;
        max-height:18px !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method > .vc-ref-method-icon svg{
        width:17px !important;
        height:17px !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method
    > span:not(.vc-ref-method-icon) > strong{
        font-size:9.8px !important;
    }

    html body #vanceCheckout .vc-ref-payment
    label.vc-method.vc-ref-method
    > span:not(.vc-ref-method-icon) > small{
        font-size:7.9px !important;
    }
}