/* White-label booking theme — generated per client by provision-client.sh.
   Same dark, premium base as the AI Guy On The Fly instance, but the accent
   color and logo are the client's own, not AI Guy On The Fly's branding. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
  --ea-bg: #0a0a0d;
  --ea-bg-2: #131318;
  --ea-line: rgba(255,255,255,0.08);
  --ea-line-hot: rgba(255,255,255,0.18);
  --ea-accent: #2f6feb;
  --ea-text: #f3f2ef;
  --ea-text-mid: #a6a4a0;
  --ea-text-muted: #68655f;

  --bs-body-bg: var(--ea-bg);
  --bs-body-color: var(--ea-text);
  --bs-border-color: var(--ea-line);
  --bs-border-radius: 20px;
  --bs-border-radius-lg: 24px;
  --bs-box-shadow-sm: 0 30px 80px rgba(0,0,0,0.5);
}

html, body {
  background: var(--ea-bg) !important;
  color: var(--ea-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body {
  background-image:
    radial-gradient(700px 600px at 15% -5%, color-mix(in srgb, var(--ea-accent) 8%, transparent), transparent 60%),
    radial-gradient(600px 500px at 100% 30%, color-mix(in srgb, var(--ea-accent) 5%, transparent), transparent 60%) !important;
}

/* ---------- Wizard shell ---------- */
#book-appointment-wizard {
  background: var(--ea-bg-2) !important;
  border: 1px solid var(--ea-line);
  border-radius: 26px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55) !important;
}

.frame-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--ea-text) !important;
  letter-spacing: -0.01em;
}

/* ---------- Header ---------- */
#header,
#book-appointment-wizard #header {
  background: linear-gradient(180deg, #16161c 0%, #0e0e12 100%) !important;
  border-bottom: 1px solid var(--ea-line);
}

#company-logo {
  max-height: 48px !important;
  border-radius: 8px;
}

#company-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--ea-text) !important;
  letter-spacing: -0.01em;
}

#company-name .display-booking-selection {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--ea-text-muted) !important;
}

#steps .book-step {
  background: rgba(255,255,255,0.06) !important;
  transition: all .4s cubic-bezier(.19,1,.22,1) !important;
}

#steps .book-step strong { color: var(--ea-text-muted) !important; }

#book-appointment-wizard .book-step.active-step {
  background: var(--ea-accent) !important;
}

#book-appointment-wizard .book-step.active-step strong {
  color: #0a0a0d !important;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: all .5s cubic-bezier(.19,1,.22,1) !important;
}

.btn-primary {
  background: var(--ea-accent) !important;
  border-color: var(--ea-accent) !important;
  color: #0a0a0d !important;
}

.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: var(--ea-line-hot) !important;
  color: var(--ea-text) !important;
}

.btn-outline-primary:hover {
  background: var(--ea-accent) !important;
  border-color: var(--ea-accent) !important;
  color: #0a0a0d !important;
}

.btn-outline-secondary, .btn-secondary {
  background: transparent !important;
  border-color: var(--ea-line-hot) !important;
  color: var(--ea-text-mid) !important;
  border-radius: 999px !important;
}

/* ---------- Forms ---------- */
.form-select, .form-control {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ea-line) !important;
  color: var(--ea-text) !important;
  border-radius: 14px !important;
}

.form-select:focus, .form-control:focus {
  border-color: var(--ea-accent) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ea-accent) 18%, transparent) !important;
}

.form-select option { background-color: #16161c; color: var(--ea-text); }

label, .form-label { color: var(--ea-text-mid) !important; }

.form-check-input {
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--ea-line-hot) !important;
}
.form-check-input:checked {
  background-color: var(--ea-accent) !important;
  border-color: var(--ea-accent) !important;
}
.form-check-input:focus {
  border-color: var(--ea-accent) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ea-accent) 18%, transparent) !important;
}
.form-check-label { color: var(--ea-text-mid) !important; }

/* ---------- Available hours ---------- */
#available-hours .available-hour {
  border-radius: 999px !important;
  border-color: var(--ea-line-hot) !important;
  color: var(--ea-text) !important;
}

#book-appointment-wizard #available-hours .selected-hour {
  background-color: var(--ea-accent) !important;
  border-color: var(--ea-accent) !important;
  color: #0a0a0d !important;
}

/* ---------- Calendar (flatpickr) ---------- */
.flatpickr-calendar,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
  background: var(--ea-bg-2) !important;
}
.flatpickr-calendar {
  border: 1px solid var(--ea-line) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important;
  border-radius: 18px !important;
}
.flatpickr-day {
  background: transparent !important;
  color: var(--ea-text) !important;
  border-color: transparent !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background: rgba(255,255,255,0.08) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--ea-accent) !important;
  border-color: var(--ea-accent) !important;
  color: #0a0a0d !important;
}
.flatpickr-day.today { border-color: var(--ea-accent) !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--ea-text-muted) !important;
  opacity: .5;
}
.flatpickr-months, .flatpickr-weekdays, .flatpickr-weekdaycontainer { background: var(--ea-bg-2) !important; }
.flatpickr-current-month, .flatpickr-weekday, span.flatpickr-weekday {
  color: var(--ea-text) !important;
  fill: var(--ea-text) !important;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  color: var(--ea-text-muted) !important;
  opacity: .35;
  background: transparent !important;
}
.numInputWrapper, .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: var(--ea-text) !important;
}
.flatpickr-prev-month, .flatpickr-next-month { fill: var(--ea-text) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--ea-accent) !important; }

/* ---------- Cards / list items ---------- */
.card, .list-group-item {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--ea-line) !important;
  color: var(--ea-text) !important;
  border-radius: 16px !important;
}

/* ---------- Footer ---------- */
#frame-footer {
  border-top: 1px solid var(--ea-line) !important;
  background: transparent !important;
}

#frame-footer .footer-powered-by {
  color: var(--ea-text-muted) !important;
  font-size: 11px !important;
  opacity: .55;
}
#frame-footer .footer-powered-by a { color: var(--ea-text-muted) !important; }

#frame-footer .badge {
  background: transparent !important;
  border: 1px solid var(--ea-line) !important;
  color: var(--ea-text-muted) !important;
  font-weight: 500 !important;
  opacity: .7;
}
#frame-footer .backend-link {
  border-color: var(--ea-line) !important;
}
#frame-footer .badge:hover { opacity: 1; border-color: var(--ea-line-hot) !important; }

/* ---------- Misc ---------- */
::selection { background: color-mix(in srgb, var(--ea-accent) 25%, transparent); }
a { color: var(--ea-accent); }
hr { border-color: var(--ea-line) !important; }