/* ============================================================================
   STYLE X GADGETS — URGENCY & OFFERS BOOST 2027 (v3.287.0)
   ============================================================================
   100% ADDITIVE layer. No existing rule is modified — every selector below is
   either a brand-new class (xo-timer / xo-offer) or a cascade-safe override
   that uses :not(.xoro-field-valid):not(.xoro-field-error) guards so the
   v3.278 validation states (green check / red error) ALWAYS keep full control.

   CONTENTS
   1. .xo-timer        — fake deal countdown (product CTA + floating bar pill)
   2. .xo-offer        — expandable offer lines (product / checkout / cart)
   3. Checkout fields  — bigger, tighter, color-toned FOMO fields 2027
   4. Light theme + reduced-motion + responsive
   ============================================================================ */

/* ============================================================================
   1. DEAL COUNTDOWN TIMER — ".xo-timer"
   Placed directly above the product CTA stack. Warm ember palette on purpose:
   it must read as URGENCY (red/amber) and stand apart from the lime CTAs.
   ============================================================================ */
.xo-timer{
    position:relative;
    border-radius:18px;
    padding:13px 14px 12px;
    margin:0 0 12px;
    background:linear-gradient(165deg,#211410 0%,#180f0b 58%,#130d09 100%);
    border:1px solid rgba(255,122,64,.24);
    box-shadow:0 12px 32px -14px rgba(0,0,0,.6),
               inset 0 1px 0 rgba(255,196,150,.09);
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
}
/* soft ember glow at the top edge */
.xo-timer::before{
    content:"";
    position:absolute;top:-42px;left:50%;transform:translateX(-50%);
    width:72%;height:70px;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(255,120,50,.16) 0%,transparent 68%);
}
.xo-timer__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 2px}
.xo-timer__flame{display:flex;flex-shrink:0;filter:drop-shadow(0 2px 7px rgba(255,110,40,.55));animation:xoFlicker 2.4s ease-in-out infinite}
.xo-timer__label{
    font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
    color:#ffab70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color .3s ease;
}
.xo-timer__digits{display:flex;align-items:center;justify-content:center;gap:7px}
.xo-timer__chip{
    position:relative;
    min-width:48px;height:54px;padding:0 6px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#2c1a11 0%,#1d110b 100%);
    border:1px solid rgba(255,140,80,.30);
    border-radius:13px;
    box-shadow:inset 0 -9px 15px -9px rgba(0,0,0,.65),
               inset 0 1px 0 rgba(255,205,155,.14),
               0 3px 8px -3px rgba(0,0,0,.45);
    transition:border-color .3s ease;
}
/* subtle glass reflection line on each chip */
.xo-timer__chip::after{
    content:"";position:absolute;left:14%;right:14%;top:3px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,220,180,.28),transparent);
    border-radius:99px;pointer-events:none;
}
.xo-timer__d{
    font-size:27px;font-weight:900;line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#ffc76e 0%,#ff8a3d 62%,#ff6b35 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.xo-timer__d.is-tick{animation:xoDigit .34s cubic-bezier(.22,1,.36,1)}
.xo-timer__colon{
    font-size:23px;font-weight:900;color:#ff8a3d;line-height:1;
    animation:xoBlink 1s steps(1,end) infinite;
    text-shadow:0 0 10px rgba(255,110,40,.45);
}
.xo-timer__bar{
    height:6px;border-radius:99px;overflow:hidden;margin-top:11px;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.xo-timer__fill{
    display:block;height:100%;width:100%;border-radius:inherit;
    background:linear-gradient(90deg,#84CC16 0%,#facc15 42%,#fb923c 72%,#ef4444 100%);
    transform-origin:left center;
    transition:transform 1s linear;
    will-change:transform;
}
.xo-timer__sub{
    display:flex;align-items:center;gap:6px;
    margin-top:9px;padding:0 2px;
    font-size:11px;font-weight:700;color:#e8b48a;line-height:1.35;
}
.xo-timer__sub b{color:#ffc46b}

/* --- urgency states --- */
.xo-timer.is-warm .xo-timer__label{color:#fb923c}
.xo-timer.is-hot{border-color:rgba(239,68,68,.55);animation:xoHotPulse 1.15s ease-in-out infinite}
.xo-timer.is-hot .xo-timer__label{color:#f87171}
.xo-timer.is-hot .xo-timer__chip{border-color:rgba(239,68,68,.5)}
.xo-timer.is-hot .xo-timer__d{
    background:linear-gradient(180deg,#fda4a4 0%,#f26d6d 55%,#ef4444 100%);
    -webkit-background-clip:text;background-clip:text;
}
.xo-timer.is-hot .xo-timer__colon{color:#ef4444;text-shadow:0 0 10px rgba(239,68,68,.55)}

@keyframes xoDigit{
    0%{transform:translateY(46%) scale(.88);opacity:.2;filter:blur(1px)}
    100%{transform:none;opacity:1;filter:none}
}
@keyframes xoBlink{0%,55%{opacity:1}56%,100%{opacity:.25}}
@keyframes xoFlicker{
    0%,100%{transform:scale(1) rotate(-2deg)}
    30%{transform:scale(1.08) rotate(2deg)}
    55%{transform:scale(.96) rotate(-1deg)}
    80%{transform:scale(1.05) rotate(1deg)}
}
@keyframes xoHotPulse{
    0%,100%{box-shadow:0 12px 32px -14px rgba(0,0,0,.6),0 0 0 0 rgba(239,68,68,.38)}
    50%{box-shadow:0 12px 32px -14px rgba(0,0,0,.6),0 0 0 7px rgba(239,68,68,0)}
}

/* --- floating mini pill (sticky mobile CTA bar, zero layout shift) --- */
.xo-timer--float{
    position:absolute;top:-13px;right:14px;z-index:3;
    display:flex;align-items:center;gap:6px;
    padding:4px 11px 4px 8px;margin:0;
    border-radius:99px;
    background:linear-gradient(165deg,#26150e,#170e09);
    border:1px solid rgba(255,122,64,.45);
    box-shadow:0 6px 18px -6px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,205,155,.14);
    overflow:visible;
}
.xo-timer--float::before{display:none}
.xo-timer--float .xo-timer__flame{animation:xoFlicker 2.4s ease-in-out infinite}
.xo-timer--float .xo-timer__mtxt{
    font-size:11px;font-weight:900;letter-spacing:.06em;color:#ffab70;white-space:nowrap;
}
.xo-timer--float .xo-timer__mtime{
    font-size:14px;font-weight:900;color:#ff6b35;font-variant-numeric:tabular-nums;
    line-height:1;text-shadow:0 0 10px rgba(255,110,40,.4);white-space:nowrap;
}
.xo-timer--float.is-hot{border-color:rgba(239,68,68,.65)}
.xo-timer--float.is-hot .xo-timer__mtime{color:#ef4444;text-shadow:0 0 10px rgba(239,68,68,.5)}
.xo-timer--float.is-hot .xo-timer__mtxt{color:#f87171}

/* ============================================================================
   2. EXPANDABLE OFFER LINES — ".xo-offer"
   One-line headline → tap → smooth grid-rows accordion with check-marked
   selling lines. Used on: product page, checkout modal (main highlight),
   cart drawer. Pure-CSS buttery animation (no JS height measuring).
   ============================================================================ */
.xo-offer{
    position:relative;
    border-radius:16px;overflow:hidden;
    margin-bottom:12px;
    background:linear-gradient(150deg,rgba(132,204,22,.10) 0%,rgba(132,204,22,.03) 62%);
    border:1px solid rgba(132,204,22,.32);
    box-shadow:0 8px 24px -14px rgba(0,0,0,.45),inset 0 1px 0 rgba(220,255,160,.06);
    -webkit-tap-highlight-color:transparent;
}
.xo-offer__head{
    position:relative;display:flex;align-items:center;gap:9px;
    width:100%;padding:11px 13px;
    background:none;border:none;cursor:pointer;text-align:left;
    font:inherit;color:inherit;overflow:hidden;
    -webkit-tap-highlight-color:transparent;
}
/* gentle shine sweep across the headline (attention magnet, GPU-only) */
.xo-offer__head::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
    transform:translateX(-130%);
    animation:xoSweep 4.8s ease-in-out infinite;
}
.xo-offer__badge{font-size:17px;line-height:1;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(132,204,22,.5))}
.xo-offer__title{
    flex:1;min-width:0;
    font-size:12.5px;font-weight:800;color:#eef7da;letter-spacing:.01em;line-height:1.3;
    text-wrap:balance; /* graceful 2-line wrapping on narrow phones */
}
.xo-offer__title b{color:#a3e635}
.xo-offer__pill{
    flex-shrink:0;font-size:9px;font-weight:900;letter-spacing:.08em;
    color:#0c1206;background:linear-gradient(135deg,#a3e635,#84CC16);
    padding:3px 7px;border-radius:99px;white-space:nowrap;
}
.xo-offer__chev{
    flex-shrink:0;width:22px;height:22px;border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(132,204,22,.16);color:#a3e635;
    transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.xo-offer.is-open .xo-offer__chev{transform:rotate(180deg)}
/* body: 0fr → 1fr grid-rows accordion (smoothest pure-CSS expand) */
.xo-offer__body{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1);
}
.xo-offer.is-open .xo-offer__body{grid-template-rows:1fr}
.xo-offer__inner{
    overflow:hidden;min-height:0;
    visibility:hidden;transition:visibility 0s .42s;
}
.xo-offer.is-open .xo-offer__inner{visibility:visible;transition-delay:0s}
.xo-offer__content{
    padding:10px 14px 12px;
    border-top:1px dashed rgba(132,204,22,.20);
}
.xo-offer__line{
    display:flex;align-items:flex-start;gap:8px;
    padding:4.5px 0;
    font-size:12px;font-weight:600;color:#dbe1cb;line-height:1.45;
}
.xo-offer__line svg{flex-shrink:0;margin-top:2px}
.xo-offer__line b{color:#a3e635}
/* the synced "price locked" strip (updated live by the countdown engine) */
.xo-offer__lock{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    margin-top:9px;padding:8px 11px;
    border-radius:10px;
    background:rgba(132,204,22,.08);
    border:1px solid rgba(132,204,22,.26);
    font-size:12px;font-weight:700;color:#d9f99d;line-height:1.35;
}
.xo-offer__lock b{
    font-variant-numeric:tabular-nums;color:#a3e635;font-size:14.5px;
    padding:1px 7px;border-radius:7px;
    background:rgba(132,204,22,.14);border:1px solid rgba(132,204,22,.3);
}
.xo-offer__note{margin:8px 0 0;font-size:10.5px;font-weight:600;color:#9aa383;line-height:1.4}

/* --- MAIN HIGHLIGHT variant (checkout modal): gradient-border hero card --- */
.xo-offer--checkout{
    border:1.5px solid transparent;
    background:
        linear-gradient(160deg,#161a0b 0%,#101308 100%) padding-box,
        linear-gradient(120deg,#84CC16 0%,#eab308 45%,#f97316 100%) border-box;
    box-shadow:0 10px 30px -14px rgba(0,0,0,.55),0 0 24px -10px rgba(132,204,22,.28);
}
.xo-offer--checkout .xo-offer__head{padding:12px 14px}
.xo-offer--checkout .xo-offer__title{font-size:13px}
.xo-offer--checkout .xo-offer__content{border-top-color:rgba(132,204,22,.24)}

/* --- cart drawer variant: compact --- */
.xo-offer--cart{margin:0 12px 10px;border-radius:14px}
.xo-offer--cart .xo-offer__head{padding:10px 12px}
.xo-offer--cart .xo-offer__title{font-size:12px}

/* --- product page variant --- */
.xo-offer--product .xo-offer__head{padding:12px 13px}

@keyframes xoSweep{
    0%,55%{transform:translateX(-130%)}
    85%,100%{transform:translateX(130%)}
}

/* ============================================================================
   3. CHECKOUT FIELDS 2027 — bigger · tighter · color-toned · FOMO
   ----------------------------------------------------------------------------
   • BIGGER: 56-58px inputs, 17px mobile text (no iOS zoom), 80px textarea.
   • TIGHTER ("so much less padding margins"): 12-14px form padding, 8px field
     gaps, slimmer section margins — more of the form visible without scroll.
   • COLOR TONES: the panel gets a deep olive-black tone while the FIELDS get
     their own warm olive surface — the eye lands exactly on the fields.
   • FOMO: sunken "fill me" inner shadow, lime left accent bar on focus,
     glowing focus ring, label accent markers, animated ring pulse.
   • CASCADE-SAFE: every background/border override is guarded with
     :not(.xoro-field-valid):not(.xoro-field-error) — the v3.278 green-check
     and red-error states are NEVER touched and always win.
   ============================================================================ */

/* ---- panel tone ("outside the fields" color) ---- */
#checkoutModal .chk-panel{
    background:linear-gradient(180deg,#101207 0%,#0c0d07 100%) !important;
}
#checkoutModal #checkoutForm{padding:14px !important}

/* ---- labels: bolder, marked, warmer ---- */
#checkoutModal #checkoutForm .xoro-field-group > label{
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    color:#e9eed9 !important;
    margin-bottom:5px !important;
}
#checkoutModal #checkoutForm .xoro-field-group > label::before{
    content:"";display:inline-block;width:6px;height:6px;border-radius:2px;
    background:linear-gradient(135deg,#a3e635,#84CC16);
    margin-right:7px;vertical-align:1px;
    box-shadow:0 0 6px rgba(132,204,22,.55);
}

/* ---- field SIZE + shape (properties the valid/error states never touch).
   The inset "fill me" depth shadow is in a SEPARATE guarded rule below so it
   can never override the v3.278 error state's red glow (same-specificity
   battle — this file loads after xoro-co-modal.css, source order would win). ---- */
#checkoutModal .xoro-input.xoro-input{
    min-height:56px;
    padding:15px 16px !important;
    border-radius:16px !important;
    border-width:2px !important;
    font-size:16px !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
    line-height:1.3 !important;
    transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease !important;
}
/* inset "fill me" depth — steps aside whenever the field is in error state */
#checkoutModal .xoro-input.xoro-input:not(.xoro-field-error){
    box-shadow:inset 0 2px 7px rgba(0,0,0,.28) !important;
}
#checkoutModal textarea.xoro-input.xoro-input{
    min-height:80px;
    padding:14px 16px !important;
    line-height:1.45 !important;
}
/* phone field keeps room for the PK flag */
#checkoutModal .xoro-phone-input .xoro-input{padding-left:47px !important}

/* ---- field COLOR TONES (guarded — never while valid/error) ---- */
#checkoutModal .xoro-input.xoro-input:not(.xoro-field-valid):not(.xoro-field-error){
    background-color:#181e10 !important;
    border-color:#44522c !important;
    color:#f2f5e8 !important;
}
#checkoutModal .xoro-input.xoro-input:not(.xoro-field-valid):not(.xoro-field-error)::placeholder{
    color:#98a17e !important;
    font-weight:500 !important;
}

/* ---- FOCUS: glowing ring + lime inner accent (the "fill me" invite) ---- */
#checkoutModal .xoro-input.xoro-input:not(.xoro-field-error):focus{
    box-shadow:
        0 0 0 3px rgba(132,204,22,.24),
        inset 3px 0 0 #84CC16,
        inset 0 2px 7px rgba(0,0,0,.2) !important;
    animation:xoFieldRing 1.6s ease-in-out infinite;
}
#checkoutModal .xoro-input.xoro-input:not(.xoro-field-valid):not(.xoro-field-error):focus{
    background-color:#1c2412 !important;
    border-color:#84CC16 !important;
}
@keyframes xoFieldRing{
    0%,100%{box-shadow:0 0 0 3px rgba(132,204,22,.24),inset 3px 0 0 #84CC16,inset 0 2px 7px rgba(0,0,0,.2)}
    50%{box-shadow:0 0 0 5px rgba(132,204,22,.13),inset 3px 0 0 #84CC16,inset 0 2px 7px rgba(0,0,0,.2)}
}

/* ---- TIGHTER spacing ("so much less padding margins") ---- */
#checkoutForm .xoro-field-group + .xoro-field-group,
#checkoutForm #coCityWrap + .xoro-field-group{margin-top:8px !important}
#checkoutModal #checkoutForm > div.space-y-2{margin-bottom:10px !important}
#checkoutModal #coFormProgress{margin-bottom:8px !important}
#checkoutModal .co-summary{margin-bottom:10px !important}
#checkoutModal .xoro-field-msg{margin:4px 2px 0 !important;font-size:11.5px !important}
#checkoutModal .xoro-delivery-eta{margin-top:2px !important}

/* ---- mobile: BIGGEST text + touch comfort ---- */
@media (max-width:640px){
    #checkoutModal #checkoutForm{padding:12px !important}
    #checkoutModal .xoro-input.xoro-input{font-size:17px !important;min-height:58px}
    #checkoutModal textarea.xoro-input.xoro-input{min-height:84px}
    #checkoutModal #checkoutForm .xoro-field-group > label{font-size:13.5px !important}
    .xo-timer__chip{min-width:50px;height:56px}
    .xo-timer__d{font-size:28px}
    .xo-offer__title{font-size:12.5px}
}
@media (min-width:641px){
    #checkoutModal #checkoutForm{padding:18px !important}
    .xo-timer{padding:15px 18px 14px}
    .xo-timer__chip{min-width:54px;height:58px}
    .xo-timer__d{font-size:30px}
}

/* ============================================================================
   4. LIGHT THEME + REDUCED MOTION
   ============================================================================ */
[data-theme="light"] .xo-timer{
    background:linear-gradient(165deg,#fff8f1 0%,#fdf1e6 58%,#fdeee3 100%);
    border-color:rgba(234,88,12,.28);
    box-shadow:0 12px 32px -16px rgba(120,53,15,.25),inset 0 1px 0 #fff;
}
[data-theme="light"] .xo-timer::before{background:radial-gradient(ellipse at center,rgba(249,115,22,.14) 0%,transparent 68%)}
[data-theme="light"] .xo-timer__label{color:#c2410c}
[data-theme="light"] .xo-timer__chip{
    background:linear-gradient(180deg,#ffffff,#fdf7ef);
    border-color:rgba(234,88,12,.24);
    box-shadow:inset 0 -9px 15px -9px rgba(120,53,15,.18),0 3px 8px -4px rgba(120,53,15,.18);
}
[data-theme="light"] .xo-timer__d{
    background:linear-gradient(180deg,#f97316 0%,#ea580c 60%,#c2410c 100%);
    -webkit-background-clip:text;background-clip:text;
}
[data-theme="light"] .xo-timer__colon{color:#ea580c}
[data-theme="light"] .xo-timer__sub{color:#b45309}
[data-theme="light"] .xo-timer__sub b{color:#c2410c}
[data-theme="light"] .xo-timer.is-hot{border-color:rgba(220,38,38,.5)}
[data-theme="light"] .xo-timer.is-hot .xo-timer__label{color:#dc2626}
[data-theme="light"] .xo-timer.is-hot .xo-timer__d{
    background:linear-gradient(180deg,#f87171,#dc2626);
    -webkit-background-clip:text;background-clip:text;
}
[data-theme="light"] .xo-timer--float{
    background:linear-gradient(165deg,#fff,#fdf3e9);
    border-color:rgba(234,88,12,.4);
    box-shadow:0 6px 18px -8px rgba(120,53,15,.35);
}
[data-theme="light"] .xo-timer--float .xo-timer__mtxt{color:#c2410c}
[data-theme="light"] .xo-timer--float .xo-timer__mtime{color:#ea580c}

[data-theme="light"] .xo-offer{
    background:linear-gradient(150deg,rgba(132,204,22,.12) 0%,rgba(132,204,22,.04) 62%);
    border-color:rgba(141,119,16,.35);
    box-shadow:0 8px 24px -16px rgba(0,0,0,.18),inset 0 1px 0 #fff;
}
[data-theme="light"] .xo-offer__title{color:#3b4a1c}
[data-theme="light"] .xo-offer__title b{color:#4d7c0f}
[data-theme="light"] .xo-offer__chev{background:rgba(132,204,22,.2);color:#4d7c0f}
[data-theme="light"] .xo-offer__content{border-top-color:rgba(141,119,16,.25)}
[data-theme="light"] .xo-offer__line{color:#4b5563}
[data-theme="light"] .xo-offer__line b{color:#4d7c0f}
[data-theme="light"] .xo-offer__lock{background:rgba(132,204,22,.1);border-color:rgba(77,124,15,.3);color:#3f6212}
[data-theme="light"] .xo-offer__lock b{color:#4d7c0f;background:rgba(132,204,22,.16);border-color:rgba(77,124,15,.3)}
[data-theme="light"] .xo-offer__note{color:#8a8f76}
[data-theme="light"] .xo-offer--checkout{
    background:
        linear-gradient(160deg,#fffefa 0%,#fdfcf4 100%) padding-box,
        linear-gradient(120deg,#84CC16 0%,#eab308 45%,#f97316 100%) border-box;
    box-shadow:0 10px 30px -16px rgba(0,0,0,.2),0 0 24px -12px rgba(132,204,22,.35);
}

[data-theme="light"] #checkoutModal .chk-panel{
    background:linear-gradient(180deg,#fefdf5 0%,#fcfbf2 100%) !important;
}
[data-theme="light"] #checkoutModal #checkoutForm .xoro-field-group > label{color:#2c331a !important}
[data-theme="light"] #checkoutModal .xoro-input.xoro-input:not(.xoro-field-error){
    box-shadow:inset 0 2px 6px rgba(120,100,20,.08) !important;
}
[data-theme="light"] #checkoutModal .xoro-input.xoro-input:not(.xoro-field-valid):not(.xoro-field-error){
    background-color:#fbfaf0 !important;
    border-color:#d6cfa6 !important;
    color:#1c1e10 !important;
}
[data-theme="light"] #checkoutModal .xoro-input.xoro-input:not(.xoro-field-valid):not(.xoro-field-error)::placeholder{color:#94987a !important}
[data-theme="light"] #checkoutModal .xoro-input.xoro-input:not(.xoro-field-error):focus{
    box-shadow:0 0 0 3px rgba(132,204,22,.22),inset 3px 0 0 #84CC16,inset 0 2px 6px rgba(120,100,20,.06) !important;
}
[data-theme="light"] #checkoutModal .xoro-input.xoro-input:not(.xoro-field-valid):not(.xoro-field-error):focus{
    background-color:#fefcf0 !important;
    border-color:#84CC16 !important;
}

/* ---- reduced motion: everything settles, urgency stays readable ---- */
@media (prefers-reduced-motion:reduce){
    .xo-timer__d.is-tick,
    .xo-timer__colon,
    .xo-timer__flame,
    .xo-timer.is-hot,
    .xo-offer__head::after,
    #checkoutModal .xoro-input.xoro-input:not(.xoro-field-error):focus{animation:none !important}
    .xo-timer__fill{transition:none !important}
    .xo-offer__body{transition:grid-template-rows .01s linear}
    .xo-offer__chev{transition:none}
}