/*
 * Buchungskalender der Anlass-Seiten: Einpassung des Booking-Tool-Widgets (checkout-v2).
 *
 * Die Grundstile bringt das Widget selbst mit (checkout-v2.css neben dem Skript; js/buchungskalender.js
 * setzt sie vor diese Datei). Hier steht nur, was auf der bisherigen WordPress-Seite das Theme
 * beisteuerte, und was die Einbettung in diese Seite braucht.
 */

/* ---------- „Wähle deinen Standort“ über den Reitern */
.buchungskalender-standortwahl {
  margin: 34px 0 0;
  text-align: center;
  font-family: "TradeGothic", "Trade Gothic", Oswald, "Arial Narrow", sans-serif;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--hell-text, #FFFFFF);
}
.buchungskalender-standortwahl + .buchungskalender-reiter {
  margin-top: 14px;
}

/* ---------- Standort-Reiter (Betriebsausflüge), gestaltet wie die Auswahlknöpfe der Seite */
.buchungskalender-reiter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}
.buchungskalender-reiter__knopf {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border-radius: 25px;
  cursor: pointer;
  font-family: "TradeGothic", "Trade Gothic", Oswald, "Arial Narrow", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid var(--hell-text, #FFFFFF);
  background: var(--hell-feld, rgba(0, 0, 0, 0.3));
  color: var(--hell-text, #FFFFFF);
}
.buchungskalender-reiter__knopf[aria-selected="true"] {
  border: 2px solid #FF9B00;
  background: var(--hell-auswahl, #F6F0DF);
  color: #2C0C0C;
  cursor: default;
}
.buchungskalender-reiter__knopf:focus-visible {
  outline: 2px solid #FF9B00;
  outline-offset: 3px;
}
/* Größere Umschalter mit längerer Beschriftung (z. B. „4 Escape Rooms in der Lavesstraße“).
   Am Handy stehen sie untereinander in voller Breite. */
.buchungskalender-reiter--gross {
  gap: 14px;
}
.buchungskalender-reiter--gross .buchungskalender-reiter__knopf {
  justify-content: center;
  height: auto;
  min-height: 52px;
  padding: 8px 28px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-align: center;
}
@media (max-width: 600px) {
  .buchungskalender-reiter--gross {
    gap: 10px;
  }
  .buchungskalender-reiter--gross .buchungskalender-reiter__knopf {
    width: 100%;
    padding: 8px 16px;
    font-size: 15px;
  }
}

/* ---------- Platz des Kalenders: 420 px, solange er lädt (wie bisher), danach wächst er mit */
.buchungskalender {
  margin-top: 30px;
  min-height: 420px;
}
.buchungskalender[hidden] {
  display: none;
}
.buchungskalender__fehler {
  padding: 40px 0;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--hell-text, #FFFFFF);
}

/* ---------- Schrift: auf der WordPress-Seite TradeGothic aus dem Theme, hier die Überschriftenschrift */
#calendar-root {
  font-family: "TradeGothic", "Trade Gothic", Oswald, "Arial Narrow", sans-serif;
}
/* checkout-v2.css setzt hier selbst sans-serif; im Theme galt auch dort TradeGothic */
#calendar-root .datepicker-container,
#calendar-root .quantity-picker {
  font-family: inherit;
}

/* ---------- Fenster des Widgets (Buchung, Kasse) über Menü und Raumfenster der Seite, wie bisher */
#calendar-root .modal-overlay {
  z-index: 1000000 !important;
}
/* Popup „Weiteren Escape Room buchen“ (seit Checkout-PR #41): öffnet sich auch aus der Kasse und muss
   über deren Fenster liegen. Das Widget gibt ihm nur 10001 – unter den 1000000 von oben verschwand es
   hinter der Kasse und tauchte erst nach „Zurück“ auf. */
#calendar-root .hgi-modal-overlay {
  z-index: 1000001 !important;
}

/* ---------- Leiste unter dem Kalender (Legende, „zum Warenkorb“, „zur Kasse“): mittig unter dem
   Kalender, ohne den weißen Kasten des Widgets. Das Widget richtet sie per Inline-Stil an den
   Raumkarten aus; das wird hier aufgehoben. Klebt sie beim Scrollen am unteren Fensterrand
   (sticky-fixed), deckt sie in der Farbe der Seite die Zeiten darunter ab. */
#calendar-root .sticky-calendar-footer {
  background-color: transparent;
}
#calendar-root .sticky-calendar-footer.sticky-fixed {
  background-color: #EFE5D4;
}
#calendar-root .calendar-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 8px;
  /* Seit Checkout-PR #41 malt das Widget hier selbst einen hellen Kasten mit runden Ecken
     (.sticky-parent .calendar-footer-inner) – auf der Seite ohne Kasten, wie vorher. */
  background-color: transparent;
  border-radius: 0;
}
#calendar-root .legend {
  flex-wrap: wrap;
  justify-content: center;
}
#calendar-root .calendar-footer-btns {
  width: 100%;
  justify-content: center;
}

/* ---------- Mitfahrende Tagesleiste am Handy (.sticky-daybar des Widgets): darunter die Legende mit
   „verfügbar“ und „im Warenkorb“ (js/buchungskalender.js, tagesleisteLegende) als zweite Zeile. */
#calendar-root .sticky-daybar {
  flex-wrap: wrap;
}
#calendar-root .sticky-daybar > .tagesleiste-legende {
  flex: 0 0 100%;
  order: 99;
  justify-content: center;
  column-gap: 22px;
  padding-bottom: 2px;
}
#calendar-root .sticky-daybar > .tagesleiste-legende .legend-circle {
  width: 14px;
  height: 14px;
}
#calendar-root .sticky-daybar > .tagesleiste-legende .legend-label {
  font-size: 14px;
  line-height: 18px;
}

/* ---------- Raumfenster aus dem Kalender (js/buchungskalender.js, raumfensterImBlick): am Desktop
   mitten im sichtbaren Bereich statt neben der Raumkarte, damit die Seite nicht springt. Am Handy ist
   es ohnehin bildschirmfüllend. */
@media (min-width: 901px) {
  html.raumfenster-im-blick .m-dialog-huelle {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000;
  }
  html.raumfenster-im-blick .m-dialog-huelle > .m-dialog {
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow-y: auto !important;
  }
}

/* ---------- Kalender im eigenen Dokument (weiterer Standort, siehe js/buchungskalender.js) */
.buchungskalender__rahmen {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  background: transparent;
}
.buchungskalender__rahmen--vollbild {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  z-index: 1000000;
}
html.buchungskalender-fenster {
  overflow: hidden;
}
/* Ist im Rahmen ein Fenster offen, liegt der Rahmen über der ganzen Seite. Der Kalender darin tritt so
   lange zurück, dahinter sieht man die Seite - wie bei einem Fenster des Kalenders direkt in der Seite. */
html.buchungskalender-vollbild #calendar-root {
  visibility: hidden;
}
html.buchungskalender-vollbild #calendar-root .modal-overlay,
html.buchungskalender-vollbild #calendar-root .hgi-modal-overlay,
html.buchungskalender-vollbild #calendar-root .loading-overlay,
html.buchungskalender-vollbild #calendar-root .reservation-loader-overlay {
  visibility: visible;
}
.buchungskalender-dokument {
  margin: 0;
  background: transparent;
  overflow-x: hidden;
}

/* ---------- Dunkler Modus: Das Widget kennt nur helle Flächen und steht deshalb auf einer hellen Karte */
html[data-modus="dunkel"] .buchungskalender {
  box-sizing: border-box;
  padding: 24px;
  border-radius: 18px;
  background: #EFE5D4;
}
html[data-modus="dunkel"] .buchungskalender__fehler {
  color: #2C0C0C;
}

/* Hinweise, die nur zu einem Reiter gehören (data-kalender-nur, das Skript setzt hidden): Am Desktop
   bleibt ihr Platz frei, damit der Hinweis daneben rechts stehen bleibt. */
@media (min-width: 901px) {
  .m-hinweise > [data-kalender-nur][hidden] {
    display: block;
    visibility: hidden;
  }
}