/* ========================================
   Grid & Layout
   ======================================== */
.grid-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem;
}
.calendar-grid {
  --cal-gap: .5rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--cal-gap);
  padding: var(--cal-gap);
  overflow-x: hidden;
  box-sizing: border-box;
}




/* Typography: Poppins for body, Lora for headings */
html, body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; }

h2 {
  font-size: 1.1rem !important;
}

/* Component titles use heading font */
#cal-title,
#slot-title,
#form-title {
  font-family: var(--font-heading);
  font-weight: 700; /* already present in your CSS; keep it */
}

/* Body/UI text stays Poppins */
#booking-form .form-label,
#price-info,
#selection-summary,
#weekday-head,
.calendar .calendar-grid button.calendar-day,
.slot-btn,
.btn,
.badge,
.navbar,
.card {
  font-family: var(--font-body);
}



/* ========================================
   Kalender Kacheln
   ======================================== */
.calendar .calendar-grid button.calendar-day.btn,
.calendar .calendar-grid button.calendar-day.btn.btn-light {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  min-height: clamp(56px, 8.8vw, 60px);
  box-sizing: border-box;
  border: 0 !important;
  border-radius: var(--radius, .75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--calendar-day-bg, #2c2f3a) !important;
  color: var(--calendar-text, #f8f9fa) !important;
  transition: background .15s, color .15s, filter .15s;
  box-shadow: none !important;
}

/* Kalender-Tage Hover-Effekt wie bei Slot-Buttons */
.calendar-day:hover:not(.disabled):not(.active) {
  background-color: var(--calendar-day-hover-bg, var(--slot-btn-active-bg));
  color: var(--calendar-day-hover-text, var(--slot-btn-active-text));
  filter: brightness(1.3);
  transition: background-color .2s ease, color .2s ease;
}


@media (max-width: 420px) {
  .calendar .calendar-grid button.calendar-day.btn,
  .calendar .calendar-grid button.calendar-day.btn.btn-light {
    min-height: unset;
  }
}

/* deaktivierte Tage */
.calendar .calendar-grid button.calendar-day.disabled,
.calendar .calendar-grid button.calendar-day.muted,
.calendar .calendar-grid button.calendar-day.btn:disabled {
  background-color: var(--calendar-day-disabled-bg, #394453) !important;
  color: var(--calendar-day-disabled-text, #8b96a6) !important;
  border-color: transparent !important;
  opacity: 1 !important;
  cursor: not-allowed;
  filter: none !important;
}
.calendar .calendar-grid button.calendar-day.disabled:hover {
  filter: none !important;
}

/* aktiver Tag */
.calendar .calendar-grid button.calendar-day.active,
.calendar .calendar-grid button.calendar-day.btn.active {
  background-color: var(--calendar-day-active-bg, #ffc107) !important;
  color: var(--calendar-day-active-text, #212529) !important;
  border-color: var(--calendar-day-active-bg, #ffc107) !important;
  font-weight: 700;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  background-color: var(--calendar-day-active-bg, #ffc107) !important;
  color: var(--calendar-day-active-text, #212529) !important;
  border-color: var(--calendar-day-active-bg, #ffc107) !important;
}

/* Wochentage (Mo–So) */
#weekday-head {
  color: var(--calendar-weekday-color, #ffffff) !important;
  font-weight: 700;
}

/* ========================================
   Slots
   ======================================== */
.slot-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--slot-btn-bg, #2c2f3a);
  color: var(--slot-btn-text, #ffffff);
  border: 0 !important;
  border-radius: .5rem;
  padding: .5rem .75rem;
  transition: background .15s, color .15s;
}
.slot-btn.active,
.slot-btn.btn.btn-outline-secondary.active {
  background-color: var(--slot-btn-active-bg, #0d6efd);
  color: var(--slot-btn-active-text, #fff);
}
.slot-btn .badge {
  background-color: var(--slot-badge-bg, #0d6efd) !important;
  color: var(--slot-badge-text, #fff);
  border: 0 !important;
}

.slot-btn:hover {
  color: var(--slot-btn-text, #ffffff);
  background-color: var(--slot-btn-hover-bg, #ffffff);
}

/* ========================================
   Navigation Pfeile Kalender
   ======================================== */
#cal-prev span,
#cal-next span {
  font-size: 1.5rem;
  color: var(--calendar-weekday-color, #ffffff);
}
#cal-prev,
#cal-next {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#cal-prev:hover,
#cal-next:hover {
  background-color: rgba(255,255,255,0.05);
}

/* ========================================
   Card Header (Kalender, Slots, Formular)
   ======================================== */
#calendar-card .card-header,
#booking-form .card-header,
#slot-card .card-header {
  min-height: 4.3rem;
  display: flex;
  align-items: center;
  background-color: var(--card-bg, #1a1d29);
  color: var(--heading-color, #fff);
  border: 0 !important;
}
#cal-title,
#slot-title,
#form-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color, #fff);
  margin: 0;
}

/* ========================================
   Formular
   ======================================== */
#booking-form .form-label {
  color: var(--label-color, #fff);
  font-weight: 500;
}
#selection-summary {
  color: var(--text-color, #fff) !important;
}
#price-info {
  color: var(--price-color, #fff);
  font-size: 1.125rem;
  font-weight: 600;
}

/* ========================================
   Spinner
   ======================================== */
#cal-spinner .spinner-border,
#slot-spinner .spinner-border {
  color: var(--spinner-color, var(--btn-bg, #0d6efd));
}

/* ========================================
   Hinweise
   ======================================== */
#cal-tip,
#slot-message {
  color: var(--calendar-hint, #adb5bd) !important;
  font-size: 0.875rem;
  background-color: var(--card-bg) !important;
}

/* ========================================
   Global Reset Borders
   ======================================== */
.card,
.btn,
.slot-btn,
.form-control,
.navbar,
hr {
  border: 0 !important;
  box-shadow: none !important;
}



/* Primary-Button vollständig über Variablen steuern */
.btn-primary,
.btn-primary:focus {
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  opacity: .6;
}


.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  background-color: var(--btn-bg) !important;
}

/* Falls Outline-Variante genutzt wird */
.btn-outline-primary,
.btn-outline-primary:focus {
  background-color: transparent !important;
  color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  border-color: var(--btn-hover-bg) !important;
}

div#slot-items > div {
    grid-template-columns: repeat(4, 1fr);
}

.btn-outline-secondary {
    color: var(--text-color);
}

.btn-outline-secondary:hover {
    /* background-color: transparent; */
    opacity: .8;
}

a#voucher-toggle {
    color: var(--link-hover);
    display: inline-flex;
    flex-basis: 100%;
    justify-content: center;
}

a#voucher-toggle:hover {
    opacity: .8;
}

div#voucher-applied {
    padding: .375rem .75rem!important;
}

div#voucher-form {
    margin-bottom: var(--bs-alert-margin-bottom);
}

button#voucher-remove {
    font-size: 14px;
}

small {
    display: block;
}

.voucher-wrapper {
    min-height: 68px;
}

/* RESPO */

@media (max-width: 991.98px) {
  div#slot-items > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  div#voucher-form {
      width: 100%;
  }
}

@media (max-width: 400px) {
  div#slot-items > div {
    grid-template-columns: repeat(1, 1fr);
  }

  .voucher-wrapper {
    min-height: 88px;
  }

}