/* =========================================================
   ALEXANDRA WENNMACHER - ELEGANT & RESPONSIVE FINISHING
   ========================================================= */

:root {
  --gold-primary: #C5A47E;       /* Helles Champagner-Gold */
  --gold-hover: #B08E66;         /* Dunkleres Gold für Hover */
  --gold-soft: #FAF6F0;          /* Sehr zartes Creme für Hover-Effekte */
  --bg-color: #FAF8F5;
  --card-bg: #FFFFFF;
  --text-dark: #2C2825;
  --text-muted: #7A736E;
  --border-color: #E2D9CF;       
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --border-radius: 12px;
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.04);
}

/* 1. GRUNDLAYOUT & HINTERGRUND */
body {
  font-family: var(--font-family) !important;
  background-color: var(--bg-color) !important;
  color: var(--text-dark) !important;
  margin: 0;
  padding: 8px;
}

/* Header & Footer NUR im Buchungs-Frontend ausblenden, Admin bleibt intakt */
body:not(.backend):not(.page-backend) #header, 
body:not(.backend):not(.page-backend) #header-logo, 
body:not(.backend):not(.page-backend) .navbar, 
body:not(.backend):not(.page-backend) #footer, 
body:not(.backend):not(.page-backend) footer, 
body:not(.backend):not(.page-backend) .footer,
body:not(.backend):not(.page-backend) #frame-footer,
body:not(.backend):not(.page-backend) .powered-by,
body:not(.backend):not(.page-backend) #select-language,
body:not(.backend):not(.page-backend) .language-selector,
body:not(.backend):not(.page-backend) #select-timezone,
body:not(.backend):not(.page-backend) .time-zone-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Haupt-Buchungskarte */
.frame-container, #main-mobile, .booking-container {
  background: var(--card-bg) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid var(--border-color) !important;
  padding: 20px 16px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 2. FORMULARFELDER & DROPDOWNS */
.form-control, select, input[type="text"], input[type="email"], input[type="tel"], textarea, select.form-select {
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  padding: 12px 16px !important;
  background-color: #FFFFFF !important;
  color: var(--text-dark) !important;
  font-size: 14px !important;
}

/* 3. KALENDER DESIGN (FLATPICKR) */
#select-date .ui-datepicker-header,
.ui-datepicker-header,
.ui-widget-header,
.flatpickr-months,
.flatpickr-month,
.picker__header,
div[class*="header"] {
  background: var(--gold-primary) !important;
  background-color: var(--gold-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
}

.ui-datepicker-title,
.ui-datepicker-prev,
.ui-datepicker-next,
.flatpickr-prev-month,
.flatpickr-next-month {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  background: transparent !important;
}

/* Monats- und Jahres-Ausrichtung im Kalender */
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  margin-right: 6px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.flatpickr-current-month input.cur-year {
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.flatpickr-monthDropdown-months option {
  background-color: #FFFFFF !important;
  color: var(--text-dark) !important;
}

.flatpickr-monthDropdown-months option:checked {
  background-color: var(--gold-primary) !important;
  color: #FFFFFF !important;
}

.ui-datepicker th,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--gold-hover) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

.ui-state-active, 
.flatpickr-day.selected {
  background: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: #FFFFFF !important;
}

.flatpickr-day:hover {
  background: var(--gold-soft) !important;
  color: var(--gold-hover) !important;
}

/* 4. UHRZEITEN-BUTTONS */
#available-hours .available-hour,
.time-slot,
button.available-hour {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-dark) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

#available-hours .available-hour:hover,
.time-slot:hover {
  background-color: var(--gold-soft) !important;
  border-color: var(--gold-primary) !important;
  color: var(--gold-hover) !important;
}

#available-hours .selected-hour,
#available-hours .available-hour.selected,
.time-slot.selected {
  background-color: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* 5. BUTTONS */
.btn-primary, 
#button-next, 
#button-appointment-submit,
.btn-next,
button[id*="next"],
.btn {
  background-color: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  width: 100% !important;
}

.btn-primary:hover, 
#button-next:hover, 
#button-appointment-submit:hover {
  background-color: var(--gold-hover) !important;
  border-color: var(--gold-hover) !important;
}

/* =========================================================
   MOBILE RESPONSIVE FIX
   ========================================================= */
@media (max-width: 767px) {
  .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
  }
  
  .flatpickr-days, .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .flatpickr-day {
    max-width: none !important;
  }

  #select-date, #available-hours, .row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .col-12, .col-md-6 {
    width: 100% !important;
    padding: 0 !important;
  }
}