/* ============ v3.188.0 — SOLID STRUCTURE OVERHAUL ============
   Cart drawer + checkout modal rebuilt with heavy-weight, robust, hard-coded
   visual structure. Solid backgrounds (no translucency), thicker borders
   (border-2), deep layered shadows for grounding, structural section headers
   with icon containers, heavier item cards, solid active states.
   Keeps instant-load (no spinner, no delay). */

/* ---- SOLID CART DRAWER PANEL ---- */
.xoro-solid-drawer{
    background:#0d0d0d !important;
    border-left:2px solid rgba(132,204,22,.18) !important;
    box-shadow:-24px 0 70px -12px rgba(0,0,0,.85),
               -1px 0 0 rgba(132,204,22,.08),
               inset 1px 0 0 rgba(255,255,255,.04) !important;
}
[data-theme="light"] .xoro-solid-drawer{
    background:#ffffff !important;
    border-left:2px solid rgba(168,127,16,.2) !important;
    box-shadow:-24px 0 70px -12px rgba(0,0,0,.25),
               -1px 0 0 rgba(168,127,16,.12) !important;
}
.xoro-drawer-header{
    background:linear-gradient(180deg,rgba(132,204,22,.04) 0%,transparent 100%) !important;
}
[data-theme="light"] .xoro-drawer-header{
    background:linear-gradient(180deg,rgba(168,127,16,.04) 0%,transparent 100%) !important;
}
.xoro-drawer-body{background:#0d0d0d !important}
[data-theme="light"] .xoro-drawer-body{background:#fafafa !important}

/* ---- SOLID CHECKOUT MODAL PANEL ---- */
.xoro-solid-modal{
    background:#0f0f0f !important;
    box-shadow:0 28px 90px -12px rgba(0,0,0,.8),
               0 0 0 1px rgba(132,204,22,.1),
               0 0 70px -20px rgba(132,204,22,.18) !important;
}
[data-theme="light"] .xoro-solid-modal{
    background:#ffffff !important;
    box-shadow:0 28px 90px -12px rgba(0,0,0,.28),
               0 0 0 1px rgba(168,127,16,.14),
               0 0 70px -20px rgba(168,127,16,.2) !important;
}

/* ---- SOLID ORDER SUMMARY TOGGLE ---- */
.xoro-solid-toggle{
    border:1px solid rgba(132,204,22,.28) !important;
    background:rgba(132,204,22,.04) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.12) !important;
}
.xoro-solid-toggle:hover{
    border-color:rgba(132,204,22,.45) !important;
    background:rgba(132,204,22,.07) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.18) !important;
}
[data-theme="light"] .xoro-solid-toggle{
    border:1px solid rgba(168,127,16,.25) !important;
    background:rgba(168,127,16,.04) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
}
[data-theme="light"] .xoro-solid-toggle:hover{
    border-color:rgba(168,127,16,.45) !important;
    background:rgba(168,127,16,.07) !important;
}

/* ---- SOLID CART ITEM CARD (used in renderCartDrawer JS) ---- */
.xoro-cart-item{
    background:rgba(132,204,22,.04) !important;
    border:1px solid rgba(132,204,22,.18) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.14) !important;
    transition:all .2s ease !important;
}
.xoro-cart-item:hover{
    background:rgba(132,204,22,.07) !important;
    border-color:rgba(132,204,22,.38) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.24) !important;
}
[data-theme="light"] .xoro-cart-item{
    background:rgba(168,127,16,.03) !important;
    border:1px solid rgba(168,127,16,.18) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
}
[data-theme="light"] .xoro-cart-item:hover{
    background:rgba(168,127,16,.06) !important;
    border-color:rgba(168,127,16,.38) !important;
}

/* ---- SOLID CART DRAWER FOOTER ---- */
.xoro-drawer-footer{
    background:linear-gradient(0deg,rgba(132,204,22,.03) 0%,transparent 100%) !important;
    box-shadow:0 -8px 24px -8px rgba(0,0,0,.4) !important;
}
[data-theme="light"] .xoro-drawer-footer{
    background:linear-gradient(0deg,rgba(168,127,16,.03) 0%,transparent 100%) !important;
    box-shadow:0 -8px 24px -8px rgba(0,0,0,.08) !important;
}

/* ---- SOLID PLACE ORDER BUTTON ---- */
.xoro-solid-submit{
    box-shadow:0 8px 24px -4px rgba(132,204,22,.4),
               0 2px 8px rgba(0,0,0,.2),
               inset 0 1px 0 rgba(255,255,255,.25) !important;
    text-shadow:0 1px 1px rgba(0,0,0,.12) !important;
}
.xoro-solid-submit:hover:not(:disabled){
    box-shadow:0 12px 32px -4px rgba(132,204,22,.5),
               0 4px 12px rgba(0,0,0,.25),
               inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ---- SOLID EMPTY CART STATE ---- */
.xoro-empty-cart{
    background:radial-gradient(ellipse at top,rgba(132,204,22,.04) 0%,transparent 60%) !important;
}

/* ============ v3.204.0 — PHONE FIELD PAKISTAN FLAG (correct SVG) ============
   The PK flag is a proper twemoji SVG (22×22px) absolutely positioned inside
   the input on the left, centered vertically. The input has pl-12 (48px left
   padding) so the flag NEVER overlaps the placeholder text. The flag has a
   subtle 3px border-radius for a clean look. On focus, the flag scales 1.05×
   for visual feedback. */
.xoro-phone-flag-wrap svg {
    transition: transform .2s ease;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.xoro-phone-input:focus-within .xoro-phone-flag-wrap svg {
    transform: scale(1.08);
}

/* ============ v3.208.0 — CHECKOUT LOGO (theme-aware) ============
   Two logos can be set in admin: one for dark theme, one for light theme.
   The dark logo shows by default; the light logo shows when [data-theme="light"]
   is active on <html>. Both are eager-loaded (no lazy) for instant display. */
.xoro-checkout-logo--dark { display: block !important; }
.xoro-checkout-logo--light { display: none !important; }
[data-theme="light"] .xoro-checkout-logo--dark { display: none !important; }
[data-theme="light"] .xoro-checkout-logo--light { display: block !important; }
/* Mobile: keep logo big (no shrink) — left-aligned */
@media (max-width: 640px) {
    .xoro-checkout-logo--dark,
    .xoro-checkout-logo--light {
        max-height:56px !important;
        max-width:220px !important;
    }
}

/* ============ v3.201.0 — MOBILE UI POLISH ============
   Tighter, more beautiful padding/margins for mobile checkout. Larger touch
   targets, better spacing rhythm, no cramped feeling. */
@media (max-width: 640px) {
    #checkoutForm {
        padding: 16px !important;
    }
    /* Tighter field spacing on mobile — fits more without scroll */
    .xoro-field-group + .xoro-field-group,
    #coCityWrap + .xoro-field-group {
        margin-top: 10px !important;
    }
    /* Inputs: 44px minimum touch target height */
    .xoro-input {
        min-height: 44px;
    }
    /* Order summary toggle: easier to tap */
    #coSummaryToggle {
        padding: 14px 12px !important;
    }
    /* Place order button: 48px touch target */
    #coSubmitBtn {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        font-size: 15px !important;
    }
    /* Payment method buttons: bigger touch target */
    .co-payment-btn {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* ============ City dropdown styles ============ */
#cityDropdown { background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 12px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
#cityDropdown::-webkit-scrollbar { width: 6px; }
#cityDropdown::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 3px; }
#cityDropdown::-webkit-scrollbar-thumb { background: #84CC16; border-radius: 3px; }
.city-dropdown-item { padding: 10px 16px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; color: #ffffff; border-bottom: 1px solid rgba(132,204,22,0.12); }
.city-dropdown-item:last-child { border-bottom: none; }
.city-dropdown-item:hover { background: rgba(132, 204, 22, 0.15); color: #84CC16; }
.city-dropdown-item.highlight { background: rgba(132, 204, 22, 0.25); color: #84CC16; }
.city-no-results { padding: 12px 16px; text-align: center; color: #888888; font-size: 13px; }
/* v3.131.0 — Gold scrollbar for city dropdown */
.chk-city-scroll { scrollbar-width: thin; scrollbar-color: #84CC16 #1a1a1a; }
.chk-city-scroll::-webkit-scrollbar { width: 6px; }
.chk-city-scroll::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 9999px; }
.chk-city-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #84CC16, #b8941f); border-radius: 9999px; }
.chk-city-scroll::-webkit-scrollbar-thumb:hover { background: #84CC16; }

/* ============ v3.162 — SMART INLINE VALIDATION STYLES ============
   Subtle red border + tinted bg on the invalid input. Concise inline message
   directly below the field (no layout jump — the message element is created
   once and shown/hidden). Clear state removes both instantly. */
.xoro-field-error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 0 12px rgba(239, 68, 68, 0.25) !important;
    animation: xoroFieldShake 0.3s cubic-bezier(.36,.07,.19,.97);
}
.xoro-field-error::placeholder { color: rgba(239, 68, 68, 0.5); }
.xoro-field-error-msg {
    display: none;
    align-items: flex-start;
    gap: 4px;
    margin: 5px 2px 0;
    color: #f87171;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
}
@keyframes xoroFieldShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}
/* Light-theme: keep the red readable on white */
[data-theme="light"] .xoro-field-error { background: rgba(239, 68, 68, 0.04) !important; }
[data-theme="light"] .xoro-field-error-msg { color: #dc2626; background: rgba(239, 68, 68, 0.06); }

/* ============ COMPACT ORDER SUMMARY ============ */
.co-summary{width:100%}
.co-header{cursor:pointer;user-select:none;outline:none}
.co-header:focus-visible{box-shadow:0 0 0 2px rgba(132,204,22,.4)}
.co-chevron{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.co-header[aria-expanded="true"] .co-chevron{transform:rotate(180deg)}
.co-header[aria-expanded="true"] .co-hint{display:none}
.co-items-wrap{transition:max-height .25s cubic-bezier(.4,0,.2,1);will-change:max-height;contain:layout style}
.co-items{max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(132,204,22,.45) transparent}
.co-items::-webkit-scrollbar{width:6px}
.co-items::-webkit-scrollbar-track{background:transparent}
.co-items::-webkit-scrollbar-thumb{background:rgba(132,204,22,.45);border-radius:3px}
.co-items::-webkit-scrollbar-thumb:hover{background:rgba(132,204,22,.7)}

/* ===== v3.163.0 — UPSELL CSS REMOVED =====
   The custom upsell system (.xoro-upsell-clean, .xoro-upsell-scroll,
   .xoro-upsell-add-btn, .xoro-upsell-loading, #xoroCartUpsell, #upsellSection)
   has been permanently removed. The CSS rules below were deleted at the source.
   Legitimate WooCommerce checkout + cart styling is unaffected. */

.co-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(132,204,22,.05);border:1px solid rgba(132,204,22,.22);transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.co-item:hover{background:rgba(132,204,22,.1);border-color:rgba(132,204,22,.45);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.co-item+.co-item{margin-top:10px}
.co-item-img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgba(132,204,22,.1);border:1px solid rgba(132,204,22,.15)}
.co-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.co-item-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.co-item-meta{font-size:12px;color:#999;line-height:1.3}
.co-item-price{font-size:14px;font-weight:800;color:#84CC16;flex-shrink:0;white-space:nowrap}
.co-item-remove{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#666;border-radius:6px;transition:all .2s;cursor:pointer;background:transparent;border:none}
.co-item-remove:hover{color:#f87171;background:rgba(248,113,113,.12)}
.co-totals{font-size:13px}

/* ============ PAYMENT METHOD SELECTOR ============ */
.co-payment-btn{cursor:pointer;user-select:none;outline:none;overflow:visible}
.co-payment-btn:focus-visible{box-shadow:0 0 0 2px rgba(132,204,22,.4)}
.co-payment-btn:hover{border-color:rgba(132,204,22,.4)}
.co-payment-active{border-color:#84CC16 !important;background:rgba(132,204,22,.1) !important;box-shadow:0 0 0 1px rgba(132,204,22,.4),0 4px 14px rgba(132,204,22,.18) !important}
.co-payment-active i{color:#84CC16 !important}
.co-payment-active span{color:#84CC16 !important}

/* Payment method logos */
.co-payment-logo-wrap{height:36px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.co-payment-logo{max-height:36px;max-width:60px;width:auto;height:auto;object-fit:contain;border-radius:6px;transition:transform .2s, filter .2s;filter:grayscale(30%) opacity(75%)}
.co-payment-active .co-payment-logo{filter:grayscale(0) opacity(1);transform:scale(1.08)}
.co-payment-btn:hover .co-payment-logo{filter:grayscale(0) opacity(90%)}
.co-payment-logo-svg{width:32px;height:32px;color:#888}
.co-payment-active .co-payment-logo-svg{color:#84CC16}
.co-payment-logo-icon{transition:color .2s}

/* ============ v3.41.0 / v3.57.0: PLACE ORDER BUTTON — CLEAN MODERN FAST ANIMATION ============ */
/* Processing: dark chip + gold spinner. Success: green pop + checkmark draw.
   Timings tightened in v3.57.0 to complete inside the 380ms pre-redirect
   window so the whole feedback (pop + check) plays before the instant
   preloaded redirect to the thank-you page. */
#coSubmitBtn{
    position:relative;
    overflow:hidden;
    transition:transform .2s cubic-bezier(.4,0,.2,1), background .25s;
    animation: xoroCtaAttract 2.5s ease-in-out infinite;
}
/* v3.219.0 — Shimmer sweep (same as Buy Now on product page) */
#coSubmitBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: xoroCoSweep 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes xoroCoSweep {
    0% { left: -50%; }
    50% { left: 100%; }
    100% { left: 100%; }
}
@keyframes xoroCtaAttract {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px -4px rgba(132,204,22,.4), 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3); }
    50% { transform: scale(1.015); box-shadow: 0 12px 32px -4px rgba(132,204,22,.5), 0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35), 0 0 20px rgba(132,204,22,.3); }
}
#coSubmitBtn.xoro-anim-processing{background:#1a1a1a !important;color:#84CC16 !important;transform:scale(.98) !important;animation:none}
/* v3.237.0 — Spin the SVG icon inside the button when processing */
#coSubmitBtn.xoro-anim-processing svg{animation:xoroSpin .8s linear infinite}
#coSubmitBtn.xoro-anim-success{background:#16a34a !important;color:#fff !important;transform:scale(1.02) !important;animation:xoroBtnPop .38s cubic-bezier(.16,1,.3,1) !important}
@keyframes xoroSpin{to{transform:rotate(360deg)}}
@keyframes xoroBtnPop{0%{transform:scale(.98)}55%{transform:scale(1.06)}100%{transform:scale(1.02)}}

/* Progress fill bar inside the button */
.xoro-btn-progress{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#84CC16,#F7E7CE,#84CC16);background-size:200% 100%;width:0%;transition:width 1.4s cubic-bezier(.4,0,.2,1);animation:xoroProgressShimmer 1s linear infinite}
@keyframes xoroProgressShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Spinner (replaces lucide loader for custom look) */
.xoro-btn-spinner{display:inline-block;width:20px;height:20px;border:2.5px solid rgba(132,204,22,.25);border-top-color:#84CC16;border-radius:50%;animation:xoroSpin .7s linear infinite}
@keyframes xoroSpin{to{transform:rotate(360deg)}}

/* Checkmark SVG draw animation — snappy, completes inside the 380ms redirect window */
.xoro-btn-checkmark{display:inline-flex;width:24px;height:24px}
.xoro-btn-checkmark svg{width:24px;height:24px}
.xoro-btn-checkmark .xoro-check-circle{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:166;stroke-dashoffset:166;animation:xoroCheckCircle .3s cubic-bezier(.65,0,.45,1) forwards}
.xoro-btn-checkmark .xoro-check-mark{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:xoroCheckMark .2s .22s cubic-bezier(.65,0,.45,1) forwards}
@keyframes xoroCheckCircle{to{stroke-dashoffset:0}}
@keyframes xoroCheckMark{to{stroke-dashoffset:0}}

/* Confetti container — full viewport overlay */
#xoroConfettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:99999;display:none}
#xoroConfettiCanvas.xoro-confetti-active{display:block}

/* ============ PACKING OVERLAY CSS REMOVED ============ */
/* The gift-box packing overlay was removed. placeOrder() now uses
   the original v3.4.0 redirect: lucide loader → lucide check-circle +
   "Redirecting..." → window.location.href after 300ms. The custom button
   animation classes below (.xoro-anim-processing/.xoro-anim-success) are kept
   as dead CSS — they are no longer added to the button by JS. */

/* Recommended badge — gold gradient, perfect positioning
   v3.161.9 — Made theme-aware. On white theme the bright gold gradient (#84CC16 → #d9f99d)
   + invisible white border looked out of place. Now: dark theme keeps the original bright
   gold gradient; light theme uses a darker richer gold gradient + visible border + stronger
   shadow so the badge reads cleanly on white card backgrounds. */
.co-recommended-badge{
    position:absolute;
    top:-9px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(135deg,#84CC16 0%,#d9f99d 50%,#84CC16 100%);
    color:#1a1a1a;
    font-size:8px;
    font-weight:800;
    letter-spacing:0.06em;
    padding:3px 10px;
    border-radius:9999px;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(132,204,22,.4);
    border:1px solid rgba(255,255,255,.2);
    z-index:2;
    text-transform:uppercase;
}
[data-theme="light"] .co-recommended-badge{
    /* Darker, richer gold gradient so the badge still pops on white card backgrounds
       while matching the muted-gold palette of the light theme (a87f10 family). */
    background:linear-gradient(135deg,#4d7c0f 0%,#84cc16 50%,#4d7c0f 100%);
    color:#ffffff;                  /* white text reads on the darker gold */
    border:1px solid rgba(168,127,16,.45);  /* visible rim on white */
    box-shadow:0 2px 10px rgba(168,127,16,.35);
    text-shadow:0 1px 1px rgba(0,0,0,.18);  /* subtle depth so 8px text stays crisp */
}
.co-recommended-badge::before{
    content:'';
    position:absolute;
    bottom:-4px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid #84CC16;
}
/* v3.161.9 — Arrow color matches the light-theme badge gradient */
[data-theme="light"] .co-recommended-badge::before{
    border-top-color:#4d7c0f;
}

/* ============ MANUAL PAYMENT PANEL (JazzCash / EasyPaisa) ============ */
#coManualPaymentPanel{animation:coFadeSlide .35s cubic-bezier(.16,1,.3,1)}
@keyframes coFadeSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.co-manual-card{background:linear-gradient(145deg,#1e1e1e 0%,#181818 100%);border:1px solid #2a2a2a;border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.co-manual-header{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.co-manual-account{background:#111;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden}
.co-account-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #1f1f1f;gap:8px}
.co-account-row:last-child{border-bottom:none}
.co-account-row-main{background:rgba(132,204,22,.04)}
.co-amount-row{background:rgba(132,204,22,.08)}
.co-account-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.04em;font-weight:600;flex-shrink:0}
.co-account-value{font-size:14px;color:#fff;font-weight:600;text-align:right;flex:1;word-break:break-all}
.co-account-number{font-size:18px;color:#84CC16;font-weight:800;letter-spacing:.02em;font-family:'SF Mono',Monaco,Consolas,monospace}
.co-amount{font-size:20px;color:#84CC16;font-weight:900}
.co-copy-btn{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border:1px solid #333;border-radius:6px;color:#888;cursor:pointer;transition:all .15s}
.co-copy-btn:hover{background:#84CC16;color:#000;border-color:#84CC16}
.co-copy-btn.copied{background:#46b450;color:#fff;border-color:#46b450}
.co-manual-steps{margin-top:12px;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:12px 14px}
.co-steps-title{display:flex;align-items:center;gap:6px;font-size:11px;color:#84CC16;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.co-steps-text{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:11px;line-height:1.6;color:#bbb;white-space:pre-wrap;margin:0}

/* Screenshot upload */
.co-screenshot-section{margin-top:4px}
.co-screenshot-drop{position:relative;border:2px dashed #333;border-radius:14px;background:#141414;min-height:140px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;overflow:hidden}
.co-screenshot-drop:hover{border-color:#84CC16;background:#181818}
.co-screenshot-drop.dragover{border-color:#84CC16;background:rgba(132,204,22,.05)}
.co-screenshot-placeholder{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0;width:100%;height:100%}
.co-screenshot-default-thumb{width:100%;height:100%;max-height:200px;object-fit:cover;border-radius:12px;opacity:0.6;transition:opacity .2s}
.co-screenshot-drop:hover .co-screenshot-default-thumb{opacity:0.8}
.co-screenshot-placeholder-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.85) 100%);border-radius:12px;padding:16px}
.co-screenshot-preview{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.co-screenshot-preview img{max-width:100%;max-height:280px;object-fit:contain;border-radius:10px}
.co-screenshot-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.co-screenshot-remove:hover{background:#f87171;border-color:#f87171}
.co-screenshot-uploading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}

/* ============ CHECKOUT MODAL SMOOTH OPEN/CLOSE ANIMATION ============ */
/* Closed state: hidden (transparent + non-interactive) */
#checkoutModal.chk-closed{opacity:0;pointer-events:none;visibility:hidden}
/* Open state: visible */
#checkoutModal.chk-open{opacity:1;pointer-events:auto;visibility:visible}
/* Transition the container opacity — fast fade for instant feel */
#checkoutModal{transition:opacity .15s ease,visibility .15s ease}
/* Overlay: fade (fast) */
#checkoutModal .chk-overlay{transition:opacity .15s ease}
#checkoutModal.chk-closed .chk-overlay{opacity:0}
#checkoutModal.chk-open .chk-overlay{opacity:1}
/* Panel: scale + slide, snappy spring-like easing for an instant "pop". 
   GPU-accelerated. Slight overshoot (1.2) gives a lively snap-in without delay. */
#checkoutModal .chk-panel{transition:transform .18s cubic-bezier(.2,.9,.3,1.2),opacity .15s ease;will-change:transform,opacity}
#checkoutModal.chk-closed .chk-panel{transform:scale(.96) translateY(12px);opacity:0}
#checkoutModal.chk-open .chk-panel{transform:scale(1) translateY(0);opacity:1}

/* v3.133.0 — Enhanced checkout colors for better readability */
#checkoutModal input[type="text"],
#checkoutModal input[type="tel"],
#checkoutModal textarea {
    border-color: #404040 !important;
    color: #f3f4f6 !important;
}
#checkoutModal input[type="text"]:focus,
#checkoutModal input[type="tel"]:focus,
#checkoutModal textarea:focus {
    border-color: #84CC16 !important;
    box-shadow: 0 0 0 2px rgba(132,204,22,0.2) !important;
}
#checkoutModal input::placeholder,
#checkoutModal textarea::placeholder {
    color: #9ca3af !important;
}
#checkoutModal label {
    color: #f3f4f6 !important;
}
#checkoutModal .chk-panel {
    border-color: #3a3a3a !important;
}
#checkoutModal .co-header {
    border-color: rgba(132,204,22,.3) !important;
}
[data-theme="light"] #checkoutModal .co-header {
    border-color: rgba(168,127,16,.28) !important;
}
#checkoutModal .co-payment-btn {
    border-color: #3a3a3a !important;
}
#checkoutModal .co-payment-btn:hover {
    border-color: rgba(132,204,22,0.5) !important;
}

/* ============ v3.161.1 — LIGHT THEME: readable green text (was unreadable #86efac / text-green-400 on white) ============ */
/* The Selected City delivery-eta block + all green-400 chips/icons in the
   checkout modal were "parrot green" (#86efac / #4ade80) — invisible on white.
   Override with darker, WCAG-readable greens that keep the "success" feel. */

/* Selected City delivery estimate (the box shown after a city is picked) */
[data-theme="light"] .xoro-delivery-eta{
    background: rgba(21,128,61,.08) !important;     /* soft green-700/8% */
    border-color: rgba(21,128,61,.30) !important;   /* green-700/30% */
    color: #15803d !important;                      /* green-700 — readable on white */
}
[data-theme="light"] .xoro-delivery-eta svg{color:#15803d !important}

/* Free-shipping qualification chip ("You qualify for FREE Shipping") */
[data-theme="light"] #checkoutModal .bg-green-500\/10,
[data-theme="light"] #cartDrawer .bg-green-500\/10{
    background: rgba(21,128,61,.08) !important;
    border-color: rgba(21,128,61,.25) !important;
}
[data-theme="light"] #checkoutModal .text-green-400,
[data-theme="light"] #cartDrawer .text-green-400,
[data-theme="light"] #checkoutModal .text-green-500{
    color:#15803d !important;   /* green-700 — readable on white */
}
/* The dark-green SAVE badge keeps white text — fine on white */
[data-theme="light"] #checkoutModal .bg-green-500{background:#16a34a !important}
[data-theme="light"] #checkoutModal .bg-green-600{background:#15803d !important}

/* Trust row icons under Place Order button (Secure / WhatsApp Confirm / No Advance) */
[data-theme="light"] #checkoutModal .text-gray-400{color:#6b6b6b !important}

/* Success modal check icon circle */
[data-theme="light"] #checkoutSuccess .bg-green-500\/10{background:rgba(21,128,61,.10) !important}
[data-theme="light"] #checkoutSuccess .text-green-400{color:#15803d !important}

/* Same-day dispatch timer (countdown text — single source of truth, no duplicate label) */
#xoroDispatchTimer{color:#84CC16}                 /* gold — works in dark */
[data-theme="light"] #xoroDispatchTimer{color:#4d7c0f}  /* darker gold — readable on white */