/* ================================================================
   KPR-WEB.de — EasyAppointments Custom Theme
   Exakt abgestimmt auf das Landing-Page-Design
   ================================================================ */

/* ── Fonts (lokal gehostet, identisch zur Landing Page) ────────── */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-var.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
}

/* ── Design Tokens (S4: Single Source of Truth) ────────────────── */
@import url('/css/tokens.css');

/* ── Booking-spezifische Overrides (Dark-Theme Varianten) ──────── */
:root {
    --primary:       var(--kpr-primary);
    --primary-light: var(--kpr-primary-light);
    --primary-dark:  var(--kpr-primary-dark);
    --primary-rgb:   var(--kpr-primary-rgb);
    --accent:        var(--kpr-accent);
    --accent-light:  var(--kpr-accent-light);
    --accent-dark:   var(--kpr-accent-dark);
    --accent-rgb:    var(--kpr-accent-rgb);
    --neon:          var(--kpr-neon);
    --neon-rgb:      var(--kpr-neon-rgb);
    --gradient-1:    var(--kpr-gradient-1);
    --gradient-2:    var(--kpr-gradient-2);
    --bg-dark:       var(--kpr-bg-dark);
    --text:          #e2e8f0;
    --text-muted:    var(--kpr-text-muted);
    --border:        rgba(255, 255, 255, 0.08);
    --border-hover:  rgba(0, 180, 216, 0.25);
    --card-bg:       rgba(255, 255, 255, 0.04);
    --card-bg-hover: rgba(255, 255, 255, 0.06);
    --radius:        var(--kpr-radius);
    --radius-lg:     var(--kpr-radius-lg);
    --shadow-lg:     0 20px 60px -15px rgba(0, 0, 0, 0.5);
    --transition:    var(--kpr-transition);
    --font-body:     var(--kpr-font-body);
    --font-heading:  var(--kpr-font-heading);
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-body) !important;
    background: var(--bg-dark) !important;
    color: var(--text) !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    padding-top: 72px !important;
}

/* ── Navbar: EA-Konflikt-Overrides ─────────────────────────────── */
/* EA default.min.css setzt .navbar { text-transform:uppercase; font-weight:600 }
   und .btn { text-transform:uppercase }. Nur diese EA-Konflikte werden hier
   überschrieben — das eigentliche Navbar-Styling kommt aus styles.css. */
.navbar,
.navbar * {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* EA .nav .nav-link:not(.active) überschreibt die Linkfarbe */
.navbar .nav-link,
.navbar a.nav-link,
.nav .nav-link:not(.active) {
    color: rgba(255, 255, 255, 0.75) !important;
    background: none !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active,
.nav .nav-link.active {
    color: #fff !important;
    background: none !important;
}

/* EA inline-CSS setzt a { color: #183165 } — Override für Navbar */
.navbar a {
    color: inherit !important;
    text-decoration: none !important;
}
.navbar .nav-logo { color: #fff !important; }
.navbar .nav-logo span { color: var(--accent) !important; }
.navbar .nav-cta { color: #fff !important; }

/* Hide landing-page-only elements that don't apply on booking */
.scroll-progress,
.loader {
    display: none !important;
}

/* ── Layout (matching landing .container: max-width 1200px) ──── */
#main.container {
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 24px !important;
    margin: 0 auto !important;
}

.row.wrapper {
    justify-content: center !important;
    margin: 0 !important;
    padding: 60px 0 !important;
}

/* Override Bootstrap column constraints — use full container width */
#book-appointment-wizard.col-12.col-lg-10.col-xl-8.col-xxl-7,
#book-appointment-wizard[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* ── Main Wizard — no card/tile, transparent background ────────── */
#book-appointment-wizard {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
    padding-bottom: 0 !important;
}

/* Remove gradient top-border */
#book-appointment-wizard::before {
    display: none !important;
}

/* ── Header ────────────────────────────────────────────────────── */
#book-appointment-wizard #header {
    display: none !important;
}

/* Provider + Service text in header — hide both */
#book-appointment-wizard #company-name .display-selected-service,
#book-appointment-wizard #company-name .display-selected-provider,
.display-selected-provider,
.display-selected-service {
    display: none !important;
}

/* ── Step Indicators ────────────────────────────────────────────── */
/* Completely hidden */
#book-appointment-wizard #steps {
    display: none !important;
    gap: 12px !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
}

#book-appointment-wizard .book-step {
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    filter: none !important;
    transition: all var(--transition) !important;
    padding: 0 !important;
    flex: none !important;
    width: 36px !important;
    height: 36px !important;
    float: none !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    font-size: 0 !important;
    color: transparent !important;
}

/* Hide step 4 */
#book-appointment-wizard #step-4 {
    display: none !important;
}

/* Hide ALL original content (the <strong> and any text) */
#book-appointment-wizard .book-step strong {
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Step circle base style */
#book-appointment-wizard .book-step::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    transition: all var(--transition) !important;
    cursor: default !important;
}

/* Fixed numbers per step */
#book-appointment-wizard #step-1::after { content: "1" !important; }
#book-appointment-wizard #step-2::after { content: "2" !important; }
#book-appointment-wizard #step-3::after { content: "3" !important; }

#book-appointment-wizard .book-step.active-step::after {
    color: #fff !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px rgba(0, 180, 216, 0.3) !important;
}

/* ── Wizard Frames ─────────────────────────────────────────────── */
.wizard-frame {
    padding: 0 48px 24px !important;
}

.frame-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 32px !important;
    padding-top: 40px !important;
}

.frame-container {
    color: var(--text) !important;
}

/* ── Frame Content Layout ──────────────────────────────────────── */
/* Override Bootstrap .row gutter with modern gap-based layout */
.wizard-frame .frame-content.row {
    --bs-gutter-x: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    margin: 0 !important;
}

/* Frame-1: Service select — remove col-md-8 offset-md-2 constraint */
#wizard-frame-1 .frame-content .col.col-md-8.offset-md-2 {
    flex: 0 0 100% !important;
    max-width: 600px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    offset: unset !important;
}

/* Frame-2: Date + Time — 2 columns on desktop */
#wizard-frame-2 .frame-content > .col-12.col-md-6 {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 280px !important;
    padding: 0 !important;
}

/* Frame-3: Customer info — 2 columns, no mx-auto centering */
#wizard-frame-3 .frame-content > .col-12.col-md-6.field-col {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 260px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* ── Form Controls (like .form-group input from landing) ───────── */
.form-select,
.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
    padding: 14px 20px !important;
    font-family: var(--font-body) !important;
    font-size: 0.925rem !important;
    transition: all var(--transition) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    outline: none !important;
}

.form-select:focus,
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.08) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    filter: none !important;
}

.form-select option {
    background: #131b2e !important;
    color: var(--text) !important;
}

/* Select arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
}

.form-label,
label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

label strong {
    font-weight: 600 !important;
    color: #fff !important;
}

.text-danger {
    color: #f87171 !important;
}

/* ── Service Description ───────────────────────────────────────── */
#service-description {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    margin-top: 16px !important;
    padding: 14px 18px !important;
    background: rgba(0, 180, 216, 0.04) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

/* ── Buttons (matching landing .btn) ───────────────────────────── */
.btn {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    transition: all var(--transition) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Next Button — like .btn-primary on landing */
.btn-dark,
.btn.button-next,
.btn-primary {
    background: var(--gradient-1) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(24, 49, 101, 0.3) !important;
}

.btn-dark:hover,
.btn.button-next:hover,
.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(24, 49, 101, 0.45) !important;
    filter: none !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: rgba(24, 49, 101, 0.5) !important;
    border: none !important;
    filter: none !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Back Button — like .btn-outline on landing */
.btn-outline-secondary,
.btn.button-back {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.btn-outline-secondary:hover,
.btn.button-back:hover {
    border-color: var(--accent) !important;
    color: #fff !important;
    background: rgba(0, 180, 216, 0.1) !important;
    transform: translateY(-3px) !important;
}

.command-buttons {
    padding: 28px 0 36px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
}

/* ── Flatpickr Calendar (Dark matching landing) ───────────────── */
/* Selectors prefixed with .flatpickr-calendar to beat EA inline specificity */
.flatpickr-calendar {
    background: #131b2e !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--font-body) !important;
    width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .dayContainer {
    background: #131b2e !important;
}

.flatpickr-calendar.inline {
    box-shadow: none !important;
    background: #131b2e !important;
}

/* Month header — must beat: .flatpickr-calendar .flatpickr-months */
.flatpickr-calendar .flatpickr-months {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 8px 0 !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: #fff !important;
    height: 36px !important;
}

.flatpickr-calendar .flatpickr-current-month {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 1rem !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    color: #fff !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: #131b2e !important;
    color: var(--text) !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    color: rgba(255, 255, 255, 0.6) !important;
    fill: rgba(255, 255, 255, 0.6) !important;
    padding: 6px 10px !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
    color: var(--accent) !important;
    fill: var(--accent) !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: inherit !important;
}

/* Weekday headers — must beat: .flatpickr-calendar .flatpickr-weekdays */
.flatpickr-calendar .flatpickr-weekdays {
    background: transparent !important;
    padding: 4px 0 !important;
}

.flatpickr-calendar span.flatpickr-weekday {
    background: transparent !important;
    color: var(--accent) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* Day cells */
.flatpickr-calendar .flatpickr-day {
    color: var(--text) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    max-width: none !important;
    height: 44px !important;
    line-height: 44px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s !important;
}

.flatpickr-calendar .flatpickr-day:hover {
    background: rgba(0, 180, 216, 0.1) !important;
    border-color: rgba(0, 180, 216, 0.2) !important;
}

.flatpickr-calendar .flatpickr-day.today:not(.selected) {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: transparent !important;
}

/* Selected days — must beat EA's ultra-long selector chain */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-day.selected.prevMonthDay,
.flatpickr-calendar .flatpickr-day.selected.nextMonthDay,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.startRange.inRange,
.flatpickr-calendar .flatpickr-day.startRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.startRange.nextMonthDay,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-day.endRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.endRange.nextMonthDay {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3) !important;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.12) !important;
}

.flatpickr-calendar .numInputWrapper:hover {
    background: transparent !important;
}

.flatpickr-calendar .numInputWrapper span {
    border: none !important;
}

.flatpickr-calendar .numInputWrapper span:hover {
    background: rgba(0, 180, 216, 0.15) !important;
}

.flatpickr-calendar .numInputWrapper span svg path {
    fill: rgba(255, 255, 255, 0.5) !important;
}

/* ── Available Hours Grid ──────────────────────────────────────── */
#available-hours {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 10px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    padding: 4px 2px !important;
}

#available-hours .available-hour {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
    padding: 12px 8px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    font-family: var(--font-heading) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

#available-hours .available-hour:hover {
    background: rgba(0, 180, 216, 0.08) !important;
    border-color: var(--border-hover) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#available-hours .selected-hour,
#available-hours .selected-hour:hover {
    background: var(--gradient-1) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 180, 216, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* ── Scrollbar (matching landing page) ─────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* ── jQuery UI Datepicker (dark fallback) ──────────────────────── */
body .ui-widget.ui-widget-content {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

body .ui-datepicker .ui-widget-header {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    color: #fff !important;
}

body .ui-datepicker th {
    background: transparent !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}

body .ui-datepicker td a,
body .ui-datepicker td span {
    color: var(--text) !important;
}

html body .ui-datepicker td a.ui-state-active {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

body .ui-datepicker td a.ui-state-highlight {
    background: rgba(0, 180, 216, 0.15) !important;
    border-radius: 8px !important;
}

body .ui-datepicker .ui-datepicker-next-hover,
body .ui-datepicker .ui-datepicker-prev-hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
}

body .ui-datepicker .ui-slider-handle {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
}

/* ── Timezone select (overlay fix) ─────────────────────────────── */
#select-timezone {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius) !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    margin-bottom: 16px !important;
}

/* ── Customer Info Form ────────────────────────────────────────── */
#wizard-frame-3 .form-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

#wizard-frame-3 .required.form-control,
#wizard-frame-3 .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: var(--radius) !important;
}

/* ── Confirmation Frame ────────────────────────────────────────── */
#wizard-frame-4 {
    color: var(--text) !important;
}

#wizard-frame-4 .frame-content {
    color: var(--text) !important;
}

#wizard-frame-4 h4 {
    color: #fff !important;
}

#wizard-frame-4 .row .col-12 {
    color: var(--text) !important;
}

/* ── Badge ─────────────────────────────────────────────────────── */
.badge.bg-secondary {
    background: rgba(0, 180, 216, 0.12) !important;
    color: var(--accent) !important;
    font-weight: 500 !important;
    border-radius: 50px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 5px 14px !important;
}

/* ── Footer ────────────────────────────────────────────────────── */
#frame-footer {
    display: none !important;
}

.footer-options,
.footer-powered-by {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Hide "Powered by EA" */
.footer-powered-by {
    display: none !important;
}

#frame-footer a {
    color: var(--accent) !important;
    text-decoration: none !important;
}

#frame-footer a:hover {
    color: var(--accent-light) !important;
}

/* Login button — hide */
#frame-footer .backend-link {
    display: none !important;
}

/* Language selector */
.footer-options .dropdown .btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.footer-options .dropdown-menu {
    background: #0f1525 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    text-transform: none !important;
}

.footer-options .dropdown-menu .dropdown-item {
    color: var(--text) !important;
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 0.2s !important;
}

.footer-options .dropdown-menu .dropdown-item:hover {
    background: rgba(0, 180, 216, 0.08) !important;
    color: #fff !important;
}

.footer-options .dropdown-menu .dropdown-item.active,
.dropdown-item:active {
    background: rgba(0, 180, 216, 0.15) !important;
    color: var(--accent) !important;
}

/* ── Modals ────────────────────────────────────────────────────── */
.modal-content {
    background: #0f1525 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text) !important;
}

.modal-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid var(--border) !important;
}

.modal-footer {
    border-top: 1px solid var(--border) !important;
}

/* ── Alerts ────────────────────────────────────────────────────── */
.alert-success {
    background: rgba(74, 222, 128, 0.08) !important;
    border: 1px solid rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    border-radius: var(--radius) !important;
}

.alert-danger {
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
    border-radius: var(--radius) !important;
}

/* ── Tippy Tooltip ─────────────────────────────────────────────── */
.tippy-box {
    background: #131b2e !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

.tippy-arrow {
    color: #131b2e !important;
}

/* ── Links ─────────────────────────────────────────────────────── */
a {
    color: var(--accent) !important;
    transition: color var(--transition) !important;
}

a:hover {
    color: var(--accent-light) !important;
}

/* ── Small / Muted Text ────────────────────────────────────────── */
.small, small {
    color: var(--text-muted) !important;
}

/* ── Form Check (checkbox) ─────────────────────────────────────── */
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.form-check-input {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Override EA's inline company_color styles ─────────────────── */
/* These need highest specificity to beat the inline <style> block */
body #book-appointment-wizard #header {
    background: transparent !important;
}

body #book-appointment-wizard .book-step {
    background: transparent !important;
    filter: none !important;
}

body #book-appointment-wizard .book-step.active-step {
    background: transparent !important;
}

body #book-appointment-wizard .book-step strong {
    filter: none !important;
}

body #book-appointment-wizard #available-hours .selected-hour {
    background: var(--gradient-1) !important;
    border-color: var(--accent) !important;
}

/* Override inline a color */
body a {
    color: var(--accent) !important;
}

body a:hover {
    color: var(--accent-light) !important;
}

/* Override inline .btn-primary */
body .btn-primary {
    background: var(--gradient-1) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    filter: none !important;
}

body .btn-primary:hover,
body .btn-primary:active,
body .btn-primary:focus {
    background: var(--gradient-1) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    filter: none !important;
    box-shadow: 0 8px 30px rgba(24, 49, 101, 0.45) !important;
    transform: translateY(-3px) !important;
}

body .btn-primary:disabled,
body .btn-primary.disabled {
    background: rgba(24, 49, 101, 0.5) !important;
    background-color: rgba(24, 49, 101, 0.5) !important;
    border-color: transparent !important;
    filter: none !important;
    opacity: 0.6 !important;
}

/* Override inline .form-control:focus */
body .form-control:focus {
    border-color: var(--accent) !important;
    filter: none !important;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.08) !important;
}

/* Override inline .form-check-input:checked */
body .form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Override inline modal header */
body .modal-header {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Override inline .nav-pills */
body .nav-pills .nav-link.active,
body .nav-pills .show > .nav-link {
    background-color: var(--accent) !important;
}

body .nav .nav-link:not(.active) {
    color: var(--accent) !important;
}

/* Override inline dropdown-item */
body .dropdown-item.active,
body .dropdown-item:active {
    background-color: rgba(0, 180, 216, 0.15) !important;
    color: var(--accent) !important;
}

/* Override inline datepicker selectors — must match EA specificity */
body .ui-widget.ui-widget-content {
    border-color: var(--border) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

body .ui-datepicker .ui-widget-header {
    background: rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

body .ui-datepicker th {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--accent) !important;
}

body .ui-datepicker .ui-datepicker-next-hover,
body .ui-datepicker .ui-datepicker-prev-hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
    filter: none !important;
}

body .ui-datepicker td a,
body .ui-datepicker td span {
    color: var(--text) !important;
}

html body .ui-datepicker td a.ui-state-active {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

body .ui-datepicker td a.ui-state-highlight {
    background: rgba(0, 180, 216, 0.15) !important;
    filter: none !important;
    border-radius: 8px !important;
}

body .ui-datepicker .ui-slider-handle {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
    background: var(--accent) !important;
}

/* Override inline #frame-footer .backend-link */
body #frame-footer .backend-link {
    display: none !important;
}

/* Override inline #existing-customers-list */
body #existing-customers-list div:hover {
    background: rgba(0, 180, 216, 0.08) !important;
}

/* ── Responsive ────────────────────────────────────────────────── */

/* Desktop ≥1024px: wider frame-1 content, ample gap */
@media (min-width: 1024px) {
    .wizard-frame .frame-content.row {
        gap: 40px !important;
    }

    #wizard-frame-1 .frame-content .col.col-md-8.offset-md-2 {
        max-width: 640px !important;
    }

    /* Timeslot grid: 3 columns on wide screens */
    #available-hours {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet ≥768px <1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    .wizard-frame .frame-content.row {
        gap: 24px !important;
    }

    /* Timeslot grid: 2 columns on tablet */
    #available-hours {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile <768px: single column stack */
@media (max-width: 767px) {
    #main.container {
        padding: 0 16px !important;
    }

    .row.wrapper {
        padding: 32px 0 !important;
    }

    #book-appointment-wizard {
        border-radius: var(--radius) !important;
    }

    #book-appointment-wizard #header {
        padding: 24px 20px 16px !important;
    }

    #book-appointment-wizard #header #company-name > span {
        font-size: 1.2rem !important;
    }

    .wizard-frame {
        padding: 0 20px 16px !important;
    }

    .frame-title {
        font-size: 1.2rem !important;
        padding-top: 28px !important;
        margin-bottom: 20px !important;
    }

    /* Single column: all inner cols full width */
    .wizard-frame .frame-content.row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .wizard-frame .frame-content .col-12,
    .wizard-frame .frame-content .col-md-6,
    .wizard-frame .frame-content .col.col-md-8.offset-md-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    #book-appointment-wizard #steps {
        gap: 2px !important;
    }

    #book-appointment-wizard .book-step {
        padding: 10px 8px !important;
    }

    #book-appointment-wizard .book-step strong {
        font-size: 0.75rem !important;
    }

    #available-hours {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    }

    .btn {
        padding: 12px 24px !important;
        font-size: 0.875rem !important;
    }

    #frame-footer {
        padding: 16px 20px 20px !important;
    }
}

/* Small mobile <480px */
@media (max-width: 480px) {
    #main.container {
        padding: 0 12px !important;
    }

    .row.wrapper {
        padding: 20px 0 !important;
    }

    #book-appointment-wizard #header {
        padding: 20px 16px 12px !important;
    }

    .wizard-frame {
        padding: 0 16px 12px !important;
    }

    .frame-title {
        font-size: 1.1rem !important;
        padding-top: 20px !important;
    }

    .command-buttons {
        flex-direction: column-reverse !important;
        gap: 12px !important;
    }

    .command-buttons .btn {
        width: 100% !important;
    }

    #frame-footer {
        padding: 12px 16px 16px !important;
    }

    #available-hours {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    }
}

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
}