/* =========================================================
   VANCE CEYLON — CHECKOUT GLASS + INTERNAL SCROLL FIX
   SAFE OVERRIDE FILE
   Targets the REAL checkout: #vanceCheckout
========================================================= */

/* ---------- Native dialog backdrop ---------- */
#vanceCheckout::backdrop{
    background:rgba(0,0,0,.66) !important;
    backdrop-filter:blur(14px) saturate(115%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(115%) !important;
}

/* ---------- Main checkout glass frame ---------- */
#vanceCheckout.vance-checkout{
    box-sizing:border-box !important;
    width:min(720px, calc(100vw - 32px)) !important;
    max-width:720px !important;

    /* Critical fix: frame can never grow beyond viewport */
    height:auto !important;
    max-height:calc(100dvh - 32px) !important;

    margin:auto !important;
    padding:24px !important;

    /* Critical fix: scrolling happens INSIDE the rounded frame */
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-gutter:stable !important;

    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:28px !important;

    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.14), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.08), transparent 26%),
        linear-gradient(145deg, rgba(17,17,17,.78), rgba(3,3,3,.70)) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(255,255,255,.05) !important;

    backdrop-filter:blur(30px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(30px) saturate(135%) !important;

    color:#fff !important;
}

/* Glass highlight around the content */
#vanceCheckout.vance-checkout:focus{
    outline:none !important;
}

/* ---------- Scrollbar stays inside frame ---------- */
#vanceCheckout{
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) transparent;
}

#vanceCheckout::-webkit-scrollbar{
    width:7px;
}

#vanceCheckout::-webkit-scrollbar-track{
    background:transparent;
    margin:18px 0;
}

#vanceCheckout::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.24);
    border-radius:99px;
}

#vanceCheckout::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.38);
}

/* ---------- Top controls remain clean while scrolling ---------- */
#vanceCheckout .vc-top{
    position:sticky !important;
    top:-24px !important;
    z-index:20 !important;
    margin:-24px -24px 18px !important;
    padding:18px 24px 14px !important;
    background:linear-gradient(to bottom, rgba(8,8,8,.88), rgba(8,8,8,.54), transparent) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}

/* ---------- Inner checkout sections: visible transparent glass ---------- */
#vanceCheckout .vc-fields,
#vanceCheckout .vc-methods,
#vanceCheckout .vc-summary,
#vanceCheckout #vcReview{
    box-sizing:border-box !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:18px !important;
    background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.14) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}

#vanceCheckout .vc-fields,
#vanceCheckout .vc-methods{
    padding:18px !important;
    margin-bottom:14px !important;
}

#vanceCheckout .vc-summary{
    padding:16px 18px !important;
    margin-top:14px !important;
}

#vanceCheckout #vcReview:not([hidden]){
    padding:18px !important;
    margin-top:14px !important;
}

/* ---------- Inputs / select ---------- */
#vanceCheckout input:not([type="radio"]),
#vanceCheckout select,
#vanceCheckout textarea{
    box-sizing:border-box !important;
    width:100% !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}

#vanceCheckout input:not([type="radio"]):focus,
#vanceCheckout select:focus,
#vanceCheckout textarea:focus{
    border-color:rgba(255,255,255,.38) !important;
    background:rgba(255,255,255,.09) !important;
    outline:none !important;
}

#vanceCheckout select option{
    background:#111 !important;
    color:#fff !important;
}

/* ---------- Payment cards ---------- */
#vanceCheckout .vc-method{
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.045) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    transition:background .2s ease, border-color .2s ease, transform .2s ease !important;
}

#vanceCheckout .vc-method:hover{
    background:rgba(255,255,255,.075) !important;
    border-color:rgba(255,255,255,.22) !important;
}

#vanceCheckout .vc-method:has(input:checked){
    background:rgba(255,255,255,.105) !important;
    border-color:rgba(255,255,255,.32) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09) !important;
}

/* ---------- Buttons: black + white ---------- */
#vanceCheckout .vc-primary,
#vanceCheckout .vc-back,
#vanceCheckout #vancePaymentAction{
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:12px !important;
    background:#050505 !important;
    color:#fff !important;
    box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
    transition:transform .16s ease, background .16s ease, border-color .16s ease !important;
}

#vanceCheckout .vc-primary:hover,
#vanceCheckout .vc-back:hover,
#vanceCheckout #vancePaymentAction:hover{
    background:#111 !important;
    border-color:rgba(255,255,255,.28) !important;
}

#vanceCheckout .vc-primary:active,
#vanceCheckout .vc-back:active,
#vanceCheckout #vancePaymentAction:active{
    transform:scale(.985) !important;
    background:rgba(255,255,255,.10) !important;
    backdrop-filter:blur(15px) !important;
    -webkit-backdrop-filter:blur(15px) !important;
}

#vanceCheckout .vc-close{
    background:rgba(0,0,0,.54) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.15) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
}

/* ---------- Bank Deposit island-wide lock ---------- */
.vance-bank-islandwide-note{
    margin:10px 0 14px !important;
    padding:13px 14px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:14px !important;
    background:linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
}

.vance-bank-islandwide-note strong,
.vance-bank-islandwide-note span,
.vance-bank-islandwide-note small{
    display:block;
}

.vance-bank-islandwide-note strong{
    font-size:10px;
    letter-spacing:.10em;
}

.vance-bank-islandwide-note span{
    margin-top:4px;
    font-size:11px;
    font-weight:700;
}

.vance-bank-islandwide-note small,
.vance-area-mode-note{
    display:block;
    margin-top:5px;
    font-size:9px;
    line-height:1.45;
    color:rgba(255,255,255,.58);
}

#vanceCheckout select.vance-area-locked{
    pointer-events:none !important;
    cursor:not-allowed !important;
    opacity:.72 !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
    border-color:rgba(255,255,255,.18) !important;
}

#vanceCheckout .vance-area-bank-mode{
    opacity:.92;
}

/* ---------- Tablet / mobile ---------- */
@media (max-width:760px){
    #vanceCheckout.vance-checkout{
        width:calc(100vw - 16px) !important;
        max-width:none !important;
        max-height:calc(100dvh - 16px) !important;
        padding:18px !important;
        border-radius:22px !important;
    }

    #vanceCheckout .vc-top{
        top:-18px !important;
        margin:-18px -18px 14px !important;
        padding:14px 18px 12px !important;
    }

    #vanceCheckout .vc-fields,
    #vanceCheckout .vc-methods,
    #vanceCheckout .vc-summary,
    #vanceCheckout #vcReview:not([hidden]){
        border-radius:15px !important;
    }

    #vanceCheckout .vc-grid{
        grid-template-columns:1fr !important;
    }
}

@media (max-width:420px){
    #vanceCheckout.vance-checkout{
        width:calc(100vw - 10px) !important;
        max-height:calc(100dvh - 10px) !important;
        padding:15px !important;
        border-radius:19px !important;
    }

    #vanceCheckout .vc-top{
        top:-15px !important;
        margin:-15px -15px 12px !important;
        padding:12px 15px 10px !important;
    }
}
/* =========================================================
   VANCE CEYLON — TRANSPARENT CHECKOUT SCROLLBAR FIX
   Paste at the VERY BOTTOM of your CSS
   ========================================================= */


/* Main checkout scroll area */
#vanceCheckout,
#vanceCheckout * {
    scrollbar-color: rgba(255,255,255,0.28) transparent !important;
}


/* Chrome / Edge / Safari */
#vanceCheckout::-webkit-scrollbar,
#vanceCheckout *::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}


/* REMOVE THE WHITE SCROLLBAR BACKGROUND */
#vanceCheckout::-webkit-scrollbar-track,
#vanceCheckout *::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Scroll thumb */
#vanceCheckout::-webkit-scrollbar-thumb,
#vanceCheckout *::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.24) !important;
    border-radius: 999px !important;

    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}


/* Hover */
#vanceCheckout::-webkit-scrollbar-thumb:hover,
#vanceCheckout *::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.40) !important;
    background-clip: padding-box !important;
}


/* REMOVE TOP / BOTTOM WHITE SCROLL BUTTONS */
#vanceCheckout::-webkit-scrollbar-button,
#vanceCheckout *::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* REMOVE CORNER BACKGROUND */
#vanceCheckout::-webkit-scrollbar-corner,
#vanceCheckout *::-webkit-scrollbar-corner {
    background: transparent !important;
}


/* =========================================================
   CHECKOUT FRAME ITSELF — REAL TRANSPARENT GLASS
   ========================================================= */

#vanceCheckout {
    background:
        linear-gradient(
            145deg,
            rgba(20,20,20,0.72),
            rgba(5,5,5,0.58)
        ) !important;

    border: 1px solid rgba(255,255,255,0.18) !important;

    backdrop-filter: blur(28px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}


/* Prevent internal white backgrounds near the scrollbar */
#vanceCheckout form,
#vanceCheckout fieldset,
#vanceCheckout .vc-fields,
#vanceCheckout .vc-methods,
#vanceCheckout .vc-summary,
#vanceCheckout #vcReview {
    background-color: transparent !important;
}


/* If browser adds a white dialog background */
dialog#vanceCheckout {
    background-color: transparent !important;
}


/* Backdrop behind checkout */
#vanceCheckout::backdrop {
    background: rgba(0,0,0,0.70) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
/* =========================================================
   VANCE CEYLON — SCROLLBAR TRANSPARENT FIX
   PASTE AT THE VERY BOTTOM
   ========================================================= */

#vanceCheckout::-webkit-scrollbar,
#vanceCheckout *::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

#vanceCheckout::-webkit-scrollbar-track,
#vanceCheckout *::-webkit-scrollbar-track {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

#vanceCheckout::-webkit-scrollbar-thumb,
#vanceCheckout *::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.28) !important;
    border-radius: 999px !important;
}

#vanceCheckout::-webkit-scrollbar-button,
#vanceCheckout *::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#vanceCheckout::-webkit-scrollbar-corner,
#vanceCheckout *::-webkit-scrollbar-corner {
    background: transparent !important;
}

#vanceCheckout {
    scrollbar-color: rgba(255,255,255,0.28) transparent !important;
}
/* =========================================================
   VANCE CEYLON — WHITE GLASS CHECKOUT
   MATCHES MY ACCOUNT DESIGN
   SAFE VISUAL OVERRIDE ONLY
   ========================================================= */


/* =========================================================
   CHECKOUT DIALOG POSITION
   ========================================================= */

#vanceCheckout.vance-checkout,
dialog#vanceCheckout{

    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    width:
        min(560px, calc(100vw - 28px)) !important;

    height: auto !important;

    max-height:
        min(88dvh, 820px) !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    border-radius:
        28px !important;

    color:
        #111 !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(244,244,244,.72)
        ) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter:
        blur(30px)
        saturate(130%) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(130%) !important;

    box-sizing:
        border-box !important;
}


/* BACKGROUND OUTSIDE CHECKOUT */

#vanceCheckout::backdrop{

    background:
        rgba(245,245,245,.52) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;
}


/* =========================================================
   MAKE THE DIALOG ITSELF A FLEX COLUMN
   ========================================================= */

#vanceCheckout{

    display:
        flex !important;

    flex-direction:
        column !important;
}


/* dialog must still respect hidden state */

#vanceCheckout:not([open]){
    display:
        none !important;
}


/* =========================================================
   FIXED TOP BAR
   ========================================================= */

#vanceCheckout .vc-top{

    position:
        sticky !important;

    top:
        0 !important;

    z-index:
        50 !important;

    flex:
        0 0 auto !important;

    display:
        flex !important;

    justify-content:
        space-between !important;

    align-items:
        center !important;

    padding:
        14px 16px !important;

    background:
        rgba(255,255,255,.76) !important;

    border-bottom:
        1px solid rgba(0,0,0,.07) !important;

    backdrop-filter:
        blur(20px) !important;

    -webkit-backdrop-filter:
        blur(20px) !important;
}


/* =========================================================
   BACK TO CART
   ========================================================= */

#vanceCheckout .vc-back{

    min-height:
        38px !important;

    padding:
        0 14px !important;

    border:
        1px solid rgba(0,0,0,.11) !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,.72) !important;

    color:
        #111 !important;

    font-size:
        11px !important;

    font-weight:
        650 !important;

    box-shadow:
        0 5px 15px rgba(0,0,0,.05) !important;

    cursor:
        pointer !important;
}


/* =========================================================
   CLOSE X
   ========================================================= */

#vanceCheckout .vc-close{

    width:
        38px !important;

    height:
        38px !important;

    display:
        grid !important;

    place-items:
        center !important;

    padding:
        0 !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,.74) !important;

    color:
        #111 !important;

    font-size:
        19px !important;

    cursor:
        pointer !important;
}


/* =========================================================
   SCROLLABLE CHECKOUT CONTENT
   ========================================================= */

/*
   Everything after vc-top scrolls inside the frame.
*/

#vanceCheckout{

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    overscroll-behavior:
        contain !important;

    -webkit-overflow-scrolling:
        touch !important;
}


/* Leave room around checkout contents */

#vanceCheckout .vc-brand,
#vanceCheckout .vc-eyebrow,
#vanceCheckout #checkoutTitle,
#vanceCheckout .vc-intro,
#vanceCheckout #vanceCheckoutForm,
#vanceCheckout #vcReview{

    margin-left:
        22px !important;

    margin-right:
        22px !important;
}


/* =========================================================
   BRAND
   ========================================================= */

#vanceCheckout .vc-brand{

    margin-top:
        22px !important;

    margin-bottom:
        14px !important;

    text-align:
        center !important;

    color:
        #111 !important;

    font-size:
        17px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .22em !important;
}


/* CEYLON small text */

#vanceCheckout .vc-brand small{

    color:
        #111 !important;

    opacity:
        .62 !important;
}


/* =========================================================
   EYEBROW + TITLE
   ========================================================= */

#vanceCheckout .vc-eyebrow{

    margin-top:
        0 !important;

    margin-bottom:
        5px !important;

    color:
        rgba(0,0,0,.48) !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .22em !important;
}


#vanceCheckout #checkoutTitle{

    margin-top:
        0 !important;

    margin-bottom:
        7px !important;

    color:
        #111 !important;

    font-size:
        31px !important;

    font-weight:
        500 !important;

    letter-spacing:
        -.035em !important;

    line-height:
        1 !important;
}


#vanceCheckout .vc-intro{

    margin-top:
        0 !important;

    margin-bottom:
        16px !important;

    color:
        rgba(0,0,0,.55) !important;

    font-size:
        10px !important;

    line-height:
        1.5 !important;
}


/* =========================================================
   RELOAD DELIVERY BUTTON
   ========================================================= */

#vanceCheckout button[id*="reload"],
#vanceCheckout .vc-reload,
#vanceCheckout .reload-delivery{

    background:
        rgba(255,255,255,.58) !important;

    color:
        #111 !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    border-radius:
        11px !important;
}


/* =========================================================
   FIELDSETS
   ========================================================= */

#vanceCheckout fieldset{

    margin:
        0 0 14px !important;

    padding:
        16px !important;

    border:
        1px solid rgba(0,0,0,.08) !important;

    border-radius:
        18px !important;

    background:
        rgba(255,255,255,.38) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;
}


/* FIELDSET TITLES */

#vanceCheckout legend{

    padding:
        0 5px !important;

    color:
        rgba(0,0,0,.58) !important;

    font-size:
        9px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase !important;
}


/* =========================================================
   LABELS
   ========================================================= */

#vanceCheckout label{

    color:
        rgba(0,0,0,.62) !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;
}


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

#vanceCheckout input:not([type="radio"]),
#vanceCheckout select,
#vanceCheckout textarea{

    width:
        100% !important;

    min-height:
        43px !important;

    margin-top:
        6px !important;

    padding:
        10px 12px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid rgba(0,0,0,.13) !important;

    border-radius:
        12px !important;

    outline:
        none !important;

    background:
        rgba(255,255,255,.65) !important;

    color:
        #111 !important;

    font-size:
        11px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90) !important;

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


#vanceCheckout input:not([type="radio"]):focus,
#vanceCheckout select:focus,
#vanceCheckout textarea:focus{

    border-color:
        rgba(0,0,0,.45) !important;

    background:
        rgba(255,255,255,.90) !important;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.035) !important;
}


/* placeholders */

#vanceCheckout input::placeholder,
#vanceCheckout textarea::placeholder{

    color:
        rgba(0,0,0,.35) !important;
}


/* =========================================================
   GRID
   ========================================================= */

#vanceCheckout .vc-grid{

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        10px !important;
}


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

#vanceCheckout .vc-method{

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        11px !important;

    width:
        100% !important;

    min-height:
        56px !important;

    margin:
        8px 0 !important;

    padding:
        10px 12px !important;

    box-sizing:
        border-box !important;

    background:
        rgba(255,255,255,.46) !important;

    border:
        1px solid rgba(0,0,0,.09) !important;

    border-radius:
        15px !important;

    color:
        #111 !important;

    cursor:
        pointer !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;
}


/* selected payment */

#vanceCheckout .vc-method:has(input:checked){

    background:
        #111 !important;

    border-color:
        #111 !important;

    color:
        #fff !important;
}


#vanceCheckout .vc-method:has(input:checked) strong,
#vanceCheckout .vc-method:has(input:checked) small,
#vanceCheckout .vc-method:has(input:checked) span{

    color:
        #fff !important;
}


/* normal method text */

#vanceCheckout .vc-method strong{

    color:
        #111 !important;

    font-size:
        11px !important;
}


#vanceCheckout .vc-method small{

    color:
        rgba(0,0,0,.50) !important;

    font-size:
        8px !important;
}


/* =========================================================
   ISLANDWIDE DELIVERY NOTE
   ========================================================= */

#vanceCheckout .vance-bank-islandwide-note{

    background:
        rgba(255,255,255,.52) !important;

    border:
        1px solid rgba(0,0,0,.09) !important;

    border-radius:
        13px !important;

    color:
        #111 !important;
}


#vanceCheckout .vance-bank-islandwide-note *{

    color:
        #111 !important;
}


/* =========================================================
   SUMMARY
   ========================================================= */

#vanceCheckout .vc-summary{

    padding:
        15px !important;

    margin:
        10px 0 15px !important;

    border:
        1px solid rgba(0,0,0,.08) !important;

    border-radius:
        17px !important;

    background:
        rgba(255,255,255,.42) !important;

    color:
        #111 !important;
}


#vanceCheckout .vc-summary *{

    color:
        #111 !important;
}


/* =========================================================
   PRIMARY BUTTONS
   ========================================================= */

#vanceCheckout .vc-primary,
#vanceCheckout #vcReviewButton,
#vanceCheckout #vancePaymentAction{

    width:
        100% !important;

    min-height:
        47px !important;

    padding:
        11px 16px !important;

    border:
        1px solid #111 !important;

    border-radius:
        13px !important;

    background:
        #111 !important;

    color:
        #fff !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .02em !important;

    cursor:
        pointer !important;

    box-shadow:
        0 9px 24px rgba(0,0,0,.12) !important;
}


#vanceCheckout .vc-primary *{

    color:
        #fff !important;
}


/* disabled */

#vanceCheckout .vc-primary:disabled{

    opacity:
        .38 !important;

    cursor:
        not-allowed !important;
}


/* =========================================================
   REVIEW SECTION
   ========================================================= */

#vanceCheckout #vcReview{

    margin-bottom:
        22px !important;

    padding:
        17px !important;

    background:
        rgba(255,255,255,.44) !important;

    border:
        1px solid rgba(0,0,0,.09) !important;

    border-radius:
        18px !important;

    color:
        #111 !important;
}


#vanceCheckout #vcReview *{

    color:
        #111;
}


/* =========================================================
   INTERNAL SCROLLBAR
   ========================================================= */

#vanceCheckout{

    scrollbar-width:
        thin !important;

    scrollbar-color:
        rgba(0,0,0,.22)
        transparent !important;
}


#vanceCheckout::-webkit-scrollbar{

    width:
        6px !important;
}


#vanceCheckout::-webkit-scrollbar-track{

    background:
        transparent !important;
}


#vanceCheckout::-webkit-scrollbar-thumb{

    background:
        rgba(0,0,0,.20) !important;

    border-radius:
        999px !important;
}


#vanceCheckout::-webkit-scrollbar-button{

    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;
}


/* =========================================================
   BOTTOM SPACE
   ========================================================= */

#vanceCheckout #vanceCheckoutForm{

    padding-bottom:
        22px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    #vanceCheckout.vance-checkout,
    dialog#vanceCheckout{

        width:
            calc(100vw - 14px) !important;

        max-height:
            94dvh !important;

        border-radius:
            22px !important;
    }


    #vanceCheckout .vc-top{

        padding:
            11px 12px !important;
    }


    #vanceCheckout .vc-brand,
    #vanceCheckout .vc-eyebrow,
    #vanceCheckout #checkoutTitle,
    #vanceCheckout .vc-intro,
    #vanceCheckout #vanceCheckoutForm,
    #vanceCheckout #vcReview{

        margin-left:
            14px !important;

        margin-right:
            14px !important;
    }


    #vanceCheckout .vc-brand{

        margin-top:
            17px !important;

        font-size:
            14px !important;
    }


    #vanceCheckout #checkoutTitle{

        font-size:
            27px !important;
    }


    #vanceCheckout fieldset{

        padding:
            13px !important;

        border-radius:
            15px !important;
    }


    #vanceCheckout .vc-grid{

        grid-template-columns:
            1fr !important;

        gap:
            0 !important;
    }


    #vanceCheckout input,
    #vanceCheckout select,
    #vanceCheckout textarea{

        min-height:
            42px !important;
    }

}

/* =========================================================
   VANCE CEYLON — PAYMENT METHOD CLEAN FIX
   Root cause fixed:
   - radio inputs are NOT styled like full-width text inputs
   - COD / Bank Deposit labels are centered
   - native round radio mark is hidden
   - selected choice stays clean (no giant black bar)
   - bank/COD information remains visible below the choices
   ========================================================= */

#vanceCheckout .vc-method{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:62px !important;
    margin:8px 0 !important;
    padding:12px 16px !important;
    gap:0 !important;

    border:1px solid rgba(0,0,0,.12) !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.62) !important;
    color:#111 !important;
    box-shadow:none !important;

    text-align:center !important;
    cursor:pointer !important;
    overflow:hidden !important;
}

/* Remove the visible radio circle completely */
#vanceCheckout .vc-method input[type="radio"]{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;

    width:1px !important;
    height:1px !important;
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

/* Keep all payment text in the center */
#vanceCheckout .vc-method > span{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#111 !important;
}

#vanceCheckout .vc-method strong{
    display:block !important;
    margin:0 !important;
    color:#111 !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    text-align:center !important;
}

#vanceCheckout .vc-method small{
    display:block !important;
    margin-top:4px !important;
    color:rgba(0,0,0,.55) !important;
    font-size:9px !important;
    line-height:1.35 !important;
    text-align:center !important;
}

/* Do not turn the selected payment into a giant black rectangle */
#vanceCheckout .vc-method:has(input[type="radio"]:checked){
    background:rgba(0,0,0,.055) !important;
    border:1.5px solid #111 !important;
    color:#111 !important;
    box-shadow:0 0 0 2px rgba(0,0,0,.025) !important;
}

#vanceCheckout .vc-method:has(input[type="radio"]:checked) strong,
#vanceCheckout .vc-method:has(input[type="radio"]:checked) small,
#vanceCheckout .vc-method:has(input[type="radio"]:checked) span{
    color:#111 !important;
}

/* Old payment badge/icon is not needed in this clean layout */
#vanceCheckout .vc-method-icon{
    display:none !important;
}

/* Clean information box below COD / Bank Deposit */
#vanceCheckout #vcBankDetails,
#vanceCheckout #vcBankInfo{
    display:block !important;
    width:100% !important;
    margin:12px 0 0 !important;
    padding:13px 15px !important;
    box-sizing:border-box !important;

    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:13px !important;
    background:rgba(255,255,255,.55) !important;
    color:#222 !important;

    font-size:10px !important;
    line-height:1.6 !important;
    text-align:left !important;
    white-space:pre-wrap !important;
}

/* Hide empty info box */
#vanceCheckout #vcBankDetails:empty,
#vanceCheckout #vcBankInfo:empty{
    display:none !important;
}

/* The extra island-wide helper should not sit beside payment labels */
#vanceCheckout .vance-bank-islandwide-note{
    width:100% !important;
    margin:10px 0 0 !important;
    padding:11px 13px !important;
    box-sizing:border-box !important;
    text-align:left !important;
}

#vanceCheckout .vance-bank-islandwide-note[hidden]{
    display:none !important;
}

@media(max-width:600px){
    #vanceCheckout .vc-method{
        min-height:58px !important;
        padding:11px 12px !important;
    }

    #vanceCheckout .vc-method strong{
        font-size:12px !important;
    }

    #vanceCheckout .vc-method small{
        font-size:8px !important;
    }
}