/* Compact booking form
   Designed to sit comfortably inside a narrow embed (~320-420px) while scaling
   up to ~560px container width. Everything visible in a single scroll. */

:root {
  /* Derived from the surgerly palette (palette.css or per-form override). Using
     color-mix keeps neutral surfaces theme-aware without needing palette keys
     that the per-form palette doesn't guarantee. */
  --bfc-ink: var(--surgerly-black);
  --bfc-muted: var(--surgerly-dark-gray);
  --bfc-line: color-mix(in srgb, var(--surgerly-black) 12%, var(--surgerly-white));
  --bfc-bg-soft: color-mix(in srgb, var(--surgerly-black) 3%, var(--surgerly-white));
  --bfc-radius: 0.375rem;
  --bfc-card-radius: 0.375rem;
  --bfc-chip-radius: 0.375rem;
}

body.bfc-body {
  background: var(--surgerly-white);
}

/* Standalone compact form (i.e. NOT wrapped in the two-step shell which uses
   .ts-body): centre the shell within whatever viewport / iframe the form is
   embedded in, rather than pinning to the top with a sliver of margin. */
body.bfc-body:not(.ts-body) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.bfc-body:not(.ts-body) .bfc-shell {
  margin: 0;
  width: 100%;
}

/* Transparent modal backdrop — the compact form modals cover the whole
   embed, so Bootstrap's default grey overlay would only darken whatever
   bgcolor the host has set. Keep the backdrop element in the DOM so
   Bootstrap's focus trapping and click-outside behaviour still work. */
body.bfc-body .modal-backdrop {
  --bs-backdrop-opacity: 0;
  background-color: transparent;
}

.bfc-shell {
  max-width: 440px;
  margin: 0.6rem auto;
  padding: 0.6rem 0.6rem 1.25rem;
  color: var(--bfc-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  /* Panel treatment so a host-page bgcolor shows as a frame around the form
     rather than bleeding through the gaps between sections. */
  background: var(--surgerly-white);
  border: 1px solid color-mix(in srgb, var(--surgerly-black) 10%, var(--surgerly-white));
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(var(--surgerly-shadow-rgb, 0,0,0), 0.03);
  /* Keep loading spinners (which are absolutely positioned) anchored inside
     the card, not the viewport, and hold the panel at roughly its loaded
     height so the procedure-change reload (options → locations → availability,
     each of which hides downstream sections) doesn't let the card collapse
     to just the chips and expose the host bgcolor below it. */
  position: relative;
  min-height: 60vh;
}

.bfc-shell.hidden {
  visibility: hidden;
}

.bfc-spinner-wrap {
  min-height: 60vh;
  position: relative;
}

/* Header */

.bfc-header {
  text-align: center;
  margin-bottom: 0.65rem !important;
}

.bfc-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.15rem 0;
  color: var(--bfc-ink);
  line-height: 1.25;
}

.bfc-subtitle {
  font-size: 0.78rem;
  color: var(--bfc-muted);
  margin: 0;
  line-height: 1.35;
}

.bfc-divider {
  border: 0;
  border-top: 1px solid var(--bfc-line);
  margin: 0 0 0.65rem 0;
  opacity: 1;
}

/* Section headings */

.bfc-section {
  margin-bottom: 0.55rem;
}

.bfc-section-heading {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.3rem 0;
  color: var(--bfc-ink);
}

/* Procedure chips grid */

.bfc-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.bfc-chip {
  position: relative;
  background: var(--surgerly-white);
  border: 1px solid var(--bfc-line);
  border-radius: var(--bfc-chip-radius);
  padding: 0.55rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--bfc-ink);
  cursor: pointer;
  text-align: center;
  min-height: 2.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  transition: all 0.15s ease;
  word-break: break-word;
}

.bfc-chip:hover {
  border-color: var(--surgerly-primary);
}

.bfc-chip.selected {
  border-color: var(--surgerly-primary);
  background: color-mix(in srgb, var(--surgerly-primary) 8%, var(--surgerly-white));
  box-shadow: 0 0 0 1px var(--surgerly-primary) inset;
}

.bfc-chip.more {
  color: var(--surgerly-primary);
  font-weight: 600;
  border-style: dashed;
}

.bfc-chip.bfc-chip-selected-outside {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.45rem;
}

.bfc-chip-name {
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bfc-chip-change {
  font-size: 0.62rem;
  color: var(--surgerly-primary);
  text-decoration: underline;
  line-height: 1.1;
}

@media (max-width: 360px) {
  .bfc-chip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Next available */

/* Unified slot card (used for next-available, option, location) */

.bfc-slot-card {
  background: var(--surgerly-white);
  border: 1px solid var(--bfc-line);
  border-radius: var(--bfc-card-radius);
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#bfcSlotSection .bfc-slot-card {
  border-color: var(--surgerly-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surgerly-primary) 25%, transparent);
}

.bfc-slot-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  line-height: 1.2;
}

.bfc-slot-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bfc-slot-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--surgerly-primary);
  line-height: 1.1;
}

.bfc-slot-label-muted {
  color: var(--bfc-muted);
}

.bfc-slot-pill {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--surgerly-primary) 12%, var(--surgerly-white));
  color: var(--surgerly-primary);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: var(--bfc-radius);
  line-height: 1.2;
}

.bfc-slot-time {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0;
  color: var(--bfc-ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bfc-amend-btn {
  width: 100%;
  background: var(--surgerly-white);
  border: 1px solid var(--bfc-line);
  border-radius: var(--bfc-radius);
  padding: 0.4rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--bfc-ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.bfc-amend-inline {
  width: auto;
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
}

.bfc-amend-btn:hover:not(:disabled) {
  border-color: var(--surgerly-primary);
  color: var(--surgerly-primary);
}

.bfc-amend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* No availability notice */

.bfc-no-availability {
  background: var(--surgerly-grey-100, #fff7ed);
  border: 1px solid var(--surgerly-warning-border, #fed7aa);
  border-radius: var(--bfc-radius);
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--surgerly-danger-text, #7c2d12);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}

.bfc-no-availability strong {
  font-weight: 600;
  font-size: 0.85rem;
}

/* Summary pill */

.bfc-summary-line {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--surgerly-primary) 75%, var(--surgerly-black));
  text-align: center;
  padding: 0.3rem 0.6rem;
  background: color-mix(in srgb, var(--surgerly-primary) 12%, var(--surgerly-white));
  border: 1px solid color-mix(in srgb, var(--surgerly-primary) 25%, transparent);
  border-radius: var(--bfc-radius);
  margin-bottom: 0.45rem;
  font-weight: 500;
  /* Never taller than two lines — the full recap is in the title tooltip.
     Long procedure names + practitioner + pricing would otherwise push the
     form into scroll territory on small screens. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Procedure chip text: clamp at two lines, full name via the chip's title
   attribute. The chip itself stays flex for centring; the clamp lives on
   the inner span. */
.bfc-chip-text,
.bfc-chip-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Details form */

.bfc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.bfc-form-row > .form-floating {
  margin-bottom: 0 !important;
}

.bfc-details-form .form-floating {
  margin-bottom: 0.35rem;
}

.bfc-details-form .form-control {
  border-radius: var(--bfc-radius);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  font-size: 0.88rem;
}

.bfc-details-form .form-floating > .form-control {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
  height: calc(2.8rem + 2px);
  min-height: calc(2.8rem + 2px);
  line-height: 1.2;
}

.bfc-details-form .form-floating > label {
  padding-left: 0.8rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.85rem;
}

.bfc-details-form .form-floating > .form-control:focus ~ label,
.bfc-details-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.8) translateY(-0.5rem) translateX(0.1rem);
}

.bfc-details-form .iti {
  width: 100%;
}

/* Phone input — override booking_form.css iti-floating so the compact form's
   phone field matches the other inputs. */
.bfc-details-form .form-floating.iti-floating .iti__tel-input {
  height: calc(2.8rem + 2px);
  min-height: calc(2.8rem + 2px);
  line-height: 1.2;
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.88rem;
  border-radius: var(--bfc-radius);
}
/* The country selector overlays the input's left edge; force the number to clear
   it. The generic `.bfc-details-form .form-control { padding-left: 0.8rem }` was
   sliding the number under the flag. Target the input via the `.iti` wrapper (so
   it matches regardless of intl-tel-input's version-specific input class) with
   !important, which also beats any inline padding the library sets itself. */
.bfc-details-form .iti input[type="tel"] {
  padding-left: 3.25rem !important;
}

.bfc-details-form .form-floating.iti-floating .iti__country-container {
  height: calc(2.8rem + 2px);
}

.bfc-details-form .form-floating.iti-floating:has(.iti__tel-input:focus) > label,
.bfc-details-form .form-floating.iti-floating:has(.iti__tel-input:not(:placeholder-shown)) > label {
  transform: scale(0.8) translateY(-0.5rem);
}

.bfc-privacy-line {
  font-size: 0.68rem;
  color: var(--bfc-muted);
  text-align: center;
  margin: 0.25rem 0 0.5rem 0;
}

.bfc-privacy-line a {
  color: var(--surgerly-primary);
}

/* Additional questions inline */

.bfc-questions {
  margin-top: 0.5rem;
}

.bfc-questions .form-floating {
  margin-bottom: 0.4rem;
}

/* Book CTA */

.bfc-cta {
  display: block;
  width: 100%;
  background: var(--surgerly-cta, var(--surgerly-primary));
  color: var(--surgerly-white);
  border: none;
  border-radius: var(--bfc-radius);
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}

.bfc-cta:hover:not(:disabled) {
  filter: brightness(1.08);
}

.bfc-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bfc-cta-error {
  color: var(--surgerly-danger, #dc2626);
  font-size: 0.74rem;
  text-align: center;
  margin-top: 0.4rem;
  min-height: 1rem;
}

/* Confirmation */

.bfc-confirmation {
  background: var(--surgerly-white);
  border: 1px solid var(--bfc-line);
  border-radius: var(--bfc-card-radius);
  padding: 1.2rem 1rem;
  text-align: center;
}

.bfc-confirmation-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surgerly-primary) 15%, var(--surgerly-white));
  color: var(--surgerly-primary);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.bfc-confirmation-icon.pending {
  background: var(--surgerly-warning-bg, #fef3c7);
  color: var(--surgerly-warning-strong, #b45309);
}

.bfc-confirmation h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.bfc-confirmation-sub {
  font-size: 0.82rem;
  color: var(--bfc-muted);
  margin: 0 0 0.85rem 0;
}

.bfc-confirmation-details {
  text-align: left;
  background: var(--bfc-bg-soft);
  border-radius: var(--bfc-radius);
  padding: 0.7rem 0.8rem;
  font-size: 0.76rem;
}

.bfc-confirmation-details .bfc-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.bfc-confirmation-details .bfc-detail-row dt {
  color: var(--bfc-muted);
  font-weight: 500;
  margin: 0;
}

.bfc-confirmation-details .bfc-detail-row dd {
  color: var(--bfc-ink);
  font-weight: 500;
  margin: 0;
  text-align: right;
}

/* Modal overrides */

.bfc-modal .modal-dialog {
  margin: 0.75rem auto;
  /* Explicit width, not just a cap: with width:auto the dialog tracks its
     content's intrinsic width, so the modal visibly resizes as slot-chip
     counts change between dates. Fixed width = stable frame. */
  width: calc(100% - 1.5rem);
  max-width: 440px;
}

.bfc-modal .modal-dialog-centered {
  min-height: calc(100% - 1.5rem);
}

.bfc-modal .modal-content {
  border-radius: var(--bfc-radius);
  border: none;
}

.bfc-modal .modal-header {
  border-bottom: 1px solid var(--bfc-line);
  padding: 0.55rem 0.75rem;
}

.bfc-modal .modal-title {
  font-size: 0.88rem;
  font-weight: 600;
}

.bfc-modal .modal-body {
  padding: 0.7rem;
}

.bfc-modal .btn-close {
  font-size: 0.7rem;
  padding: 0.4rem;
}

/* Search (inside modals) */

.bfc-search-wrapper {
  position: relative;
  margin-bottom: 0.75rem;
}

.bfc-search-wrapper input {
  width: 100%;
  border: 1px solid var(--bfc-line);
  border-radius: var(--bfc-radius);
  padding: 0.55rem 2.2rem 0.55rem 2.2rem;
  font-size: 0.9rem;
}

.bfc-search-wrapper .material-symbols-outlined {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--surgerly-primary);
  pointer-events: none;
}

.bfc-search-wrapper .bfc-search-clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--bfc-muted);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  display: none;
}

.bfc-search-wrapper .bfc-search-clear.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* List items inside modals */

.bfc-list {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bfc-list-item {
  border: 1px solid var(--bfc-line);
  border-radius: var(--bfc-radius);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--surgerly-white);
}

.bfc-list-item:hover {
  border-color: var(--surgerly-primary);
}

.bfc-list-item.selected {
  border-color: var(--surgerly-primary);
  background: color-mix(in srgb, var(--surgerly-primary) 6%, var(--surgerly-white));
}

.bfc-list-item h6 {
  margin: 0 0 0.15rem 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bfc-ink);
}

.bfc-list-item .desc {
  font-size: 0.78rem;
  color: var(--bfc-muted);
  margin: 0 0 0.35rem 0;
  line-height: 1.3;
}

.bfc-list-item .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.bfc-list-item .badges .badge {
  font-size: 0.65rem;
  font-weight: 500;
}

/* Procedure picker: name left, price right on the same line */
.bfc-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.bfc-list-head h6 {
  margin: 0;
  min-width: 0;
}
.bfc-list-price {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--bfc-ink);
}

/* Back affordance shown on gateway-diverted arrivals. Absolutely positioned
   so it sits inline-left of the centred title instead of adding its own row
   (which pushed the whole form down and forced the iframe to scroll). */
.bfc-header {
  position: relative;
}
.bfc-back-link {
  position: absolute;
  left: 0;
  top: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--bfc-muted);
  cursor: pointer;
}
.bfc-back-link:hover {
  color: var(--bfc-ink);
  text-decoration: underline;
}
.bfc-back-link.d-none {
  display: none;
}

/* Street address under the selected-location name / on location cards */
.bfc-slot-sub {
  font-size: 0.78rem;
  color: var(--bfc-muted);
  margin-top: 0.1rem;
}

.bfc-empty-hint {
  text-align: center;
  font-size: 0.82rem;
  color: var(--bfc-muted);
  padding: 0.75rem;
}

/* Availability modal — single-column stacked layout to stay within 440px */

.bfc-availability-modal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

/* Standalone compact form (most often embedded in an iframe): let modals
   fill the available iframe height instead of capping at 60-75vh and
   internally scrolling. The modal-dialog becomes a flex column so the
   header stays pinned, the body grows to fill, and only the inner list
   scrolls if it overflows. */
body.bfc-body:not(.ts-body) .bfc-modal .modal-dialog {
  /* Match the full-bleed shell (width:100%, margin:0 in this mode): the
     modal should cover exactly the same footprint as the form beneath it,
     not float 0.5-0.75rem inside it with the shell peeking at the edges. */
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
}
body.bfc-body:not(.ts-body) .bfc-modal .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.bfc-body:not(.ts-body) .bfc-modal .modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
body.bfc-body:not(.ts-body) .bfc-modal .bfc-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}
/* Height constraint via the FLEX chain, not percentage heights: % heights
   inside flexed containers resolve unreliably (the shell/grid fell back to
   content height, overflowed the hidden modal-body, and cards below the
   fold were unreachable — while the procedure modal, whose list is a direct
   flex child, scrolled fine). Every layer here is a flex child with
   flex:1 + min-height:0, which is always definite. */
body.bfc-body:not(.ts-body) .bfc-availability-modal .availability-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.bfc-body:not(.ts-body) .bfc-availability-modal .availability-grid {
  flex: 1 1 auto;
  min-height: 0;
  /* Calendar row keeps natural height; results row gets exactly the rest.
     minmax(0, 1fr) lets it shrink below content height so its own
     overflow-y engages. Also kills the dead gap on tall viewports. */
  grid-template-rows: auto minmax(0, 1fr);
}
body.bfc-body:not(.ts-body) .bfc-availability-modal .availability-results {
  min-height: 0;
  overflow-y: auto;
}

.bfc-availability-modal .availability-shell {
  /* booking_form.css centres the shell (margin:0 auto) at its content width,
     leaving background strips either side inside the modal. Full width here. */
  width: 100%;
  max-width: none;
}

.bfc-availability-modal .availability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  /* CRITICAL: booking_form.css sets align-items: flex-start on this class,
     which stops grid items stretching to their track — the results section
     then sits at content height, overflows the constrained 1fr row, and is
     clipped unscrollably by the modal-body. Stretch restores track sizing
     so the results section's own overflow-y:auto can engage. */
  align-items: stretch;
}

.bfc-availability-modal .card-like {
  padding: 0.55rem 0.65rem;
}

.bfc-availability-modal .calendar-header {
  font-size: 0.8rem;
}

.bfc-availability-modal .calendar-month {
  font-size: 0.85rem;
}

.bfc-availability-modal .availability-results-title h5 {
  font-size: 0.85rem;
}

.bfc-availability-modal .specialist-card {
  padding: 0.55rem 0.65rem;
}

/* Spinner positioning inside a target */

.bfc-spinner-anchor {
  position: relative;
}