/**
 * KBC Deal Countdown Timer — kbc-countdown.css
 * Version: 1.1.0
 *
 * Brand palette:
 *   Red:   #C0392B
 *   Gold:  #F1C40F
 *   Dark:  #1A1A1A
 *   White: #FFFFFF
 *
 * Size variants  : [data-size="large"] | [data-size="normal"] (default) | [data-size="compact"]
 * Theme variants : [data-theme="dark"] (default) | [data-theme="light"]
 */

/* ── Reset / Base ─────────────────────────────────── */
.kbc-countdown-root {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  font-family:    'Nunito', 'Helvetica Neue', Arial, sans-serif;
  line-height:    1.3;
}

/* ── Card Shell ───────────────────────────────────── */
.kbc-cd-card {
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  padding:         16px 20px;
  border-radius:   12px;
  border:          2px solid transparent;
  box-shadow:      0 4px 18px rgba(0, 0, 0, 0.25);
  transition:      transform 0.15s ease, box-shadow 0.15s ease;
  overflow:        hidden;
  position:        relative;
}

.kbc-cd-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Red/gold accent stripe at top of every card */
.kbc-cd-card::before {
  content:       '';
  position:      absolute;
  top: 0; left: 0; right: 0;
  height:        3px;
  background:    linear-gradient(90deg, #C0392B 0%, #F1C40F 100%);
  border-radius: 12px 12px 0 0;
}

/* ══════════════════════════════════════════════════
   THEMES  — data-theme on .kbc-countdown-root
   JS also mirrors the value as a class on each card
   ══════════════════════════════════════════════════ */

/* ── Theme: Dark (default) ────────────────────────── */
.kbc-countdown-root[data-theme="dark"] .kbc-cd-card,
.kbc-cd-card.kbc-cd-theme-dark {
  background:   linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 100%);
  border-color: #C0392B;
  color:        #FFFFFF;
}

.kbc-countdown-root[data-theme="dark"] .kbc-cd-label,
.kbc-cd-theme-dark .kbc-cd-label    { color: #F1C40F; }

.kbc-countdown-root[data-theme="dark"] .kbc-cd-tagline,
.kbc-cd-theme-dark .kbc-cd-tagline  { color: #CCCCCC; }

.kbc-countdown-root[data-theme="dark"] .kbc-cd-prefix,
.kbc-cd-theme-dark .kbc-cd-prefix   { color: #AAAAAA; }

.kbc-countdown-root[data-theme="dark"] .kbc-cd-time,
.kbc-cd-theme-dark .kbc-cd-time     { color: #F1C40F; }

.kbc-countdown-root[data-theme="dark"] .kbc-cd-digit-sep,
.kbc-cd-theme-dark .kbc-cd-digit-sep { color: #F1C40F; }

.kbc-countdown-root[data-theme="dark"] .kbc-cd-footer,
.kbc-cd-theme-dark .kbc-cd-footer   { color: #999999; border-top: 1px solid #3A3A3A; }

/* ── Theme: Light ─────────────────────────────────── */
.kbc-countdown-root[data-theme="light"] .kbc-cd-card,
.kbc-cd-card.kbc-cd-theme-light {
  background:   linear-gradient(135deg, #FFFFFF 0%, #FDF6F0 100%);
  border-color: #C0392B;
  color:        #1A1A1A;
}

.kbc-countdown-root[data-theme="light"] .kbc-cd-label,
.kbc-cd-theme-light .kbc-cd-label    { color: #C0392B; }

.kbc-countdown-root[data-theme="light"] .kbc-cd-tagline,
.kbc-cd-theme-light .kbc-cd-tagline  { color: #555555; }

.kbc-countdown-root[data-theme="light"] .kbc-cd-prefix,
.kbc-cd-theme-light .kbc-cd-prefix   { color: #777777; }

.kbc-countdown-root[data-theme="light"] .kbc-cd-time,
.kbc-cd-theme-light .kbc-cd-time     { color: #C0392B; }

.kbc-countdown-root[data-theme="light"] .kbc-cd-digit-sep,
.kbc-cd-theme-light .kbc-cd-digit-sep { color: #C0392B; }

.kbc-countdown-root[data-theme="light"] .kbc-cd-footer,
.kbc-cd-theme-light .kbc-cd-footer   { color: #888888; border-top: 1px solid #E8E0D8; }

/* ══════════════════════════════════════════════════
   CARD SECTIONS
   ══════════════════════════════════════════════════ */

/* Header row: emoji + deal info */
.kbc-cd-header {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* Deal emoji */
.kbc-cd-emoji {
  font-size:   1.9em;
  line-height: 1;
  flex-shrink: 0;
}

/* Label + tagline stacked */
.kbc-cd-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

/* Deal label (e.g. "BOGO Pizza Tuesday") */
.kbc-cd-label {
  font-weight:    700;
  font-size:      1em;
  letter-spacing: 0.02em;
}

/* Tagline (e.g. "Buy One Get One Free Pizzas") */
.kbc-cd-tagline {
  font-size:   0.82em;
  font-weight: 400;
}

/* Countdown body: prefix + HH:MM:SS digits */
.kbc-cd-body {
  display:     flex;
  align-items: baseline;
  gap:         8px;
}

.kbc-cd-prefix {
  font-size:      0.78em;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Digit display — HH:MM:SS rendered as single span */
.kbc-cd-time {
  font-size:            1.55em;
  font-weight:          800;
  font-variant-numeric: tabular-nums;
  letter-spacing:       0.04em;
  font-family:          'Oswald', 'Courier New', monospace;
}

/* Digit blocks — individual HH / MM / SS segments with blinking colon separators */
.kbc-cd-digits {
  display:     flex;
  align-items: baseline;
  gap:         0;
}

.kbc-cd-digit-block {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
}

.kbc-cd-digit-value {
  display:              inline-block;
  font-size:            1.55em;
  font-weight:          800;
  font-variant-numeric: tabular-nums;
  letter-spacing:       0.04em;
  font-family:          'Oswald', 'Courier New', monospace;
  min-width:            2ch;
  text-align:           center;
}

.kbc-cd-digit-sep {
  font-size:   1.4em;
  font-weight: 800;
  line-height: 1;
  padding:     0 2px;
  animation:   kbc-colon-blink 1s step-end infinite;
}

@keyframes kbc-colon-blink {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.3; }
}

/* Order-type badge / footer */
.kbc-cd-footer {
  font-size:      0.75em;
  font-weight:    500;
  padding-top:    8px;
  margin-top:     2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════
   EXPIRED / NO-DEAL STATE
   ══════════════════════════════════════════════════ */
.kbc-cd-card.kbc-cd-expired {
  border-color: #555;
}

.kbc-cd-theme-dark.kbc-cd-expired {
  background: linear-gradient(135deg, #222 0%, #2a2a2a 100%);
}

.kbc-cd-theme-light.kbc-cd-expired {
  background:   linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
  border-color: #ccc;
}

.kbc-cd-expired .kbc-cd-body {
  justify-content: center;
}

.kbc-cd-expired-msg {
  font-size:      0.9em;
  color:          #999;
  text-transform: none;
  letter-spacing: 0;
  font-style:     italic;
}

/* ══════════════════════════════════════════════════
   URGENCY PULSE  (< 30 min remaining)
   ══════════════════════════════════════════════════ */
.kbc-cd-card.kbc-cd-urgent {
  animation: kbc-pulse 1.6s ease-in-out infinite;
}

@keyframes kbc-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(192, 57, 43, 0.30); }
  50%       { box-shadow: 0 4px 30px rgba(192, 57, 43, 0.65); }
}

/* ══════════════════════════════════════════════════
   SIZE VARIANTS — data-size on .kbc-countdown-root
   JS also mirrors the value as a class on each card
   ══════════════════════════════════════════════════ */

/* ── Normal (default) ────────────────────────────── */
.kbc-countdown-root[data-size="normal"] .kbc-cd-card,
.kbc-cd-card.kbc-cd-size-normal {
  /* base card styles apply */
}

/* ── Compact ─────────────────────────────────────── */
.kbc-countdown-root[data-size="compact"] .kbc-cd-card,
.kbc-cd-card.kbc-cd-size-compact {
  padding:       10px 14px;
  gap:           5px;
  border-radius: 8px;
}

.kbc-countdown-root[data-size="compact"] .kbc-cd-card::before,
.kbc-cd-size-compact.kbc-cd-card::before { height: 2px; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-emoji,
.kbc-cd-size-compact .kbc-cd-emoji { font-size: 1.3em; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-label,
.kbc-cd-size-compact .kbc-cd-label { font-size: 0.85em; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-tagline,
.kbc-cd-size-compact .kbc-cd-tagline { display: none; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-time,
.kbc-cd-size-compact .kbc-cd-time,
.kbc-countdown-root[data-size="compact"] .kbc-cd-digit-value,
.kbc-cd-size-compact .kbc-cd-digit-value { font-size: 1.2em; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-digit-sep,
.kbc-cd-size-compact .kbc-cd-digit-sep { font-size: 1.1em; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-prefix,
.kbc-cd-size-compact .kbc-cd-prefix { font-size: 0.7em; }

.kbc-countdown-root[data-size="compact"] .kbc-cd-footer,
.kbc-cd-size-compact .kbc-cd-footer { display: none; }

/* ── Large ───────────────────────────────────────── */
.kbc-countdown-root[data-size="large"] .kbc-cd-card,
.kbc-cd-card.kbc-cd-size-large {
  padding:       22px 28px;
  gap:           12px;
  border-width:  3px;
  border-radius: 16px;
}

.kbc-countdown-root[data-size="large"] .kbc-cd-card::before,
.kbc-cd-size-large.kbc-cd-card::before { height: 4px; }

.kbc-countdown-root[data-size="large"] .kbc-cd-emoji,
.kbc-cd-size-large .kbc-cd-emoji { font-size: 2.6em; }

.kbc-countdown-root[data-size="large"] .kbc-cd-label,
.kbc-cd-size-large .kbc-cd-label { font-size: 1.2em; }

.kbc-countdown-root[data-size="large"] .kbc-cd-tagline,
.kbc-cd-size-large .kbc-cd-tagline { font-size: 0.92em; }

.kbc-countdown-root[data-size="large"] .kbc-cd-time,
.kbc-cd-size-large .kbc-cd-time,
.kbc-countdown-root[data-size="large"] .kbc-cd-digit-value,
.kbc-cd-size-large .kbc-cd-digit-value { font-size: 2.1em; }

.kbc-countdown-root[data-size="large"] .kbc-cd-digit-sep,
.kbc-cd-size-large .kbc-cd-digit-sep { font-size: 1.9em; }

.kbc-countdown-root[data-size="large"] .kbc-cd-prefix,
.kbc-cd-size-large .kbc-cd-prefix { font-size: 0.85em; }

.kbc-countdown-root[data-size="large"] .kbc-cd-footer,
.kbc-cd-size-large .kbc-cd-footer { font-size: 0.82em; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .kbc-cd-card {
    padding: 14px 16px;
  }

  .kbc-cd-time,
  .kbc-cd-digit-value { font-size: 1.35em; }
  .kbc-cd-emoji       { font-size: 1.6em;  }

  .kbc-countdown-root[data-size="large"] .kbc-cd-card,
  .kbc-cd-size-large.kbc-cd-card {
    padding:      16px 18px;
    border-width: 2px;
  }

  .kbc-countdown-root[data-size="large"] .kbc-cd-time,
  .kbc-countdown-root[data-size="large"] .kbc-cd-digit-value,
  .kbc-cd-size-large .kbc-cd-time,
  .kbc-cd-size-large .kbc-cd-digit-value { font-size: 1.75em; }

  .kbc-countdown-root[data-size="large"] .kbc-cd-emoji,
  .kbc-cd-size-large .kbc-cd-emoji        { font-size: 2em; }
}