/*
 * Synafloat theme for the Easy!Appointments booking page (book.synafloat.com).
 * Mirrors the "Arbeitsplatz" tokens of synafloat.com (styles/arbeitsplatz.css):
 * grey ground, white sheet, navy stage, orange only for the one action (black text on it),
 * Source Sans 3, left-aligned bold headings, no shadows. Injected by nginx (sub_filter),
 * so Easy!Appointments itself stays unmodified and updatable.
 */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/synafloat-theme/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/synafloat-theme/source-sans-3-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/synafloat-theme/source-sans-3-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/synafloat-theme/source-sans-3-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --sf-orange: #e94f04;
  --sf-orange-hover: #ff6a1f;
  --sf-ink: #181716;
  --sf-ink-2: #4f4d4b;
  --sf-navy: #0c3047;
  --sf-grund: #f0f0f0;
  --sf-blatt: #ffffff;
  --sf-blatt-hover: #f6f8fa;
  --sf-rule: #d6d6d6;
  --sf-on-navy-2: #b8c6d3;
  --sf-on-navy-rule: rgba(255, 255, 255, 0.14);
  --sf-focus: #e94f04;
}

html, body {
  background: var(--sf-grund) !important;
  background-image: none !important;
}
body, .btn, .form-control, .form-select, input, select, textarea, button {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  color: var(--sf-ink);
}
body { font-size: 1.0625rem; line-height: 1.55; }

/* the sheet */
#book-appointment-wizard {
  background: var(--sf-blatt) !important;
  border: 1px solid var(--sf-rule);
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* the stage */
#book-appointment-wizard #header {
  background: var(--sf-navy) !important;
  padding: 24px 32px !important;
  border-radius: 0 !important;
}
#header #company-name { font-weight: 700; color: #fff; }
#header #company-name span, #header .display-selected-service, #header .display-selected-provider,
#header small { color: var(--sf-on-navy-2) !important; }
#header .book-step {
  background: transparent !important;
  border: 1px solid var(--sf-on-navy-rule);
  border-radius: 4px !important;
  color: var(--sf-on-navy-2) !important;
}
#header .book-step strong, #header .book-step span { color: inherit !important; }
#header .book-step.active-step {
  background: #fff !important;
  border-color: #fff;
  color: var(--sf-navy) !important;
}

/* headings: left, bold, ink */
.wizard-frame .frame-title {
  text-align: left !important;
  font-weight: 700 !important;
  color: var(--sf-ink) !important;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.wizard-frame label, .wizard-frame strong { font-weight: 700; color: var(--sf-ink); }
.text-muted, .form-text { color: var(--sf-ink-2) !important; }

/* inputs */
.form-control, .form-select {
  border: 1px solid var(--sf-rule) !important;
  border-radius: 4px !important;
  background-color: var(--sf-blatt);
  min-height: 44px;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sf-navy) !important;
  outline: 2px solid var(--sf-focus);
  outline-offset: 1px;
}

/* the one action: orange, black text */
.btn.button-next, #book-appointment-submit, .btn-dark, .btn-primary {
  background: var(--sf-orange) !important;
  border-color: var(--sf-orange) !important;
  color: var(--sf-ink) !important;
  font-weight: 700;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.btn.button-next:hover, #book-appointment-submit:hover, .btn-dark:hover, .btn-primary:hover {
  background: var(--sf-orange-hover) !important;
  border-color: var(--sf-orange-hover) !important;
  color: var(--sf-ink) !important;
}
.btn.button-next i, .btn.button-next svg, #book-appointment-submit i { color: var(--sf-ink) !important; }
.btn.button-back, .btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--sf-ink-2) !important;
  color: var(--sf-ink) !important;
  border-radius: 4px !important;
}
.btn.button-back:hover, .btn-outline-secondary:hover { background: var(--sf-blatt-hover) !important; }
.btn:focus-visible { outline: 2px solid var(--sf-focus) !important; outline-offset: 2px; box-shadow: none !important; }

/* time slots */
#available-hours .available-hour, #available-hours button, .available-hour {
  border: 1px solid var(--sf-rule) !important;
  border-radius: 4px !important;
  background: var(--sf-blatt) !important;
  color: var(--sf-ink) !important;
  font-weight: 700;
}
#available-hours .available-hour:hover, .available-hour:hover { background: var(--sf-blatt-hover) !important; border-color: var(--sf-navy) !important; }
#available-hours .selected-hour, .available-hour.selected-hour {
  background: var(--sf-navy) !important;
  border-color: var(--sf-navy) !important;
  color: #fff !important;
}

/* calendar (flatpickr, overrides material_green) */
.flatpickr-calendar { box-shadow: none !important; border: 1px solid var(--sf-rule) !important; border-radius: 4px !important; }
.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday,
.flatpickr-monthDropdown-months, .flatpickr-current-month { background: var(--sf-navy) !important; color: #fff !important; fill: #fff !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--sf-navy) !important; border-color: var(--sf-navy) !important; color: #fff !important;
}
.flatpickr-day:hover:not(.flatpickr-disabled) { background: var(--sf-blatt-hover) !important; border-color: var(--sf-navy) !important; }
.flatpickr-day.today { border-color: var(--sf-orange) !important; }

/* links and footer */
a { color: var(--sf-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sf-ink); }
#frame-footer { border-top: 1px solid var(--sf-rule) !important; color: var(--sf-ink-2); font-size: 0.8125rem; }
#frame-footer a { color: var(--sf-ink-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* one left edge: the frames' centred offset columns follow the left-aligned headings */
.wizard-frame [class*="offset-"] { margin-left: 0 !important; }
.wizard-frame .frame-container, .wizard-frame .frame-content { text-align: left; }