/* ============================================================
   PROFICE.AI BOOKING PAGE THEME
   Main: #0e0d0c (dark)
   Interactive/buttons: #F57C00 (amber)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800;900&family=Raleway:wght@300;400;500;600&display=swap");

/* === BASE === */
html, body, #main, .container, .row, .wrapper {
  background-color: #0e0d0c !important;
  color: #d4d0c8 !important;
  font-family: 'Raleway', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  color: #f5f2ea !important;
}

/* === BOOKING WIZARD === */
#book-appointment-wizard {
  background: #0e0d0c !important;
}

/* === HEADER BAR === */
#book-appointment-wizard #header,
#header {
  background: #161514 !important;
  border-bottom: 1px solid rgba(235,235,222,0.06) !important;
}

#book-appointment-wizard #header #company-name,
#book-appointment-wizard #header #steps,
#header #company-name,
#header #steps {
  background: transparent !important;
  background-color: transparent !important;
}

#book-appointment-wizard #company-name,
#company-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  color: #f5f2ea !important;
  letter-spacing: 0.05em !important;
}

#book-appointment-wizard #company-name .display-selected-service,
#book-appointment-wizard #company-name .display-selected-provider,
#book-appointment-wizard #company-name .display-booking-selection {
  color: #7a7668 !important;
  filter: none !important;
  border-right-color: rgba(235,235,222,0.08) !important;
}

/* === LOGO — hidden === */
#company-logo {
  display: none !important;
}

/* === "Service | Jane Doe" — hidden === */
.display-booking-selection,
#company-name .display-selected-service,
#company-name .display-selected-provider {
  display: none !important;
}

/* === STEP INDICATORS — flexbox container, all rounded + fully orange === */
#book-appointment-wizard #steps {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  overflow: visible !important;
  margin: 12px auto !important;
  float: none !important;
}

#book-appointment-wizard .book-step,
#book-appointment-wizard .book-step.active-step {
  background: #F57C00 !important;
  border: none !important;
  filter: none !important;
  border-radius: 50% !important;
  color: #0e0d0c !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  min-width: 2.2rem !important;
  min-height: 2.2rem !important;
  display: flex; /* no !important — lets jQuery .hide() set display:none */
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#book-appointment-wizard .book-step strong {
  color: #0e0d0c !important;
  filter: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  display: block !important;
  line-height: 1 !important;
}

/* === ALL WHITE/LIGHT BACKGROUNDS → DARK === */
.bg-white, .bg-light,
.card, .card-body, .card-footer,
.form-container, .wizard-frame,
.col, .col-12, [class^="col-"],
.row > *, section, article, div {
  background-color: #0e0d0c !important;
}

/* Only the slightly elevated surfaces get bg2 */
.card-header,
.modal-header,
.modal-footer,
.dropdown-menu,
.list-group-item {
  background-color: #161514 !important;
}

/* === CARD BORDERS === */
.card {
  border: 1px solid rgba(235,235,222,0.06) !important;
  border-radius: 0 !important;
}
.card-header {
  border-bottom: 1px solid rgba(235,235,222,0.06) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.75rem !important;
  color: #f5f2ea !important;
}

/* === BUTTONS → orange for primary only === */
.btn-primary,
.btn-primary:visited {
  background-color: #F57C00 !important;
  border-color: #F57C00 !important;
  color: #0e0d0c !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  filter: none !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: #f5f2ea !important;
  border-color: #f5f2ea !important;
  color: #0e0d0c !important;
  filter: none !important;
  box-shadow: none !important;
}

.btn-outline-secondary, .btn-secondary, .btn-light, .btn-default {
  background-color: #161514 !important;
  border: 1px solid rgba(235,235,222,0.12) !important;
  color: #7a7668 !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.8rem !important;
  filter: none !important;
}
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover {
  border-color: #F57C00 !important;
  color: #F57C00 !important;
  background-color: #161514 !important;
}

.btn { border-radius: 0 !important; }

/* === TIME SLOT BUTTONS === */
#available-hours .btn,
#available-hours button,
.available-hours .btn {
  background-color: #161514 !important;
  border: 1px solid rgba(235,235,222,0.1) !important;
  color: #d4d0c8 !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}
#available-hours .btn:hover { border-color: #F57C00 !important; color: #F57C00 !important; }
#book-appointment-wizard #available-hours .selected-hour,
#available-hours .btn.active,
.available-hours .selected-hour {
  background-color: #F57C00 !important;
  border-color: #F57C00 !important;
  color: #0e0d0c !important;
}

/* === FORM ELEMENTS === */
.form-control, .form-select, input[type="text"],
input[type="email"], input[type="tel"], input[type="password"],
textarea, select {
  background-color: #161514 !important;
  border: 1px solid rgba(235,235,222,0.1) !important;
  color: #d4d0c8 !important;
  border-radius: 0 !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus {
  background-color: #161514 !important;
  border-color: #F57C00 !important;
  color: #f5f2ea !important;
  box-shadow: 0 0 0 0.15rem rgba(245,124,0,0.15) !important;
}
.form-control::placeholder, input::placeholder { color: #3a3830 !important; }

.form-label, label {
  color: #d4d0c8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.input-group-text {
  background-color: #161514 !important;
  border-color: rgba(235,235,222,0.1) !important;
  color: #7a7668 !important;
  border-radius: 0 !important;
}

/* === FLATPICKR CALENDAR === */
.flatpickr-calendar {
  background: #161514 !important;
  border: 1px solid rgba(235,235,222,0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #d4d0c8 !important;
}

/* Orange header bar — match specificity (0,3,0) of company_color_style */
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday,
.flatpickr-calendar span.flatpickr-weekday {
  background: #F57C00 !important;
  color: #0e0d0c !important;
  fill: #0e0d0c !important;
}

/* Month dropdown — beat company_color_style (0,3,0) with (0,4,0) */
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #0e0d0c !important;
  color: #f5f2ea !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  background: #0e0d0c !important;
  outline: none !important;
}

/* Dropdown options — box-shadow trick for Chrome */
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background-color: #0e0d0c !important;
  color: #f5f2ea !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months option:checked {
  box-shadow: 0 0 10px 100px #0e0d0c inset !important;
  color: #f5f2ea !important;
}

/* Year input */
.flatpickr-calendar .flatpickr-months .flatpickr-current-month input.cur-year {
  background: transparent !important;
  color: #f5f2ea !important;
  outline: none !important;
}

/* Prev/next arrows */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  color: #0e0d0c !important;
  fill: #0e0d0c !important;
}
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg { fill: #0e0d0c !important; }

/* Days grid */
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
  background: #161514 !important;
}
.flatpickr-calendar .flatpickr-day {
  color: #d4d0c8 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.flatpickr-calendar .flatpickr-day:hover {
  background: rgba(245,124,0,0.15) !important;
  border-color: transparent !important;
  color: #F57C00 !important;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
  background: #F57C00 !important;
  border-color: #F57C00 !important;
  color: #0e0d0c !important;
  border-radius: 0 !important;
}
.flatpickr-calendar .flatpickr-day.today { border-color: #F57C00 !important; }
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay { color: #2a2820 !important; }

.numInputWrapper input { color: #0e0d0c !important; background: transparent !important; }
.numInputWrapper span { border-color: rgba(0,0,0,0.2) !important; }

/* === TIMEZONE / SELECT === */
#select-timezone, select {
  background-color: #161514 !important;
  border: 1px solid rgba(235,235,222,0.1) !important;
  color: #d4d0c8 !important;
  border-radius: 0 !important;
}

/* === NAV PILLS === */
.nav-pills .nav-link {
  color: #7a7668 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: 'Montserrat', sans-serif !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #F57C00 !important;
  color: #0e0d0c !important;
}
.nav .nav-link:not(.active) { color: #7a7668 !important; }

/* === FOOTER === */
#frame-footer {
  background-color: #0e0d0c !important;
  border-top: 1px solid rgba(235,235,222,0.04) !important;
  color: #7a7668 !important;
}
#frame-footer a { color: #7a7668 !important; }
#frame-footer a:hover { color: #F57C00 !important; }
#frame-footer .backend-link {
  display: none !important;
}

/* === LINKS === */
a { color: #d4d0c8 !important; }
a:hover { color: #F57C00 !important; }

/* === MODAL === */
.modal-content {
  background-color: #161514 !important;
  border: 1px solid rgba(235,235,222,0.08) !important;
  border-radius: 0 !important;
}
.modal-header { background: #1c1b19 !important; border-bottom: 1px solid rgba(235,235,222,0.06) !important; }
.modal-footer { border-top: 1px solid rgba(235,235,222,0.06) !important; background: #161514 !important; }
.modal-body { background: #161514 !important; color: #d4d0c8 !important; }

/* === DROPDOWN === */
.dropdown-menu {
  background-color: #161514 !important;
  border: 1px solid rgba(235,235,222,0.08) !important;
  border-radius: 0 !important;
}
.dropdown-item { color: #d4d0c8 !important; background: transparent !important; }
.dropdown-item:hover { background-color: rgba(245,124,0,0.08) !important; color: #F57C00 !important; }
.dropdown-item.active { background-color: #F57C00 !important; color: #0e0d0c !important; }

/* === LIST GROUP === */
.list-group-item {
  background-color: #161514 !important;
  border-color: rgba(235,235,222,0.06) !important;
  color: #d4d0c8 !important;
}
.list-group-item.active { background-color: #F57C00 !important; border-color: #F57C00 !important; color: #0e0d0c !important; }

/* === TABLE === */
.table { color: #d4d0c8 !important; border-color: rgba(235,235,222,0.06) !important; }
.table > :not(caption) > * > * { background-color: #0e0d0c !important; color: #d4d0c8 !important; }

/* === MISC === */
.text-muted { color: #7a7668 !important; }
.text-success { color: #26A69A !important; }
hr { border-color: rgba(235,235,222,0.06) !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0e0d0c; }
::-webkit-scrollbar-thumb { background: #F57C00; border-radius: 0; }

/* === COOKIE BANNER === */
.cc-window { background-color: #161514 !important; color: #d4d0c8 !important; border-top: 1px solid rgba(235,235,222,0.06) !important; }
.cc-btn.cc-allow { background-color: #F57C00 !important; color: #0e0d0c !important; border-radius: 0 !important; }