/* ==========================================================
   EPI – Energietechnik GmbH | SimplyBook.me Custom CSS
   Für die aktuelle /v2/-Buchungsseite und ältere Widgets
   ========================================================== */

:root {
  --epi-blue: #1538c8;
  --epi-blue-dark: #10288f;
  --epi-cyan: #27c1dc;
  --epi-cyan-light: #eafaff;
  --epi-ink: #17233f;
  --epi-muted: #657089;
  --epi-line: #dce6f1;
  --epi-surface: #ffffff;
  --epi-disabled: #edf1f5;
  --epi-danger: #d95c67;
  --epi-radius: 12px;
  --epi-shadow: 0 10px 28px rgba(21, 56, 200, 0.12);
}

/* Grundlayout */
body.--theme-creative,
body.--theme-creative #sb_main,
body.--theme-creative #main {
  color: var(--epi-ink) !important;
  background-color: #f7faff !important;
}

body.--theme-creative #sb_content,
body.--theme-creative .step-content,
body.--theme-creative .booking-info,
body.--theme-creative .timeline-sidebar {
  border-radius: var(--epi-radius) !important;
}

/* Kopfzeile und Logo */
body.--theme-creative .header,
body.--theme-creative #header {
  background: #fff !important;
  border-bottom: 1px solid var(--epi-line) !important;
  box-shadow: 0 3px 14px rgba(16, 40, 143, 0.08) !important;
}

body.--theme-creative .header__logo-image {
  max-height: 64px !important;
  width: auto !important;
}

body.--theme-creative .header__navigation-link {
  color: var(--epi-ink) !important;
  font-weight: 600 !important;
}

body.--theme-creative .header__navigation-link:hover,
body.--theme-creative .header__navigation-link.is-active {
  color: var(--epi-blue) !important;
}

/* Hauptschaltflächen */
body.--theme-creative a.btn,
body.--theme-creative button.btn,
body.--theme-creative input.btn,
body.--theme-creative .btn.book,
body.--theme-creative #save_button,
#events input.reserve_time_btn,
#eventForm #save_button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--epi-cyan) 0%, var(--epi-blue) 100%) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 7px 18px rgba(21, 56, 200, 0.22) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

body.--theme-creative a.btn:hover,
body.--theme-creative button.btn:hover,
body.--theme-creative input.btn:hover,
body.--theme-creative .btn.book:hover,
body.--theme-creative #save_button:hover,
#events input.reserve_time_btn:hover,
#eventForm #save_button:hover {
  filter: brightness(0.96) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(21, 56, 200, 0.28) !important;
}

/* Nur den oberen Button „Auf Karte zeigen“ ausblenden */
body.--theme-creative #main-buttons .btn.map,
body.--theme-creative a.btn.map[href*="show-on-map"] {
  display: none !important;
}

/* Großer Hauptbutton mit eindeutiger Handlungsaufforderung */
body.--theme-creative #main-buttons .btn.book {
  min-width: 240px !important;
  min-height: 62px !important;
  padding: 18px 34px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  border-radius: 12px !important;
}

body.--theme-creative #main-buttons .btn.book::before {
  content: "TERMIN BUCHEN" !important;
  display: inline-block !important;
  font-size: 19px !important;
  line-height: 26px !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
  vertical-align: middle !important;
}

body.--theme-creative #main-buttons .btn.book::after {
  margin-left: 14px !important;
  font-size: 20px !important;
  vertical-align: middle !important;
}

/* Firmenname im Titelbild größer darstellen */
body.--theme-creative #main-buttons h1,
body.--theme-creative #main-buttons .title-main,
body.--theme-creative #main-buttons .company-name {
  font-size: 48px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  font-weight: 800 !important;
  text-shadow: 0 3px 12px rgba(16, 40, 143, 0.28) !important;
}

#events input.select_another_btn {
  color: var(--epi-blue) !important;
  background: #fff !important;
  border: 2px solid var(--epi-blue) !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
}

/* Buchungsschritte */
body.--theme-creative .steps-nav {
  background: #fff !important;
  border: 1px solid var(--epi-line) !important;
  border-radius: var(--epi-radius) !important;
  box-shadow: var(--epi-shadow) !important;
  overflow: hidden !important;
}

body.--theme-creative .steps-nav a,
body.--theme-creative .steps-nav .step {
  color: var(--epi-muted) !important;
  font-weight: 700 !important;
}

body.--theme-creative .steps-nav .active,
body.--theme-creative .steps-nav a:hover {
  color: var(--epi-blue) !important;
}

/* Kalender */
body.--theme-creative .calendar,
body.--theme-creative .top-date-select,
body.--theme-creative .slots-weekly-view-section {
  background: #fff !important;
  border: 1px solid var(--epi-line) !important;
  border-radius: var(--epi-radius) !important;
  box-shadow: var(--epi-shadow) !important;
}

/* /v2/-Buchungsseite: oberen Monatskalender ausblenden */
body.--theme-creative #sb_dateview_container,
body.--theme-creative #sb_datetime_step_container .top-date-select {
  display: none !important;
}

/* Untere Wochenansicht über die verfügbare Breite darstellen */
body.--theme-creative #sb_datetime_step_container .datetime-step,
body.--theme-creative #sb_datetime_step_container .step-content,
body.--theme-creative #sb_timeview_container,
body.--theme-creative #sb_time_slots_weekly_container,
body.--theme-creative .slots-weekly-view,
body.--theme-creative .slots-weekly-view-section,
body.--theme-creative .timeline-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

body.--theme-creative #sb_timeview_container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.--theme-creative #sb_prev_month,
body.--theme-creative #sb_next_month,
body.--theme-creative .sb-date-navigate {
  color: var(--epi-blue) !important;
  font-weight: 700 !important;
}

body.--theme-creative .calendar .weeks-date,
body.--theme-creative .calendar .date {
  color: var(--epi-muted) !important;
}

body.--theme-creative .calendar a.sb-available-date {
  color: var(--epi-blue) !important;
  background: var(--epi-cyan-light) !important;
  border: 1px solid rgba(39, 193, 220, 0.55) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

body.--theme-creative .calendar a.sb-available-date:hover,
body.--theme-creative .calendar a.sb-available-date.selected,
body.--theme-creative .calendar .day-on.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--epi-cyan), var(--epi-blue)) !important;
  border-color: transparent !important;
  box-shadow: 0 5px 14px rgba(21, 56, 200, 0.22) !important;
}

/* Terminzeiten */
body.--theme-creative .time-slot .cell.sb-cell.free,
body.--theme-creative a.cell.sb-cell.free {
  color: var(--epi-blue) !important;
  background: #fff !important;
  border: 2px solid var(--epi-cyan) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

body.--theme-creative .time-slot .cell.sb-cell.free:hover,
body.--theme-creative a.cell.sb-cell.free:hover,
body.--theme-creative .time-slot .cell.sb-cell.selected {
  color: #fff !important;
  background: linear-gradient(135deg, var(--epi-cyan), var(--epi-blue)) !important;
  border-color: transparent !important;
}

body.--theme-creative .time-slot .cell.sb-cell.busy,
body.--theme-creative .time-slot .cell.sb-cell.reserved {
  color: #9aa4b4 !important;
  background: var(--epi-disabled) !important;
  border-color: var(--epi-disabled) !important;
}

/* Leistungs- und Anbieterboxen */
body.--theme-creative .service-item,
body.--theme-creative .provider-item,
body.--theme-creative .booking-info .service-item {
  background: #fff !important;
  border: 1px solid var(--epi-line) !important;
  border-radius: var(--epi-radius) !important;
  box-shadow: 0 6px 20px rgba(16, 40, 143, 0.09) !important;
}

body.--theme-creative .service-item h4,
body.--theme-creative .provider-item h4,
body.--theme-creative .booking-info h4 {
  color: var(--epi-blue-dark) !important;
  font-weight: 800 !important;
}

body.--theme-creative .item__read-more {
  color: var(--epi-blue) !important;
  font-weight: 700 !important;
}

/* Formulare */
body.--theme-creative input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.--theme-creative textarea,
body.--theme-creative select,
#eventForm input[type="text"],
#eventForm textarea,
#eventForm select {
  color: var(--epi-ink) !important;
  background: #fff !important;
  border: 1px solid #cbd8e6 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.--theme-creative input:focus,
body.--theme-creative textarea:focus,
body.--theme-creative select:focus,
#eventForm input:focus,
#eventForm textarea:focus,
#eventForm select:focus {
  border-color: var(--epi-cyan) !important;
  box-shadow: 0 0 0 3px rgba(39, 193, 220, 0.18) !important;
  outline: 0 !important;
}

/* Älteres SimplyBook-Widget: bereitgestellte Selektoren */
#events h3,
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  color: var(--epi-blue-dark) !important;
  font-weight: 800 !important;
}

#events p.duration,
#events div.duration,
#events p.description,
#events div.description {
  color: var(--epi-muted) !important;
  line-height: 1.6 !important;
}

#events .selectedEvent {
  background: var(--epi-cyan-light) !important;
  border: 2px solid var(--epi-cyan) !important;
  border-radius: var(--epi-radius) !important;
  box-shadow: var(--epi-shadow) !important;
}

#events .event_price {
  color: var(--epi-blue) !important;
  font-weight: 800 !important;
}

div.ui-widget-content {
  color: var(--epi-ink) !important;
  background: #fff !important;
  border: 1px solid var(--epi-line) !important;
  border-radius: 10px !important;
}

div.ui-widget-header {
  color: #fff !important;
  background: linear-gradient(135deg, var(--epi-cyan), var(--epi-blue)) !important;
  border: 0 !important;
  border-radius: 9px 9px 0 0 !important;
}

#timeline-container table.timeline {
  background: #fff !important;
  border: 1px solid var(--epi-line) !important;
  border-collapse: separate !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.timeline td.not_worked_time {
  color: #9aa4b4 !important;
  background: var(--epi-disabled) !important;
}

.timeline td.free_time {
  color: var(--epi-blue) !important;
  background: var(--epi-cyan-light) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
}

.timeline td.selected_time {
  color: #fff !important;
  background: var(--epi-blue) !important;
  font-weight: 800 !important;
}

.timeline td.reserved_time {
  color: #fff !important;
  background: var(--epi-danger) !important;
}

div#loading {
  color: var(--epi-blue) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
}

div#widget_container {
  color: var(--epi-ink) !important;
  background: #f7faff !important;
  border: 1px solid var(--epi-line) !important;
  border-radius: var(--epi-radius) !important;
  box-shadow: var(--epi-shadow) !important;
  overflow: hidden !important;
}

#widget_container #widget_header,
#widget_container #widget_footer {
  color: #fff !important;
  background: linear-gradient(135deg, var(--epi-cyan), var(--epi-blue)) !important;
  border: 0 !important;
}

#widget_container h1.title a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

#eventForm dd.extention_data,
dd.extention_data dl.zend_form dt,
dd.extention_data dl.zend_form dd label,
#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
  color: var(--epi-ink) !important;
}

/* Standortkarte im mittleren Startseitenblock */
body.--theme-creative #about-us .title {
  display: none !important;
}

body.--theme-creative #about-us .section-pd {
  padding: 0 !important;
  height: 100% !important;
  min-height: 320px !important;
}

body.--theme-creative #about-us .txt,
body.--theme-creative #about-us .epi-location-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
}

body.--theme-creative #about-us .epi-location-map {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--epi-radius) !important;
  background: var(--epi-cyan-light) !important;
}

body.--theme-creative #about-us .epi-location-map iframe {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  border: 0 !important;
}

body.--theme-creative #about-us .epi-location-link {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  padding: 10px 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--epi-cyan), var(--epi-blue)) !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 14px rgba(21, 56, 200, 0.24) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Mobil */
@media (max-width: 768px) {
  body.--theme-creative .header__logo-image {
    max-height: 48px !important;
  }

  body.--theme-creative .calendar,
  body.--theme-creative .top-date-select,
  body.--theme-creative .slots-weekly-view-section,
  body.--theme-creative .steps-nav {
    border-radius: 9px !important;
    box-shadow: 0 5px 16px rgba(16, 40, 143, 0.09) !important;
  }

  body.--theme-creative a.btn,
  body.--theme-creative button.btn,
  body.--theme-creative input.btn,
  #eventForm #save_button {
    min-height: 46px !important;
  }

  body.--theme-creative #about-us .section-pd,
  body.--theme-creative #about-us .txt,
  body.--theme-creative #about-us .epi-location-map {
    min-height: 280px !important;
  }

  body.--theme-creative #about-us .epi-location-map iframe {
    height: 280px !important;
  }

  body.--theme-creative #main-buttons h1,
  body.--theme-creative #main-buttons .title-main,
  body.--theme-creative #main-buttons .company-name {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
}

/* Barrierefreiheit: sichtbarer Tastaturfokus */
body.--theme-creative a:focus-visible,
body.--theme-creative button:focus-visible,
body.--theme-creative input:focus-visible,
body.--theme-creative select:focus-visible,
body.--theme-creative textarea:focus-visible {
  outline: 3px solid rgba(39, 193, 220, 0.7) !important;
  outline-offset: 3px !important;
}