/* =============================================================================
   BUAMS AI new-ui — DEMO PAGE
   Loads AFTER landing.css, which supplies .bui-section, .bui-faq and the
   shared type scale this page reuses.

   Layout: the booking column and the callback form sit side by side above
   992px. Which one is wider depends on whether a calendar is configured — with
   an embed the calendar leads, without one the form is the primary action and
   .is-form-led swaps the emphasis. Both are always present.
   ============================================================================= */

.bui-demo-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--bui-space-10);
  align-items: start;
}

/* No calendar configured: the form IS the conversion, so it gets the wider
   column and the agenda becomes the supporting material. */
.bui-demo-grid.is-form-led {
  grid-template-columns: .95fr 1.05fr;
}

.bui-demo-heading {
  margin: 0 0 var(--bui-space-2);
  font-size: var(--bui-text-h1);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.02em;
  color: var(--bui-ink-900);
}

.bui-demo-sub {
  margin: 0 0 var(--bui-space-6);
  max-width: 56ch;
  font-size: var(--bui-text-body);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Calendar embed ───────────────────────────────────────────────────────
   The container carries the border and radius; the iframe fills it. Third
   party scheduling widgets bring their own chrome and paint their own white,
   so overflow is clipped rather than trusting them to respect the radius. */
.bui-demo-embed {
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  background: var(--bui-surface);
  overflow: hidden;
}

.bui-demo-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.bui-demo-embed-fallback {
  margin: var(--bui-space-3) 0 0;
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

/* ── Agenda ───────────────────────────────────────────────────────────────
   An ordered list because the call really does run in this order, so the
   numbering carries information rather than decorating four items. The markers
   are suppressed because the icons already index them visually. */
.bui-demo-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bui-space-5);
}

.bui-demo-agenda-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bui-space-6) var(--bui-space-8);
}

.bui-demo-agenda-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--bui-space-4);
  align-items: start;
}

.bui-demo-agenda-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bui-radius-md);
  background: var(--bui-primary-100);
  color: var(--bui-primary-700);
  font-size: 1.1rem;
}

.bui-demo-agenda-title {
  display: block;
  margin-bottom: var(--bui-space-1);
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-demo-agenda-body {
  display: block;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Callback card ───────────────────────────────────────────────────────── */
.bui-demo-card {
  padding: var(--bui-space-6);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-sm);
}

.bui-demo-card-eyebrow {
  display: block;
  margin-bottom: var(--bui-space-2);
  font-size: var(--bui-text-overline);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bui-primary-700);
}

.bui-demo-card-title {
  margin: 0 0 var(--bui-space-1);
  font-size: var(--bui-text-h2);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.015em;
  color: var(--bui-ink-900);
}

.bui-demo-card-sub {
  margin: 0 0 var(--bui-space-5);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Audience selector ───────────────────────────────────────────────────
   Single-select choice above the form fields. Reuses the card pattern from
   the registration page (icon + bold title + gray subtitle, with primary
   highlight on selection). */
.bui-acct-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bui-space-2);
  margin-bottom: var(--bui-space-4);
}

.bui-acct-option,
button.bui-acct-option {
  display: flex;
  align-items: center;
  gap: var(--bui-space-3);
  padding: var(--bui-space-3);
  border: 1.5px solid var(--bui-line);
  border-radius: var(--bui-radius-md);
  background: var(--bui-surface);
  color: var(--bui-ink-700);
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--bui-transition), background var(--bui-transition);
}

.bui-acct-option:hover,
button.bui-acct-option:hover {
  border-color: var(--bui-line-strong);
  background: var(--bui-surface-2);
  color: var(--bui-ink-900);
}

.bui-acct-option.is-active,
button.bui-acct-option.is-active {
  border-color: var(--bui-primary-700);
  background: var(--bui-primary-50);
  color: var(--bui-ink-900);
}

.bui-acct-option:focus-visible,
button.bui-acct-option:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 2px;
}

.bui-acct-option .bi,
button.bui-acct-option .bi {
  flex-shrink: 0;
  font-size: 1.15rem;
  color: var(--bui-ink-500);
}

.bui-acct-option.is-active .bi,
button.bui-acct-option.is-active .bi {
  color: var(--bui-primary-700);
}

.bui-acct-option-title {
  display: block;
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-heavy);
  line-height: var(--bui-lh-tight);
}

.bui-acct-option-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--bui-text-overline);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-500);
}

/* ── intl-tel-input integration ───────────────────────────────────────────
   The library injects its own wrapper and an absolutely-positioned country
   dropdown. These rules re-fit it to the .bui-input geometry without forking
   the library's internals (spec §P). */
.iti {
  display: block;
  width: 100%;
}

.iti__flag-container {
  border: 0;
}

.iti--separate-dial-code .iti__selected-flag {
  background: var(--bui-surface-2);
  border-radius: var(--bui-radius-md) 0 0 var(--bui-radius-md);
}

.iti__country-list {
  border: 1px solid var(--bui-line-strong);
  border-radius: var(--bui-radius-md);
  box-shadow: var(--bui-shadow-md);
  font-size: var(--bui-text-sm);
}

.iti__country.iti__highlight {
  background: var(--bui-primary-50);
}

.iti__dial-code {
  color: var(--bui-ink-500);
}

@media (max-width: 575.98px) {
  /* The country list is absolutely positioned and will overflow a narrow
     card; cap it to the field width so the page never scrolls sideways. */
  .iti__country-list {
    max-width: calc(100vw - var(--bui-space-10));
  }
}

/* Two fields per row where both are short. Collapses below 480px, where a
   half-width phone field is worse than a stacked one. */
.bui-demo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--bui-space-4);
}

.bui-demo-form-error {
  margin-bottom: var(--bui-space-3);
}

.bui-demo-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-2);
  margin: var(--bui-space-4) 0 0;
  font-size: var(--bui-text-xs);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-500);
}

.bui-demo-privacy .bi {
  margin-top: 2px;
  color: var(--bui-success);
}

/* ── Success panel ────────────────────────────────────────────────────────
   Replaces the form in place. Centre-aligned because it is a terminal state
   with nothing to scan, unlike the form it replaces. */
.bui-demo-success {
  text-align: center;
  padding: var(--bui-space-4) 0 var(--bui-space-2);
}

.bui-demo-success:focus { outline: none; }

.bui-demo-success:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 4px;
  border-radius: var(--bui-radius-md);
}

.bui-demo-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--bui-space-4);
  border-radius: var(--bui-radius-pill);
  background: var(--bui-success-bg);
  color: var(--bui-success);
  font-size: 1.5rem;
}

.bui-demo-success-title {
  margin: 0 0 var(--bui-space-2);
  font-size: var(--bui-text-h2);
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-demo-success-body {
  margin: 0 auto var(--bui-space-4);
  max-width: 40ch;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

.bui-demo-success-alt {
  margin: 0;
  padding-top: var(--bui-space-4);
  border-top: 1px solid var(--bui-line);
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

.bui-demo-alt {
  margin: var(--bui-space-4) 0 0;
  text-align: center;
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

/* ── Responsive ───────────────────────────────────────────────────────────
   Below 992px the columns stack, and whichever variant is showing puts its
   PRIMARY action first. With a calendar that is the calendar; without one the
   agenda is only supporting material and the form leads. Getting this the
   wrong way round on a phone means scrolling past a 720px embed to reach the
   thing that converts. */
@media (max-width: 991.98px) {
  .bui-demo-grid,
  .bui-demo-grid.is-form-led {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bui-space-8);
  }

  .bui-demo-grid.is-form-led .bui-demo-aside { order: -1; }

  .bui-demo-agenda-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479.98px) {
  .bui-acct-switch { grid-template-columns: minmax(0, 1fr); }
  .bui-demo-row { grid-template-columns: minmax(0, 1fr); }
  .bui-demo-card { padding: var(--bui-space-5); }
}