/* Category Discount Clock v1.0.5 */

/* 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: #20C997;
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-md: 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: #111827;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.cdc-subtitle {
    font-size: 0.82rem;
    color: #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: #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: #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: #6b7280;
    font-weight: 600;
}

.cdc-best {
    font-size: 0.85rem;
    color: #374151;
    margin: 0;
    text-align: center;
}

.cdc-best strong { color: #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; }
    .cdc-seg-hot .cdc-seg-bar { background: 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; }
}