/* digenda theme for Easy!Appointments -- dark theme on digenda Ink background.
 * Loads the stock default Bootswatch and overrides brand + surface colours via
 * Bootstrap 5 CSS variables. Palette: Teal Deep #0E6E73, Core Bright #34C2C6,
 * Signal Red #E8261C, Ink #14181B, background #161818. */
@import url("default.css");

:root {
  --bs-primary: #0E6E73;
  --bs-primary-rgb: 14, 110, 115;
  --bs-link-color: #34C2C6;
  --bs-link-hover-color: #0E6E73;

  /* Dark surface */
  --bs-body-bg: #161818;
  --bs-body-bg-rgb: 22, 24, 24;
  --bs-body-color: #e6e8e8;
  --bs-body-color-rgb: 230, 232, 232;
  --bs-secondary-bg: #26292a;
  --bs-tertiary-bg: #2f3333;
  --bs-border-color: #3a3f3f;
  --bs-emphasis-color: #ffffff;

  --digenda-teal: #0E6E73;
  --digenda-teal-bright: #34C2C6;
  --digenda-red: #E8261C;
  --digenda-ink: #14181B;
}

/* Page background */
html, body { background-color: #161818 !important; color: #e6e8e8; }

/* Cards, panels, wells */
.card, .panel, .modal-content, .dropdown-menu, .list-group-item {
  background-color: #26292a;
  color: #e6e8e8;
  border-color: #3a3f3f;
}

/* Inputs */
.form-control, .form-select {
  background-color: #26292a;
  color: #e6e8e8;
  border-color: #3a3f3f;
}
.form-control:focus, .form-select:focus {
  background-color: #26292a;
  color: #e6e8e8;
  border-color: #0E6E73;
  box-shadow: 0 0 0 .25rem rgba(14,110,115,.35);
}

/* Primary buttons */
.btn-primary {
  --bs-btn-bg: #0E6E73;
  --bs-btn-border-color: #0E6E73;
  --bs-btn-hover-bg: #0b585c;
  --bs-btn-hover-border-color: #0b585c;
  --bs-btn-active-bg: #0b585c;
  --bs-btn-active-border-color: #094a4d;
  --bs-btn-disabled-bg: #0E6E73;
  --bs-btn-disabled-border-color: #0E6E73;
  --bs-btn-color: #ffffff;
}
.btn-outline-primary {
  --bs-btn-color: #34C2C6;
  --bs-btn-border-color: #0E6E73;
  --bs-btn-hover-bg: #0E6E73;
  --bs-btn-hover-border-color: #0E6E73;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #0E6E73;
  --bs-btn-active-border-color: #0E6E73;
}

/* Header / navbar */
.navbar.bg-primary,
#header,
#header.bg-primary,
.bg-primary { background-color: #0E6E73 !important; }

/* Links */
a { color: #34C2C6; }
a:hover { color: #0E6E73; }

.text-primary { color: #34C2C6 !important; }
.border-primary { border-color: #0E6E73 !important; }

/* Selected/active states in the booking wizard */
.btn-check:checked + .btn-outline-primary,
.nav-pills .nav-link.active {
  background-color: #0E6E73;
  border-color: #0E6E73;
  color: #ffffff;
}

/* Tables on dark */
.table { --bs-table-bg: transparent; --bs-table-color: #e6e8e8; }

/* --- flatpickr calendar: dark ------------------------------------------------
 * flatpickr ships a light theme that overrides body colours. Recolour it to the
 * digenda dark surface with teal accents. Class names are flatpickr standard. */
.flatpickr-calendar {
  background: #26292a;
  color: #e6e8e8;
  box-shadow: 0 3px 13px rgba(0,0,0,.5);
  border: 1px solid #3a3f3f;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: #26292a; }
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { border-top-color: #26292a; }
.flatpickr-months, .flatpickr-month { background: #0E6E73; color: #ffffff; fill: #ffffff; }
.flatpickr-current-month, .flatpickr-monthDropdown-months { color: #ffffff; fill: #ffffff; }
.flatpickr-monthDropdown-months { background: #0E6E73; }
.flatpickr-weekday { background: #0E6E73; color: #ffffff; }
.flatpickr-prev-month, .flatpickr-next-month { color: #ffffff; fill: #ffffff; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #ffffff; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #34C2C6; }
.flatpickr-days, .dayContainer { background: #26292a; }
.flatpickr-day { color: #e6e8e8; }
.flatpickr-day:hover { background: #2f3333; border-color: #2f3333; }
.flatpickr-day.today { border-color: #34C2C6; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: #0E6E73; border-color: #0E6E73; color: #ffffff;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: #5b6060;
}
.numInputWrapper span:hover { background: rgba(52,194,198,.1); }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: #e6e8e8; }

/* --- section headings on dark ----------------------------------------------- */
.booking-page h1, .booking-page h2, #booking .step-title,
.frame-title, #select-date .frame-title, h4.text-muted {
  color: #cfd3d3 !important;
}

/* --- footer language button ------------------------------------------------- */
#select-language, .language {
  background-color: #26292a !important;
  color: #e6e8e8 !important;
  border-color: #3a3f3f !important;
}

/* Hide the "<service> | <provider>" line under the company name in the booking
 * header -- digenda wants only the company name there. */
.display-booking-selection { display: none !important; }

/* Hide the whole company-name block in the booking header (logo + text): the
 * embedding page already shows the digenda logo top-left, so it is redundant
 * here and the white logo clashed with the teal header. */
#company-name { display: none !important; }

/* --- embed layout fixes -----------------------------------------------------
 * Trim outer whitespace so the booking page sits flush inside the iframe (the
 * v2 height reporter measures content height; stray body margins would inflate
 * it and leave a gap). */
body { margin: 0 !important; padding: 8px 0 8px !important; }
#main, body > .container { margin-top: 0 !important; margin-bottom: 0 !important; }

/* --- header: slim + centered steps -----------------------------------------
 * #company-name is hidden, so only #steps remains. Center it and slim the
 * header down (less vertical padding). #header is a flex row in EA; centering
 * both axes puts the step badges in the middle. */
#header {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* Center the step badges regardless of EA's default layout. Force a centered
 * flex row on #steps itself; text-align:center covers the inline-block case. */
#steps {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
  width: 100% !important;
  float: none !important;
  text-align: center !important;
}
/* Center the number inside each step box. Do NOT force display here -- EA hides
 * step-1 via inline display:none, and an !important display would unhide it.
 * Only target steps that are NOT inline-hidden, and center via text + line. */
#steps .book-step {
  float: none !important;
  text-align: center !important;
}
#steps .book-step:not([style*="display: none"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- muted text on dark ------------------------------------------------------
 * EA uses .text-muted / small helper text (e.g. "check your spam folder") which
 * is near-black on the dark background -- unreadable and an accessibility fail.
 * Lift it to a legible mid-grey. */
.text-muted, small.text-muted, .form-text, .help-block, .text-secondary {
  color: #a9afaf !important;
}