/* =========================================================
   gR Booking – Base CSS (Variable-driven)
   - Plugin liefert weiterhin sein CSS
   - Pro kann via CSS-Variablen + Custom CSS überschreiben
   ========================================================= */


/* Default Theme (Free + Pro ohne Anpassung) */
:root {
  --gr-primary: #1f1f1f;
  --gr-primary-contrast: #ffffff;

  --gr-bg: #ffffff;
  --gr-surface: #ffffff;

  --gr-text: #1f1f1f;
  --gr-muted: #666666;

  --gr-border: #e7e7e7;
  --gr-border-strong: #cccccc;

  --gr-radius-sm: 8px;
  --gr-radius-md: 10px;
  --gr-radius-lg: 12px;

  --gr-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.03);
  --gr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

  --gr-focus: #666666;

  --gr-cal-day-bg: #f8f8f8;
  --gr-cal-day-today-border: #222222;

  --gr-slot-bg: #fafafa;
  --gr-slot-hover-bg: #f0f0f0;

  --gr-loader-track: #eeeeee;
  --gr-loader-head: #444444;

  --gr-overlay: rgba(0, 0, 0, 0.55);
  --gr-danger: #cc0000;

  --gr-pad-top-desktop: 100px;
  --gr-pad-top-mobile: 50px;
}

/* Scope: falls jemand Variablen lieber nur für Plugin setzt */
#gr-booking {

  /*  auch Pro-Variablen  */
}

/* ===============================
   gR Booking – Kalender Buttons
   iOS / Touch SAFE
   =============================== */

/* Basis */
#gr-cal-prev,
#gr-cal-next {
  width: 40px;
  height: 30px;
  border-radius: var(--gr-radius-sm);
  border: 1px solid rgba(0, 0, 0, .15);
  background: #fff;
  position: relative;
  cursor: pointer;
  overflow: hidden;

  transition:
    background-color .45s ease,
    box-shadow .45s ease,
    transform .45s ease;
}

/* ===============================
   HOVER – NUR Desktop / echte Maus
   =============================== */
@media (hover: hover) and (pointer: fine) {

  #gr-cal-prev:hover,
  #gr-cal-next:hover {
    background: var(--gr-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }

  #gr-cal-prev:hover::before,
  #gr-cal-next:hover::before {
    border-color: var(--gr-primary-contrast);
  }

  /* Richtungs-Micro-Animation 
    #gr-cal-prev:hover::before {
        transform: translate(-55%, -50%) rotate(145deg);
    }

    #gr-cal-next:hover::before {
        transform: translate(-45%, -50%) rotate(-35deg);
    }*/
}

/* ===============================
   ACTIVE – Touch & Mouse
   =============================== */
#gr-cal-prev:active,
#gr-cal-next:active {
  background: var(--gr-primary);
  transform: scale(0.70);
  box-shadow:
    inset 0 0 0 999px rgba(255, 255, 255, .08),
    0 3px 10px rgba(0, 0, 0, .15);
}

/* ===============================
   Chevron Icon
   =============================== */
#gr-cal-prev::before,
#gr-cal-next::before {
  content: '';
  width: 8px;
  height: 8px;
  border-left: 2px solid #222;
  border-bottom: 2px solid #222;
  position: absolute;
  top: 50%;
  transition:
    border-color .25s ease,
    transform .25s ease;
}

/* Position */
#gr-cal-prev::before {
  left: 55%;
  transform: translate(-50%, -50%) rotate(45deg);
}

#gr-cal-next::before {
  left: 45%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* Active-Farbe */
#gr-cal-prev:active::before,
#gr-cal-next:active::before {
  border-color: var(--gr-primary-contrast);
}

/* Active-Impuls */
#gr-cal-prev:active::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

#gr-cal-next:active::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

/* ===============================
   Fokus (Keyboard only)
   =============================== */
#gr-cal-prev:focus,
#gr-cal-next:focus {
  outline: none;
}

#gr-cal-prev:focus-visible,
#gr-cal-next:focus-visible {
  outline: 2px solid var(--gr-primary);
  outline-offset: 2px;
}





#gr-booking {
  /* max-width: 900px;*/
  margin: 0 auto;
  padding-top: var(--gr-pad-top-desktop);
  font-family: inherit;
  color: var(--gr-text);
}

@media screen and (max-width:768px) {
  #gr-booking {
    padding-top: var(--gr-pad-top-mobile);
  }
}

.gr-nav {
  margin-top: 20px;
}

.gr-nav-btn {
  background: var(--gr-bg);
  color: var(--gr-text);
  padding: 10px 16px;
  border-radius: var(--gr-radius-sm);
  border: 1px solid var(--gr-border-strong);
  cursor: pointer;
  font-size: 16px;
}

.gr-nav-btn:hover {
  background: var(--gr-primary);
  color: var(--gr-primary-contrast);
}

/* BUGFIX: transition war kaputt (doppelter Wert) */
.gr-step {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

.gr-step.active {
  opacity: 1;
  max-height: 2000px;
  /* groß genug für Step-Inhalt */
  overflow: visible !important;
}

/* Desktop: Professioneller Wechsel ohne "unruhiges" Mit-Scrollen */
@media (min-width: 992px) {
  .gr-step {
    display: none;
    max-height: none;
    transition: none;
  }

  .gr-step.active {
    display: block;
    opacity: 1;
    max-height: none;
    animation: grStepFadeIn 0.8s ease-out forwards;
  }
}

@keyframes grStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#gr-booking h2 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
}

#gr-booking h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.gr-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .gr-cards {
    grid-template-columns: 1fr;
  }
}

.gr-price {
  font-size: 80%;
}


#gr-timeslots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gr-card {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  padding: 18px 20px;
  border-radius: var(--gr-radius-lg);
  cursor: pointer;
  transition: 0.7s ease;
  box-shadow: var(--gr-shadow-sm);
}

.gr-card:hover {
  border-color: var(--gr-primary);
  background: var(--gr-primary);
  color: var(--gr-primary-contrast);
  box-shadow: var(--gr-shadow-md);
}

.gr-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .gr-layout {
    grid-template-columns: 1fr;
  }

  #gr-timeslots {
    /* grid-template-columns: 1fr;*/
    gap: 12px;
    padding: 10px;
  }

  .gr-card,
  .gr-slot,
  .gr-timeslots {
    font-size: 14px !important;
  }
}

.gr-info {
  font-size: 14px;
  color: var(--gr-muted);
  margin-top: 6px;
  line-height: 1.4;
  transition: color 1s ease-in-out;
}

.gr-card:hover>.gr-info {
  color: var(--gr-primary-contrast);
}

.gr-calendar {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-lg);
  padding: 16px;
  position: relative;
  /* Stacking Context für Tooltips */
  z-index: 10;
}

/* Wenn ein Tooltip aktiv ist, muss der Kalender über den Slots liegen */
.gr-calendar:has(.gr-cal-day.disabled[data-title]:hover) {
  z-index: 1002;
}

.gr-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 600;
}

.gr-cal-header button {
  border: unset;
  color: var(--gr-text);
  background: var(--gr-bg);
  border-radius: unset;
  font-size: 40px;
  font-weight: 600;
  cursor: pointer;
}

.gr-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 12px;
  text-align: center;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--gr-text) 55%, transparent);
}

.gr-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.gr-cal-days.loading {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
}

.gr-cal-day {
  border: none;
  background: var(--gr-cal-day-bg);
  border-radius: var(--gr-radius-sm);
  padding: 6px 0;
  font-size: 16px;
  color: var(--gr-text);
  cursor: pointer;
  overflow: visible !important;
}

/*
.gr-cal-day.today {
  border: 1px solid var(--gr-cal-day-today-border);
}
  */
.gr-cal-day.today {
  border: 1px solid var(--gr-border-strong);
}

.gr-cal-day.active {
  background: var(--gr-primary);
  color: var(--gr-primary-contrast);
}

.gr-cal-day.empty {
  background: transparent;
  cursor: default;
}

.gr-cal-day.disabled {
  background: var(--gr-cal-day-bg);
  color: color-mix(in srgb, var(--gr-text) 50%, transparent);
  cursor: not-allowed;
  position: relative;
  /*z-index: 1;*/
  /* Basis-Z-Index für Stacking Order */
}

.gr-cal-day.disabled[data-title] {
  cursor: help;
}

.gr-info-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: var(--gr-primary);
  color: var(--gr-primary-contrast);
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
  z-index: 2;
}

/* Tooltip Styles (jetzt als echtes HTML Element für Tags wie <br>) */
.gr-tooltip {
  position: absolute;
  bottom: 140%;
  left: 50%;
  width: max-content;
  min-width: 50px;
  max-width: 250px;
  transform: translateX(-50%) translateY(20px);
  background: var(--gr-muted);
  color: var(--gr-primary-contrast);
  padding: 15px 15px;
  border-radius: var(--gr-radius-sm);
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
  line-height: 1.4;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  pointer-events: none;
  box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.50);
  text-align: left;
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Spezial-Ausrichtung für Ränder, damit nichts abgeschnitten wird */
.gr-cal-day:nth-child(7n+1) .gr-tooltip {
  left: 0;
  transform: translateY(20px);
}

.gr-cal-day:nth-child(7n) .gr-tooltip {
  left: auto;
  right: 0;
  transform: translateY(20px);
}

/*
.gr-cal-day:hover {
  z-index: 2000 !important;
  /* Über Nachbarn liegen */
/*}


/* Tooltip Arrow (jetzt am Tooltip selbst) */
.gr-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--gr-muted);
  pointer-events: none;
}

/* Spezial-Ausrichtung für Pfeil an den Rändern */
.gr-cal-day:nth-child(7n+1) .gr-tooltip::before {
  left: 15px;
  transform: none;
}

.gr-cal-day:nth-child(7n) .gr-tooltip::before {
  left: auto;
  right: 15px;
  transform: none;
}

.gr-cal-day:hover .gr-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.gr-cal-day:nth-child(7n+1):hover .gr-tooltip,
.gr-cal-day:nth-child(7n):hover .gr-tooltip {
  transform: translateY(0) !important;
}

.gr-slots {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-lg);
  padding: 16px;
}

#gr-slot-status {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--gr-radius-sm);
  border: 1px solid var(--gr-muted);
  background: var(--gr-muted);
  color: var(--gr-primary-contrast);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

#gr-slot-status .gr-slot-status__text {
  flex: 1;
  font-weight: 700;
}

#gr-slot-status .gr-slot-status__timer {
  display: none;
  min-width: 32px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#gr-status {
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--gr-radius-sm);
  border: 1px solid var(--gr-muted);
  background: var(--gr-muted);
  color: var(--gr-primary-contrast);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  display: none;
}

#gr-status:not(:empty) {
  display: block;
}

#gr-status.error {
  border-color: var(--gr-danger);
  background: var(--gr-danger);
  color: var(--gr-primary-contrast);
}

@media (max-width: 768px) {
  #gr-slot-status {
    font-size: 15px;
  }

  #gr-status {
    font-size: 15px;
  }
}

.gr-slot {
  font-size: 18px;
  margin: 0 auto;
}

.gr-slot-card {
  width: 100%;
  text-align: left;
  border-radius: var(--gr-radius-sm);
  border: 1px solid color-mix(in srgb, var(--gr-text) 20%, transparent);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--gr-slot-bg);
  font-size: 18px;
}

.gr-slot-card:hover {
  background: var(--gr-slot-hover-bg);
}

label {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
}

input,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gr-text) 18%, transparent);
  border-radius: var(--gr-radius-sm);
  margin-top: 4px;
  font-size: 15px;
}

/* ----------------------------------------
   Step 3 – Minimalistische gR-Style Inputs
   ---------------------------------------- */

#gr-step-3 form {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}

#gr-step-3 form label {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--gr-text);
  display: flex;
  flex-direction: column;
}

/* Inputs */
#gr-step-3 input,
#gr-step-3 textarea {
  border: none;
  border-bottom: 2px solid var(--gr-text);
  border-radius: 0;
  padding: 8px 0 4px 0;
  font-size: 16px;
  font-weight: 400;
  background: transparent;
  outline: none;
  transition: border-color 0.2s;
}

#gr-step-3 input:focus,
#gr-step-3 textarea:focus {
  /*
  border-bottom-color: var(--gr-focus);
  */
  border-color: var(--gr-border-strong);
}

#gr-step-4 {
  height: 20vh;
}

/* Textarea volle Breite */
#gr-step-3 textarea {
  grid-column: 1 / -1;
  resize: vertical;
  min-height: 90px;
}

/* Submit-Button */
#gr-submit {
  grid-column: 1 / -1;
  color: var(--gr-primary-contrast);
  margin-top: 20px;
  padding: 14px 20px;
  font-size: 17px;
  background: var(--gr-primary);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#gr-submit:hover {
  background: color-mix(in srgb, var(--gr-primary) 35%, #ffffff);
}



/* Submit-Zeile über beide Spalten ziehen */
#gr-step-3 form .gr-submit-row {
  grid-column: 1 / -1;
  /* <- DAS ist der fehlende Hebel */
  display: grid;
  grid-template-columns: 1fr auto;
  /* rechts Button-Spalte */
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

/* Button rechts, volle Breite in seiner Spalte */
#gr-step-3 form .gr-submit-row .gr-submit-btn {
  width: 100%;
  white-space: nowrap;
}

/* Checkbox/Text sauber nebeneinander */
#gr-step-3 form .gr-checkline {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}

#gr-step-3 form .gr-checkline input[type="checkbox"] {
  margin-top: 3px;
  width: 20px;
}

/* Text kleiner */
#gr-step-3 form .gr-checktext {
  font-size: 13px;
}

/* Mobile: alles untereinander */
@media (max-width: 640px) {
  #gr-step-3 form {
    grid-template-columns: 1fr;
  }

  #gr-step-3 form .gr-submit-row {
    grid-template-columns: 1fr;
  }

  #gr-step-3 form .gr-submit-row .gr-submit-btn {
    width: 100%;
  }
}

.gr-checkline input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.gr-checktext {
  font-size: 13px;
  /* kleiner */
}

/* Button rechts, nicht volle Breite */
.gr-submit-btn {
  white-space: nowrap;
  align-self: start;
}

/* Mobile: untereinander */
@media (max-width: 640px) {
  .gr-submit-row {
    grid-template-columns: 1fr;
  }

  .gr-submit-btn {
    width: 100%;
  }
}

/* Summary Card – optisch anpassen */
.gr-summary {
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-md);
  padding: 18px 20px;
  margin: 0 0 30px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

#gr-summary-text {
  white-space: pre-line;
  font-size: 16px;
  margin-top: 4px;
  color: var(--gr-text);
  display: block;
  margin-top: 6px;
}

/* Mobil: 1 Spalte */
@media (max-width: 768px) {
  #gr-step-3 form {
    grid-template-columns: 1fr;
  }
}

.gr-loader {
  width: 50px;
  height: 50px;
  border: 4px solid var(--gr-loader-track);
  border-top-color: var(--gr-loader-head);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 15% auto;
}

.hidden {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#gr-modal-overlay {
  position: fixed;
  z-index: 999999 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gr-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#gr-modal-box {
  background: var(--gr-surface);
  padding: 30px;
  border-radius: var(--gr-radius-lg);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  animation: grfade .2s ease-out;
}

@keyframes grfade {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

#gr-modal-box h3 {
  margin-top: 0;
  font-size: 20px;
  color: var(--gr-text);
}

/* Checkbox + Text in einer Zeile */
#gr-modal-box .grb-modal-check {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 15px;
  color: var(--gr-text);
}

#gr-modal-box .grb-modal-check input[type="checkbox"] {
  margin-top: 5px;
  flex-shrink: 0;
  width: 20px;
}

#gr-modal-box .grb-modal-check-text {
  display: block;
  line-height: 1.4;
  white-space: normal;
  width: 100%;
}

/* Buttons & Fehlerbereich */
#gr-modal-confirm {
  margin-top: 20px;
  width: 90%;
  padding: 12px;
  background: var(--gr-text);
  color: var(--gr-primary-contrast);
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
}

#gr-modal-cancel {
  margin-top: 10px;
  width: 90%;
  padding: 10px;
  background: color-mix(in srgb, var(--gr-text) 8%, #ffffff);
  border: none;
  border-radius: 30px;
  font-size: 15px;
  cursor: pointer;
}

#gr-modal-error {
  color: var(--gr-danger);
  font-size: 15px;
  margin-top: 10px;
}



/* =========================================================
   HARD RESET: Theme-Button-Styles für gR Booking aushebeln
   (nur #gr-submit, damit nichts anderes zerbricht)
   ========================================================= */
#gr-booking #gr-submit {
  -webkit-appearance: none !important;
  appearance: none !important;

  font: inherit !important;
  line-height: 1.2 !important;

  border: 0 !important;
  border-radius: var(--gr-radius-md) !important;
  background: var(--gr-primary) !important;
  color: var(--gr-primary-contrast) !important;

  padding: 14px 0 !important;
  margin: 20px 0 0 0 !important;

  width: 100% !important;
  display: block !important;

  cursor: pointer !important;
  box-shadow: none !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

@media screen and (max-width:768px) {
  #gr-booking #gr-submit {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 80% !important;
  }
}

#gr-booking #gr-submit:hover {
  background: color-mix(in srgb, var(--gr-primary) 35%, #ffffff) !important;
}

#gr-booking #gr-submit:focus {
  outline: 2px solid color-mix(in srgb, var(--gr-primary) 55%, transparent) !important;
  outline-offset: 2px !important;
}


#gr-booking.gr-meeting title {
  font-size: 1.3em;
}

#gr-booking .gr-meeting-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;

}

#gr-booking .gr-meeting-intro img {
  width: 48px;
  height: auto;
  flex-shrink: 0;
  border-radius: 6px;
  /* minimal, hochwertig */
}

#gr-booking .gr-meeting-text strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.1em;
  line-height: 1.4;
}

#gr-booking .gr-meeting-text {
  margin: 0;
  line-height: 1.8;
}

@media (max-width: 600px) {
  #gr-booking .gr-meeting-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #gr-booking .gr-meeting-intro img {
    width: 100px;
    margin: 0 auto;
  }

  #gr-booking .gr-meeting-text strong {
    font-size: 1em;
  }

}

#gr-phone.gr-invalid {
  border-color: #b20000;
  background: #fff5f5;
}

/* =========================================================
   gR Booking – Global Modal (theme-agnostic)
   ========================================================= */

.gr-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
  transition: opacity .9s ease-in-out;
}

/* sichtbar */
.gr-booking-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Overlay */
.gr-booking-modal-overlay {
  position: absolute;
  inset: 0;

  background: var(--gr-popup-overlay-bg, rgba(0, 0, 0, .75)) !important;

  backdrop-filter: blur(var(--gr-popup-overlay-blur, 8px)) saturate(110%) !important;
  -webkit-backdrop-filter: blur(var(--gr-popup-overlay-blur, 8px)) saturate(110%) !important;

  opacity: 0;
  transition: opacity .85s ease-in-out;
}

.gr-booking-modal.is-open .gr-booking-modal-overlay {
  opacity: 1;
}

/* Modal Box */
.gr-booking-modal-wrapper {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1100px;
  height: 70vh;

  background: var(--gr-bg);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);

  display: flex;
  flex-direction: column;

  transform: translateY(0px) scale(.8);
  opacity: 0;

  transition:
    transform .65s ease-in-out,
    opacity .55s ease-in-out;
}

.gr-booking-modal.is-open .gr-booking-modal-wrapper {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header / Body */
.gr-booking-modal-header {
  padding: 20px 5%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gr-booking-modal-body {
  padding: 30px 5vw;
  overflow-y: auto;
  flex-grow: 1;
}

@media (max-width:768px) {
  .gr-booking-modal-wrapper {
    height: 98vh;
  }
}

/* Close Button */
.gr-booking-modal-close {
  background: none;
  border: 0;
  font-size: 50px;
  line-height: 1;
  cursor: pointer;
  color: var(--gr-muted);
}

.gr-booking-modal-close {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gr-booking-modal-close-text {
  font-size: 14px;
}

/* Scroll lock */
body.gr-modal-open {
  overflow: hidden;
}

.gr-booking-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--gr-text);
}


.gr-booking-modal-close:hover {
  color: var(--gr-text);
}


/* Scrollbar für Modal Body */
.gr-booking-modal-body::-webkit-scrollbar {
  width: 8px;
}

.gr-booking-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.gr-booking-modal-body::-webkit-scrollbar-thumb {
  background: var(--gr-border-strong);
  border-radius: 10px;
}

.gr-booking-popup-trigger {
  background: var(--gr-primary);
  color: var(--gr-primary-contrast);
  padding: 14px 28px;
  border-radius: var(--gr-radius-md);
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gr-booking-popup-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  opacity: 0.95;
}

/* Reset padding if in modal */
.gr-booking-modal #gr-booking {
  padding-top: 0 !important;
}