/* Rostify look for Easy!Appointments (book.rostify.app) · 29.09.2026
   Loaded after the EA theme; the primary colour comes from the setting company_color (#1F4F53). */
@import url('fonts.css');

:root {
  --rf-ink: #0E2023;
  --rf-ink2: #43555A;
  --rf-mute: #56676B;
  --rf-teal: #2F6A70;
  --rf-deep: #1F4F53;
  --rf-bg: #EEF0F1;
  --rf-rule: rgba(14, 32, 35, .12);
  --rf-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --bs-body-font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--rf-ink);
  --bs-link-color: var(--rf-teal);
  --bs-link-hover-color: var(--rf-deep);
  --bs-border-radius: 12px;
}

html, body { background: var(--rf-bg) !important; }
body { font-family: var(--bs-body-font-family); color: var(--rf-ink); -webkit-font-smoothing: antialiased; }

/* wizard card */
#book-appointment-wizard, #message-frame {
  border-radius: 22px !important;
  box-shadow: 0 30px 60px -30px rgba(14, 32, 35, .35), 0 0 0 1px var(--rf-rule) !important;
  overflow: hidden;
}

/* header */
#header { background: var(--rf-deep) !important; }
#company-name { font-stretch: 80%; font-weight: 700 !important; letter-spacing: -.01em; font-size: 28px !important; }
#company-logo { max-height: 44px !important; }
#company-name .display-booking-selection { font-family: var(--rf-mono); font-stretch: 100%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500 !important; }
.book-step { border-radius: 999px !important; }

/* step titles */
.frame-title {
  font-stretch: 80%; font-weight: 700 !important; letter-spacing: -.01em;
  color: var(--rf-ink) !important; font-size: clamp(24px, 3vw, 32px);
}

/* labels: mono, as on rostify.app */
.form-label, label.form-label {
  font-family: var(--rf-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rf-mute);
}
.form-control, .form-select { border-radius: 10px; border-color: rgba(14, 32, 35, .2); }
.form-control:focus, .form-select:focus { border-color: var(--rf-teal); box-shadow: 0 0 0 3px rgba(47, 106, 112, .18); }

/* buttons: pill like the website */
.btn { border-radius: 999px !important; font-weight: 600; padding-left: 1.25rem; padding-right: 1.25rem; }
.btn-primary, .btn-dark, #book-appointment-submit { background: var(--rf-deep) !important; border-color: var(--rf-deep) !important; }
.btn-primary:hover, .btn-dark:hover, #book-appointment-submit:hover { background: var(--rf-teal) !important; border-color: var(--rf-teal) !important; }
.btn-outline-secondary { border-color: rgba(14, 32, 35, .25); color: var(--rf-ink); }

/* time slots and calendar */
#available-hours .available-hour { border-radius: 999px !important; font-family: var(--rf-mono); font-size: 14px; }
#available-hours .selected-hour { background: var(--rf-deep) !important; border-color: var(--rf-deep) !important; color: #fff !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--rf-deep) !important; border-color: var(--rf-deep) !important; }

/* footer */
#frame-footer { border-color: var(--rf-rule) !important; font-family: var(--rf-mono); }
#frame-footer a { color: var(--rf-teal); text-decoration: none; }
#frame-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
#frame-footer .badge.bg-secondary { background: rgba(14, 32, 35, .08) !important; color: var(--rf-ink) !important; }

/* confirmation / message pages */
#message-frame .text-success { color: var(--rf-teal) !important; }
#message-frame h3 { font-stretch: 80%; font-weight: 700 !important; letter-spacing: -.01em; }