/* ═══════════════════════════════════════════════════════════════
   MayaLogic — EasyAppointments Dark Theme
   Matches: mayalogic.us website palette
   --background: #0a1a20  --primary: #4de8e8
   --card:       #0c2025  --border:  #164955
   --muted:      #0f3039  --muted-fg:#36a5a5
   Font: Source Code Pro (monospace)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap');

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

html, body {
  background: #0a1a20 !important;
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', 'Courier New', monospace !important;
  min-height: 100% !important;
}

#main {
  background: #0a1a20 !important;
  min-height: 100vh !important;
  padding: 2rem 0 !important;
}

/* ── Wizard container ─────────────────────────────────────────── */
#book-appointment-wizard {
  background: #0c2025 !important;
  border: 1px solid #164955 !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 40px rgba(77,232,232,0.08) !important;
  overflow: hidden !important;
}

/* ── Header bar ───────────────────────────────────────────────── */
#book-appointment-wizard #header {
  background: #0c2025 !important;
  border-bottom: 1px solid #164955 !important;
  padding: 20px 20px !important;
}

#book-appointment-wizard #company-name {
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-size: 1.3rem !important;
}

#book-appointment-wizard #company-name .display-booking-selection {
  color: #36a5a5 !important;
  border-right-color: #164955 !important;
  font-family: 'Source Code Pro', monospace !important;
}

/* ── Step indicators (1, 2, 3) ────────────────────────────────── */
#book-appointment-wizard .book-step {
  background: #164955 !important;
  border-radius: 0 !important;
  border: 1px solid #164955 !important;
  transition: all 0.2s ease !important;
}

#book-appointment-wizard .book-step strong {
  color: #36a5a5 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 13px !important;
}

#book-appointment-wizard .active-step {
  background: #4de8e8 !important;
  border-radius: 0 !important;
  border: 1px solid #4de8e8 !important;
}

#book-appointment-wizard .active-step strong {
  color: #0a1a20 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 700 !important;
}

/* ── Wizard frames ────────────────────────────────────────────── */
#book-appointment-wizard .wizard-frame {
  background: #0c2025 !important;
  padding: 20px !important;
}

#book-appointment-wizard .frame-container {
  background: #0c2025 !important;
}

/* ── Section title ("APPOINTMENT DATE & TIME") ────────────────── */
#book-appointment-wizard .frame-container .frame-title {
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  font-size: 1rem !important;
}

/* ── Flatpickr calendar ───────────────────────────────────────── */
.flatpickr-calendar {
  background: #0c2025 !important;
  border: 1px solid #164955 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  font-family: 'Source Code Pro', monospace !important;
}

.flatpickr-months {
  background: #164955 !important;
  border-bottom: 1px solid #164955 !important;
  padding: 4px 0 !important;
}

.flatpickr-month,
.flatpickr-prev-month,
.flatpickr-next-month,
.flatpickr-current-month {
  color: #4de8e8 !important;
  fill: #4de8e8 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  background: transparent !important;
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border: none !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #4de8e8 !important;
}

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

.flatpickr-weekdays {
  background: #0c2025 !important;
  border-bottom: 1px solid #164955 !important;
}

span.flatpickr-weekday {
  color: #36a5a5 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  background: transparent !important;
}

.flatpickr-days {
  border-left: 1px solid #164955 !important;
  border-right: 1px solid #164955 !important;
  background: #0c2025 !important;
}

.dayContainer {
  background: #0c2025 !important;
}

.flatpickr-day {
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.82rem !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #164955 !important;
  border-color: #164955 !important;
  color: #4de8e8 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #4de8e8 !important;
  border-color: #4de8e8 !important;
  color: #0a1a20 !important;
  font-weight: 700 !important;
}

.flatpickr-day.today {
  border-color: #36a5a5 !important;
  color: #4de8e8 !important;
}

.flatpickr-day.today:hover {
  background: #164955 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #164955 !important;
}

/* ── Time slots ───────────────────────────────────────────────── */
#book-appointment-wizard #available-hours {
  scrollbar-width: thin !important;
  scrollbar-color: #164955 #0a1a20 !important;
}

#book-appointment-wizard #available-hours::-webkit-scrollbar { width: 4px; }
#book-appointment-wizard #available-hours::-webkit-scrollbar-track { background: #0a1a20; }
#book-appointment-wizard #available-hours::-webkit-scrollbar-thumb { background: #164955; }

#book-appointment-wizard #available-hours .available-hour {
  background: #0c2025 !important;
  border: 1px solid #164955 !important;
  color: #36a5a5 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
  transition: all 0.15s ease !important;
}

#book-appointment-wizard #available-hours .available-hour:hover {
  border-color: #4de8e8 !important;
  color: #4de8e8 !important;
  background: #164955 !important;
}

#book-appointment-wizard #available-hours .selected-hour {
  background: #4de8e8 !important;
  border-color: #4de8e8 !important;
  color: #0a1a20 !important;
  font-weight: 700 !important;
}

/* ── Timezone label + select ──────────────────────────────────── */
#book-appointment-wizard label,
#book-appointment-wizard .form-label {
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}

/* ── Select2 (timezone dropdown) ──────────────────────────────── */
.select2-container--default .select2-selection--single {
  background: #0f3039 !important;
  border: 1px solid #164955 !important;
  border-radius: 0 !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.82rem !important;
  line-height: 36px !important;
  padding-left: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #36a5a5 transparent transparent transparent !important;
}

.select2-container--default.select2-container--open
  .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #36a5a5 transparent !important;
}

.select2-dropdown {
  background: #0c2025 !important;
  border: 1px solid #164955 !important;
  border-radius: 0 !important;
}

.select2-search--dropdown .select2-search__field {
  background: #0f3039 !important;
  border: 1px solid #164955 !important;
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  border-radius: 0 !important;
  outline: none !important;
}

.select2-container--default .select2-results__option {
  color: #36a5a5 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.8rem !important;
  background: transparent !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #164955 !important;
  color: #4de8e8 !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: #0f3039 !important;
  color: #4de8e8 !important;
}

/* ── Form fields (steps 2-3: customer info) ───────────────────── */
#book-appointment-wizard input[type="text"],
#book-appointment-wizard input[type="email"],
#book-appointment-wizard input[type="tel"],
#book-appointment-wizard input[type="number"],
#book-appointment-wizard textarea,
#book-appointment-wizard select,
.form-control {
  background: #0f3039 !important;
  border: 1px solid #164955 !important;
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.85rem !important;
  border-radius: 0 !important;
  transition: border-color 0.15s ease !important;
}

#book-appointment-wizard input:focus,
#book-appointment-wizard textarea:focus,
#book-appointment-wizard select:focus,
.form-control:focus {
  outline: none !important;
  border-color: #4de8e8 !important;
  box-shadow: 0 0 0 2px rgba(77,232,232,0.15) !important;
  background: #0f3039 !important;
  color: #4de8e8 !important;
}

#book-appointment-wizard input::placeholder,
#book-appointment-wizard textarea::placeholder {
  color: #36a5a5 !important;
  opacity: 0.7 !important;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary,
#button-next,
#book-appointment-submit {
  background: #4de8e8 !important;
  border-color: #4de8e8 !important;
  color: #0a1a20 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  transition: opacity 0.15s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
#button-next:hover {
  background: #4de8e8 !important;
  border-color: #4de8e8 !important;
  color: #0a1a20 !important;
  opacity: 0.88 !important;
}

.btn-secondary,
.btn-default,
#button-back {
  background: transparent !important;
  border: 1px solid #164955 !important;
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
}

.btn-secondary:hover,
.btn-default:hover,
#button-back:hover {
  background: #164955 !important;
  border-color: #4de8e8 !important;
  color: #4de8e8 !important;
}

/* ── Footer bar ───────────────────────────────────────────────── */
#book-appointment-wizard #frame-footer {
  background: #0a1a20 !important;
  border-top: 1px solid #164955 !important;
  padding: 12px 15px !important;
}

#book-appointment-wizard #frame-footer small,
#book-appointment-wizard #frame-footer a,
#book-appointment-wizard #frame-footer span {
  color: #36a5a5 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 0.68rem !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
}

#book-appointment-wizard #frame-footer a:hover {
  color: #4de8e8 !important;
}

/* Login / backend button */
#book-appointment-wizard .backend-link,
#login-button {
  background: #4de8e8 !important;
  border-color: #4de8e8 !important;
  color: #0a1a20 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
}

/* ── Success / confirmation frame ─────────────────────────────── */
#success-frame,
#message-frame {
  background: #0c2025 !important;
}

#success-frame .alert-success {
  background: rgba(77,232,232,0.1) !important;
  border: 1px solid #4de8e8 !important;
  color: #4de8e8 !important;
  border-radius: 0 !important;
  font-family: 'Source Code Pro', monospace !important;
}

#success-frame p,
#success-frame h4,
#message-frame p,
#message-frame h4 {
  color: #4de8e8 !important;
  font-family: 'Source Code Pro', monospace !important;
}

/* ── Cancel page header ───────────────────────────────────────── */
.booking-header-bar {
  background: #0c2025 !important;
  border-bottom: 1px solid #164955 !important;
  color: #4de8e8 !important;
}

/* ── Misc text ────────────────────────────────────────────────── */
p, span, div, small, h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Code Pro', 'Courier New', monospace !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #4de8e8 !important;
}

/* Horizontal rules */
hr {
  border-color: #164955 !important;
  opacity: 1 !important;
}

/* Alerts */
.alert {
  border-radius: 0 !important;
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a1a20; }
::-webkit-scrollbar-thumb { background: #164955; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #36a5a5; }