/* 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(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: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--bfc-radius);
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: #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;
}

/* 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);
}

.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: #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: #fef3c7;
  color: #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;
  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;
}

.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 {
  margin: 0.5rem auto;
  height: calc(100vh - 1rem);
  min-height: calc(100vh - 1rem);
}
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;
}
body.bfc-body:not(.ts-body) .bfc-availability-modal .availability-shell,
body.bfc-body:not(.ts-body) .bfc-availability-modal .availability-grid {
  height: 100%;
}
body.bfc-body:not(.ts-body) .bfc-availability-modal .availability-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.bfc-availability-modal .availability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.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;
}