/* ---------------------------------------------------------------------------
 * kunemann — Easy!Appointments Theme im Design von koen.work
 *
 * Liegt als Bind-Mount in assets/css/themes/, wird also von einem Image-Update
 * nicht überschrieben. Aktiv über das Setting theme = "kunemann".
 *
 * Reihenfolge beachten: das Layout lädt general.css und frontend.css NACH dem
 * Theme. Wo die beiden dieselbe Eigenschaft setzen, kommt man nur mit höherer
 * Spezifität oder !important dagegen an — deshalb steht es an einigen Stellen.
 * ------------------------------------------------------------------------- */

@import url("darkly.css");

@font-face {
  font-family: "Nunito";
  src: url("nunito.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --kw-lime: #aaff00;
  --kw-lime-dim: #8cdc1e;
  --kw-bg: rgb(6, 9, 12);
  --kw-card: rgba(0, 0, 0, 0.4);
  --kw-border: rgba(255, 255, 255, 0.08);
  --kw-text: rgba(255, 255, 255, 0.92);
  --kw-muted: rgba(255, 255, 255, 0.55);
  --bs-primary: #aaff00;
  --bs-link-color: #aaff00;
  --bs-link-hover-color: #8cdc1e;
}

/* --- Hintergrund: derselbe Verlauf wie auf koen.work ---------------------- */

body {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--kw-text) !important;
  background:
    linear-gradient(135deg,
      rgba(4, 7, 10, 0.98) 0%, rgba(5, 9, 14, 0.98) 25%,
      rgba(4, 8, 12, 0.98) 50%, rgba(6, 11, 15, 0.98) 75%,
      rgba(4, 7, 10, 0.98) 100%),
    radial-gradient(ellipse 80% 60% at 0% 0%,
      rgba(65, 100, 145, 0.22) 0%, rgba(45, 70, 105, 0.1) 40%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 0%,
      rgba(55, 85, 125, 0.2) 0%, rgba(38, 58, 88, 0.08) 45%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 50%,
      rgba(90, 130, 180, 0.12) 0%, rgba(70, 105, 155, 0.05) 50%, transparent 75%),
    var(--kw-bg) !important;
  background-attachment: fixed !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* --- Die Karte: Glas-Optik wie die CTA-Kachel auf koen.work --------------- */

.wizard-frame,
.col-12.bg-body {
  background: var(--kw-card) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid var(--kw-border) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 40px rgba(140, 220, 30, 0.1),
    0 0 80px rgba(170, 255, 0, 0.06),
    0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

/* Kopfbereich mit Firmenname — Bootstraps bg-primary wäre sonst knallgrün */
.bg-primary {
  background: transparent !important;
  border-bottom: 1px solid var(--kw-border);
}

.frame-title {
  color: var(--kw-muted) !important;
  font-weight: 300;
}

/* --- Schritt-Anzeige ------------------------------------------------------
 * ACHTUNG Spezifität: frontend.css lädt NACH diesem Theme und adressiert die
 * Schritte über die ID #book-appointment-wizard. Eine ID schlägt jede
 * Klassenkombination, auch mit !important — deshalb steht die ID hier ebenfalls
 * davor. Ohne sie blieb der aktive Schritt weiß (var(--bs-white)).
 * ------------------------------------------------------------------------- */

#book-appointment-wizard .book-step {
  border-radius: 9999px !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Klasse doppelt geschrieben, das erhöht die Spezifität um eine Stufe:
 *   frontend.css  #book-appointment-wizard .book-step.active-step        (1,2,0)
 *   hier          … .book-step.active-step.active-step                   (1,3,0)
 * Bei Gleichstand hätte sonst frontend.css gewonnen (lädt später). */
#book-appointment-wizard .book-step.active-step.active-step {
  background: var(--kw-lime) !important;
  border: none !important;
  box-shadow: 0 0 24px rgba(170, 255, 0, 0.25) !important;
}

#book-appointment-wizard .book-step.active-step.active-step strong {
  color: #000 !important;
  font-weight: 700 !important;
}

#book-appointment-wizard .book-step:not(.active-step):not(.active-step) {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--kw-border) !important;
}

#book-appointment-wizard .book-step:not(.active-step):not(.active-step) strong {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* --- Buttons: Pillen wie im Hero von koen.work ---------------------------- */

.btn {
  border-radius: 9999px !important;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary,
.btn-dark,
.button-next {
  background: var(--kw-lime) !important;
  border-color: transparent !important;
  color: #000 !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-dark:hover,
.button-next:hover {
  background: var(--kw-lime-dim) !important;
  color: #000 !important;
}

.btn-outline-secondary,
.button-back {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--kw-border) !important;
  color: var(--kw-text) !important;
  backdrop-filter: blur(4px);
}

.btn-outline-secondary:hover,
.button-back:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* --- Formularfelder ------------------------------------------------------- */

.form-control,
.form-select {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--kw-border) !important;
  color: var(--kw-text) !important;
  border-radius: 12px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--kw-lime) !important;
  box-shadow: 0 0 0 3px rgba(170, 255, 0, 0.15) !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.form-control::placeholder { color: rgba(255, 255, 255, 0.3) !important; }
.form-check-input:checked {
  background-color: var(--kw-lime) !important;
  border-color: var(--kw-lime) !important;
}

/* Autofill: Safari/Chrome übermalen ausgefüllte Felder mit hellem Gelb, das
 * lässt sich nicht per background-color überschreiben. Der Trick ist ein
 * riesiger inset-Schatten, der die Füllung verdeckt, plus text-fill-color. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--kw-text) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset !important;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset !important;
  caret-color: var(--kw-text) !important;
  /* verzögert das Zurückspringen auf die Autofill-Farbe praktisch auf "nie" */
  transition: background-color 9999s ease-out 0s !important;
}

/* --- Zeitslots ------------------------------------------------------------ */

#book-appointment-wizard .available-hour {
  border-radius: 9999px !important;
  border: 1px solid var(--kw-border) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: var(--kw-text) !important;
}

#book-appointment-wizard .available-hour:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* frontend.css setzt hier color:var(--bs-white) — weiß auf Lime ist kaum lesbar.
 *
 * Spezifität genau nachrechnen: frontend nutzt
 *   #book-appointment-wizard #available-hours .selected-hour   -> (2,1,0)
 * Derselbe Selektor hier wäre Gleichstand, und bei Gleichstand gewinnt die
 * SPÄTER geladene Datei — also frontend. Deshalb eine Klasse mehr: (2,2,0). */
#book-appointment-wizard #available-hours .available-hour.selected-hour,
#book-appointment-wizard #available-hours .selected-hour.selected-hour {
  background-color: var(--kw-lime) !important;
  border-color: transparent !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* --- Kalender (flatpickr) -------------------------------------------------
 * Alle Container explizit, nicht nur .flatpickr-calendar: irgendeine innere
 * Ebene brachte sonst eine weiße Fläche mit, auf der die Tageszahlen
 * unsichtbar wurden. Lieber einmal vollständig als dreimal nachbessern.
 * ------------------------------------------------------------------------- */

.flatpickr-calendar,
.flatpickr-calendar.inline,
#book-appointment-wizard .flatpickr-calendar,
#book-appointment-wizard .flatpickr-calendar.inline {
  background: rgba(10, 14, 18, 0.98) !important;
  border: 1px solid var(--kw-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer,
.flatpickr-weeks,
.flatpickr-weekdaycontainer,
#book-appointment-wizard .flatpickr-innerContainer,
#book-appointment-wizard .flatpickr-rContainer,
#book-appointment-wizard .flatpickr-days,
#book-appointment-wizard .dayContainer {
  background: transparent !important;
  border: none !important;
}

/* Kopfzeile mit Monat/Jahr — material_green färbt sie türkis (#1bbc9b) */
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months,
#book-appointment-wizard .flatpickr-months .flatpickr-month,
#book-appointment-wizard .flatpickr-weekdays {
  background: transparent !important;
  color: var(--kw-text) !important;
  fill: var(--kw-text) !important;
}

span.flatpickr-weekday {
  color: var(--kw-muted) !important;
  font-weight: 600 !important;
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .cur-month {
  color: var(--kw-text) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--kw-text) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--kw-lime) !important;
}

.flatpickr-day,
#book-appointment-wizard .flatpickr-day {
  color: var(--kw-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 10px !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus,
#book-appointment-wizard .flatpickr-day:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
#book-appointment-wizard .flatpickr-day.selected {
  background: var(--kw-lime) !important;
  border-color: var(--kw-lime) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

.flatpickr-day.today:not(.selected) {
  border: 1px solid var(--kw-lime) !important;
  color: var(--kw-lime) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
#book-appointment-wizard .flatpickr-day.flatpickr-disabled {
  color: rgba(255, 255, 255, 0.18) !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* --- Feinschliff: Abstände und Typografie --------------------------------- */

/* Schritt-Reihe zentrieren statt links schwimmen zu lassen */
#book-appointment-wizard .d-flex.fs-6 {
  justify-content: center !important;
  gap: 0.5rem;
}

#book-appointment-wizard .book-step { float: none !important; }

/* Grosszuegigere Innenabstaende — Bootstrap ist hier enger als der Entwurf */
.wizard-frame { padding: 1.75rem 1.5rem !important; }

@media (min-width: 768px) {
  .wizard-frame { padding: 2.5rem 2.75rem !important; }
}

.frame-title {
  font-size: 1.35rem !important;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem !important;
}

/* Kopfbereich: Firmenname bekommt Gewicht, Untertitel bleibt zurückhaltend */
.bg-primary .fs-4 { font-weight: 800 !important; letter-spacing: -0.01em; }

/* --- Bestätigungsseite ----------------------------------------------------
 * booking_confirmation.php nutzt Bootstraps Success-Grün für Icon, Kreis und
 * Überschrift. Auf Lime umziehen, sonst stehen zwei verschiedene Grüns nebeneinander.
 * ------------------------------------------------------------------------- */

.text-success,
.fas.fa-calendar-check.text-success,
h1.text-success, h2.text-success, h3.text-success, h4.text-success {
  color: var(--kw-lime) !important;
}

.bg-success { background-color: var(--kw-lime) !important; }

.bg-success.bg-opacity-10 {
  background-color: rgba(170, 255, 0, 0.1) !important;
  box-shadow: 0 0 40px rgba(170, 255, 0, 0.12);
}

/* "Zum Google-Kalender hinzufügen" — Bootstrap-Blau passt hier nicht */
.btn-outline-primary {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--kw-border) !important;
  color: var(--kw-text) !important;
}

.btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--kw-lime) !important;
  color: #fff !important;
}

/* --- "Powered by Easy!Appointments" ---------------------------------------
 * GPLv3 ohne zusätzliche Attributions-Klausel (§7b) seitens Upstream — auf der
 * eigenen Instanz ausblendbar. Copyright-Hinweise im Quellcode bleiben unberührt,
 * wir patchen keine Dateien, sondern blenden nur das UI-Element aus.
 * ------------------------------------------------------------------------- */

.footer-powered-by { display: none !important; }

/* Sprachumschalter ausblenden: die Seite ist einsprachig englisch, und ein
 * versehentlicher Klick speichert die Sprache in der Session — genau so blieb
 * die Oberfläche hier auf Deutsch stehen, obwohl default_language=english ist. */
#select-language { display: none !important; }

/* --- Kleinkram ------------------------------------------------------------ */

a { color: var(--kw-lime); }
a:hover { color: var(--kw-lime-dim); }

.text-muted { color: var(--kw-muted) !important; }

.border-top { border-color: var(--kw-border) !important; }

/* Fussleiste "Powered by" dezenter */
.p-3.text-center.border-top { color: rgba(255, 255, 255, 0.25); }
.p-3.text-center.border-top a { color: rgba(255, 255, 255, 0.4); }