/* ==========================================================================
   Appointment wizard (request-appt.html only)
   The standard complete_template_2026 wizard rules, copied verbatim from
   complete_template_2026/src/css/clue.css. Do not restyle here: change the
   template and copy again. --primary-color comes from client.css
   (= --client-primary). The clue icon font is linked from the same page.
   Each selector carries :where(#appt-wizard) so nothing outside the form is
   touched; :where() adds no specificity, so the template's cascade holds.
   ========================================================================== */

/* Step headings receive programmatic focus for screen readers only — no visible ring */
:where(#appt-wizard) .appt-step-heading:focus {
  outline: none;
}

/* Stronger focus indicator for Bootstrap btn-check (radio/checkbox buttons) */
:where(#appt-wizard) .btn-check:focus-visible + .btn {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: none;
}

/* Bootstrap 5 removed .btn-block, so we need custom styling */
:where(#appt-wizard) .btn-block {
  display: block;
  width: 100%;
}


/* ========================================================================
   APPOINTMENT FORMS
   ======================================================================== */

/* Honeypot spam protection */
:where(#appt-wizard) #lastname {
  display: none;
}

/* Multi-Step Appointments (APPT3) */
:where(#appt-wizard) .multistep-appt p {
  font-size: 120%;
}

:where(#appt-wizard) .multistep-appt input,
:where(#appt-wizard) .multistep-appt textarea {
  background-color: white !important;
}

:where(#appt-wizard) .appt-day {
  background-color: rgba(215, 223, 238, 0.8);
  border-radius: 2em;
  padding: 0.5rem;
  border: 4px white solid;
}

#content :where(#appt-wizard) .appt-day h2 {
  margin: 0.5rem 0 0.25rem;
  padding-top: 0;
  font-size: 1.4rem;
}

/* Compact vertical spacing for day/time grid */
:where(#appt-wizard) #multistep-appt-3 > .btn-group > .row {
  --bs-gutter-y: 0.5rem;
}

:where(#appt-wizard) #multistep-appt-3 .appt-day {
  padding: 0.15rem 0.5rem 0.35rem;
  border-radius: 1rem;
}

/* Appointment wizard buttons - preserve original outline style */
:where(#appt-wizard) .appt-day .btn-outline-primary,
:where(#appt-wizard) .appt-nextstep {
  background-color: white !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color);
  border-radius: 2em;
}

:where(#appt-wizard) .appt-day .btn-outline-primary i {
  font-size: 3em;
  display: block;
  margin-bottom: -0.25em;
  margin-top: -0.05em;
}

:where(#appt-wizard) .appt-day .btn-outline-primary:hover,
:where(#appt-wizard) .appt-nextstep:hover {
  background-color: #eaf3ff !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
}

:where(#appt-wizard) .appt-day .btn-check:active+.btn-outline-primary,
:where(#appt-wizard) .btn-check:checked+.btn-outline-primary,
:where(#appt-wizard) .btn-outline-primary.active,
:where(#appt-wizard) .btn-outline-primary.dropdown-toggle.show,
:where(#appt-wizard) .btn-outline-primary:active {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color);
}

:where(#appt-wizard) .appt-day .btn-check:active+.btn-outline-primary i,
:where(#appt-wizard) .btn-check:checked+.btn-outline-primary i,
:where(#appt-wizard) .btn-outline-primary.active i,
:where(#appt-wizard) .btn-outline-primary.dropdown-toggle.show i,
:where(#appt-wizard) .btn-outline-primary:active i {
  color: white !important;
}

:where(#appt-wizard) #appt-medicare-warning {
  background-color: #ff3b30 !important;
  color: white !important;
  border-color: red !important;
  font-weight: 700;
}

:where(#appt-wizard) #appt-medicare-warning i {
  color: white !important;
}

:where(#appt-wizard) .appt-disclaimer {
  font-size: 0.85rem !important;
}

/* Tight gutters on time-slot buttons so they fill the row evenly */
:where(#appt-wizard) #multistep-appt-3 .appt-day fieldset > .row {
  --bs-gutter-x: 0.25rem;
  justify-content: center;
}

/* Appointment wizard form placeholders */
#content :where(#appt-wizard) .form-control-lg::placeholder {
  font-size: 0.9rem;
  color: #adb5bd;
}


/* ==========================================================================
   Wizard buttons: template rules, scoped to the form
   Copied from complete_template_2026/src/css/clue.css (focus ring 63-77,
   button sizing 578-591, .btn-primary 600-627, button icons 630-633) with
   declarations verbatim. Each selector is prefixed with :where(#appt-wizard),
   which limits it to the form but adds no specificity, so every rule keeps
   the template's weight against the .appt-day tile rules above. Only the
   .btn-primary selectors are copied: the template's .btn-outline-primary
   twins would restyle this site's green buttons, and inside the form the
   .appt-day rules already style those tiles.
   One change: --primary-color-bright is not defined on this site, so the
   hover color falls back to --client-primary-dark.
   ========================================================================== */

/* Keyboard focus ring for every Bootstrap button (template clue.css 63-77) */
:where(#appt-wizard) .btn:focus-visible,
:where(#appt-wizard) .btn.active:focus-visible,
:where(#appt-wizard) .btn.show:focus-visible,
:where(#appt-wizard) .btn:first-child:active:focus-visible,
:where(#appt-wizard) :not(.btn-check) + .btn:active:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--text-white, #ffffff),
    0 0 0 4px var(--text-primary, #212529),
    0 0 0 6px var(--text-white, #ffffff);
}

/* Override default button sizing - make slightly smaller */
/* Excludes appointment wizard buttons (.appt-nextstep) which have unique styling */
:where(#appt-wizard) .btn:not(.appt-nextstep) {
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

:where(#appt-wizard) .btn-lg:not(.appt-nextstep) {
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
}

:where(#appt-wizard) .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  border-radius: 30px;
  color: white !important;
}

:where(#appt-wizard) .btn-primary:hover,
:where(#appt-wizard) .btn-primary:focus,
:where(#appt-wizard) .btn-primary:active {
  background-color: var(--primary-color-bright, var(--client-primary-dark));
  border-color: var(--primary-color-bright, var(--client-primary-dark));
  color: white !important;
}

:where(#appt-wizard) .btn-primary a {
  color: white !important;
}

:where(#appt-wizard) .btn-primary i {
  color: inherit;
}

/* Ensure icons in buttons display inline with text */
:where(#appt-wizard) .btn i,
:where(#appt-wizard) .btn .fa {
  display: inline-block;
  margin-inline-end: 0.25rem;
}

/* This site's platforma.css gives every .btn font-weight 500, square corners,
   no wrapping and an inset focus line; the template has none of these. Inside
   the form, put back Bootstrap's values (not a template rule; corners come
   from the rules above). */
:where(#appt-wizard) .btn {
  font-weight: var(--bs-btn-font-weight);
  white-space: normal;
}

:where(#appt-wizard) .btn:focus:not(:focus-visible) {
  box-shadow: none;
}


/* ==========================================================================
   Brand colors (Dan, 2026-10-09: the form matches the practice's colors)
   Every color the wizard renders comes from the client.css palette:
   --client-primary #0172c2, --client-primary-dark #015a9c,
   --client-bg-light #e6f2fb, --client-text-dark #394149, plus white.
   These rules replace the template's hard-coded colors and Bootstrap's
   defaults inside the form only; the structure above stays the template's.
   Contrast on white: primary-dark 7.1:1, primary 5.0:1, text-dark 10.4:1;
   on bg-light: primary-dark 6.3:1 (primary is 4.4:1 there, so text on
   bg-light uses primary-dark).
   ========================================================================== */

#appt-wizard {
  --text-primary: var(--client-text-dark);   /* middle band of the focus ring */
  --bs-link-color-rgb: 1, 114, 194;          /* --client-primary */
  --bs-link-hover-color-rgb: 1, 90, 156;     /* --client-primary-dark */
  color: var(--client-text-dark);
}

/* Day panels and the option groups (template: rgba(215, 223, 238, 0.8)) */
#appt-wizard .appt-day {
  background-color: var(--client-bg-light);
}

/* Day names sit on bg-light */
#appt-wizard .appt-day h2 {
  color: var(--client-primary-dark);
}

/* Tile hover (template: #eaf3ff with primary text) */
#appt-wizard .appt-day .btn-outline-primary:hover,
#appt-wizard .appt-nextstep:hover {
  background-color: var(--client-bg-light) !important;
  color: var(--client-primary-dark) !important;
  border-color: var(--client-primary-dark);
}

/* A selected tile keeps its selected look under the pointer (time tiles and
   the single-choice tiles of steps 1, 2 and 4) */
#appt-wizard .btn-check:checked + .btn-outline-primary:hover,
#appt-wizard .btn-check:checked + .appt-nextstep:hover {
  background-color: var(--client-primary) !important;
  color: white !important;
  border-color: var(--client-primary);
}

#appt-wizard .btn-check:checked + .btn-outline-primary:hover i,
#appt-wizard .btn-check:checked + .appt-nextstep:hover i {
  color: white !important;
}

/* Medicare/Medicaid "NOT ACCEPTED" (template: #ff3b30 on red) */
#appt-wizard #appt-medicare-warning {
  background-color: var(--client-text-dark) !important;
  border-color: var(--client-text-dark) !important;
  color: white !important;
}

/* Text fields (Bootstrap: #dee2e6 border, #86b7fe focus, blue glow) */
#appt-wizard .form-control {
  color: var(--client-text-dark);
  border-color: var(--client-primary);
}

#appt-wizard .form-control:focus {
  border-color: var(--client-primary-dark);
  box-shadow: 0 0 0 0.2rem var(--client-primary-dark);
}

/* Placeholders (template: #adb5bd, 2.1:1); primary so they read as hints, not typed text */
#appt-wizard .form-control-lg::placeholder {
  color: var(--client-primary);
  opacity: 1;
}

/* Bootstrap's state colors (#0d6efd family) for the wizard's buttons and
   tiles: hover, keyboard focus and pressed states use the palette too. */
#appt-wizard .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--client-primary);
  --bs-btn-border-color: var(--client-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--client-primary-dark);
  --bs-btn-hover-border-color: var(--client-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--client-primary-dark);
  --bs-btn-active-border-color: var(--client-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--client-primary);
  --bs-btn-disabled-border-color: var(--client-primary);
}

#appt-wizard .btn-outline-primary {
  --bs-btn-color: var(--client-primary);
  --bs-btn-border-color: var(--client-primary);
  --bs-btn-hover-color: var(--client-primary-dark);
  --bs-btn-hover-bg: var(--client-bg-light);
  --bs-btn-hover-border-color: var(--client-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--client-primary);
  --bs-btn-active-border-color: var(--client-primary);
}

/* The visually hidden inputs behind the tiles */
#appt-wizard .btn-check {
  outline-color: var(--client-primary);
}