/* SATGHOR V24 - isolated checkout payment choices skin
   Requires markup: #order-form #payment-methods-grid .sp-pay-choice.
   Loaded via unique URL to bypass the old v155 browser/CDN cache.
   No change to labels, radio name/values, form, pricing or checkout JS. */
body.sat-landing #order-form #payment-methods-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    align-items:stretch !important;
}
body.sat-landing #order-form #payment-methods-grid > * {
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
/* Respect Laravel/Tailwind's existing COD availability toggle. */
body.sat-landing #order-form #payment-methods-grid > .hidden {
    display:none !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice {
    box-sizing:border-box !important;
    display:flex !important;
    position:relative !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:9px !important;
    width:100% !important;
    height:100% !important;
    min-height:64px !important;
    max-width:none !important;
    padding:10px 12px !important;
    margin:0 !important;
    border:1px solid #d7e3ee !important;
    border-radius:13px !important;
    background:#fff !important;
    color:#172b4d !important;
    box-shadow:0 2px 7px rgba(35,62,91,.06) !important;
    text-align:left !important;
    overflow:hidden !important;
    cursor:pointer !important;
    transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice:hover {
    border-color:#6d9fe5 !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice:has(input[type="radio"]:checked) {
    border-color:#176be2 !important;
    background:#f0f7ff !important;
    box-shadow:inset 0 0 0 1px rgba(23,107,226,.18),0 3px 8px rgba(23,107,226,.08) !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice:focus-within {
    outline:2px solid #60a5fa !important;
    outline-offset:2px !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice > span:first-child {
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    min-width:0 !important;
    max-width:100% !important;
    width:auto !important;
    text-align:left !important;
    margin:0 !important;
    padding:0 !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-logo.sp-pay-logo-sm {
    display:flex !important;
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    justify-content:center !important;
    align-items:center !important;
    padding:5px !important;
    margin:0 !important;
    border:1px solid #e1ebf3 !important;
    border-radius:10px !important;
    background:#fff !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-logo.sp-pay-logo-sm img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice > span:first-child > span:not(.sp-pay-logo) {
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    color:#172b4d !important;
    font-weight:700 !important;
    font-size:12.5px !important;
    line-height:1.33 !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    text-align:left !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice small {
    display:block !important;
    margin-top:3px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    color:#07804d !important;
    font-weight:600 !important;
}
body.sat-landing #order-form #payment-methods-grid .sp-pay-choice input[type="radio"] {
    box-sizing:border-box !important;
    display:block !important;
    position:static !important;
    flex:0 0 16px !important;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    accent-color:#176be2 !important;
    cursor:pointer !important;
}
/* Two compact, equal-width vertical cards inside narrow checkout columns. */
@media screen and (max-width:1023.98px) {
    body.sat-landing #order-form #payment-methods-grid { gap:8px !important; }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice {
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        gap:4px !important;
        min-height:83px !important;
        padding:7px 7px 8px !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice > span:first-child {
        flex-direction:column !important;
        flex:0 1 auto !important;
        width:100% !important;
        gap:5px !important;
        padding:0 8px !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-logo.sp-pay-logo-sm {
        flex:0 0 30px !important;
        width:34px !important;
        min-width:34px !important;
        height:30px !important;
        padding:4px !important;
        margin:0 auto !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice > span:first-child > span:not(.sp-pay-logo) {
        width:100% !important;
        min-width:0 !important;
        text-align:center !important;
        font-size:11.5px !important;
        line-height:1.22 !important;
        overflow-wrap:anywhere !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice small {
        font-size:9.5px !important;
        margin-top:2px !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice input[type="radio"] {
        position:absolute !important;
        right:7px !important;
        top:7px !important;
        width:15px !important;
        height:15px !important;
        min-width:15px !important;
        min-height:15px !important;
    }
}
/* Very narrow phones: one-line options so each title remains readable. */
@media screen and (max-width:354.98px) {
    body.sat-landing #order-form #payment-methods-grid {
        grid-template-columns:minmax(0,1fr) !important;
        gap:7px !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice {
        flex-direction:row !important;
        text-align:left !important;
        min-height:55px !important;
        padding:7px 11px !important;
        gap:8px !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice > span:first-child {
        flex:1 1 auto !important;
        flex-direction:row !important;
        justify-content:flex-start !important;
        text-align:left !important;
        gap:8px !important;
        padding:0 !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-logo.sp-pay-logo-sm {
        flex-basis:32px !important;
        width:32px !important;
        min-width:32px !important;
        height:32px !important;
        margin:0 !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice > span:first-child > span:not(.sp-pay-logo) {
        width:auto !important;
        text-align:left !important;
    }
    body.sat-landing #order-form #payment-methods-grid .sp-pay-choice input[type="radio"] {
        position:static !important;
    }
}