/* BBZ brand stylesheet for Easy!Appointments 1.6.
   Intended location: /date/assets/css/bbz-brand.css
   Copy the existing self-hosted fonts to /date/assets/fonts/bbz/ first. */
@font-face { font-family: 'Poppins'; src: url('../fonts/bbz/poppins-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/bbz/poppins-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/bbz/poppins-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/bbz/poppins-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Amatic SC'; src: url('../fonts/bbz/amatic-sc-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
:root {
  --bbz-turquoise: #0193B1;
  --bbz-turquoise-dark: #0B6A7F;
  --bbz-charcoal: #2F2A28;
  --bbz-cream: #FAF6F0;
  --bbz-sand: #EADCCB;
  --bbz-sage: #DCE6DA;
  --bbz-coral: #D98A6A;
  --bbz-terracotta: #B86A4F;
  --bbz-white: #FFFFFF;
  --bs-body-font-family: 'Poppins', system-ui, sans-serif;
  --bs-body-color: var(--bbz-charcoal);
  --bs-body-bg: var(--bbz-cream);
}
body { font-family: 'Poppins', system-ui, sans-serif; color: var(--bbz-charcoal); background: var(--bbz-cream); }
input, select, textarea, button { font-family: inherit; }
h1, h2 { font-family: 'Amatic SC', 'Arial Narrow', sans-serif; font-weight: 700; line-height: 1.15; }
a { color: var(--bbz-turquoise-dark); }
a:hover { color: var(--bbz-terracotta); }
.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #2F2A28;
  --bs-btn-border-color: #2F2A28;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #0B6A7F;
  --bs-btn-hover-border-color: #0B6A7F;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #0B6A7F;
  --bs-btn-active-border-color: #0B6A7F;
}
.form-control, .form-select { background-color: #FFFFFF; color: #2F2A28; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #0B6A7F; outline-offset: 3px; }

/* Keep app controls legible; use the display face only for larger headings. */
body { --bs-primary: #0B6A7F; --bs-primary-rgb: 11,106,127; --bs-link-color: #0B6A7F; --bs-link-hover-color: #B86A4F; }
body, .form-control, .form-select, .btn, .flatpickr-calendar, .select2-container { font-family: 'Poppins', system-ui, sans-serif; }
h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
h2 { font-size: clamp(2.2rem, 4vw, 3rem); }
body a { color: #0B6A7F; }
body a:hover { color: #B86A4F; }
#book-appointment-wizard { border: 1px solid #EADCCB; border-radius: 0; box-shadow: 0 8px 30px rgb(47 42 40 / 8%); }
#book-appointment-wizard #header { background: #FAF6F0 !important; color: #2F2A28 !important; border-top: 5px solid #0193B1 !important; border-bottom: 1px solid #EADCCB; }
#book-appointment-wizard #company-name { font-family: 'Amatic SC', 'Arial Narrow', sans-serif; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); color: #2F2A28; }
#book-appointment-wizard #company-name .display-booking-selection { font-family: 'Poppins', system-ui, sans-serif; font-size: .85rem; color: #0B6A7F !important; filter: none !important; }
#book-appointment-wizard .book-step { background: #EADCCB !important; color: #2F2A28 !important; filter: none !important; }
#book-appointment-wizard .book-step.active-step { background: #0B6A7F !important; color: #FFFFFF !important; }
#book-appointment-wizard .book-step strong { color: inherit !important; filter: none !important; }
#book-appointment-wizard .wizard-frame { background: #FFFFFF; }
#book-appointment-wizard #frame-footer { background: #FAF6F0; border-top: 1px solid #EADCCB; }
.btn { border-radius: 0; }
body .btn-primary { color: #FFFFFF !important; background: #2F2A28 !important; border-color: #2F2A28 !important; }
body .btn-primary:hover, body .btn-primary:active { color: #FFFFFF !important; background: #0B6A7F !important; border-color: #0B6A7F !important; }
.btn-outline-primary { --bs-btn-color: #0B6A7F; --bs-btn-border-color: #0B6A7F; --bs-btn-hover-bg: #0B6A7F; --bs-btn-hover-border-color: #0B6A7F; --bs-btn-active-bg: #0B6A7F; --bs-btn-active-border-color: #0B6A7F; }
body .form-control, body .form-select { border-radius: 0; border-color: #8D8780; }
body .form-control:focus, body .form-select:focus { border-color: #0B6A7F !important; box-shadow: 0 0 0 .2rem rgb(11 106 127 / 20%) !important; filter: none !important; }
body .form-check-input:checked { background-color: #0B6A7F !important; border-color: #0B6A7F !important; }
body .flatpickr-calendar .flatpickr-months, body .flatpickr-calendar .flatpickr-month, body .flatpickr-calendar .flatpickr-weekdays, body .flatpickr-calendar span.flatpickr-weekday, body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { background: #0B6A7F !important; color: #FFFFFF !important; }
body .flatpickr-day.selected, body .flatpickr-day.startRange, body .flatpickr-day.endRange { background: #0B6A7F !important; border-color: #0B6A7F !important; color: #FFFFFF !important; }
#book-appointment-wizard #available-hours .selected-hour { background: #0B6A7F !important; border-color: #0B6A7F !important; color: #FFFFFF !important; }
body #header:not(#book-appointment-wizard #header) { border-top: 4px solid #0193B1; }
#frame-footer .backend-link { background: #0B6A7F !important; color: #FFFFFF !important; }
@media (max-width: 575px) { #book-appointment-wizard { border-left: 0; border-right: 0; } }
#book-appointment-wizard #header #company-name { color: #2F2A28 !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; font-weight: 700 !important; line-height: 1.15; }
#book-appointment-wizard #header #company-logo { background: #0B6A7F; padding: 8px; border-radius: 0; }
#book-appointment-wizard #header #steps .book-step strong { color: #2F2A28 !important; }
#book-appointment-wizard #header #steps .book-step.active-step strong { color: #FFFFFF !important; }
#book-appointment-wizard .frame-title { color: #2F2A28 !important; font-weight: 700 !important; }
#book-appointment-wizard #header { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
#book-appointment-wizard #header #company-name { width: 100%; float: none !important; margin: 0 !important; }
#book-appointment-wizard #header #steps { display: flex; flex-wrap: nowrap; gap: .65rem; width: auto; align-self: flex-start; }
#book-appointment-wizard #header #steps .book-step { float: none !important; margin: 0 !important; opacity: 1 !important; flex: 0 0 auto; }


body .text-primary { color: #0B6A7F !important; }
.card img[alt="Easy!Appointments"] { background: #0B6A7F; padding: 8px; border-radius: 0; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #8D8780 !important; }

/* Requested header refinement, 19 September 2026. */
#main.container { max-width: 1100px; }
#book-appointment-wizard { width: 100% !important; max-width: 1000px; }
#book-appointment-wizard #header { background: #0193B1 !important; color: #FFFFFF !important; flex-direction: column !important; border-top-color: #0193B1 !important; }
#book-appointment-wizard #header #company-name { color: #FFFFFF !important; font-size: 1.9rem !important; }
#book-appointment-wizard #header #company-logo { background: transparent; padding: 0; }
#book-appointment-wizard #header #company-name .display-booking-selection { color: #FFFFFF !important; }
#book-appointment-wizard #header #steps .book-step { background: #DCE6DA !important; border-radius: 4px !important; }
#book-appointment-wizard #header #steps .book-step strong,
#book-appointment-wizard #header #steps .book-step.active-step strong { color: #2F2A28 !important; }
#book-appointment-wizard #header #steps .book-step.active-step { background: #DCE6DA !important; outline: 2px solid #FFFFFF; outline-offset: 2px; }
#book-appointment-wizard #header #steps { padding: 4px; }
@media (min-width: 768px) { #book-appointment-wizard #header #company-name > span { white-space: nowrap; } }
@media (max-width: 767px) { #book-appointment-wizard #header #company-name { font-size: 1.65rem !important; } }

/* Consistent month/year controls, including embedded booking pages. */
body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
body .flatpickr-calendar .flatpickr-current-month input.cur-year,
body .flatpickr-calendar .flatpickr-current-month input.cur-year:disabled {
 appearance: none !important; -webkit-appearance: none !important;
 background: transparent !important; background-image: none !important;
 color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
 border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
 opacity: 1 !important; font-family: 'Poppins', system-ui, sans-serif !important;
 font-size: 1rem !important; font-weight: 500 !important; line-height: 1.5 !important;
 min-height: 0 !important; height: 30px !important; margin: 0 !important;
}
body .flatpickr-calendar .flatpickr-current-month .numInputWrapper { background: transparent !important; width: 4.3rem !important; }
body .flatpickr-calendar .flatpickr-current-month input.cur-year { padding: 0 .2rem !important; }
body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { padding: 0 .35rem !important; cursor: pointer; }
body .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-month { background: #FFFFFF !important; color: #2F2A28 !important; }
body .flatpickr-calendar .flatpickr-current-month { display: flex; justify-content: center; align-items: center; gap: .3rem; padding: 0 !important; height: 44px; }
body .flatpickr-calendar .flatpickr-months .flatpickr-month { height: 44px; }
body .flatpickr-calendar .flatpickr-current-month select:focus-visible { outline: 2px solid #DCE6DA !important; outline-offset: 1px; }