/* ============================================================
 * IVAN'S Wegberg — Amelia-Buchungswidget im CI-Look
 * Nur auf /termin/ geladen. Alles unter #amelia-container gescoped,
 * damit nichts in die Restseite leakt. Token-Fallbacks fuer den
 * Amelia-Render-Kontext. Ziel: ~ Optik des buchungsbereich-Dummys.
 * ============================================================ */

#amelia-container {
  --am-gold:      var(--gold, #F59E0B);
  --am-gold-deep: var(--gold-deep, #D97706);
  --am-bg-0:      var(--bg-0, #000000);
  --am-bg-1:      var(--bg-1, #09090B);
  --am-bg-2:      var(--bg-2, #18181B);
  --am-line:      var(--line, #27272A);
  --am-line-soft: var(--line-soft, #1f1f23);
  --am-text-1:    var(--text-1, #FFFFFF);
  --am-text-2:    var(--text-2, #A1A1AA);
  --am-sans:      var(--font-sans, "Inter", system-ui, sans-serif);
  --am-radius:    2px;

  font-family: var(--am-sans);
}

/* Amelia steckt in einem Full-Width-Elementor-Container; auf Site-Container
 * (boxed 1200px + seitliches Padding) einschnueren wie die anderen Module. */
.amelia-v2-booking {
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding-inline: var(--s-3, 24px);
  box-sizing: border-box;
}

/* ---- Karte / Wrapper --------------------------------------
 * #amelia-container TRAEGT selbst die Klasse .am-fs__wrapper
 * (gleiches Element, kein Descendant) -> direkt targeten. */
#amelia-container.am-fs__wrapper,
#amelia-container {
  border: 1px solid var(--am-gold-deep) !important;
  border-radius: var(--am-radius) !important;
  background: var(--am-bg-2);
  overflow: hidden;
  /* volle Container-Breite statt fixer max-width + Zentrierung */
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

/* Inhalt fuellt die Karte: Hauptbereich dehnt sich, Sidebar etwas breiter
 * (sonst bricht das Schritt-Label "Dienstleistungsauswahl" um). */
#amelia-container .am-fs__main {
  max-width: none !important;
  flex: 1 1 auto !important;
}
#amelia-container .am-fs-sb {
  width: 300px !important;
  max-width: 300px !important;
}

/* Innen-Flaechen auf CI-Toene */
#amelia-container .am-fs__main,
#amelia-container .am-fs__main-inner,
#amelia-container .am-fs__init {
  background: var(--am-bg-2);
}

/* Trennlinie Sidebar/Main + Headings im CI */
#amelia-container .am-fs-sb {
  background: var(--am-bg-1);
  border-right: 1px solid var(--am-line);
}

/* ---- Sidebar-Schritte als Pills --------------------------- */
#amelia-container .am-fs-sb__step {
  border: 1px solid var(--am-line);
  border-radius: var(--am-radius);
  background: var(--am-bg-1);
  margin-bottom: 12px;
  transition: border-color .2s, background .2s;
}
#amelia-container .am-fs-sb__step-heading {
  color: var(--am-text-2);
  font-family: var(--am-sans);
}
/* Nummern-/Icon-Kreis */
#amelia-container .am-fs-sb__step-icon {
  border: 1px solid var(--am-line);
  color: var(--am-text-2);
  background: transparent;
}
/* aktiver / erledigter Schritt (Checker bekommt -selected) */
#amelia-container .am-fs-sb__step:has(.am-fs-sb__step-checker-selected),
#amelia-container .am-fs-sb__step:hover {
  border-color: var(--am-gold);
}
#amelia-container .am-fs-sb__step:has(.am-fs-sb__step-checker-selected) .am-fs-sb__step-heading {
  color: var(--am-text-1);
}
#amelia-container .am-fs-sb__step:has(.am-fs-sb__step-checker-selected) .am-fs-sb__step-icon {
  background: var(--am-gold);
  border-color: var(--am-gold);
  color: #000;
}
/* "Menue zusammenklappen" Pfeil-Button */
#amelia-container .am-fs-sb__menu .am-icon-arrow-circle-right {
  color: var(--am-gold);
}
/* Support-Block (Kontakt) */
#amelia-container .am-fs-sb__support { border-top: 1px solid var(--am-line-soft); }
#amelia-container .am-fs-sb__support-heading { color: var(--am-text-2); }
#amelia-container .am-fs-sb__support-email { color: var(--am-text-1); }

/* ---- Haupt-Titel als Eyebrow/Heading ---------------------- */
#amelia-container .am-fs__main-heading-inner-title {
  font-family: var(--am-sans);
  color: var(--am-text-1);
  letter-spacing: .02em;
}
#amelia-container .am-fs__main-heading {
  border-bottom: 1px solid var(--am-line);
}

/* ---- Formfelder / Dropdowns ------------------------------- */
#amelia-container .el-input__wrapper,
#amelia-container .am-adv-select .el-input__wrapper {
  background: var(--am-bg-1) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: none !important;
}
#amelia-container .el-input__inner { color: var(--am-text-1) !important; }
#amelia-container .el-input__inner::placeholder { color: var(--am-text-2) !important; }
#amelia-container .el-form-item__label,
#amelia-container .am-fs__init-form__label { color: var(--am-text-2); }
#amelia-container .el-input__wrapper.is-focus,
#amelia-container .el-input__wrapper:hover {
  border-color: var(--am-gold) !important;
}

/* Dropdown-Panel (rendert ausserhalb #amelia-container -> global, sparsam) */
.el-cascader__dropdown.am-adv-select__dropdown,
.el-select__popper.am-adv-select__dropdown {
  background: var(--bg-2, #18181B) !important;
  border: 1px solid var(--line, #27272A) !important;
  border-radius: 2px !important;
}
.am-adv-select__dropdown .el-cascader-node:hover,
.am-adv-select__dropdown .el-select-dropdown__item:hover {
  background: var(--bg-1, #09090B) !important;
  color: var(--gold, #F59E0B) !important;
}

/* ---- Buttons ---------------------------------------------- */
#amelia-container .am-button--primary,
#amelia-container .am-button-continue {
  background: var(--am-gold) !important;
  border-color: var(--am-gold) !important;
  color: #000 !important;
  border-radius: var(--am-radius) !important;
  font-family: var(--am-sans);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#amelia-container .am-button--primary:hover,
#amelia-container .am-button-continue:hover {
  background: var(--am-gold-deep) !important;
  border-color: var(--am-gold-deep) !important;
}
/* sekundaere / Default-Buttons (z. B. "Zurueck") */
#amelia-container .am-button--default:not(.am-button--primary) {
  background: var(--am-bg-1) !important;
  border: 1px solid var(--am-line) !important;
  color: var(--am-text-1) !important;
  border-radius: var(--am-radius) !important;
}
#amelia-container .am-fs__main-footer { border-top: 1px solid var(--am-line); }

/* ---- Datum & Uhrzeit: Kalender + Zeit-Slots --------------- */
#amelia-container .am-fs-dt__calendar { background: var(--am-bg-2); }

/* Zeit-Slot-Raster */
#amelia-container .am-advsc__slots-item,
#amelia-container .am-advsc__slots-item__inner {
  border-radius: var(--am-radius) !important;
  font-variant-numeric: tabular-nums;
  font-family: var(--am-sans);
}
#amelia-container .am-advsc__slots-item__inner {
  background: var(--am-bg-1);
  border: 1px solid var(--am-line);
  color: var(--am-text-2);
  transition: border-color .15s, color .15s;
}
#amelia-container .am-advsc__slots-item:hover .am-advsc__slots-item__inner {
  border-color: var(--am-gold);
  color: var(--am-text-1);
}
/* gewaehlter Slot */
#amelia-container .am-advsc__slots-item__selected .am-advsc__slots-item__inner,
#amelia-container .am-advsc__slots-item__selected {
  border-color: var(--am-gold) !important;
  color: var(--am-gold) !important;
  background: var(--am-bg-1) !important;
}
/* belegt / deaktiviert */
#amelia-container .am-advsc__slots-item-disabled .am-advsc__slots-item__inner,
#amelia-container .am-advsc__slots-item-disabled {
  opacity: .35;
  text-decoration: line-through;
}

/* ---- Free-Branding ausblenden ----------------------------- */
#amelia-container .am-lite-footer,
.amelia-v2-booking .am-lite-footer { display: none !important; }

/* ---- Mobil ------------------------------------------------ */
@media (max-width: 860px) {
  #amelia-container .am-fs__wrapper { border-radius: var(--am-radius); }
  #amelia-container .am-fs-sb { border-right: 0; border-bottom: 1px solid var(--am-line); }
}