:root{
  --cs-bg:#ffffff;
  --cs-text:#111827;
  --cs-border:rgba(17,24,39,0.08);
  --cs-soft:#f8fafc;
  --cs-accent:#e11d2a; /* brand red */
  --cs-green:#16a34a;  /* days */
  --cs-blue:#2563eb;   /* hours */
  --cs-amber:#f59e0b;  /* mins */
  --cs-red:#dc2626;    /* secs */
}

/* Compact countdown (centered) */
.cs-countdown-wrap{ display:flex; justify-content:center; margin:0 0 8px 0; }
.cs-countdown-inline{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(2px);
  border:1px solid var(--cs-border); border-radius:14px; color:var(--cs-text);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.cs-count-title{ font-weight:800; font-size:13px; letter-spacing:.2px; white-space:nowrap; color: var(--cs-text);}
.cs-chip{
  display:flex; flex-direction:column; align-items:center; min-width:58px; padding:6px 10px;
  border:1px solid var(--cs-border); border-radius:12px; background:#fff;
}
.cs-chip .num{ font-weight:900; font-size:15px; line-height:1.05; }
.cs-chip .lab{ font-size:10px; opacity:.78; letter-spacing:.25px; text-transform:uppercase; }

/* Unit colors */
.cs-chip.days .num{ color: var(--cs-green); }
.cs-chip.hours .num{ color: var(--cs-blue); }
.cs-chip.mins .num{ color: var(--cs-amber); }
.cs-chip.secs .num{ color: var(--cs-red); }

/* Inline approvals row */
.cs-approvals-wrap{ display:flex; justify-content:center; margin:10px 0 0 0; }
.cs-approvals{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cs-approval-chip{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--cs-border);
  border-radius:999px; background:#fff; color:var(--cs-text); font-size:13px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.cs-avatar{ width:20px; height:20px; border-radius:50%; background: var(--cs-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.cs-amt{ font-weight:800; }
.cs-meta{ opacity:.85; font-size:12px; }

/* Toasts */
.cs-toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:9999}
@media (max-width:640px){.cs-toasts{right:12px;left:12px;bottom:12px}}
.cs-toast{display:flex;gap:10px;align-items:flex-start;max-width:360px;border-radius:12px;padding:10px 12px;background:var(--cs-bg);
  border:1px solid var(--cs-border);box-shadow:0 10px 24px rgba(0,0,0,.08);font-size:13px;color:var(--cs-text);opacity:0;transform:translateY(10px);
  transition:opacity .35s,transform .35s}
.cs-toast.show{opacity:1;transform:translateY(0)}
.cs-toast .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;background: var(--cs-accent);box-shadow:0 0 0 3px rgba(225,29,42,.18)}
.cs-toast .amt{ font-weight:800 }
.cs-toast .meta{ opacity:.85; font-size:12px }

/* === Refinements: softer countdown container and toast animation === */
.cs-countdown-inline{
  padding:6px 10px;
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 0; /* remove hard border */
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.cs-count-title{ color: #374151; } /* softer heading */

.cs-approvals{ gap:8px; }
.cs-approval-chip{ padding:5px 9px; }

/* Toasts: smoother fade and longer dwell */
.cs-toast{
  opacity: 0; transform: translateY(8px);
  transition: opacity .8s ease, transform .8s ease;
}
.cs-toast.show{ opacity: 1; transform: translateY(0); }

/* === Official polish === */
:root{
  --cs-muted:#6b7280;
}

/* Countdown container: less blur, no shadow, slightly smaller radius */
.cs-countdown-inline{
  padding:6px 10px;
  background: rgba(255,255,255,0.52);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  box-shadow: none;
  border-radius: 12px;
  gap: 10px;
}
.cs-count-title{ color: var(--cs-muted); font-weight: 700; }

/* Chips: monochrome with subtle 2px top accent by unit */
.cs-chip{
  min-width:56px; padding:6px 8px;
  border:1px solid var(--cs-border);
  border-top-width: 3px;
  border-radius: 10px;
  background:#fff;
}
.cs-chip.days{ border-top-color:#16a34a; }   /* green */
.cs-chip.hours{ border-top-color:#2563eb; }  /* blue  */
.cs-chip.mins{ border-top-color:#f59e0b; }  /* amber */
.cs-chip.secs{ border-top-color:#dc2626; }  /* red   */
.cs-chip .num{ color: var(--cs-text); font-weight: 800; font-size: 15px; }
.cs-chip .lab{ color: var(--cs-muted); }

/* Approvals row: compact, neutral, avoids crowding CTA */
.cs-approvals-wrap{ margin:10px 0 0 0; }
.cs-approvals{ gap:8px; }
.cs-approval-chip{
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
}
.cs-avatar{ width:18px; height:18px; font-size:11px; }
.cs-amt{ font-weight: 800; }
.cs-meta{ color: var(--cs-muted); }

/* Toasts: give a bit more distance from CTA area */
.cs-toasts{ bottom: 20px; right: 18px; }

/* === Hierarchy tuning (smaller countdown, darker glass chips, lower toasts) === */
:root{
  --cs-glass-dark: rgba(17,24,39,0.55);      /* dark glass */
  --cs-glass-dark-strong: rgba(17,24,39,0.80);
  --cs-glass-border: rgba(255,255,255,0.12); /* subtle light border */
  --cs-text-light: #f3f4f6;
  --cs-text-dim: #e5e7eb;
}

/* Countdown: keep heading ABOVE chips, shrink footprint */
.cs-countdown-wrap{ margin:0 0 6px 0; }
.cs-count-title{ font-size:12px; font-weight:700; letter-spacing:.2px; }
.cs-countdown-inline{
  padding:5px 8px;
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  border-radius: 10px;
  gap: 8px;
}
.cs-chip{ min-width:52px; padding:5px 7px; border-radius:8px; }
.cs-chip .num{ font-size:14px; }
.cs-chip .lab{ font-size:9px; }

/* Approvals: darker glass style, push down, lighter */
.cs-approvals-wrap{ margin:14px 0 0 0; }
.cs-approval-chip{
  background: var(--cs-glass-dark);
  border-color: var(--cs-glass-border);
  color: var(--cs-text-light);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.cs-approval-chip .cs-meta{ color: var(--cs-text-dim); }
.cs-avatar{ background: var(--cs-accent); color:#fff; opacity:.95; }

/* Toasts: lower on screen, dark glass */
.cs-toasts{ bottom: 28px; right: 20px; }
.cs-toast{
  background: var(--cs-glass-dark-strong);
  border-color: var(--cs-glass-border);
  color: var(--cs-text-light);
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
}
.cs-toast .meta{ color: var(--cs-text-dim); }

/* === Final layout pass === */
/* Countdown container becomes fully transparent, no rectangle, compact spacing */
.cs-countdown-wrap{ margin:0 0 6px 0; }
.cs-count-title{ 
  display:block; 
  font-size:12px; 
  font-weight:700; 
  letter-spacing:.2px; 
  color:#e5e7eb;        /* light gray over hero */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  text-align:center;
  margin-bottom:4px;
}
.cs-countdown-inline{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding:0; gap:8px;
}
/* Chips minimal style (no heavy boxes) */
.cs-chip{
  min-width:50px; padding:4px 6px;
  background: rgba(17,24,39,0.40);         /* subtle dark glass */
  border: 1px solid rgba(255,255,255,0.18); 
  border-top-width: 2px;
  border-radius:8px;
}
.cs-chip .num{ 
  color:#f9fafb; 
  font-weight:800; 
  font-size:14px; 
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cs-chip .lab{ color:#e5e7eb; opacity:.9; }

/* Single accent tint on chip top borders to stay cohesive */
.cs-chip.days{  border-top-color:#f87171; }  /* soft red */
.cs-chip.hours{ border-top-color:#f87171; }
.cs-chip.mins{  border-top-color:#f87171; }
.cs-chip.secs{  border-top-color:#ef4444; }  /* slightly stronger on secs */

/* Approvals row: move down, wider spacing, lighter density look */
.cs-approvals-wrap{ margin:22px 0 0 0; }
.cs-approvals{ gap:14px; }
.cs-approval-chip{
  background: rgba(17,24,39,0.42);
  border-color: rgba(255,255,255,0.16);
  color:#f3f4f6;
  padding:7px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Toasts: push further down and reduce presence */
.cs-toasts{ bottom: 80px; right: 22px; }
.cs-toast{
  max-width: 380px;
  background: rgba(17,24,39,0.82);
  border-color: rgba(255,255,255,0.12);
  color:#f9fafb;
}
.cs-toast .meta{ color:#e5e7eb; }

/* Two-row countdown layout + smaller numbers */
.cs-countdown-wrap{ margin:0 0 8px 0; text-align:center; }
.cs-count-title{ margin-bottom:6px; } /* explicit gap between title and chips */
.cs-countdown-inline{ justify-content:center; }
.cs-chip{ min-width:46px; padding:4px 6px; }
.cs-chip .num{ font-size:13px; font-weight:800; }
.cs-chip .lab{ font-size:9px; }

/* Push approvals down more and lighten presence */
.cs-approvals-wrap{ margin-top: 80px; }
.cs-approval-chip{ padding:6px 11px; opacity:.96; }

/* --- Centered title above countdown + spacing tweaks --- */
.cs-countdown-wrap{ margin:0 0 10px 0; text-align:center; }
.cs-count-title{
  display:block;
  text-align:center;
  font-size:14px;       /* slightly larger for readability */
  font-weight:800;
  letter-spacing:.2px;
  color:#e5e7eb;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  margin-bottom:8px;    /* clear separation from chips */
}
.cs-countdown-inline{ justify-content:center; }

/* Push approvals further below the CTA */
.cs-approvals-wrap{ margin-top: 80px; }

/* Move floating toasts even lower on the screen */
.cs-toasts{ bottom: 130px; }


/* === Compact dark-glass frame around title + countdown === */
.cs-countdown-wrap{
  display: inline-block;
  background: rgba(17,24,39,0.42);              /* dark glass, same family as approvals */
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
/* keep centered */
.cs-countdown-wrap{ text-align:center; }

/* Title above chips */
.cs-count-title{
  display:block;
  text-align:center;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  color:#f3f4f6;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  margin-bottom:6px;
}

/* Chips inside frame, minimal boxes */
.cs-countdown-inline{ justify-content:center; gap:8px; }
.cs-chip{
  min-width:50px; padding:4px 6px;
  background: rgba(17,24,39,0.40);
  border: 1px solid rgba(255,255,255,0.18);
  border-top-width: 2px;
  border-radius:8px;
}
.cs-chip .num{ 
  color:#f9fafb; font-weight:800; font-size:13px;
  text-shadow: 0 0 0 rgba(239,68,68,0);
}

/* subtle single-accent on top borders */
.cs-chip.days{  border-top-color:#f87171; }
.cs-chip.hours{ border-top-color:#f87171; }
.cs-chip.mins{  border-top-color:#f87171; }
.cs-chip.secs{  border-top-color:#ef4444; }

/* Glow sheen when numbers change */
@keyframes numGlow {
  0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
  30%  { text-shadow: 0 0 10px rgba(255,255,255,.45), 0 0 16px rgba(239,68,68,.35); }
  60%  { text-shadow: 0 0 7px rgba(255,255,255,.30), 0 0 12px rgba(239,68,68,.25); }
  100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}
.cs-chip .num.tick { animation: numGlow .6s ease; }

/* Approvals row lower and calmer */
.cs-approvals-wrap{ margin-top: 80px; }
.cs-approvals{ gap: 16px; }
.cs-approval-chip{
  background: rgba(17,24,39,0.42);
  border-color: rgba(255,255,255,0.16);
  color:#f3f4f6;
  padding:7px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Fade in/out for approvals on refresh */
.cs-approvals.fade-out { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.cs-approvals.fade-in  { opacity: 1; transform: translateY(0);    transition: opacity .5s ease, transform .5s ease; }


/* === FINAL: two-row centered, framed, correct spacing, lower notifications === */
.cs-countdown-wrap{
  display:inline-block;
  text-align:center;
  margin: 0 0 48px 0;                 /* clear gap above red CTA */
  background: rgba(17,24,39,0.42);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.cs-count-title{
  display:block;
  text-align:center;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  color:#f3f4f6;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  margin-bottom:8px;                  /* ensures its own row */
}
.cs-countdown-inline{
  display:flex;
  justify-content:center;
  gap:8px;
}
.cs-chip{ min-width:50px; padding:4px 6px; border-radius:8px; }
.cs-chip .num{ font-size:13px; font-weight:800; color:#f9fafb; }
.cs-chip .lab{ font-size:9px; color:#e5e7eb; opacity:.9; }

/* Approvals: push further down */
.cs-approvals-wrap{ margin-top: 80px; }

/* Toasts: keep low */
.cs-toasts{ bottom:140px; }

/* === V6 Elegant: muted colors, lighter glass, refined spacing === */
:root{
  --cs-glass-lite: rgba(31,41,55,0.32);       /* lighter dark-glass */
  --cs-glass-border-lite: rgba(255,255,255,0.14);
  --cs-num-green: rgba(163, 230, 177, 0.92);  /* muted green */
  --cs-num-blue:  rgba(147, 197, 253, 0.92);  /* muted blue  */
  --cs-num-amber: rgba(253, 224, 171, 0.92);  /* muted amber */
  --cs-num-red:   rgba(254, 202, 202, 0.92);  /* muted red   */
  --cs-num-white: #f3f4f6;
}

.cs-countdown-wrap{
  display:inline-block;
  text-align:center;
  margin: 0 auto 50px auto;                    /* clear gap above CTA */
  background: var(--cs-glass-lite);
  border: 1px solid var(--cs-glass-border-lite);
  border-radius: 12px;
  padding: 6px 10px;                           /* tighter vertical padding */
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.cs-count-title{
  display:block;
  text-align:center;
  font-size:15px;                              /* a hair larger for clarity */
  font-weight:800;
  letter-spacing:.2px;
  color:#f3f4f6;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  margin: 0 0 8px 0;
}
.cs-countdown-inline{
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.cs-chip{
  min-width:48px; padding:4px 6px;
  background: rgba(17,24,39,0.34);
  border: 1px solid rgba(255,255,255,0.16);
  border-top-width: 2px;
  border-radius:8px;
}
.cs-chip .num{ font-size:13px; font-weight:800; color: var(--cs-num-white); }
.cs-chip.days  .num{ color: var(--cs-num-green); }
.cs-chip.hours .num{ color: var(--cs-num-blue); }
.cs-chip.mins  .num{ color: var(--cs-num-amber); }
.cs-chip.secs  .num{ color: var(--cs-num-red); }
.cs-chip .lab{ font-size:9px; color:#e5e7eb; opacity:.9; }

/* Subtle but slightly stronger glow on change */
@keyframes numGlow {
  0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
  30%  { text-shadow: 0 0 8px rgba(255,255,255,.55), 0 0 12px rgba(239,68,68,.25); }
  60%  { text-shadow: 0 0 6px rgba(255,255,255,.35), 0 0 9px rgba(239,68,68,.18); }
  100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}
.cs-chip .num.tick { animation: numGlow .6s ease; }

/* Lower approvals with more breathing room */
.cs-approvals-wrap{ margin-top: 80px; }
.cs-approvals{ gap: 18px; }
.cs-approval-chip{ background: var(--cs-glass-lite); border-color: var(--cs-glass-border-lite); }

/* Keep toasts low but readable */
.cs-toasts{ bottom: 150px; right: 22px; }

/* === V7 refinements: narrow frame + softer glow === */
.cs-countdown-wrap{
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 90vw;
  padding: 6px 10px;             /* compact */
}
/* even smaller vertical padding if needed on small screens */
@media (max-width: 520px){
  .cs-countdown-wrap{ padding: 5px 8px; }
}

/* Softer number glow */
@keyframes numGlow {
  0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
  30%  { text-shadow: 0 0 5px rgba(255,255,255,.35), 0 0 8px rgba(239,68,68,.18); }
  60%  { text-shadow: 0 0 3px rgba(255,255,255,.22), 0 0 5px rgba(239,68,68,.12); }
  100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* V10: host for absolute timer */
#cs-timer-host{ position:absolute; z-index:40; pointer-events:none; }
#cs-timer-host .cs-countdown-wrap{ pointer-events:auto; } /* allow hovering if needed */

/* V11: ensure host never blocks CTA clicks */
#cs-timer-host{ position:absolute; z-index:40; pointer-events:none; }
#cs-timer-host .cs-countdown-wrap{ pointer-events:auto; }


/* === FIX: Force countdown above CTA and add clear spacing === */
.cs-countdown-wrap{ width:100% !important; flex-basis:100% !important; margin:0 0 24px 0 !important; }
.cs-countdown-wrap + a,
.cs-countdown-wrap + button,
.cs-countdown-wrap + [role="button"],
.cs-countdown-wrap + [data-track="check-eligibility"]{ margin-top:0 !important; }

/* Put CTA on a new line even if a parent uses floats */
[data-track="check-eligibility"]{ clear: both !important; }

/* If a flex parent contains countdown + CTA, make it column */
:is(div,section,main,article,header,footer,form).flex:has(> .cs-countdown-wrap + [data-track="check-eligibility"]){
  flex-direction: column !important;
  align-items: center !important;
}

/* Generic fallback: if countdown and CTA are siblings inside any flex container */
:has(> .cs-countdown-wrap + [data-track="check-eligibility"]){
  gap: var(--cs-gap, 0);
}


/* v2 compact tweaks */
.cs-countdown-wrap{ display:flex; justify-content:center; align-items:center; margin:0 0 14px 0; }
.cs-countdown-inline{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; }
.cs-count-title{ display:inline-block; margin-right:6px; padding:0; background:transparent!important; border:0!important; box-shadow:none!important; }


/* v5 layout: title above timer, centered, safe clicks */
.cs-countdown-wrap{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 16px 0;
  pointer-events:none; /* do not block CTA clicks */
}
.cs-count-title{
  display:block;
  text-align:center;
  margin:0;
  padding:0;
  font-weight:800;
  font-size:13px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.cs-countdown-inline{
  display:flex;
  flex-direction: row; /* chips on one row */
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  pointer-events:none; /* still non-interactive */
}
.cs-countdown-inline .cs-chip{ pointer-events:none; }


/* v6: tighten countdown backdrop & center CTA text perfectly */
.cs-countdown-wrap{
  display:inline-flex;              /* prevent full-width bar */
  width:auto; max-width:none;
  background:transparent!important; 
  border:0!important; box-shadow:none!important;
  flex-direction:column; align-items:center; justify-content:center;
  gap:8px; margin:0 auto 16px auto; text-align:center;
  pointer-events:none;
}
/* keep chips compact */
.cs-countdown-inline{ background:rgba(255,255,255,0.9); }
/* ensure the CTA just after countdown is perfectly centered vertically */
.cs-countdown-wrap + a,
.cs-countdown-wrap + button,
.cs-countdown-wrap + [role="button"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.1 !important;
}