/* Nesrin Hairlounge Branding
   Palette: Hell #E9E2DA · Primär #F4EFEA · Gold #C7A874 (dunkler Akzent)
   Schriften: Playfair Display (Überschriften) · Inter (Text) — lokal gehostet */

@import url('/assets/fonts/nesrin/fonts.css');

body {
    background-color: #F4EFEA !important;
    background-image: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
#company-name > span,
.frame-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400;
}

#book-appointment-wizard {
    border: 1px solid #E9E2DA;
    box-shadow: 0 10px 40px rgba(199, 168, 116, 0.25);
}

/* Firmenspruch im Header (Header ist gold, Spruch in Creme) */
#header .company-claim {
    color: #F4EFEA !important;
    letter-spacing: 0.06em;
}

/* Aktiver Schritt: Ziffer in Gold auf Weiß */
#book-appointment-wizard .book-step.active-step strong,
#book-appointment-wizard #steps strong.text-primary {
    color: #C7A874 !important;
}

/* Ausgewählte Uhrzeit & Kalender-Akzente in Gold */
#book-appointment-wizard #available-hours .selected-hour {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: #C7A874 !important;
}

/* Buttons: Gold mit dunklerem Gold-Hover */
.btn-dark,
.btn-primary {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
}

.btn-dark:hover,
.btn-primary:hover {
    background-color: #A8874F !important;
    border-color: #A8874F !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: #A8874F;
    border-color: #C7A874;
}

.btn-outline-secondary:hover {
    background-color: #E9E2DA;
    color: #A8874F;
    border-color: #C7A874;
}

/* Links in Gold-Dunkel */
a {
    color: #A8874F;
}

a:hover {
    color: #C7A874;
}

/* Footer dezent in Hell */
#frame-footer {
    background-color: #E9E2DA;
    border-top: 1px solid #C7A874 !important;
}

#frame-footer .backend-link {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
}

/* ===== Kopfbereich: helles Creme, damit die goldene Rose leuchtet ===== */
#header,
#book-appointment-wizard #header {
    background: linear-gradient(180deg, #FBF8F5 0%, #F4EFEA 60%, #EFE8E0 100%) !important;
    border-bottom: 1px solid #C7A874 !important;
    padding-top: 1.6rem !important;
    padding-bottom: 1.4rem !important;
}

#company-logo {
    background: none !important;
    padding: 0 !important;
    max-height: 74px !important;
    filter: drop-shadow(0 1px 2px rgba(199, 168, 116, 0.35));
}

/* Salonname: praegnant, weit gesperrt - Luxus-Typografie lebt von Raum */
#company-name > span {
    display: block;
    color: #A8874F !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: clamp(1.35rem, 4.6vw, 1.95rem) !important;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-top: 0.35rem;
}

/* Firmenspruch: klein, gesperrt, in Versalien - die klassische Premium-Beizeile */
#header .company-claim {
    white-space: nowrap;
    display: block;
    color: #9a9086 !important;
    font-family: 'Inter', sans-serif;
    /* Bewusst klein gehalten: der Spruch darf in KEINER Breite umbrechen und
       nicht unter die Schrittanzeige laufen (Kopfbereich ist overflow-hidden). */
    font-size: clamp(0.46rem, 1.9vw, 0.66rem) !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    margin-top: 0.35rem;
}

/* Der Textblock darf die Schrittanzeige nicht beruehren */
#book-appointment-wizard #company-name {
    padding-right: 1rem;
    min-width: 0;
}

@media (max-width: 767px) {
    #book-appointment-wizard #company-name {
        padding-right: 0;
    }
}

/* Schrittanzeige auf hellem Grund: aktiv gold gefuellt, inaktiv dezent */
#book-appointment-wizard #steps .book-step {
    background: #E9E2DA !important;
}

#book-appointment-wizard #steps .book-step strong {
    color: #b9ad9c !important;
}

#book-appointment-wizard #steps .book-step.active-step {
    background: #C7A874 !important;
    box-shadow: 0 2px 10px rgba(199, 168, 116, 0.5);
}

#book-appointment-wizard #steps .book-step.active-step strong,
#book-appointment-wizard #steps strong.text-primary {
    color: #fff !important;
}

/* Etwas mehr Luft im Inhaltsbereich - Weissraum ist das Premium-Signal */
#book-appointment-wizard .frame-container {
    padding-left: clamp(0.5rem, 3vw, 2rem);
    padding-right: clamp(0.5rem, 3vw, 2rem);
}

/* Vertrauenszeile mit Nesrins Foto */
#nesrin-social-proof {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: clamp(0.8rem, 3.2vw, 0.95rem);
}

/* Formularfelder: goldener Rand */
.form-control,
.form-select {
    border-color: #C7A874 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #A8874F !important;
    box-shadow: 0 0 0 0.25rem rgba(199, 168, 116, 0.25) !important;
}

/* Checkboxen (z. B. „Meine Daten merken"): Gold statt Grün */
.form-check-input:checked {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
}

.form-check-input:focus {
    border-color: #C7A874 !important;
    box-shadow: 0 0 0 0.25rem rgba(199, 168, 116, 0.25) !important;
}

/* Grüne Erfolgs-Buttons und -Texte (Bestätigen, Weiter zur Buchungsseite) → Gold */
.btn-success {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #A8874F !important;
    border-color: #A8874F !important;
}

.text-success {
    color: #A8874F !important;
}

.bg-success {
    background-color: #C7A874 !important;
}

/* Dunkle/schwarze Icons im Buchungsablauf → Gold (in Buttons bleibt Weiß) */
#book-appointment-wizard .fas,
#book-appointment-wizard .far,
#book-appointment-wizard .fab,
#message-frame .fas,
#message-frame .far,
#message-frame .fab {
    color: #C7A874;
}

#book-appointment-wizard .btn .fas,
#book-appointment-wizard .btn .far,
#book-appointment-wizard .btn .fab,
#message-frame .btn .fas,
#message-frame .btn .far,
#message-frame .btn .fab {
    color: inherit;
}

/* Theme-Gradients auf Buttons entfernen (sonst überdeckt Grün das Gold) */
.btn-primary,
.btn-dark,
.btn-success,
.btn-primary:hover,
.btn-dark:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:active {
    background-image: none !important;
}

/* FontAwesome ersetzt <i> durch SVG — Icons goldfarben */
#book-appointment-wizard svg.svg-inline--fa,
#message-frame svg.svg-inline--fa {
    color: #C7A874;
}

#book-appointment-wizard .btn svg.svg-inline--fa,
#message-frame .btn svg.svg-inline--fa {
    color: inherit;
}

/* Zeitzonen-Zeile „Berlin (+1:00)" in der Terminübersicht ausblenden */
#book-appointment-wizard *:has(> svg[data-icon="globe"]),
#book-appointment-wizard *:has(> i.fa-globe) {
    display: none !important;
}

/* ===== Backend (Admin-Bereich) ===== */
body.backend-page,
.backend-page {
    background-color: #F4EFEA;
    font-family: 'Inter', -apple-system, sans-serif;
}

.backend-page h1, .backend-page h2, .backend-page h3,
.backend-page .page-title {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Dunkle Buttons im Backend → Gold */
.backend-page .btn-secondary,
.backend-page .btn-outline-secondary:hover {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
    background-image: none !important;
}

.backend-page .btn-outline-secondary {
    color: #A8874F;
    border-color: #C7A874;
}

/* FullCalendar-Buttons (Kalenderansicht) */
.backend-page .fc-button,
.backend-page .fc-button-primary {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
    background-image: none !important;
}

.backend-page .fc-button-active,
.backend-page .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #A8874F !important;
    border-color: #A8874F !important;
}

/* Termin-Standardfarbe im Kalender */
.backend-page .fc-event {
    border-color: #C7A874;
}

/* Schwarze Kalender-Werkzeugleiste im Backend → Creme */
.backend-page .bg-dark,
#calendar-toolbar {
    background-color: #E9E2DA !important;
    color: #6b6257 !important;
}

#calendar-toolbar .btn,
#calendar-toolbar .btn-light,
#calendar-toolbar .btn-dark {
    background-color: #C7A874 !important;
    border-color: #C7A874 !important;
    color: #fff !important;
    background-image: none !important;
}

.backend-page .badge.bg-dark {
    background-color: #C7A874 !important;
}

/* Zeitzonen-Felder im Backend komplett ausblenden */
.backend-page select[id*="timezone"],
.backend-page label[for*="timezone"],
.backend-page #timezone,
.backend-page .timezone-field {
    display: none !important;
}

/* Zeitzonen-Info im Termin-Dialog ausblenden */
.backend-page .mb-3:has(.timezone-info),
#appointments-modal .mb-3:has(.timezone-info),
.timezone-info {
    display: none !important;
}

/* ===== Mobile-Conversion-Optimierung ===== */

/* iOS-Zoom beim Antippen von Feldern verhindern (Schrift >= 16px) */
@media (max-width: 767px) {
    #book-appointment-wizard .form-control,
    #book-appointment-wizard .form-select {
        font-size: 16px !important;
        min-height: 48px;
    }

    /* Zeit-Slots: große Daumen-Ziele */
    #book-appointment-wizard #available-hours > * {
        min-height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Weiter-Button-Leiste klebt unten am Bildschirmrand */
    #book-appointment-wizard .command-buttons {
        position: sticky;
        bottom: 0;
        background: rgba(255, 255, 255, 0.96);
        padding: 10px 8px;
        margin-left: -8px;
        margin-right: -8px;
        border-top: 1px solid #E9E2DA;
        z-index: 50;
    }

    #book-appointment-wizard .command-buttons .btn {
        min-height: 48px;
        font-size: 16px;
    }
}

/* Sprachumschalter ausblenden (Deutsch ist fest gesetzt) */
#select-language {
    display: none !important;
}


/* ===== Schritt 4: Terminzusammenfassung als edle Karte ===== */
#wizard-frame-4 .frame-content {
    background: linear-gradient(180deg, #FBF8F5 0%, #F4EFEA 100%);
    border: 1px solid #E4D9C6;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(199, 168, 116, 0.16);
    padding: 1.75rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Dienstleistungsname: gross und in der Serifenschrift */
#appointment-details > div > div:first-child {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.15rem, 3.6vw, 1.5rem) !important;
    font-weight: 500 !important;
    color: #A8874F !important;
    line-height: 1.25;
    margin-bottom: 0.35rem !important;
}

/* Stylistenname darunter: dezent, gesperrt */
#appointment-details > div > div:nth-child(2) {
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9086 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #E4D9C6;
}

/* Zeilen mit Datum, Dauer, Preis: ruhig und gleichmaessig */
#appointment-details .mb-2,
#customer-details .mb-2 {
    font-size: 0.98rem !important;
    color: #5a5248;
    margin-bottom: 0.55rem !important;
}

/* Der Preis als Abschluss hervorgehoben */
#appointment-details > div > div:last-child {
    font-weight: 600;
    color: #A8874F !important;
    font-size: 1.1rem !important;
    padding-top: 0.6rem;
    border-top: 1px solid #E4D9C6;
    margin-top: 0.75rem !important;
}

/* Kontaktspalte: Ueberschrift im gleichen Stil */
#customer-details {
    text-align: left !important;
}

#customer-details .fw-bold {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    color: #A8874F !important;
    letter-spacing: 0.02em;
}

/* Auf schmalen Schirmen: Trennlinie zwischen den Bloecken */
@media (max-width: 991px) {
    #customer-details {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid #E4D9C6;
        text-align: center !important;
    }
    #appointment-details {
        text-align: center !important;
    }
    #appointment-details > div > div:nth-child(2) {
        border-bottom: none;
        padding-bottom: 0;
    }
}

#nesrin-confirm-avatar {
    margin-bottom: 1.25rem !important;
}

/* ===== Kalender: Monatswechsel klar erkennbar ===== */
.flatpickr-months {
    padding: 6px 4px !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    background: #fff !important;
    border: 1.5px solid #C7A874 !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    top: 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(199, 168, 116, 0.35);
    opacity: 1 !important;
    transition: background 0.2s ease;
}

.flatpickr-months .flatpickr-prev-month { left: 10px !important; }
.flatpickr-months .flatpickr-next-month { right: 10px !important; }

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #C7A874 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 15px !important;
    height: 15px !important;
    fill: #A8874F !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff !important;
}

/* Nicht nutzbarer Zurück-Pfeil bleibt sichtbar, wirkt aber inaktiv */
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
    display: flex !important;
    opacity: 0.3 !important;
    box-shadow: none;
}

/* Monat und Jahr mittig, damit die Pfeile Raum haben */
.flatpickr-current-month {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.05rem !important;
    padding-top: 8px !important;
}

/* Original-Fliesstext "Dauer: ..., Preis: ..." ausblenden - wir zeigen Kacheln */
#service-description .fst-italic {
    display: none !important;
}

/* Nicht verfuegbare Personen: sichtbar, aber klar als nicht waehlbar erkennbar */
#select-provider option:disabled {
    color: #b9ad9c;
    font-style: italic;
}

/* Zeitauswahl: mehr Uhrzeiten gleichzeitig sichtbar, weniger Scrollen */
#book-appointment-wizard #available-hours {
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-right: 0 !important;
}

#book-appointment-wizard #available-hours > * {
    margin: 0 !important;
    min-height: 44px;
}

@media (min-width: 992px) {
    #book-appointment-wizard #available-hours {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 400px) {
    #book-appointment-wizard #available-hours {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Zeitspalte darf jetzt mitwachsen */
#book-appointment-wizard #select-time {
    max-width: none !important;
}

/* ===== Premium-Feinschliff: Raum und ruhige Übergänge ===== */
#book-appointment-wizard .frame-container {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

#book-appointment-wizard .frame-title {
    margin-bottom: 2rem !important;
    letter-spacing: 0.01em;
}

#book-appointment-wizard .mb-3 {
    margin-bottom: 1.6rem !important;
}

/* Sanftes Einblenden beim Schrittwechsel - wirkt ruhiger als hartes Umschalten */
#book-appointment-wizard .wizard-frame {
    animation: nesrin-einblenden 0.45s ease both;
}

@keyframes nesrin-einblenden {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #book-appointment-wizard .wizard-frame { animation: none; }
}

/* Behandlungsbeschreibung: ruhig gesetzt, mit Luft */
#service-description {
    max-height: none !important;
    color: #6b6257;
    line-height: 1.7;
    margin-top: 0.5rem;
}

/* ===== Wunschtermin: Mond unter den Kalender, Zeiten auf gleicher Höhe ===== */
#book-appointment-wizard #nesrin-moon {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    /* Zeitspalte oben ausrichten, damit Kalender und Uhrzeiten auf einer Höhe beginnen */
    #book-appointment-wizard #select-time {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    #book-appointment-wizard #select-date {
        margin-top: 0 !important;
    }
}

/* Zeitzonen-Angaben im gesamten Verwaltungsbereich ausblenden -
   der Salon arbeitet ausschliesslich in deutscher Zeit */
.backend-page [id*="timezone"],
.backend-page [class*="timezone"],
.backend-page label[for*="timezone"],
.backend-page select[name*="timezone"],
#appointments-modal [id*="timezone"],
#appointments-modal label[for*="timezone"],
.timezone-info,
#select-timezone,
label[for="select-timezone"] {
    display: none !important;
}