/* ============================================================================
   ROARK ← WAVE SKIN                                    /static/wave-roark.css

   Wave supplies its own structural CSS (/static/wave/wave-core.min.css). This
   file does NOT replace it — it re-skins it. Load order matters:

       wave-core.min.css   ← geometry, display rules, table layout
       wave-roark.css      ← colours, type, spacing, radii  (this file)

   Every selector below is prefixed with #waveInquiryForm. That does two things:
     1. nothing here can leak into the rest of the site, and
     2. it outranks Wave's own rules (one id beats any number of classes), so no
        !important is needed anywhere.

   The class names are not guesses. They were read off the live rendered DOM:
     .wave-form-container  .wave-form-title      .wave-form-group
     .wave-form-label      .wave-form-control    .wave-form-required
     .calendar-table       .table-date-header    .table-arrow-selector
     .day-of-week          .date-cell            .appointment-button
     .has-date .has-appt .selected               .available-appointments-*
     .available-time-button .unavailable-time-button .selected-time
     .confirm-button       .wave-appointment-scheduler-please-call-me
     .wave-form-warning    .wave-form-alert      .wave-form-radio-option
     .wave-form-button .wave-form-button-submit  .wave-form-button-reset
   ========================================================================= */

/* ── Local aliases, so this file stands alone if the tokens ever move ─────── */
#waveInquiryForm {
  --w-navy: var(--navy-600, #003d69);
  --w-navy-deep: var(--navy-800, #002946);
  --w-rose: var(--roark-rose-600, #c7a4a1);
  --w-rose-soft: var(--rose-100, #f7f0ef);
  --w-rose-edge: var(--rose-300, #ead9d8);
  --w-ink: var(--ink-800, #444);
  --w-ink-soft: var(--ink-600, #6f6f6f);
  --w-mute: var(--stone, #b3a89d);
  --w-line: var(--sand, #ece0d4);
  --w-line-soft: var(--clay, #d9c6b4);
  --w-font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --w-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ── Shell ────────────────────────────────────────────────────────────────
   #WAVE-form is the same element as .wave-form-container. Wave insists on a
   95% width and 10px padding; we drop that and let the page's .wrap set the
   measure. */
#waveInquiryForm #WAVE-form {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: var(--w-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--w-ink);
  -webkit-font-smoothing: antialiased;
}

/* The page already carries the <h1> ("Pick a time that works for you"), and
   Wave renders another one for the form. Two h1s on one page is an
   accessibility and SEO defect, so Wave's is removed rather than restyled.

   !important is load-bearing here and is the ONE exception in this file: Wave
   writes style="display: inherit" directly onto the element, and an inline
   style outranks any stylesheet rule no matter how specific the selector. */
#waveInquiryForm .wave-form-title {
  display: none !important;
}

#waveInquiryForm .wave-form-description {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: var(--w-ink-soft);
}

/* ── Field groups ─────────────────────────────────────────────────────────── */
#waveInquiryForm .wave-form-group {
  display: block;
  width: 100%;
  margin: 0 0 1.35rem;
  font-size: 1rem;
}

#waveInquiryForm .wave-form-label {
  display: block;
  margin-bottom: .4rem;
  font-family: 'Lora', Georgia, serif;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--w-navy-deep);
}

#waveInquiryForm .wave-form-label > span {
  display: inline;
}

/* Wave colours the asterisk a hard red. Rose reads as emphasis without
   breaking the palette. */
#waveInquiryForm .wave-form-required {
  color: var(--w-rose);
  font-size: .875rem;
  font-weight: 700;
  padding-left: .15rem;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
#waveInquiryForm .wave-form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: .8rem .9rem;
  font-family: var(--w-font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--w-ink);
  background: #fff;
  border: 1px solid var(--w-line-soft);
  border-radius: .55rem;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

#waveInquiryForm .wave-form-control:focus {
  outline: none;
  border-color: var(--w-navy);
  box-shadow: 0 0 0 3px rgba(0, 61, 105, .12);
}

#waveInquiryForm .wave-form-control::placeholder {
  color: var(--w-mute);
  opacity: 1;
}

#waveInquiryForm .wave-form-control:disabled {
  background: var(--cream, #f7f1ea);
  color: var(--w-mute);
}

/* Native select needs its own chevron once -webkit-appearance is cleared. */
#waveInquiryForm select.wave-form-control {
  width: 100%;
  padding-right: 2.5rem;
  font-size: 1rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003d69' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

#waveInquiryForm textarea.wave-form-control {
  min-height: 7rem;
  resize: vertical;
}

/* ── Radio / checkbox rows ────────────────────────────────────────────────── */
#waveInquiryForm .wave-form-radio-options {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 0;
}

#waveInquiryForm .wave-form-radio-option {
  display: flex;
  align-items: center;
  margin: .5rem 0 0;
  padding-left: 0;
}

#waveInquiryForm .wave-form-radio-option:first-child {
  margin-left: 0;
}

#waveInquiryForm .wave-form-radio-option input[type='radio'],
#waveInquiryForm .wave-input-checkbox-item {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0 .55rem 0 0;
  accent-color: var(--w-navy);
  cursor: pointer;
  flex: 0 0 auto;
}

#waveInquiryForm .wave-form-radio-option label,
#waveInquiryForm .wave-form-checkbox-label {
  margin: 0;
  padding-left: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--w-ink);
  cursor: pointer;
}

#waveInquiryForm .wave-form-check {
  margin-bottom: 1.25rem;
}

/* ── Validation copy ──────────────────────────────────────────────────────── */
#waveInquiryForm .wave-error-message {
  margin: .4rem 0 0;
  padding: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: .8125rem;
  line-height: 1.45;
  color: #9b2c2c;
}

#waveInquiryForm .wave-form-alert {
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: #7f2222;
  background: #fbf1f1;
  border: 1px solid #e3c4c4;
  border-radius: .8rem;
}

/* Wave's PHI notice. It is legally useful, so it stays — but quiet. */
#waveInquiryForm .wave-form-warning {
  margin: 1.75rem 0 0;
  padding: 1rem 0 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--w-mute);
  border-top: 1px solid var(--w-line);
}

/* ── Scheduler ────────────────────────────────────────────────────────────── */
#waveInquiryForm #WAVE-appointment-scheduler {
  max-width: none;
  margin: 0;
  padding: 1.6rem 1.5rem 1.35rem;
  background: #fff;
  border: 1px solid var(--w-line);
  border-radius: .8rem;
}

#waveInquiryForm .wave-appointment-scheduler-title {
  margin: 0 0 .4rem;
  font-family: var(--w-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: left;
  color: var(--w-navy-deep);
}

#waveInquiryForm .wave-appointment-scheduler-description {
  margin: 0 0 .25rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--w-ink-soft);
}

#waveInquiryForm .wave-appointment-scheduler-help-text {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--w-mute);
}

#waveInquiryForm #wave-appointment-scheduler-container {
  display: block;
  margin: 0;
}

/* Narrow screens: let the calendar scroll inside its own box rather than
   pushing the page sideways. margin:0 auto centres the table — a table with an
   auto width is shrink-to-fit, and auto side margins centre that box (the same
   trick as `table { margin: 0 auto }`). */
#waveInquiryForm .calendar-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#waveInquiryForm .calendar-table {
  width: auto;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: .2rem;
  font-size: 1rem;
}

#waveInquiryForm .calendar-table .table-date-header {
  padding: 0 0 .7rem .2rem;
  font-family: var(--w-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: left;
  color: var(--w-navy-deep);
}

#waveInquiryForm .calendar-table .table-arrow-selector {
  padding: 0 0 .7rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

#waveInquiryForm .calendar-table .table-arrow-selector span {
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  font-family: var(--w-font-body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.7rem;
  color: var(--w-navy);
  background: var(--w-rose-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

#waveInquiryForm .calendar-table .table-arrow-selector span:hover {
  background: var(--w-rose-edge);
}

#waveInquiryForm .calendar-table .table-arrow-selector span.disabled {
  color: var(--w-mute);
  background: transparent;
  cursor: default;
}

#waveInquiryForm .calendar-table .day-of-week {
  width: 2.6rem;
  padding-bottom: .35rem;
  font-family: 'Lora', Georgia, serif;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  color: var(--w-mute);
}

#waveInquiryForm .calendar-table td.date-cell {
  width: 2.6rem;
  padding: 0;
  text-align: center;
  border: none;
  background: transparent;
}

#waveInquiryForm .calendar-table .appointment-button {
  display: inline-block;
  width: 2.45rem;
  height: 2.45rem;
  font-family: var(--w-font-body);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 2.45rem;
  text-align: center;
  color: var(--w-mute);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: default;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

#waveInquiryForm .calendar-table .appointment-button.has-date {
  color: var(--w-ink-soft);
}

/* Only days that actually hold appointment records are clickable. */
#waveInquiryForm .calendar-table .appointment-button.has-appt {
  color: var(--w-navy);
  font-weight: 600;
  background: var(--w-rose-soft);
  border-color: var(--w-rose-edge);
  cursor: pointer;
}

#waveInquiryForm .calendar-table .appointment-button.has-appt:hover {
  background: var(--w-rose-edge);
  border-color: var(--w-rose);
}

#waveInquiryForm .calendar-table .appointment-button.selected {
  color: #fff;
  background: var(--w-navy);
  border-color: var(--w-navy);
  font-weight: 600;
}

/* ── Time slots ───────────────────────────────────────────────────────────── */
#waveInquiryForm .available-appointments-container {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--w-line);
}

/* Wave's .show rule parks the panel beside the calendar at a fixed 173px with a
   20px left offset — the two-up layout it expects. We stack it under the
   calendar instead, so the fixed width and offset have to go, and centring it
   keeps it aligned with the calendar above. */
#waveInquiryForm .available-appointments-container.show {
  width: 100%;
  max-width: 21rem;
  margin-left: auto;
  margin-right: auto;
}

#waveInquiryForm .available-appointments-container.hide {
  margin: 0;
  width: auto;
  opacity: 0;
  visibility: hidden;
}

#waveInquiryForm .available-appointments-table {
  width: 100%;
  border-collapse: collapse;
}

#waveInquiryForm .available-appointments-table-header {
  padding: 0 0 .6rem;
  font-family: 'Lora', Georgia, serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--w-mute);
}

#waveInquiryForm .available-appointments-table td {
  padding: .2rem 0;
  border: none;
  background: transparent;
}

/* Wave's .selected-appointment-container is display:flex +
   justify-content:space-between, which squeezes Confirm into a narrow column
   beside the chosen time.

   wave-roark.js moves the Confirm button out of this container and below the
   whole times table (see the `roark-confirm-slot` rules further down), so this
   is back to a plain block holding just the time — full width, nothing split. */
#waveInquiryForm .available-appointments-table .selected-appointment-container {
  display: block;
}

/* The relocated Confirm button, appended as a sibling of the times table by
   wave-roark.js. Styled to read as the last item in the list: same width and
   radius as the slot buttons above it, but filled so it is unmistakably the
   action. */
#waveInquiryForm .roark-confirm-slot {
  margin-top: .5rem;
}

#waveInquiryForm .roark-confirm-slot .confirm-button {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .7rem .9rem;
  font-family: 'Lora', Georgia, serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--w-rose);
  border: 1px solid var(--w-rose);
  border-radius: .55rem;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

#waveInquiryForm .roark-confirm-slot .confirm-button:hover {
  background: var(--rose-700, #a87b77);
  border-color: var(--rose-700, #a87b77);
}

#waveInquiryForm .available-time-button,
#waveInquiryForm .unavailable-time-button,
#waveInquiryForm .selected-time {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .7rem .9rem;
  font-family: var(--w-font-body);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border-radius: .55rem;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

#waveInquiryForm .available-time-button {
  color: var(--w-navy);
  background: #fff;
  border: 1px solid var(--w-line-soft);
  cursor: pointer;
}

#waveInquiryForm .available-time-button:hover {
  background: var(--w-rose-soft);
  border-color: var(--w-rose);
}

#waveInquiryForm .unavailable-time-button {
  color: var(--w-mute);
  background: var(--cream, #f7f1ea);
  border: 1px dashed var(--w-line-soft);
  cursor: default;
  text-decoration: line-through;
}

#waveInquiryForm .selected-time {
  display: flex;
  justify-content: center;
  color: #fff;
  background: var(--w-navy);
  border: 1px solid var(--w-navy);
}

#waveInquiryForm .confirm-button {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .7rem .9rem;
  font-family: 'Lora', Georgia, serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--w-rose);
  border: 1px solid var(--w-rose);
  border-radius: .55rem;
  cursor: pointer;
}

#waveInquiryForm .confirm-button:hover {
  background: var(--rose-700, #a87b77);
  border-color: var(--rose-700, #a87b77);
}

/* ── "Please call me instead" ─────────────────────────────────────────────── */
#waveInquiryForm .wave-appointment-scheduler-please-call-me {
  display: block;
  margin: 1.25rem auto 0;
  padding: .55rem 0 0;
  font-family: 'Lora', Georgia, serif;
  font-size: .875rem;
  font-weight: 400;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: .18em;
  color: var(--w-navy);
  cursor: pointer;
}

#waveInquiryForm .wave-appointment-scheduler-please-call-me:hover {
  color: var(--rose-700, #a87b77);
}

/* ── Submit / reset ───────────────────────────────────────────────────────── */
#waveInquiryForm .wave-form-button {
  float: none;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: .95rem 2rem;
  font-family: 'Lora', Georgia, serif;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: .55rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

#waveInquiryForm .wave-form-button-submit {
  width: 100%;
  margin-top: 1.5rem;
  color: #fff;
  background: var(--w-navy);
  border-color: var(--w-navy);
}

#waveInquiryForm .wave-form-button-submit:hover {
  background: var(--w-navy-deep);
  border-color: var(--w-navy-deep);
}

#waveInquiryForm .wave-form-button-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

#waveInquiryForm .wave-form-button-reset {
  display: block;
  width: 100%;
  margin: .75rem 0 0;
  padding: .5rem;
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--w-mute);
  background: transparent;
  border-color: transparent;
}

#waveInquiryForm .wave-form-button-reset:hover {
  color: var(--w-navy);
  background: transparent;
}

/* ── Success state ────────────────────────────────────────────────────────── */
#waveInquiryForm .wave-success-message-box {
  padding: 1.75rem 1.5rem;
  text-align: center;
  background: var(--w-rose-soft);
  border: 1px solid var(--w-rose-edge);
  border-radius: .8rem;
}

#waveInquiryForm .wave-success-message-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--w-navy-deep);
}

/* ── Fallback shown by wave-roark.js if the library never loads ───────────── */
#waveInquiryForm .bk-wavefail {
  margin: 0;
  padding: 1.25rem 1.35rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: #7f2222;
  background: #fbf1f1;
  border: 1px solid #e3c4c4;
  border-radius: .8rem;
}

/* ── Language picker (hidden by config, kept tidy if enabled) ─────────────── */
#waveInquiryForm #WAVE-language-picker {
  display: none;
}

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #waveInquiryForm #WAVE-appointment-scheduler {
    padding: 1.25rem 1rem 1.1rem;
    border-radius: .7rem;
  }

  #waveInquiryForm .wave-appointment-scheduler-title {
    font-size: 1.1875rem;
  }

  #waveInquiryForm .calendar-table {
    font-size: .9375rem;
    border-spacing: .08rem;
  }

  #waveInquiryForm .calendar-table .day-of-week {
    width: 2.15rem;
    font-size: .5625rem;
    letter-spacing: .05em;
  }

  #waveInquiryForm .calendar-table td.date-cell {
    width: 2.15rem;
  }

  #waveInquiryForm .calendar-table .appointment-button {
    width: 2rem;
    height: 2rem;
    font-size: .875rem;
    line-height: 2rem;
  }

  #waveInquiryForm .wave-form-button-submit {
    padding: .9rem 1.25rem;
  }
}