/* =====================================================
   Countdown Widget v1.1 — countdown.css
   Stile: cards | minimal | compact
   Themes: auto | light | dark
   Alle Farben & Größen via CSS Custom Properties
   überschreibbar per Inline-Style vom PHP-Backend.
   ===================================================== */

/* --- Design Tokens ---------------------------------- */
.cdw-countdown {
  /* Typografie – überschreibbar per Shortcode/Block */
  --cdw-font-display: 'Inter', sans-serif;
  --cdw-font-body:    'Inter', sans-serif;

  /* Größen (fluid, überschreibbar) */
  --cdw-value-size:   clamp(2rem, 4vw + 1rem, 3.5rem);
  --cdw-label-size:   clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);
  --cdw-title-size:   clamp(1rem, 1.5vw + 0.5rem, 1.375rem);

  /* Schriftstärke */
  --cdw-value-weight: 700;

  /* Light Mode Farben */
  --cdw-bg:           #f7f6f2;
  --cdw-surface:      #ffffff;
  --cdw-border:       rgba(40, 37, 29, 0.12);
  --cdw-text:         #28251d;
  --cdw-text-muted:   #7a7974;
  --cdw-sep-color:    #01696f;
  --cdw-shadow:       0 4px 24px rgba(40, 37, 29, 0.08);
  --cdw-radius:       0.75rem;

  /* Farbvariablen für Value / Label / Title (Standard = von Theme-Farben ableiten) */
  --cdw-value-color: var(--cdw-sep-color);
  --cdw-label-color: var(--cdw-text-muted);
  --cdw-title-color: var(--cdw-text);
}

/* Auto Dark Mode */
@media (prefers-color-scheme: dark) {
  .cdw-countdown.cdw-theme-auto {
    --cdw-bg:         #171614;
    --cdw-surface:    #1c1b19;
    --cdw-border:     rgba(205, 204, 202, 0.1);
    --cdw-text:       #cdccca;
    --cdw-text-muted: #797876;
    --cdw-sep-color:  #4f98a3;
    --cdw-shadow:     0 4px 24px rgba(0, 0, 0, 0.35);
  }
}

/* Forced Dark */
.cdw-countdown.cdw-theme-dark {
  --cdw-bg:         #171614;
  --cdw-surface:    #1c1b19;
  --cdw-border:     rgba(205, 204, 202, 0.1);
  --cdw-text:       #cdccca;
  --cdw-text-muted: #797876;
  --cdw-sep-color:  #4f98a3;
  --cdw-shadow:     0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Forced Light */
.cdw-countdown.cdw-theme-light {
  --cdw-bg:         #f7f6f2;
  --cdw-surface:    #ffffff;
  --cdw-border:     rgba(40, 37, 29, 0.12);
  --cdw-text:       #28251d;
  --cdw-text-muted: #7a7974;
  --cdw-sep-color:  #01696f;
  --cdw-shadow:     0 4px 24px rgba(40, 37, 29, 0.08);
}

/* --- Base ------------------------------------------- */
.cdw-countdown {
  font-family: var(--cdw-font-body);
  color: var(--cdw-text);
  background: var(--cdw-bg);
  --cdw-align-h: center;
  text-align: var(--cdw-align-h);
  padding: 2rem 1.5rem;
  border-radius: var(--cdw-radius);
  box-sizing: border-box;
}

.cdw-title {
  font-family: var(--cdw-font-display);
  font-size: var(--cdw-title-size);
  font-weight: 600;
  color: var(--cdw-title-color);
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cdw-units {
  display: flex;
  align-items: center;
  justify-content: var(--cdw-justify, center);
  gap: 0.25rem;
  flex-wrap: wrap;
}

.cdw-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.cdw-value {
  font-family: var(--cdw-font-body);
  font-size: var(--cdw-value-size);
  font-weight: var(--cdw-value-weight);
  color: var(--cdw-value-color);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: block;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              opacity  0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.cdw-value.cdw-flip {
  transform: translateY(-4px) scale(1.06);
  opacity: 0.7;
}

.cdw-label {
  font-family: var(--cdw-font-body);
  font-size: var(--cdw-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cdw-label-color);
  font-weight: 500;
}

.cdw-sep {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  font-weight: 700;
  color: var(--cdw-sep-color);
  margin-bottom: 1.5rem;
  opacity: 0.7;
  animation: cdw-blink 1s step-end infinite;
  padding: 0 0.125rem;
}

@keyframes cdw-blink {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.2; }
}

.cdw-expired-msg {
  font-family: var(--cdw-font-display);
  font-size: var(--cdw-title-size);
  font-weight: 600;
  color: var(--cdw-sep-color);
  padding: 1rem 0;
}

/* --- Style: cards ----------------------------------- */
.cdw-style-cards .cdw-unit {
  background: var(--cdw-surface);
  border: 1px solid var(--cdw-border);
  border-radius: var(--cdw-radius);
  padding: 0.875rem 1.25rem 0.75rem;
  min-width: 72px;
  box-shadow: var(--cdw-shadow);
}

/* --- Style: minimal --------------------------------- */
.cdw-countdown.cdw-style-minimal {
  background: transparent;
  padding: 1rem 0;
}

.cdw-style-minimal .cdw-unit { min-width: 56px; }

.cdw-style-minimal .cdw-value {
  color: var(--cdw-value-color, var(--cdw-text));
}

/* --- Style: compact --------------------------------- */
.cdw-countdown.cdw-style-compact { padding: 0.75rem 1rem; }

.cdw-countdown.cdw-style-compact .cdw-title {
  font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
  margin-bottom: 0.625rem;
}

.cdw-countdown.cdw-style-compact .cdw-unit {
  background: var(--cdw-surface);
  border: 1px solid var(--cdw-border);
  border-radius: 0.375rem;
  padding: 0.375rem 0.625rem 0.25rem;
  min-width: 48px;
}

.cdw-countdown.cdw-style-compact .cdw-value {
  --cdw-value-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
}

.cdw-countdown.cdw-style-compact .cdw-label { font-size: 0.5625rem; }
.cdw-countdown.cdw-style-compact .cdw-sep   { font-size: clamp(1rem, 2vw, 1.5rem); margin-bottom: 1rem; }

/* --- Reduced Motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cdw-value { transition: none; }
  .cdw-sep   { animation: none; }
}

/* --- Mobile ----------------------------------------- */
@media (max-width: 400px) {
  .cdw-style-cards .cdw-unit { min-width: 58px; padding: 0.625rem 0.75rem; }
  .cdw-sep { padding: 0; }
}

/* =====================================================
   Spacing & Layout – via CSS Custom Properties
   (werden per Inline-Style vom PHP gesetzt)
   ===================================================== */

.cdw-countdown {
  /* Spacing tokens – Standardwerte, überschreibbar */
  --cdw-padding:             2rem 1.5rem;
  --cdw-padding-top:         unset;
  --cdw-padding-right:       unset;
  --cdw-padding-bottom:      unset;
  --cdw-padding-left:        unset;
  --cdw-margin:              0;
  --cdw-margin-top:          unset;
  --cdw-margin-bottom:       unset;
  --cdw-max-width:           100%;
  --cdw-gap:                 0.25rem;
  --cdw-card-padding:        0.875rem 1.25rem 0.75rem;
  --cdw-card-radius:         var(--cdw-radius);
  --cdw-title-margin-bottom: 1.25rem;
}

/* Anwenden der Spacing-Variablen */
.cdw-countdown {
  padding:        var(--cdw-padding);
  padding-top:    var(--cdw-padding-top);
  padding-right:  var(--cdw-padding-right);
  padding-bottom: var(--cdw-padding-bottom);
  padding-left:   var(--cdw-padding-left);
  margin:         var(--cdw-margin);
  margin-top:     var(--cdw-margin-top);
  margin-bottom:  var(--cdw-margin-bottom);
  max-width:      var(--cdw-max-width);
  /* Zentrieren wenn max-width gesetzt */
  margin-inline:  auto;
  width:          100%;
}

/* Margin-override (margin-inline: auto würde margin überschreiben,
   daher nochmal explizit wenn Nutzer margin gesetzt hat) */
.cdw-countdown[style*="--cdw-margin:"] {
  margin: var(--cdw-margin) !important;
}
.cdw-countdown[style*="--cdw-margin-top:"] {
  margin-top: var(--cdw-margin-top) !important;
}
.cdw-countdown[style*="--cdw-margin-bottom:"] {
  margin-bottom: var(--cdw-margin-bottom) !important;
}

.cdw-units {
  gap: var(--cdw-gap);
}

.cdw-title {
  margin-bottom: var(--cdw-title-margin-bottom);
}

/* Cards: card-spezifisches Padding & Radius */
.cdw-style-cards .cdw-unit {
  padding:       var(--cdw-card-padding);
  border-radius: var(--cdw-card-radius);
}

/* Compact: card-spezifisches Padding & Radius */
.cdw-countdown.cdw-style-compact .cdw-unit {
  padding:       var(--cdw-card-padding, 0.375rem 0.625rem 0.25rem);
  border-radius: var(--cdw-card-radius, 0.375rem);
}

/* --- Doppelpunkte ausblenden ----------------------- */
.cdw-countdown[data-sep="0"] .cdw-sep {
  display: none;
}

/* --- Horizontale Ausrichtung ----------------------- */
.cdw-align-left   { text-align: left;   --cdw-justify: flex-start; }
.cdw-align-center { text-align: center; --cdw-justify: center;     }
.cdw-align-right  { text-align: right;  --cdw-justify: flex-end;   }

/* --- Vertikale Anordnung: Label über/unter Zahl ---- */
/* Standard: label UNTER der Zahl (column) */
.cdw-valign-top .cdw-unit    { flex-direction: column; }
/* Label ÜBER der Zahl */
.cdw-valign-bottom .cdw-unit { flex-direction: column-reverse; }
/* Label neben der Zahl (middle = Zahl und Label nebeneinander) */
.cdw-valign-middle .cdw-unit {
  flex-direction: row;
  align-items: baseline;
  gap: 0.25rem;
}
.cdw-valign-middle .cdw-label {
  font-size: var(--cdw-label-size);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cdw-valign-middle .cdw-sep { margin-bottom: 0; }