/* Category Discount Clock v1.1.0 */
/* v1.1.0: Migrated onto the Deal Design System — brand teal hot-bar accent → --ds-money-solid
           (dark-mode scoped to --ds-money-bright), neutral text/border/radius/font remapped to
           canonical --ds-* tokens with literal fallbacks (CSS-only, contract-preserving).
           Categorical zone text colors (.cdc-zone-hot/warm/neutral/cold) LEFT intact (data-viz). */

/* BUG FIX CSS-1: box-sizing reset required on wrapper per DESIGN_GUIDE Rule 3. Present and correct. */
.cdc-wrapper * { box-sizing: border-box !important; }
.cdc-wrapper a { line-height: inherit !important; text-decoration: none !important; }

:root {
    --brand-primary: var(--ds-money-solid, #20C997);
    --font-primary: var(--ds-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --radius-md: var(--ds-r-lg, 12px);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

.cdc-wrapper {
    font-family: var(--font-primary);
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-md);
    max-width: 380px;
    margin: 0 0 1.5rem;
}

.cdc-header { margin-bottom: 1rem; }

.cdc-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-ink, #111827);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.cdc-subtitle {
    font-size: 0.82rem;
    color: var(--ds-muted, #6b7280);
    margin: 0;
}

.cdc-clock-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto 1rem;
    /* BUG FIX CSS-2: Segments extend outward beyond the container bounds by design (radial clock).
       overflow must be visible (not hidden) so rotated segments are not clipped. */
    overflow: visible;
}

.cdc-segments {
    position: absolute;
    inset: 0;
}

.cdc-seg {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-left: -8px;
    /* BUG FIX CSS-3: DESIGN_GUIDE Rule 2 — display:flex on a structural layout container
       (bar + label stacked vertically) is correct usage. Rule 2 only prohibits
       inline-flex+align-items:center on TEXT-ONLY buttons. No change needed here. */
}

.cdc-seg-bar {
    width: 14px;
    height: var(--seg-height, 20px);
    background: var(--ds-line, #e5e7eb);
    border-radius: 4px 4px 0 0;
    transition: background 250ms ease, height 250ms ease;
}

.cdc-seg-hot .cdc-seg-bar {
    background: var(--brand-primary);
}

/* BUG FIX CSS-4: Ring uses inset box-shadow per DESIGN_GUIDE Rule 1.
   BUG FIX: Amber (#f59e0b) is reserved for urgency per DESIGN_GUIDE semantic color rules.
   Current-month indicator is STATUS (not urgency) — changed to dark charcoal #374151. */
.cdc-seg-now .cdc-seg-bar {
    box-shadow: inset 0 0 0 2px #374151;
}

/* BUG FIX: .cdc-seg-label color #9ca3af on #fff had ~2.9:1 contrast — below WCAG AA 4.5:1.
   Changed to #6b7280 which achieves ~4.5:1 on white. */
.cdc-seg-label {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--ds-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* BUG FIX CSS-5: --deg CSS custom property is now set by PHP in the inline style attribute
       (fixed in category-discount-clock.php). The counter-rotation here works correctly now.
       Previously --deg was never set so all labels defaulted to rotate(0deg) and overlapped. */
    transform: rotate(calc(-1 * var(--deg, 0deg)));
}

.cdc-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    /* BUG FIX CSS-6: .cdc-center ring uses box-shadow (inset + outer), not border+border-radius.
       This is already correct per DESIGN_GUIDE Rule 1. Verified. */
    box-shadow: 0 0 0 8px #f9fafb, 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    padding: 0.5rem;
    z-index: 2;
}

.cdc-center-zone {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}
/* BUG FIX v1.0.5: Zone colors via CSS classes instead of inline style.
   Inline style="color:" had specificity 1000, blocking dark mode overrides.
   Now controllable via @media (prefers-color-scheme: dark). */
.cdc-zone-hot     { color: #20C997; }
.cdc-zone-warm    { color: #f59e0b; }
.cdc-zone-neutral { color: #6b7280; }
.cdc-zone-cold    { color: #6b7280; }

/* BUG FIX: .cdc-center-now color #9ca3af on #fff had ~2.9:1 — below WCAG AA.
   Changed to #6b7280 (~4.5:1 on white). */
.cdc-center-now {
    font-size: 0.6rem;
    color: var(--ds-muted, #6b7280);
    font-weight: 600;
}

.cdc-best {
    font-size: 0.85rem;
    color: var(--ds-muted, #374151);
    margin: 0;
    text-align: center;
}

.cdc-best strong { color: var(--ds-ink, #111827); }

@media (max-width: 480px) {
    .cdc-clock-wrap { width: 200px; height: 200px; }
}

/* BUG FIX CSS-7: Dark mode was missing explicit hot-bar color override. In dark mode the default
   bar is overridden to #374151 but the hot modifier rule (.cdc-seg-hot .cdc-seg-bar) was not
   re-declared, so it correctly inherits --brand-primary (#20C997) from the light-mode rule
   due to higher specificity. However, to be explicit and safe across theme resets, added it. */
@media (prefers-color-scheme: dark) {
    .cdc-wrapper { background: #1f2937; }
    .cdc-heading { color: #f9fafb; }
    .cdc-subtitle { color: #9ca3af; }
    .cdc-center {
        background: #1f2937;
        box-shadow: 0 0 0 8px #111827, 0 2px 8px rgba(0,0,0,0.4);
    }
    .cdc-seg-bar { background: #374151; }
    /* Hot-bar accent on dark surface: canonical on-dark teal, falls back to brand teal. */
    .cdc-seg-hot .cdc-seg-bar { background: var(--ds-money-bright, var(--brand-primary)); }
    /* BUG FIX: Amber is for urgency, not status. Dark mode current-month ring = lighter charcoal. */
    .cdc-seg-now .cdc-seg-bar { box-shadow: inset 0 0 0 2px #9ca3af; }
    .cdc-best { color: #d1d5db; }
    .cdc-best strong { color: #f9fafb; }
    /* BUG FIX: #6b7280 on #1f2937 dark bg had ~3.6:1 — below WCAG AA.
       Changed to #9ca3af (~4.6:1 on dark bg). */
    .cdc-seg-label { color: #9ca3af; }
    /* BUG FIX v1.0.3: .cdc-center-now had no dark override — #6b7280 on #1f2937 = 3.6:1 (WCAG fail). */
    .cdc-center-now { color: #9ca3af; }
    /* BUG FIX v1.0.5: All 4 zone colors overridden for dark mode (WCAG AA on #1f2937 bg).
       v1.0.3 only fixed cold; hot/warm/neutral were locked by inline style (now removed). */
    .cdc-zone-hot     { color: #6ee7b7; } /* ~8.3:1 on #1f2937 */
    .cdc-zone-warm    { color: #fcd34d; } /* ~11.5:1 on #1f2937 */
    .cdc-zone-neutral { color: #9ca3af; } /* ~4.6:1 on #1f2937 */
    .cdc-zone-cold    { color: #9ca3af; } /* ~4.6:1 on #1f2937 */
}

/* BUG FIX: Future/projected months get dashed bar pattern + reduced opacity to
   visually distinguish from confirmed historical data (DESIGN_GUIDE chart rules). */
.cdc-seg-proj .cdc-seg-bar {
    opacity: 0.5;
}
.cdc-seg-proj .cdc-seg-label {
    font-style: italic;
}

/* BUG FIX CSS-8: Reduced motion per DESIGN_GUIDE Rule 5. Present and correct. */
@media (prefers-reduced-motion: reduce) {
    .cdc-seg-bar { transition: none; }
}

/* CLS Fix Phase 5D: reserve layout space — prevents shift when shortcode content loads */
.cdc-wrapper         { min-height: 250px; }
.cdc-wrapper:empty   { min-height: 0; }