/* =========================================================
   Bijou Beauté – Custom-Styling der oeffentlichen Buchungsseite  (v2)
   Als LETZTES Stylesheet eingebunden (booking_layout.php).
   Mitgelieferte EA-CSS-Dateien werden NICHT editiert.
   ========================================================= */

/* ---------- FEHLER 3: Seitenhintergrund ausserhalb des Assistenten ----------
   Theme setzt body{background-color:var(--bs-body-bg)} (#fff) und der Inline-
   company_color_style zusaetzlich ein Gradient-background-image auf body.
   Deshalb html+body explizit inkl. background-image:none. */
html{ background:#f6f1ea !important; }
body{
    background-color:#f6f1ea !important;
    background-image:none !important;
    color:#2c2119;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Gestapeltes Layout statt vertikaler Zentrierung */
#main.container{ max-width:100% !important; width:100%; padding:0 !important; min-height:auto !important; background:transparent !important; }
.row.wrapper{ margin:0 !important; min-height:auto !important; align-items:flex-start !important; --bs-gutter-x:0; }

/* ---------- Kopfbereich (unveraendert zu v1) ---------- */
#brand-header{ background:transparent; text-align:center; padding:22px 16px 18px; }
#brand-header .bh-title-row{ display:flex; align-items:center; justify-content:center; gap:14px; }
#brand-header .bh-rule{ display:inline-block; width:34px; height:1px; background:#a87f63; }
#brand-header .bh-title{ font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size:25px; letter-spacing:5px; color:#a87f63; }
#brand-header .bh-sub{ font-size:11px; letter-spacing:6px; color:#97846f; margin-top:6px; }
#brand-header .bh-quote{ font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style:italic; font-size:14px; color:#97846f; margin-top:14px; }

/* ---------- Fusszeile (unveraendert zu v1) ---------- */
#brand-footer{ background:transparent; padding:18px 16px; }
#brand-footer .bf-inner{ display:flex; justify-content:center; max-width:720px; margin:0 auto; }
#brand-footer .bf-col{ flex:1 1 0; text-align:center; padding:0 12px; }
#brand-footer .bf-h{ font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#97846f; margin-bottom:8px; }
#brand-footer .bf-c{ font-size:12px; color:#5c4c3f; line-height:1.6; }

/* ---------- FEHLER 2: Assistent als Band ueber volle Breite ---------- */
#book-appointment-wizard{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;              /* col-Klassen aufheben */
    border:none;
    border-top:1px solid rgba(44,33,25,.14) !important;
    border-bottom:1px solid rgba(44,33,25,.14) !important;
    border-radius:0 !important;
    background:#f1eae0 !important;         /* ersetzt bg-body */
    padding:30px 30px 36px !important;     /* ersetzt p-0 */
    box-shadow:none !important;
}
#book-appointment-wizard .wizard-frame{ padding:0 !important; }

/* ---------- Kopfbalken des Assistenten neutralisieren ---------- */
#book-appointment-wizard #header{
    background:transparent !important;     /* ersetzt bg-primary */
    padding:0 !important;
    display:block !important;
    margin:0 0 8px;
}
#book-appointment-wizard #company-name{ display:none !important; }

/* ---------- FEHLER 1: Schrittanzeige als Flex-Zeile ----------
   Bloecke flex:1 (min-width:fit-content schuetzt die Beschriftung),
   Verbindungslinien als eigene Flex-Elemente auf Kreismitte (13px). */
#book-appointment-wizard #steps{
    float:none !important;
    display:flex !important;
    align-items:flex-start;
    width:100% !important;                 /* ersetzt inline width:200px */
    max-width:480px;                       /* volle Breite des Formularbereichs */
    margin:0 auto 28px !important;         /* 28px Abstand zur Ueberschrift */
}
#book-appointment-wizard #steps .book-step{
    flex:1 1 0;
    min-width:fit-content;                 /* Beschriftung nie abgeschnitten */
    width:auto !important;                 /* ersetzt inline 45/35px */
    height:auto !important;
    padding:0 4px !important;              /* ersetzt inline padding */
    margin:0 !important;                   /* ersetzt inline margin */
    background:transparent !important;     /* ersetzt inline rgba / bg-white */
    float:none !important;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:7px;
}
#book-appointment-wizard #steps .book-step > strong{                /* Kreis 26px */
    width:32px !important; height:32px !important;   /* EA setzt 35/45px mit !important */
    border:1px solid rgba(44,33,25,.14);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px !important;             /* ersetzt inline 21/12px */
    font-weight:400;
    color:#97846f !important;
    background:transparent;
    margin:0;
}
#book-appointment-wizard #steps .book-step.active-step > strong{
    background:#a87f63 !important;
    border-color:#a87f63;
    color:#ffffff !important;
}
#book-appointment-wizard #steps .book-step .book-step-label{
    font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
    color:#97846f; white-space:nowrap; line-height:1;
}
#book-appointment-wizard #steps .book-step.active-step .book-step-label{ color:#a87f63; }
#book-appointment-wizard #steps .step-connector{
    flex:1 1 24px;
    height:1px;
    background:rgba(44,33,25,.14);
    margin-top:16px;                       /* Hoehe der Kreismitte (32px/2) */
}

/* ---------- Schritt-Ueberschriften ---------- */
#book-appointment-wizard .frame-title{
    font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size:32px !important;
    font-weight:400 !important;
    color:#2c2119 !important;
    text-align:center;
    margin-top:0 !important;               /* mt-md-5 neutralisieren */
    margin-bottom:6px !important;
}

/* ---------- FEHLER 4: Mindesthoehe raus + Formular 420px ---------- */
#book-appointment-wizard .frame-container{
    min-height:0 !important;               /* ersetzt inline min-height:500px */
    max-width:480px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ---------- Labels ---------- */
#book-appointment-wizard .form-label,
#book-appointment-wizard label.fs-5{
    font-size:12px !important;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#5c4c3f !important;
    font-weight:400;
}

/* ---------- Eingabefelder ---------- */
#book-appointment-wizard .form-control,
#book-appointment-wizard .form-select{
    border:1px solid rgba(168,127,99,.45) !important;
    background-color:#ffffff !important;
    border-radius:0 !important;
    padding:16px 18px !important;
    font-size:17px !important;
    min-height:52px;
    box-shadow:none !important;
    color:#2c2119;
}

/* ---------- FEHLER 5: Buttons zentriert ---------- */
#book-appointment-wizard .command-buttons{
    display:flex !important;
    justify-content:center !important;
    gap:14px;
    flex-wrap:wrap;
    margin-top:26px !important;
}
#book-appointment-wizard .button-next,
#book-appointment-wizard #book-appointment-submit{
    background-color:#a87f63 !important;
    background-image:none !important;
    border:1px solid #a87f63 !important;
    color:#ffffff !important;
    padding:16px 48px !important;
    font-size:14px !important;
    letter-spacing:3px;
    text-transform:uppercase;
    border-radius:0 !important;
    box-shadow:none !important;
    float:none !important;
}
#book-appointment-wizard .button-back{
    background-color:transparent !important;
    background-image:none !important;
    border:1px solid rgba(168,127,99,.45) !important;
    color:#97846f !important;
    padding:16px 32px !important;
    font-size:14px !important;
    letter-spacing:3px;
    text-transform:uppercase;
    border-radius:0 !important;
    box-shadow:none !important;
    float:none !important;
}

/* Button-Zeile: Spacer-Span ausblenden, Inline-margin-right:10px neutralisieren */
#book-appointment-wizard .command-buttons > span{ display:none !important; }
#book-appointment-wizard .command-buttons .btn{ margin:0 !important; }

/* ---------- EA-Fusszeile des Assistenten ausblenden ---------- */
#frame-footer{ display:none !important; }

/* ---------- keine harten Schatten ---------- */
#book-appointment-wizard .shadow,
#book-appointment-wizard .shadow-sm{ box-shadow:none !important; }

/* ---------- Mobil ---------- */
@media (max-width:575px){
    #brand-footer .bf-inner{ flex-direction:column; gap:20px; }
    #book-appointment-wizard{ padding:26px 18px 30px !important; }
}


/* =========================================================
   v4 – Schritt 2, Stunden-Raster, Fullscreen-Layout, Feinschliff
   ========================================================= */

/* ---------- FEHLER 3: Fusszeile immer am unteren Rand ---------- */
body{
    display:flex !important;
    flex-direction:column !important;
    min-height:100vh !important;
}
#main.container{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
}
.row.wrapper{
    flex:1 1 auto !important;
    width:100%;
    align-items:stretch !important;        /* Band fuellt die Resthoehe */
}
#book-appointment-wizard{ margin-top:0 !important; margin-bottom:0 !important; }

/* ---------- FEHLER 1: Schritt 2 – breitere Spalte, Kalender + Zeiten nebeneinander ---------- */
#wizard-frame-2 .frame-container{ max-width:760px !important; }
#wizard-frame-2 .frame-content{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:40px !important;
    justify-content:center;
    margin:0 !important;
}
#wizard-frame-2 .frame-content > [class*="col-"]{
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    padding:0 !important;
}
#wizard-frame-2 .frame-content > [class*="col-"]:last-child{
    flex:1 1 auto !important;
    min-width:0;
}
/* Kalender: dauerhaft eingebettet (flatpickr inline), nichts ueberlagern */
#select-date{ margin:0 !important; }
#wizard-frame-2 .flatpickr-wrapper{ display:block; margin:0 auto; width:fit-content; }
#wizard-frame-2 .flatpickr-calendar{
    position:relative !important;         /* inline-Modus, ueberlagert nichts */
    top:auto !important; left:auto !important;
    box-shadow:none !important;
    border:1px solid rgba(44,33,25,.14) !important;
    border-radius:0 !important;
    margin:0 auto;
}
#select-time{ max-width:none !important; margin:0 !important; padding:0 !important; }

@media (max-width:699px){
    #wizard-frame-2 .frame-content{
        flex-direction:column !important;   /* Kalender oben (DOM-Reihenfolge) */
        gap:24px !important;
        align-items:center;
    }
    #wizard-frame-2 .frame-content > [class*="col-"]:last-child{ width:100% !important; }
}

/* ---------- FEHLER 2: Uhrzeiten als Raster ---------- */
#available-hours{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:10px !important;
    max-height:none !important;            /* ersetzt inline max-height:250px */
    overflow:visible !important;           /* kein eigener Scrollbalken */
    padding:0 !important;
    margin:16px 0 0 !important;
}
#book-appointment-wizard #available-hours .available-hour{
    border:1px solid rgba(168,127,99,.45) !important;
    background:#ffffff !important;
    color:#2c2119 !important;
    padding:14px 10px !important;
    font-size:16px !important;
    text-align:center !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin:0 !important;
    width:auto !important;
    line-height:1.2;
}
#book-appointment-wizard #available-hours .available-hour:hover{ border-color:#a87f63 !important; }
#book-appointment-wizard #available-hours .available-hour.selected-hour{
    background:#a87f63 !important;
    color:#ffffff !important;
    border-color:#a87f63 !important;
}
#available-hours #select-hour-prompt,
#available-hours .text-danger{ grid-column:1 / -1; }
@media (max-width:480px){
    #available-hours{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- FEINSCHLIFF: Untertitel + Feldabstaende ---------- */
#book-appointment-wizard .frame-subtitle{
    font-family:'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size:15px;
    color:#97846f;
    margin:0 0 22px;
}
#book-appointment-wizard .frame-content .mb-3{ margin-bottom:18px !important; }

/* ---------- FEINSCHLIFF: Dauer/Preis-Zeile ---------- */
#service-description{
    font-size:14px !important;
    color:#97846f !important;
    max-height:none !important;
    overflow:visible !important;
}
#service-description .fst-italic{
    font-style:normal !important;          /* kein Kursiv */
    margin:6px 0 0 !important;
}
/* Leistungs-Select: Riesenabstand mb-4 reduzieren, Beschreibung rueckt "direkt unter das Feld" */
#book-appointment-wizard .form-select.mb-4{ margin-bottom:8px !important; }


/* =========================================================
   v6 – Schritt-4-Raster, Kalenderkopf
   ========================================================= */

/* ---------- P3: Schritt 4 – Zusammenfassung als 2-Spalten-Raster ---------- */
#wizard-frame-4 .frame-content:has(> #appointment-details){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);   /* lange Namen brechen um */
    gap:40px !important;
    max-width:none !important;
}
#appointment-details, #customer-details{
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
    overflow-wrap:break-word;
    font-size:15px !important;         /* fs-5 (20px) ist zu wuchtig fuers Raster */
    line-height:1.7 !important;
}
@media (max-width:699px){
    #wizard-frame-4 .frame-content:has(> #appointment-details){
        grid-template-columns:1fr;
        gap:24px !important;
    }
    #customer-details{ text-align:left !important; }
    #appointment-details{ text-align:left !important; }
}

/* ---------- P4: Kalenderkopf – Monat + Jahr mittig gruppiert ---------- */
#wizard-frame-2 .flatpickr-current-month{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    left:0 !important;
    padding:5px 0 0 !important;
}
#wizard-frame-2 .flatpickr-current-month .flatpickr-monthDropdown-months,
#wizard-frame-2 .flatpickr-current-month .cur-month{
    width:auto !important;
    margin:0 !important;
    flex:0 0 auto !important;
}
#wizard-frame-2 .flatpickr-current-month .numInputWrapper{
    width:4ch !important;
    margin:0 !important;
    flex:0 0 auto !important;
}


/* =========================================================
   v7 – Hoehen-Feintrimm (P1/P2)
   ========================================================= */
/* P1: Zeilenhoehen im Kopf straffen (Padding/Margins bleiben wie vorgegeben) */
#brand-header .bh-title-row{ line-height:1; }
#brand-header .bh-title{ line-height:1.1; }
#brand-header .bh-sub{ line-height:1; }
#brand-header .bh-quote{ line-height:1.2; }

/* P2: Schritt 4 – ueberfluessige EA-Abstaende raus */
#wizard-frame-4 .frame-content{ margin-top:0 !important; }
#wizard-frame-4 .frame-content.pt-md-4{ padding-top:0 !important; margin-bottom:8px !important; }
#wizard-frame-4 .frame-content.mb-4{ margin-bottom:8px !important; }
#altcha-widget{ margin-bottom:8px !important; }
#wizard-frame-4 .d-flex.fs-6{ font-size:13px !important; margin-bottom:0 !important; }

/* P2: Schritt 2 – Zeitzonen-Feld kompakt */
#select-time .mb-3{ margin-bottom:10px !important; }


/* =========================================================
   v8 – letzte Hoehentrims (EA-Eigenabstaende, Schritt-4-Details)
   ========================================================= */
#book-appointment-wizard .frame-container{ padding-top:0 !important; padding-bottom:0 !important; }  /* py-3 */
#book-appointment-wizard .command-buttons{ margin-bottom:0 !important; }                              /* my-3 */
#book-appointment-wizard #header{ margin-bottom:0; }                    /* Abstand kommt allein aus #steps (28px) */
#appointment-details, #customer-details{ font-size:14px !important; line-height:1.5 !important; }
#appointment-details h4, #customer-details h4{ font-size:15px !important; margin:0 0 6px !important; }
#wizard-frame-4 .frame-content.m-auto:not(.pt-md-4){ margin-bottom:0 !important; }


/* v8b – Schritt-4-Detailblock + ALTCHA kompakt */
#appointment-details, #customer-details{ line-height:1.45 !important; }
#appointment-details .mb-2, #customer-details .mb-2{ margin-bottom:2px !important; }
#altcha-widget .altcha-challenge{ padding:8px 12px !important; }
#altcha-widget .altcha-verify-btn{ padding:8px 14px !important; font-size:13px !important; }
#altcha-widget .altcha-status{ font-size:12px !important; line-height:1.3 !important; }


/* v9b – ALTCHA einzeilig */
#altcha-widget .altcha-status{ white-space:nowrap; font-size:11px !important; }
#altcha-widget .altcha-verify-btn{ padding:6px 12px !important; }
#altcha-widget.mb-2{ margin-bottom:2px !important; }

/* v10b – leere Datenschutz/AGB-Zeile in Schritt 4 ausblenden (Links sind deaktiviert) */
#wizard-frame-4 .d-flex.fs-6:not(:has(a, label, input)){ display:none !important; }

/* v12b – Titel-Zeilenhoehe */
#book-appointment-wizard .frame-title{ line-height:1.15 !important; }


/* =========================================================
   v14 – Fokus, Autofill, Schritt-4-Angleichungen
   ========================================================= */

/* Fokuszustand: sichtbar, wo man tippt */
#book-appointment-wizard .form-control:focus,
#book-appointment-wizard .form-select:focus{
    border-color:#a87f63 !important;
    box-shadow:0 0 0 3px rgba(168,127,99,0.15) !important;
    outline:none !important;
}

/* SCHRITT 3: Browser-Autofill (blaeulich) neutralisieren */
#book-appointment-wizard input:-webkit-autofill,
#book-appointment-wizard input:-webkit-autofill:hover,
#book-appointment-wizard textarea:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
    box-shadow:0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color:#2c2119 !important;
    caret-color:#2c2119;
}
#book-appointment-wizard input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(168,127,99,0.15) !important;
    box-shadow:0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(168,127,99,0.15) !important;
    border-color:#a87f63 !important;
}

/* SCHRITT 4 (1): beide Spaltenueberschriften identisch */
#appointment-details .fs-3,
#customer-details .fs-3{
    font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size:20px !important;
    font-weight:400 !important;
    color:#2c2119 !important;
    text-align:left !important;
    margin:0 0 10px !important;
}

/* SCHRITT 4 (2): beide Spalten linksbuendig */
#appointment-details{ text-align:left !important; }
#customer-details{ text-align:left !important; }

/* SCHRITT 4 (3): ALTCHA-Box an den Stil angleichen */
#altcha-widget{ width:100% !important; }
#altcha-widget .altcha-challenge{
    border-radius:0 !important;
    border:1px solid rgba(168,127,99,.45) !important;
    box-shadow:none !important;
    background:#ffffff !important;
    width:100% !important;
}
#altcha-widget .altcha-verify-btn{ border-radius:0 !important; }


/* =========================================================
   v17 – Palette der Website (Schritt 4) + Button-Hover
   ========================================================= */
#book-appointment-wizard .button-next:hover,
#book-appointment-wizard #book-appointment-submit:hover{
    background-color:#8d6850 !important;
    border-color:#8d6850 !important;
}
#book-appointment-wizard .button-back:hover{
    border-color:#a87f63 !important;
    color:#8d6850 !important;
}