/* =====================================================================
   GRUSENMEYER — Amelia merk-laag
   Volledig in CSS, los van Amelia → Customize (update-vast). Vervangt
   Amelia's standaardblauw (#1788FB) door de camel-tint, verfijnt
   typografie en hoeken, en laat het widget natuurlijk meegroeien.

   Scope: alle Amelia front-end containers (booking én catalog). We zetten
   het lettertype NIET op `*`, want Amelia gebruikt een icoonfont voor
   pijltjes/kalender-iconen — daarom alleen de container en echte tekst-/
   formulier-elementen.

   Amelia's front-end draait op Element UI (Vue): accenten zitten op
   `el-*`/`am-*` klassen. Per-dienst staat de DB-kleur inline op kleine
   swatches; die forceren we hieronder ook naar camel.
   ===================================================================== */

/* ---------- Merkkleuren ---------- */
[class*="amelia-app"] {
  --gr-am: var(--camel, #9a7b51);
  --gr-am-deep: var(--camel-deep, #7c6240);
  --gr-am-tint: rgba(154, 123, 81, 0.12);
}

/* Primaire knoppen (Element UI + Amelia generiek) */
[class*="amelia-app"] .el-button--primary,
[class*="amelia-app"] button[class*="primary"],
[class*="amelia-app"] [class*="am-button"]:not([class*="ghost"]):not([class*="link"]):not([class*="text"]) {
  background-color: var(--gr-am) !important;
  border-color: var(--gr-am) !important;
  color: #fff !important;
}
[class*="amelia-app"] .el-button--primary:hover,
[class*="amelia-app"] .el-button--primary:focus,
[class*="amelia-app"] button[class*="primary"]:hover,
[class*="amelia-app"] button[class*="primary"]:focus {
  background-color: var(--gr-am-deep) !important;
  border-color: var(--gr-am-deep) !important;
}

/* Tekst-/link-accenten en prijzen die het primair gebruiken */
[class*="amelia-app"] a:not(.el-button):not([class*="button"]),
[class*="amelia-app"] [class*="am-link"],
[class*="amelia-app"] [class*="price"],
[class*="amelia-app"] [class*="-color-primary"] {
  color: var(--gr-am) !important;
}

/* Stappen-indicator (Element steps) */
[class*="amelia-app"] .el-step__head.is-process,
[class*="amelia-app"] .el-step__title.is-process { color: var(--gr-am) !important; border-color: var(--gr-am) !important; }
[class*="amelia-app"] .el-step__head.is-finish,
[class*="amelia-app"] .el-step__title.is-finish { color: var(--gr-am-deep) !important; border-color: var(--gr-am-deep) !important; }

/* Selectiestaten: radio, checkbox, switch */
[class*="amelia-app"] .el-radio-button__orig-radio:checked + .el-radio-button__inner,
[class*="amelia-app"] .el-radio.is-checked .el-radio__inner,
[class*="amelia-app"] .el-checkbox.is-checked .el-checkbox__inner,
[class*="amelia-app"] .el-switch.is-checked .el-switch__core {
  background-color: var(--gr-am) !important;
  border-color: var(--gr-am) !important;
  box-shadow: -1px 0 0 0 var(--gr-am) !important;
}
[class*="amelia-app"] .el-radio.is-checked .el-radio__label,
[class*="amelia-app"] .el-checkbox.is-checked .el-checkbox__label { color: var(--gr-am) !important; }

/* Datumkiezer: vandaag + geselecteerde dag */
[class*="amelia-app"] .el-date-table td.today span { color: var(--gr-am) !important; }
[class*="amelia-app"] .el-date-table td.current:not(.disabled) span,
[class*="amelia-app"] .el-date-table td.available.current span {
  background-color: var(--gr-am) !important;
  color: #fff !important;
}

/* Geselecteerd tijdslot / actieve keuze in de boekingsflow */
[class*="amelia-app"] [class*="slot"][class*="selected"],
[class*="amelia-app"] [class*="time"][class*="selected"],
[class*="amelia-app"] [class*="-selected"]:not(a) {
  background-color: var(--gr-am) !important;
  border-color: var(--gr-am) !important;
  color: #fff !important;
}

/* Loader/spinner */
[class*="amelia-app"] [class*="loader"],
[class*="amelia-app"] .el-loading-spinner .path { stroke: var(--gr-am) !important; border-top-color: var(--gr-am) !important; }

/* Per-dienst DB-kleurswatch (inline #1788FB → camel) op catalogus-cards */
[class*="amelia-app"] [class*="category-color"],
[class*="amelia-app"] [class*="service-color"],
[class*="amelia-app"] [class*="color-line"],
[class*="amelia-app"] [class*="-badge"] {
  background-color: var(--gr-am) !important;
}

/* ---------- Typografie ---------- */
[class*="amelia-app"] {
  font-family: var(--font-sans);
  color: var(--ink);
  background: transparent;
}

[class*="amelia-app"] button,
[class*="amelia-app"] input,
[class*="amelia-app"] textarea,
[class*="amelia-app"] select,
[class*="amelia-app"] label,
[class*="amelia-app"] p,
[class*="amelia-app"] a {
  font-family: var(--font-sans) !important;
}

/* Koppen, dienst- en categorietitels in de editorial serif */
[class*="amelia-app"] h1,
[class*="amelia-app"] h2,
[class*="amelia-app"] h3,
[class*="amelia-app"] h4 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* ---------- Vorm ---------- */
/* Strakke 2px-hoeken i.p.v. Amelia's afgeronde knoppen, velden en cards */
[class*="amelia-app"] button,
[class*="amelia-app"] input,
[class*="amelia-app"] textarea,
[class*="amelia-app"] select {
  border-radius: var(--radius) !important;
}

/* ---------- Natuurlijke hoogte i.p.v. interne scroll ----------
   Amelia geeft het widget een vaste binnenhoogte met een eigen scrollbar,
   waardoor de catalogus in een klein kader zit. We laten de inhoud-zones
   meegroeien zodat de pagina zelf scrollt. Gescoped tot de afspraakpagina
   (.booking-amelia) om andere weergaven niet te raken. */
.booking-amelia [class*="amelia-app"],
.booking-amelia [class*="amelia-app"] [class*="catalog"],
.booking-amelia [class*="amelia-app"] [class*="-body"],
.booking-amelia [class*="amelia-app"] [class*="-list"],
.booking-amelia [class*="amelia-app"] [class*="-content"],
.booking-amelia [class*="amelia-app"] [class*="-wrapper"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}