/* =========================================================
   VANCE CEYLON — CHECKOUT FINAL SCROLL PATCH v2
   REPLACE existing checkout-final-scroll-fix.css with this file.
   No HTML changes required.
   ========================================================= */

/* Native dialog frame: fixed, clean, never scroll the whole dialog */
#vanceCheckout[open]{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    width:min(620px, calc(100vw - 28px)) !important;
    max-width:620px !important;
    height:min(88dvh, 760px) !important;
    max-height:min(88dvh, 760px) !important;
    min-height:0 !important;
    padding:0 !important;
    margin:auto !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(0,0,0,.10) !important;
    box-shadow:0 28px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.94) !important;
    backdrop-filter:blur(28px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(125%) !important;
}

#vanceCheckout::backdrop{
    background:rgba(245,245,245,.52) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}

/* Top bar always visible */
#vanceCheckout > .vc-top{
    position:relative !important;
    top:auto !important;
    z-index:50 !important;
    grid-row:1 !important;
    flex:0 0 auto !important;
    margin:0 !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;
}

/* THE ONLY SCROLLING AREA */
#vanceCheckout > .vc-scroll-body{
    grid-row:2 !important;
    min-height:0 !important;
    height:100% !important;
    max-height:100% !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(0,0,0,.30) transparent !important;
    padding:0 0 26px !important;
    box-sizing:border-box !important;
    touch-action:pan-y !important;
}

#vanceCheckout > .vc-scroll-body::-webkit-scrollbar{
    width:8px !important;
}

#vanceCheckout > .vc-scroll-body::-webkit-scrollbar-track{
    background:transparent !important;
}

#vanceCheckout > .vc-scroll-body::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.26) !important;
    border-radius:999px !important;
    border:2px solid transparent !important;
    background-clip:padding-box !important;
}

#vanceCheckout > .vc-scroll-body::-webkit-scrollbar-thumb:hover{
    background:rgba(0,0,0,.40) !important;
    background-clip:padding-box !important;
}

#vanceCheckout > .vc-scroll-body::-webkit-scrollbar-button{
    width:0 !important;
    height:0 !important;
    display:none !important;
}

/* Keep all normal checkout content inside the scroll body */
#vanceCheckout .vc-scroll-body .vc-brand,
#vanceCheckout .vc-scroll-body .vc-eyebrow,
#vanceCheckout .vc-scroll-body #checkoutTitle,
#vanceCheckout .vc-scroll-body .vc-intro,
#vanceCheckout .vc-scroll-body #vanceCheckoutForm,
#vanceCheckout .vc-scroll-body #vcReview{
    margin-left:22px !important;
    margin-right:22px !important;
}

#vanceCheckout .vc-scroll-body .vc-brand{
    margin-top:20px !important;
}

/* =========================================================
   COMPACT PRODUCT PREVIEW — SMALL 3:4 CARD
   ========================================================= */

#vanceCheckout .vc-order-preview{
    margin:14px 22px 16px !important;
    padding:14px !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.42) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}

#vanceCheckout .vc-order-preview-title{
    margin:0 0 10px !important;
    color:rgba(0,0,0,.58) !important;
    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

#vanceCheckout .vc-order-preview-list{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}

#vanceCheckout .vc-order-preview-item{
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) auto !important;
    gap:12px !important;
    align-items:center !important;
    padding:9px !important;
    border:1px solid rgba(0,0,0,.07) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.58) !important;
}

/* Small 3:4 product image */
#vanceCheckout .vc-order-preview-image{
    width:72px !important;
    height:96px !important;
    aspect-ratio:3 / 4 !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:11px !important;
    background:#f2f2f2 !important;
    border:1px solid rgba(0,0,0,.06) !important;
}

#vanceCheckout .vc-order-preview-info{
    min-width:0 !important;
}

#vanceCheckout .vc-order-preview-name{
    display:block !important;
    margin:0 0 5px !important;
    color:#111 !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

#vanceCheckout .vc-order-preview-meta{
    color:rgba(0,0,0,.54) !important;
    font-size:9px !important;
    line-height:1.55 !important;
}

#vanceCheckout .vc-order-preview-price{
    color:#111 !important;
    font-size:11px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    align-self:center !important;
}

/* Ensure form can grow naturally inside scroll body */
#vanceCheckout #vanceCheckoutForm,
#vanceCheckout .vc-fields,
#vanceCheckout .vc-methods,
#vanceCheckout .vc-summary,
#vanceCheckout #vcReview{
    min-height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}

/* Prevent old checkout rules from clipping content */
#vanceCheckout .vc-scroll-body > *{
    flex-shrink:0 !important;
}

@media (max-width:600px){
    #vanceCheckout[open]{
        width:calc(100vw - 14px) !important;
        height:92dvh !important;
        max-height:92dvh !important;
        border-radius:22px !important;
    }

    #vanceCheckout .vc-scroll-body .vc-brand,
    #vanceCheckout .vc-scroll-body .vc-eyebrow,
    #vanceCheckout .vc-scroll-body #checkoutTitle,
    #vanceCheckout .vc-scroll-body .vc-intro,
    #vanceCheckout .vc-scroll-body #vanceCheckoutForm,
    #vanceCheckout .vc-scroll-body #vcReview{
        margin-left:14px !important;
        margin-right:14px !important;
    }

    #vanceCheckout .vc-order-preview{
        margin-left:14px !important;
        margin-right:14px !important;
    }

    #vanceCheckout .vc-order-preview-item{
        grid-template-columns:64px minmax(0,1fr) !important;
    }

    #vanceCheckout .vc-order-preview-image{
        width:64px !important;
        height:85px !important;
    }

    #vanceCheckout .vc-order-preview-price{
        grid-column:2 !important;
        justify-self:start !important;
        margin-top:-4px !important;
    }
}


/* =========================================================
   VANCE CEYLON — CHECKOUT CENTER + RELOAD BUTTON FINAL FIX
   Load last. No HTML / JS changes required.
   ========================================================= */

#vanceCheckout[open]{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
    width:min(620px, calc(100vw - 36px)) !important;
    height:min(82dvh, 760px) !important;
    max-height:min(82dvh, 760px) !important;
}

#vanceCheckout > .vc-scroll-body{
    padding-bottom:30px !important;
}

#vanceCheckout #vcReload{
    display:block !important;
    width:max-content !important;
    max-width:calc(100% - 44px) !important;
    margin:18px auto 20px !important;
    padding:10px 16px !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    text-align:center !important;
    white-space:nowrap !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.68) !important;
    color:#111 !important;
    box-shadow:0 5px 16px rgba(0,0,0,.04) !important;
}

#vanceCheckout #vanceCheckoutForm{
    padding-top:2px !important;
}

@media(max-width:600px){
    #vanceCheckout[open]{
        top:50% !important;
        left:50% !important;
        transform:translate(-50%, -50%) !important;
        width:calc(100vw - 16px) !important;
        height:90dvh !important;
        max-height:90dvh !important;
        margin:0 !important;
    }

    #vanceCheckout #vcReload{
        max-width:calc(100% - 28px) !important;
        margin:14px auto 18px !important;
        padding:9px 13px !important;
        font-size:10px !important;
    }
}