/* ============================================================
   Easy!Appointments Brand-Theme  (Bombelli Reskin 2026-06-14)
   ------------------------------------------------------------
   HOCHLADEN: per cyon File-Manager oder FTP nach
     public_html/termine/assets/css/
   und damit BEIDE Dateien ueberschreiben:
     - custom.min.css   (DIESE wird von EA tatsaechlich geladen)
     - custom.css       (Lesbarkeit / Sync)
   Danach im Browser hart neu laden (Cmd+Shift+R), bei cyon evtl.
   Cache leeren. Finale Pixel-Politur machen wir gegen das Live-Tool.

   Tokens (neuer Reskin):
     Cream #FAFAF5 / Cream-2 #F4F2EC / Ink-Navy #1A1A2E
     Teal #0D8B7D (Hover #0A766A) / Copper #C4764A / Rule rgba(26,26,46,.10)
     Font: Inter
   ============================================================ */

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

:root{
  --ea-cream:#FAFAF5; --ea-cream2:#F4F2EC; --ea-ink:#1A1A2E;
  --ea-ink72:rgba(26,26,46,.72); --ea-ink45:rgba(26,26,46,.46);
  --ea-teal:#0D8B7D; --ea-teal-d:#0A766A; --ea-copper:#C4764A;
  --ea-rule:rgba(26,26,46,.10);
}

/* ---- Grundflaeche + Typo ---- */
html, body{ background:var(--ea-cream) !important; }
body, #main, #main-content, .backend, .frontend, input, select, textarea, button, .btn{
  font-family:'Inter', system-ui, -apple-system, sans-serif !important;
  color:var(--ea-ink);
}
h1,h2,h3,.page-title{ letter-spacing:-0.02em; color:var(--ea-ink); }

/* ---- EA-Branding + ueberfluessige Schritte aus ---- */
#frame-footer .footer-powered-by, .footer-powered-by,
.company-logo, .ea-branding, .powered-by{ display:none !important; }
#select-service-step, #select-provider-step,
.book-service-step, .book-provider-step,
#book-appointment-wizard > .breadcrumb,
.wizard-frame-breadcrumb, .steps-wizard{ display:none !important; }

/* ---- Container / Cards ---- */
.container, #book-appointment-wizard, .wizard-frame, #main .frame-container,
.appointment-details, .confirmation-frame, .panel, .card{
  background:#fff !important;
  border:1px solid var(--ea-rule) !important;
  border-radius:16px !important;
  box-shadow:0 30px 60px -42px rgba(26,26,46,.22) !important;
}
.panel-heading, .card-header{ background:transparent !important; border-bottom:1px solid var(--ea-rule) !important; font-weight:700; }

/* ---- Buttons ---- */
.btn, button.btn{ border-radius:12px !important; font-weight:600 !important; transition:transform .2s ease, background .2s ease, border-color .2s ease !important; border:1px solid transparent !important; }
.btn-primary, #button-next, #book-it, .button-next, button[type="submit"]{
  background:var(--ea-teal) !important; border-color:var(--ea-teal) !important; color:#fff !important;
}
.btn-primary:hover, #button-next:hover, #book-it:hover, button[type="submit"]:hover{
  background:var(--ea-teal-d) !important; border-color:var(--ea-teal-d) !important; transform:translateY(-1px);
}
.btn-default, .btn-secondary, #button-back, .button-back{
  background:transparent !important; color:var(--ea-ink) !important; border:1px solid var(--ea-rule) !important;
}
.btn-default:hover, .btn-secondary:hover, #button-back:hover{ border-color:var(--ea-ink) !important; }

/* ---- Formularfelder ---- */
input, select, textarea, .form-control{
  background:var(--ea-cream) !important;
  border:1px solid var(--ea-rule) !important;
  border-radius:10px !important;
  color:var(--ea-ink) !important;
  box-shadow:none !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--ea-teal) !important;
  box-shadow:0 0 0 3px rgba(13,139,125,.16) !important;
  outline:none !important;
}
label, .control-label{ color:var(--ea-ink72) !important; font-weight:500; }

/* ---- Flatpickr-Kalender (EA 1.5.2) ---- */
.flatpickr-calendar{ background:#fff !important; border:1px solid var(--ea-rule) !important; border-radius:14px !important; box-shadow:0 24px 54px -40px rgba(26,26,46,.3) !important; }
.flatpickr-months, .flatpickr-month, .flatpickr-current-month{ color:var(--ea-ink) !important; fill:var(--ea-ink) !important; }
.flatpickr-weekday{ color:var(--ea-ink45) !important; font-weight:600; font-size:11px; }
.flatpickr-day{ color:var(--ea-ink72) !important; border-radius:8px !important; border:none !important; }
.flatpickr-day:hover{ background:var(--ea-cream2) !important; }
.flatpickr-day.today{ border:1px solid var(--ea-copper) !important; color:var(--ea-ink) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover{ background:var(--ea-teal) !important; border-color:var(--ea-teal) !important; color:#fff !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:rgba(26,26,46,.22) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg{ fill:var(--ea-teal) !important; }

/* ---- Zeit-Slots ---- */
.available-hour, .available-hours .available-hour, button.available-hour{
  background:#fff !important; border:1px solid var(--ea-rule) !important; border-radius:10px !important;
  color:var(--ea-ink) !important; font-weight:500 !important; transition:all .18s ease !important;
}
.available-hour:hover{ border-color:var(--ea-teal) !important; color:var(--ea-teal) !important; }
.available-hour.selected-hour, .available-hour.selected{
  background:var(--ea-teal) !important; border-color:var(--ea-teal) !important; color:#fff !important;
}
.available-hours{ max-height:240px; overflow-y:auto; }

/* ---- Links + diverses ---- */
a{ color:var(--ea-teal); }
a:hover{ color:var(--ea-teal-d); }
.alert-success{ background:rgba(13,139,125,.10) !important; border:1px solid rgba(13,139,125,.3) !important; color:var(--ea-teal-d) !important; border-radius:12px !important; }
.alert-danger{ background:rgba(196,118,74,.10) !important; border:1px solid rgba(196,118,74,.3) !important; color:var(--ea-copper) !important; border-radius:12px !important; }
hr{ border-color:var(--ea-rule) !important; }

/* ============================================================
   Inline-Embed-Politur (2026-06-16): EA wirkt wie die Deko-Karte
   ============================================================ */
/* Grosses teal Kopfbanner (Logo + Firmenname + Steps) ausblenden,
   die Kontaktseite liefert den Kontext drumherum. */
#header { display: none !important; }
#main, #main-content, .frame-container, .wizard-frame { padding-top: 6px !important; }
/* Wochentage wie die Deko-Mini-Kalender-Labels (Mono, uppercase) */
.flatpickr-weekday { font-family: 'JetBrains Mono', monospace !important; text-transform: uppercase; font-size: 9.5px !important; letter-spacing: .06em; }
/* "Heute" navy gefuellt wie .cal-d.today in der Deko */
.flatpickr-day.today { background: var(--ea-ink) !important; border: 1px solid var(--ea-ink) !important; color: #fff !important; }
.flatpickr-day.today:hover { background: var(--ea-ink) !important; }
.flatpickr-day.today.selected, .flatpickr-day.selected { background: var(--ea-teal) !important; border-color: var(--ea-teal) !important; color: #fff !important; }

/* ============================================================
   Inline-Embed-Politur v2 (2026-06-16): naeher an der Deko-Karte
   Ziel: EINE Karte (der iframe-Rahmen selbst) statt Card-in-Card,
   cremefarbener Kalender wie .cal, Zeit-Slots als kompakte Chips,
   redundanter Schritt-Titel weg. Kontext liefert die Kontaktseite.
   ============================================================ */

/* (a) Doppelkarte aufloesen: der iframe ist der Rahmen, der EA-
   Innenraum wird flach. Hintergrund weiss wie die Deko-.bookcard. */
html, body { background: #fff !important; }
#book-appointment-wizard, .wizard-frame, #main .frame-container, .frame-container,
.container, .panel, .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#main, #main-content { padding-top: 2px !important; }
.frame-container { padding: 4px 20px 10px !important; }

/* (b) Redundanten Schritt-Titel "Datum & Uhrzeit des Termins" weg.
   Spaeteren Schritten (Kundeninfos, Bestaetigung) ihren Titel lassen. */
#wizard-frame-2 .frame-title { display: none !important; }

/* (c) Inline-Kalender wie die Deko-Mini-Cal (.cal): cremefarbene
   gerahmte Flaeche, zentriert. */
.flatpickr-calendar.inline {
  width: 100% !important; max-width: 360px !important; margin: 0 auto !important;
  background: var(--ea-cream) !important; border: 1px solid var(--ea-rule) !important;
  border-radius: 14px !important; padding: 14px 14px 10px !important;
  box-shadow: none !important;
}
.flatpickr-calendar.inline .flatpickr-rContainer,
.flatpickr-calendar.inline .flatpickr-days,
.flatpickr-calendar.inline .dayContainer {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
}
.flatpickr-days, .flatpickr-weekdays { background: transparent !important; border: none !important; }
.flatpickr-months, .flatpickr-month, .flatpickr-current-month { background: transparent !important; }
.flatpickr-current-month, .flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 13px !important; font-weight: 600 !important;
}
.flatpickr-day { height: 34px !important; line-height: 34px !important; max-width: none !important; }

/* (d) Abstand zwischen Kalender-Spalte und Zeit-Spalte */
.frame-content > [class*="col-"] { margin-bottom: 12px; }

/* (e) Zeitzone subtil halten (kleines Mono-Label wie Deko-Wochentage) */
#wizard-frame-2 label.form-label {
  font-family: 'JetBrains Mono', monospace !important; text-transform: uppercase;
  font-size: 9.5px !important; letter-spacing: .06em; color: var(--ea-ink45) !important;
}
#select-timezone { font-size: 13px !important; padding: 7px 10px !important; }

/* (f) Zeit-Slots als kompaktes Chip-Raster statt langer Voll-Breite-Liste */
#available-hours {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
  gap: 8px !important; margin-top: 4px !important; max-height: none !important;
}
#available-hours .available-hour {
  width: auto !important; min-width: 0 !important; margin: 0 !important;
  padding: 9px 6px !important; font-size: 13px !important; border-radius: 10px !important;
}

/* (g) Navigations-Buttons */
.button-next { min-width: 138px; }

/* ---- v2.1 Feinschliff (2026-06-16): letzte Deko-Abweichungen ---- */
/* Wochentags-Zeile sauber cremefarben (EA-Default faerbte die Zellen teal) */
.flatpickr-weekday { background: transparent !important; }
.flatpickr-innerContainer, .flatpickr-rContainer { background: transparent !important; border: none !important; }
.flatpickr-days { border: none !important; }
/* Monat + Jahr als schlichter Text wie in der Deko (kein Eingabe-Kasten) */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 2px !important;
}
.flatpickr-current-month input.cur-year:focus { box-shadow: none !important; outline: none !important; }
/* Monats-Pfeile dezent dunkel statt fast unsichtbar */
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--ea-ink72) !important; }
.flatpickr-prev-month.flatpickr-disabled svg { fill: rgba(26,26,46,.18) !important; }
/* Sprach-Umschalter "German"-Badge unten ausblenden (Deko hat keinen) */
#select-language { display: none !important; }
/* Weniger Leerraum unter dem Kalender */
.flatpickr-calendar.inline { padding-bottom: 6px !important; }

/* ============================================================
   v3 "elite" (2026-06-16): shadcn-Anmutung — mehr Luft, weichere
   Radien, sanfte Hover-/Selected-States mit feinem Schatten,
   Premium-Pill-Button. Aufbauend auf der Deko-Karte.
   ============================================================ */
/* Kalender-Karte: mehr Luft, weicher Radius */
.flatpickr-calendar.inline {
  max-width: 372px !important; margin: 0 auto !important;
  padding: 20px 20px 14px !important; border-radius: 18px !important;
}
.flatpickr-months { margin-bottom: 6px !important; }
/* Monat/Jahr: ruhige, etwas grössere Hierarchie */
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
}
/* Wochentage: ruhiger, mehr Tracking */
.flatpickr-weekdays { margin-bottom: 4px !important; }
.flatpickr-weekday { font-size: 9px !important; letter-spacing: .12em !important; color: rgba(26,26,46,.40) !important; }
/* Tageszellen: grösser, weicher, sanfte States */
.flatpickr-day {
  height: 36px !important; line-height: 36px !important; border-radius: 10px !important;
  font-size: 12.5px !important;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}
.flatpickr-day:hover {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ea-rule), 0 1px 0 rgba(26,26,46,.05) !important;
}
.flatpickr-day.today:not(.selected) {
  background: transparent !important; color: var(--ea-ink) !important; border: none !important;
  box-shadow: inset 0 0 0 1.5px var(--ea-ink) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--ea-teal) !important; border-color: var(--ea-teal) !important; color: #fff !important;
  box-shadow: 0 7px 18px -7px rgba(13,139,125,.55) !important;
}
/* Mehr Abstand zwischen Kalender- und Zeit-Spalte */
.frame-content > [class*="col-"] { margin-bottom: 16px !important; }
/* Zeitzone: subtil, weicher Radius */
#wizard-frame-2 label.form-label { margin-bottom: 5px !important; opacity: .8; }
#select-timezone { border-radius: 12px !important; padding: 9px 12px !important; font-size: 13px !important; }
/* Zeit-Chips: shadcn-Anmutung mit sanftem Lift */
#available-hours { gap: 9px !important; }
#available-hours .available-hour {
  padding: 11px 6px !important; border-radius: 12px !important; font-size: 13px !important;
  background: #fff !important; border: 1px solid var(--ea-rule) !important; font-weight: 500 !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}
#available-hours .available-hour:hover {
  border-color: var(--ea-teal) !important; color: var(--ea-teal) !important;
  transform: translateY(-1px); box-shadow: 0 7px 16px -10px rgba(13,139,125,.5) !important;
}
#available-hours .available-hour.selected-hour,
#available-hours .available-hour.selected {
  background: var(--ea-teal) !important; border-color: var(--ea-teal) !important; color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(13,139,125,.55) !important; transform: none;
}
/* WEITER: premium Pill mit sanftem Schatten; Zurueck dezent */
.button-next {
  border-radius: 999px !important; padding: 11px 26px !important; min-width: 150px;
  letter-spacing: .01em; box-shadow: 0 10px 24px -12px rgba(13,139,125,.6) !important;
}
.button-next:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(13,139,125,.7) !important; }
.button-back { border-radius: 999px !important; padding: 11px 20px !important; }
/* Schritt-2-"Zurueck" fuehrt nur zur (versteckten) Dienstleistungs-Wahl -> ausblenden */
#button-back-2 { display: none !important; }