/* =========================================================================
   E Factor — Easy!Appointments integration skin
   --------------------------------------------------------------------------
   Drop this file into assets/css/efactor-booking.css on the Easy!Appointments
   install and load it AFTER assets/css/frontend.css (the easy way is to add
   one <link> right before </head> in booking_layout.php — see the README).

   It overrides the default EA theme colours with the E Factor dark palette
   (--bg #0E1B2C, --surface #16263A, --ink #F5EFE2, --accent #E5B547) and
   re-skins Flatpickr, the wizard step indicators, the header band, and the
   footer so book.efactor.co.za reads as one product with efactor.co.za.

   Tokens are duplicated from demo-dark-full/index.html :root — if you change
   a token in the marketing site, change it here too.
   ========================================================================= */

:root {
  /* E Factor palette — keep in sync with demo-dark-full/index.html */
  --ef-bg:        #0E1B2C;   /* body / page */
  --ef-bg-deep:   #0A1622;   /* footer / gradient stop */
  --ef-surface:   #16263A;   /* cards, header band, footer */
  --ef-ink:       #F5EFE2;   /* primary text */
  --ef-ink-soft:  #B8B0A1;   /* secondary text */
  --ef-accent:    #E5B547;   /* gold — CTA / link */
  --ef-accent-2:  #F2C75E;   /* gold hover */
  --ef-accent-soft:#2A3B52;  /* gold on dark, muted */
  --ef-border:    #243349;   /* 1px dividers */
  --ef-focus:     #E5B547;
  --ef-radius:    10px;

  /* Override EA's Bootstrap colour hooks so its existing bg-primary / text-white
     etc. utilities pick up the E Factor palette without us touching every class. */
  --bs-primary:        #E5B547;
  --bs-primary-rgb:    229, 181, 71;
  --bs-body-bg:        #0E1B2C;
  --bs-body-color:     #F5EFE2;
  --bs-border-color:   #243349;
  --bs-secondary-color:#B8B0A1;
  --bs-link-color:     #E5B547;
  --bs-link-hover-color:#F2C75E;
}

/* -------------------------------------------------------------------------
   PAGE BACKGROUND
   ------------------------------------------------------------------------- */

html, body {
  background: var(--ef-bg) !important;
  color: var(--ef-ink) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* The dark page background around the wizard card */
body > #main {
  background: var(--ef-bg);
}

/* -------------------------------------------------------------------------
   THE WIZARD CARD
   ------------------------------------------------------------------------- */

#book-appointment-wizard {
  background: var(--ef-surface) !important;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  color: var(--ef-ink);
}

@media (min-width: 768px) {
  #book-appointment-wizard {
    border-radius: var(--ef-radius) !important;
  }
}

/* -------------------------------------------------------------------------
   HEADER BAND — #header gets the dark navy + gold accent treatment.
   EA's default is `bg-primary` (green) which we kill here.
   ------------------------------------------------------------------------- */

#header {
  background: var(--ef-surface) !important;
  background-image: radial-gradient(70% 100% at 50% 0%, transparent 0%, rgba(14,27,44,.4) 70%, #0A1622 100%) !important;
  border-bottom: 1px solid var(--ef-border);
  padding: 1.25rem 1rem;
}

@media (min-width: 768px) {
  #header {
    padding: 1.5rem 1.5rem;
  }
}

#company-name {
  color: var(--ef-ink) !important;
}

#company-logo {
  /* Keep EA's logo but tint it gently if it's a flat PNG with no transparency */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.display-booking-selection {
  color: var(--ef-ink-soft) !important;
  margin-top: .35rem;
}

/* -------------------------------------------------------------------------
   STEP INDICATORS — the four pills in the top-right
   EA defaults: active = white circle with primary text, inactive = translucent
   black. We keep the structure, swap the colours to gold/charcoal.
   ------------------------------------------------------------------------- */

#steps .book-step {
  font-family: "Inter", sans-serif !important;
  transition: all .3s linear;
}

#book-appointment-wizard .book-step.active-step {
  background: var(--ef-accent) !important;
  padding: 7px !important;
  margin-right: 13px !important;
  margin-top: 0 !important;
}

#book-appointment-wizard .book-step.active-step strong {
  color: var(--ef-bg) !important;
  font-size: 21px !important;
  font-weight: 700;
}

#book-appointment-wizard .book-step:not(.active-step) {
  background: rgba(245, 239, 226, .12) !important;
  border: 1px solid var(--ef-border) !important;
  padding: 8px !important;
  margin-right: 12px !important;
  margin-top: 6px !important;
}

#book-appointment-wizard .book-step:not(.active-step) strong {
  color: var(--ef-ink-soft) !important;
  font-size: 12px !important;
}

/* -------------------------------------------------------------------------
   WIZARD FRAMES — content panes inside the card
   ------------------------------------------------------------------------- */

.wizard-frame {
  color: var(--ef-ink);
}

.frame-container {
  background: transparent;
}

.frame-title {
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
  color: var(--ef-ink) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
}

@media (min-width: 768px) {
  .frame-title { font-size: 1.75rem !important; }
}

/* -------------------------------------------------------------------------
   FORM CONTROLS — inputs, selects, textareas
   ------------------------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  background-color: var(--ef-bg) !important;
  border: 1px solid var(--ef-border) !important;
  color: var(--ef-ink) !important;
  border-radius: var(--ef-radius) !important;
  min-height: 48px;
  padding: .65rem .9rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ef-ink-soft);
  opacity: .7;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
  border-color: var(--ef-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 181, 71, .25) !important;
  outline: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E5B547'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  background-size: 14px 14px !important;
}

/* Select option text colour — most browsers ignore background-color on <option>
   but Chrome respects it; we set both for safety. */
select.form-select option,
select option {
  background-color: var(--ef-surface);
  color: var(--ef-ink);
}

/* Disabled / readonly form controls */
.form-control:disabled,
.form-select:disabled,
input[readonly] {
  background-color: rgba(14,27,44,.6) !important;
  opacity: .65;
}

/* Labels */
.form-label,
label,
.control-label {
  color: var(--ef-ink) !important;
  font-weight: 600;
  margin-bottom: .35rem;
}

label.fs-5 strong {
  color: var(--ef-accent);
}

/* -------------------------------------------------------------------------
   BUTTONS — wizard nav (Next / Back / Confirm)
   ------------------------------------------------------------------------- */

.btn {
  border-radius: var(--ef-radius) !important;
  font-weight: 600 !important;
  min-height: 48px;
  padding: .65rem 1.25rem !important;
  font-family: "Inter", sans-serif !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primary — gold, used for Confirm */
.btn-primary,
#book-appointment-submit,
.button-next:not(.btn-dark) {
  background-color: var(--ef-accent) !important;
  border-color: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
}
.btn-primary:hover,
#book-appointment-submit:hover,
.button-next:not(.btn-dark):hover {
  background-color: var(--ef-accent-2) !important;
  border-color: var(--ef-accent-2) !important;
  color: var(--ef-bg) !important;
}

/* "Next" defaults to .btn-dark — repaint to gold-on-navy outline */
.btn-dark,
.button-next.btn-dark {
  background-color: transparent !important;
  border: 1px solid var(--ef-accent) !important;
  color: var(--ef-accent) !important;
}
.btn-dark:hover,
.button-next.btn-dark:hover {
  background-color: var(--ef-accent-soft) !important;
  color: var(--ef-accent) !important;
}

/* Back — outline secondary */
.btn-outline-secondary,
.button-back {
  background-color: transparent !important;
  border: 1px solid var(--ef-border) !important;
  color: var(--ef-ink) !important;
}
.btn-outline-secondary:hover,
.button-back:hover {
  background-color: rgba(245,239,226,.06) !important;
  border-color: var(--ef-ink-soft) !important;
  color: var(--ef-ink) !important;
}

/* Link button used to refresh the captcha */
.btn-link {
  color: var(--ef-accent) !important;
}
.btn-link:hover {
  color: var(--ef-accent-2) !important;
}

/* -------------------------------------------------------------------------
   AVAILABLE-HOURS — time slot buttons
   ------------------------------------------------------------------------- */

#available-hours .available-hour {
  background-color: var(--ef-bg) !important;
  border: 1px solid var(--ef-border) !important;
  color: var(--ef-ink) !important;
  border-radius: var(--ef-radius) !important;
  padding: .6rem .8rem !important;
  font-weight: 600;
  margin-bottom: 10px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#available-hours .available-hour:hover {
  border-color: var(--ef-accent) !important;
  color: var(--ef-accent) !important;
}

#available-hours .selected-hour,
#available-hours .selected-hour:hover {
  background-color: var(--ef-accent) !important;
  border-color: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
}

/* -------------------------------------------------------------------------
   CAPTCHA row
   ------------------------------------------------------------------------- */

.captcha-title {
  color: var(--ef-ink) !important;
}

.captcha-image {
  border: 1px solid var(--ef-border) !important;
  background: var(--ef-bg);
}

/* -------------------------------------------------------------------------
   CONFIRMATION DETAILS (frame 4)
   ------------------------------------------------------------------------- */

#appointment-details,
#customer-details {
  color: var(--ef-ink) !important;
}

#appointment-details strong,
#customer-details strong {
  color: var(--ef-accent);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   CHECKBOXES + RADIOS (terms & privacy)
   ------------------------------------------------------------------------- */

.form-check-input {
  background-color: var(--ef-bg) !important;
  border: 1px solid var(--ef-border) !important;
  width: 1.1em;
  height: 1.1em;
  margin-top: .2em;
}
.form-check-input:checked {
  background-color: var(--ef-accent) !important;
  border-color: var(--ef-accent) !important;
}
.form-check-input:focus {
  border-color: var(--ef-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 181, 71, .25) !important;
}
.form-check-label {
  color: var(--ef-ink) !important;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   FOOTER — "Powered by" + language/login badges
   ------------------------------------------------------------------------- */

#frame-footer {
  background: var(--ef-bg-deep) !important;
  border-top: 1px solid var(--ef-border) !important;
  color: var(--ef-ink-soft) !important;
}

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

.footer-powered-by,
.footer-options {
  color: var(--ef-ink-soft) !important;
}

/* Language badge */
#select-language,
.badge.bg-secondary {
  background-color: var(--ef-accent-soft) !important;
  color: var(--ef-ink) !important;
  border: 1px solid var(--ef-border);
}

/* Login badge (only shown if display_login_button is on) */
.backend-link,
.badge.bg-primary {
  background-color: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
  font-weight: 600;
}
.backend-link:hover {
  background-color: var(--ef-accent-2) !important;
  color: var(--ef-bg) !important;
}

/* -------------------------------------------------------------------------
   FLATPICKR CALENDAR — matches dark palette
   ------------------------------------------------------------------------- */

.flatpickr-calendar {
  background: var(--ef-surface) !important;
  border: 1px solid var(--ef-border) !important;
  color: var(--ef-ink) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}

.flatpickr-calendar.inline {
  margin: auto;
}

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
.flatpickr-weekdays span.flatpickr-weekday {
  background: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--ef-bg) !important;
  font-weight: 700;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(14,27,44,.15) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--ef-bg) !important;
  fill: var(--ef-bg) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--ef-bg) !important;
  background: rgba(14,27,44,.15) !important;
}

span.flatpickr-day,
.flatpickr-day {
  color: var(--ef-ink) !important;
  border: none !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--ef-accent-soft) !important;
  border-color: var(--ef-accent-soft) !important;
  color: var(--ef-accent) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
  background: var(--ef-accent) !important;
  border-color: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--ef-ink-soft) !important;
  opacity: .35;
}

.flatpickr-today {
  border-color: var(--ef-accent) !important;
}

.flatpickr-innerContainer,
.flatpickr-dayContainer {
  background: var(--ef-surface) !important;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  background: var(--ef-bg-deep) !important;
  color: var(--ef-ink-soft) !important;
}

/* Flatpickr input that the calendar pops from */
input.flatpickr-input,
.flatpickr-wrapper input {
  background-color: var(--ef-bg) !important;
  color: var(--ef-ink) !important;
  border: 1px solid var(--ef-border) !important;
  border-radius: var(--ef-radius) !important;
  caret-color: var(--ef-accent);
}

/* -------------------------------------------------------------------------
   ACCOUNT LAYOUT — login / forgot-password / register
   ------------------------------------------------------------------------- */

.card,
.bg-body {
  background-color: var(--ef-surface) !important;
  color: var(--ef-ink) !important;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius) !important;
}

.card-header,
.card-footer {
  background-color: var(--ef-bg-deep) !important;
  border-color: var(--ef-border) !important;
  color: var(--ef-ink-soft) !important;
}

.card-title {
  color: var(--ef-ink) !important;
  font-family: "Lora", Georgia, serif;
}

/* -------------------------------------------------------------------------
   COOKIE NOTICE + PRIVACY/TERMS MODALS
   ------------------------------------------------------------------------- */

.cc-window {
  background: var(--ef-surface) !important;
  color: var(--ef-ink) !important;
  border: 1px solid var(--ef-border);
}
.cc-window .cc-btn {
  background-color: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
  border-color: var(--ef-accent) !important;
}
.cc-window .cc-btn.cc-secondary {
  background-color: transparent !important;
  color: var(--ef-ink) !important;
  border-color: var(--ef-border) !important;
}

.modal-content {
  background: var(--ef-surface) !important;
  color: var(--ef-ink) !important;
  border: 1px solid var(--ef-border);
}
.modal-header,
.modal-footer {
  border-color: var(--ef-border) !important;
  color: var(--ef-ink) !important;
}
.modal-title { color: var(--ef-ink) !important; }

/* Bootstrap backdrop tint */
.modal-backdrop.show { opacity: .7; background: #000; }

/* -------------------------------------------------------------------------
   FOCUS RING (matches the marketing site's a11y ring)
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-check-input:focus-visible {
  outline: 3px solid var(--ef-focus) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   LOADING SPINNER — gold tint to match palette
   ------------------------------------------------------------------------- */

.animation::after {
  border-color: rgba(229, 181, 71, .25) !important;
  border-bottom-color: var(--ef-accent) !important;
}

/* -------------------------------------------------------------------------
   PRINT — keep the booking page legible on paper
   ------------------------------------------------------------------------- */

@media print {
  html, body { background: #fff !important; color: #000 !important; }
  #book-appointment-wizard {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
  #header, #frame-footer { background: #fff !important; color: #000 !important; }
  .frame-title, #company-name { color: #000 !important; }
  .form-control, .form-select {
    background: #fff !important; color: #000 !important;
    border: 1px solid #999 !important;
  }
}
/* =========================================================================
   PATCH 2026-07-28 — audit round 1
   ========================================================================= */

/* (1) Step indicators — beat inline styles */
#book-appointment-wizard #step-1 {
  background-color: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
  border: 0 !important;
}
#book-appointment-wizard #step-1 strong { color: var(--ef-bg) !important; }

#book-appointment-wizard [id^="step-"]:not(#step-1) {
  background-color: rgba(245, 239, 226, .12) !important;
  border: 1px solid var(--ef-border) !important;
  color: var(--ef-ink-soft) !important;
}
#book-appointment-wizard [id^="step-"]:not(#step-1) strong {
  color: var(--ef-ink-soft) !important;
}

/* (4) Lora font */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap");

/* (6) text-muted on frame-title */
#book-appointment-wizard .frame-title,
#book-appointment-wizard .frame-title.text-muted {
  color: var(--ef-ink) !important;
}

/* (7) btn-dark hover/active states */
.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus,
.btn-dark:focus-visible,
.button-next.btn-dark:hover,
.button-next.btn-dark:focus,
.button-next.btn-dark:active {
  background-color: var(--ef-accent-soft) !important;
  border-color: var(--ef-accent) !important;
  color: var(--ef-accent) !important;
}

/* =========================================================================
   PATCH 2026-07-28 — round 2 — flatpickr year/month readability
   --------------------------------------------------------------------------
   The Material Green theme (material_green.min.css) uses `color: inherit`
   on .flatpickr-current-month, .flatpickr-current-month span.cur-month,
   and .flatpickr-current-month input.cur-year. The colour fallback chain
   varies by browser — on some browsers the year digits render gold-on-gold
   (invisible) because the parent .flatpickr-months overrides inherited
   colour further down and the input.cur-year override is reaching the
   input but the leading "20" looks washed out against the gold background
   due to font-weight: 300 not being overridden.

   This patch forces:
     - .flatpickr-current-month to navy text (no inherit)
     - .flatpickr-current-month span.cur-month (month name) to navy + bold
     - input.cur-year (year) to navy + bold + explicit bg
     - the increment arrows in .numInputWrapper to invisible so they
       don't sit on top of the year digits on narrow widths
   ========================================================================= */

.flatpickr-current-month,
.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--ef-bg) !important;
  font-weight: 700 !important;
}

.flatpickr-current-month input.cur-year {
  background: transparent !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ef-bg) !important;
  caret-color: var(--ef-bg) !important;
  font-size: inherit !important;
  /* the year is 4 chars wide; vendor sets width:6ch via wrapper */
  padding: 0 0 0 .5ch !important;
  text-align: center;
}

/* Hide the increment/decrement arrows on the year input — they sit on top
   of the year digits and on Linux/Chrome they're visible as white-tinted
   spans, which can wash the year out. The arrows are decorative; the year
   is still editable by clicking the input directly. */
.flatpickr-current-month .numInputWrapper span {
  display: none !important;
}

/* Belt and braces: the .flatpickr-monthDropdown-months <select> for the
   month name. Vendor sets background: #1bbc9b; we override to gold + navy. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--ef-accent) !important;
  color: var(--ef-bg) !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding: 0 0 0 .5ch !important;
}

/* The month dropdown options (when opened) — keep them dark on the
   surface so the menu doesn't appear as a white flash on dark backgrounds. */
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--ef-surface) !important;
  color: var(--ef-ink) !important;
}

/* Prev/next month chevrons — make sure they stay visible on gold */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--ef-bg) !important;
}

/* Disable language selection */
#select-language { display: none !important; }