/* =====================================================================
   SMASHBOX GRAZ — SimplyBook.me Buchungsseite Custom CSS
   Wutraum Brand Polish — Pendant zum Widget-CSS
   ---------------------------------------------------------------------
   Einfügen in: SimplyBook.me → Konfiguration → Benutzerdefiniertes CSS
                → Tab "CSS der Buchungsseite"
   Datum: 2026-04-30
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* --- DESIGN TOKENS -------------------------------------------------- */
:root {
  --color-wutraum-green: #8BE076;
  --wutraum-green-100: rgba(139, 224, 118, 1);
  --wutraum-green-70:  rgba(139, 224, 118, 0.70);
  --wutraum-green-16:  rgba(139, 224, 118, 0.16);
  --wutraum-green-12:  rgba(139, 224, 118, 0.12);
  --black-100: #000000;
  --white-100: #FFFFFF;
  --button-shadow-hover: 0 0 16px rgba(139, 224, 118, 0.45);
}

/* =====================================================================
   FONT (Poppins für alle Texte) — ersetzt Catamaran
   ===================================================================== */
body,
#widget_container,
#events,
#eventForm,
#timeline-container,
.ui-widget-content,
.ui-widget-header,
h1, h2, h3, h4, h5, h6,
p, a, span, div, label, strong, b, small,
button, input, select, textarea, li {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* =====================================================================
   FONT AWESOME 5 PRO — Icons-Fix
   ===================================================================== */
.fa,
.fas,
.fal,
.far,
.fab,
[class^="fa-"],
[class*=" fa-"],
.fa::before,
.fas::before,
.fal::before,
.far::before,
[class^="fa-"]::before,
[class*=" fa-"]::before {
  font-family: "Font Awesome 5 Pro" !important;
  font-weight: 300 !important;
}

.fab,
.fab::before {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* =====================================================================
   BUTTONS — Wutraum-Green-Branding (breit gefasst)
   ===================================================================== */
#events input[type="submit"],
#events input[type="button"],
#events button:not(.cancel):not(.close):not(.back),
#eventForm input[type="submit"],
#eventForm input[type="button"],
#eventForm button:not(.cancel):not(.close):not(.back),
#events input.reserve_time_btn,
#eventForm #save_button {
  background-color: var(--wutraum-green-100) !important;
  color: var(--black-100) !important;
  border: 1px solid var(--wutraum-green-100) !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: box-shadow 200ms ease-out, transform 100ms ease-out !important;
  text-transform: none !important;
}

#events input[type="submit"]:hover,
#events input[type="button"]:hover,
#events button:not(.cancel):not(.close):not(.back):hover,
#eventForm input[type="submit"]:hover,
#eventForm input[type="button"]:hover,
#eventForm button:not(.cancel):not(.close):not(.back):hover,
#events input.reserve_time_btn:hover,
#eventForm #save_button:hover {
  box-shadow: var(--button-shadow-hover) !important;
  background-color: var(--wutraum-green-100) !important;
}

#events input[type="submit"]:active,
#events input[type="button"]:active,
#eventForm input[type="submit"]:active,
#eventForm input[type="button"]:active,
#eventForm #save_button:active {
  transform: translateY(1px) !important;
}

/* "Auswählen"-Button auf Service-Cards
   Echte Struktur: <div class="btn select custom"><a>Auswählen</a></div> */
.btn.select.custom,
div.btn.select.custom {
  background-color: var(--wutraum-green-100) !important;
  border: 1px solid var(--wutraum-green-100) !important;
  border-radius: 4px !important;
  padding: 12px !important;
  cursor: pointer !important;
  transition: box-shadow 200ms ease-out, transform 100ms ease-out !important;
}

.btn.select.custom a,
div.btn.select.custom a {
  color: var(--black-100) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  font-family: 'Poppins', sans-serif !important;
}

.btn.select.custom:hover,
div.btn.select.custom:hover {
  box-shadow: var(--button-shadow-hover) !important;
  background-color: var(--wutraum-green-100) !important;
}

.btn.select.custom:active,
div.btn.select.custom:active {
  transform: translateY(1px) !important;
}

/* Secondary Button — "Andere Zeit wählen" */
#events input.select_another_btn {
  background-color: transparent !important;
  color: var(--wutraum-green-100) !important;
  border: 1px solid var(--wutraum-green-100) !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 200ms ease-out !important;
}

#events input.select_another_btn:hover {
  background-color: var(--wutraum-green-12) !important;
}

/* =====================================================================
   FORM INPUTS — Focus-Ring in Wutraum-Green
   ===================================================================== */
#eventForm input[type="text"],
#eventForm input[type="email"],
#eventForm input[type="tel"],
#eventForm input[type="number"],
#eventForm input[type="password"],
#eventForm textarea,
#eventForm select {
  font-family: 'Poppins', sans-serif !important;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out !important;
}

#eventForm input[type="text"]:focus,
#eventForm input[type="email"]:focus,
#eventForm input[type="tel"]:focus,
#eventForm input[type="number"]:focus,
#eventForm input[type="password"]:focus,
#eventForm textarea:focus,
#eventForm select:focus {
  border-color: var(--wutraum-green-100) !important;
  box-shadow: 0 0 0 3px var(--wutraum-green-16) !important;
  outline: none !important;
}

#eventForm input[type="checkbox"],
#eventForm input[type="radio"] {
  accent-color: var(--wutraum-green-100) !important;
}

/* =====================================================================
   TIMELINE / TIME-SLOTS — Selected in Wutraum-Green
   ===================================================================== */
.timeline td.free_time {
  cursor: pointer !important;
  transition: all 200ms ease-out !important;
}

.timeline td.free_time:hover {
  background-color: var(--wutraum-green-12) !important;
  border-color: var(--wutraum-green-100) !important;
}

.timeline td.selected_time {
  background-color: var(--wutraum-green-100) !important;
  color: var(--black-100) !important;
  font-weight: 600 !important;
}

/* =====================================================================
   SELECTED EVENT (Service-Card im "ausgewählt"-Zustand)
   ===================================================================== */
#events .selectedEvent {
  border: 1px solid var(--wutraum-green-100) !important;
  box-shadow: 0 0 0 1px var(--wutraum-green-100) !important;
}

/* =====================================================================
   LINKS — "Mehr erfahren" etc.
   ===================================================================== */
#widget_container a:not([class*="btn"]):not([class*="button"]) {
  color: var(--wutraum-green-100) !important;
  transition: color 200ms ease-out !important;
}

#widget_container a:not([class*="btn"]):not([class*="button"]):hover {
  color: var(--wutraum-green-70) !important;
}