/* ═══════════════════════════════════════════════════════════════
   VW-DATEPICKER & VW-TIMESLOTS · wiederverwendbare Komponenten
   Stil: clean weißer Card, abgerundet (16px), dezenter Schatten
═══════════════════════════════════════════════════════════════ */

/* Geteilte Tokens auf :root — NICHT auf .vw-dp. Die Uhrzeit-Chips (.vw-ts)
   sind ein Geschwister-Element des Datepickers, kein Kind. CSS-Variablen
   vererben nur nach unten; auf .vw-dp definiert wären sie in .vw-ts unbekannt
   (→ `background: var(--dp-accent)` fällt weg, `color:#FFF` bleibt = weiß auf weiß). */
:root {
  --dp-bg:        var(--md-background, #FFFFFF);
  --dp-border:    var(--md-outline, #E6E6E6);
  --dp-text:      var(--md-text, #111111);
  --dp-muted:     var(--md-text-muted, #5f5f5f);
  --dp-light:     rgba(17,17,17,.4);
  --dp-soft:      var(--md-surface, #F7F7F7);
  --dp-accent:    var(--md-text, #111111);
  --dp-accent-bg: var(--md-primary-light, #F5F2EA);
  --dp-disabled:  #C8CACE;
}

.vw-dp {
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 12px;
  padding: 18px 20px 22px;
  box-shadow: none;
  font-family: var(--vw-font-body, 'Open Sans'), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--dp-text);
  max-width: 360px;
}

/* Header mit Monatsname + Nav */
.vw-dp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.vw-dp__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1px;
}
.vw-dp__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vw-dp__nav-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  color: var(--dp-muted);
  cursor: pointer;
  font: inherit;
  transition: all .12s;
}
.vw-dp__nav-btn:hover:not(:disabled) {
  border-color: var(--dp-text);
  color: var(--dp-text);
  background: var(--dp-soft);
}
.vw-dp__nav-btn:disabled {
  color: var(--dp-disabled);
  cursor: not-allowed;
}
.vw-dp__nav-btn svg { width: 14px; height: 14px; pointer-events: none; }

/* Wochentag-Header */
.vw-dp__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
/* Mo–So sind die Spaltenköpfe, die man zum Datumwählen lesen MUSS.
   Vorher 10px in --dp-light (40 % Deckkraft) = 2.6:1 — auf dem Handy
   praktisch nicht lesbar. Jetzt 11px in --dp-muted (≈5.3:1). */
.vw-dp__dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--dp-muted, #5F6B75);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 6px 0;
}

/* Tage-Grid */
.vw-dp__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.vw-dp__day {
  position: relative;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--dp-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .1s;
}
.vw-dp__day:hover:not(:disabled):not(.vw-dp__day--selected) {
  background: var(--dp-soft);
}
/* Füllzellen der Rasterecken: unsichtbar und ohne Klick-Signal
   (sie erbten sonst den Zeigefinger und wirkten anklickbar). */
.vw-dp__day--out { visibility: hidden; cursor: default; pointer-events: none; }
.vw-dp__day--past,
.vw-dp__day--closed,
.vw-dp__day:disabled {
  color: var(--dp-disabled);
  cursor: not-allowed;
}
.vw-dp__day--closed {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.vw-dp__day--today {
  border-color: var(--dp-accent);
  font-weight: 700;
}
.vw-dp__day--selected,
.vw-dp__day--selected:hover {
  background: var(--dp-accent);
  color: #fff;
  border-color: var(--dp-accent);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   VW-TIMESLOTS · Uhrzeit-Chips als sichtbare Karte
═══════════════════════════════════════════════════════════════ */

.vw-ts {
  background: #FFFFFF;
  border: 1px solid #E6E8EB;
  border-radius: 16px;
  padding: 18px 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  font-family: var(--vw-font-body, 'Open Sans'), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #2C2D32;
}

.vw-ts__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6D7882;
  margin: 0 0 12px;
}

.vw-ts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
}

.vw-ts__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2C2D32;
  background: #FFFFFF;
  border: 1.5px solid #E6E8EB;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  position: relative;
  white-space: nowrap;
}
.vw-ts__chip:hover:not(:disabled):not(.vw-ts__chip--selected) {
  background: #F4F5F6;
  border-color: #9DA1A7;
}
.vw-ts__chip--selected,
.vw-ts__chip--selected:hover {
  background: var(--dp-accent, #111111);
  color: #FFFFFF;
  border-color: var(--dp-accent, #111111);
}
/* „Ausgebucht" wird durch die Durchstreichung signalisiert, nicht durch
   Unsichtbarkeit — die Uhrzeit muss lesbar bleiben (vorher 1.9:1). */
.vw-ts__chip--full,
.vw-ts__chip:disabled {
  color: var(--dp-muted, #6D7882);
  cursor: not-allowed;
  background: #FAFAFB;
  border-color: #EEF0F2;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Hinweistext, den der Gast lesen MUSS („Bitte zuerst Datum wählen.") */
.vw-ts__empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--dp-muted, #5F6B75);
}
.vw-ts__empty--error { color: #C44; }

/* ─── Wrapper für Side-by-Side oder Stack ─── */
.vw-dp-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
  width: 100%;   /* sonst schrumpft der Stapel im Flex-Elternteil durch margin:auto */
  margin-left: auto; margin-right: auto;
}
@media (min-width: 720px) {
  .vw-dp-stack--horizontal {
    flex-direction: row;
    max-width: none;
    align-items: flex-start;
    justify-content: center;   /* Kalender + Uhrzeiten mittig unter der Überschrift */
  }
  .vw-dp-stack--horizontal .vw-dp { flex-shrink: 0; }
  .vw-dp-stack--horizontal .vw-ts {
    flex: 1 1 auto;
    min-width: 280px;
  }
}