/* Shared customer UI: the form, live flow and isolated Design Lab A.
   Loaded after component styles so the same hierarchy applies everywhere. */
:root {
  --booking-radius-card: 12px;
  --booking-radius-field: 6px;
  --booking-radius-action: 6px;
  --booking-brand-size: 48px;
  --booking-brand-mark-size: 32px;
  --booking-heading-size: 25px;
  --booking-heading-weight: 500;
  --booking-label-size: 12px;
  --booking-label-weight: 400;
  --booking-value-size: 14px;
  --booking-value-weight: 350;
  --booking-action-size: 16px;
  --booking-action-weight: 500;
  --booking-label-color: #aca2b3;
  --booking-value-color: #e4deea;
  --booking-optional-color: #a197a8;
}

/* Approved A presentation in real Booking pages; no Lab runtime scripts required. */
body.booking-intake, body.booking-flow {
  background: #08060c url('/assets/lab-booking-background.svg') center top / 100% 1000px no-repeat;
}
.booking-flow .prototype,
.booking-flow .prototype.approach-a .prototype__context { background: transparent; }
.booking-flow .prototype :is(.prototype__header, .prototype__progress) { background: rgba(8,6,12,.4); }
.booking-intake .intake-card,
.booking-flow :is(.calendar-card, .slot-card, .review-card, .confirmed-card) { background: rgba(10,7,14,.88); }
.booking-intake .primary-action,
.booking-flow :is(.primary-button, .secondary-button) {
  width: fit-content; max-width: 100%; min-width: 280px; min-height: 52px;
  padding: 12px 42px; border-radius: var(--booking-radius-action);
}
.booking-intake .primary-action,
.booking-flow .primary-button {
  border: 0; background: linear-gradient(105deg,#43054d,#df582a) padding-box;
  box-shadow: 0 8px 28px rgba(109,23,87,.2);
  transition: box-shadow .18s ease, filter .18s ease;
}
.booking-intake .primary-action:hover,
.booking-flow .primary-button:not(:disabled):hover { filter: brightness(1.12); }
.booking-intake .primary-action:focus-visible,
.booking-flow .primary-button:focus-visible { outline: 3px solid #ffb6dc; outline-offset: 3px; }
.booking-intake .intake-card .primary-action { display: block; margin: 22px auto 0; }
.booking-flow .calendar-layout { margin-bottom: 0; }
.booking-flow .slot-card .calendar-submit {
  width: 100%; min-width: 0; margin-top: 18px; justify-content: center;
  padding: 12px 42px; border: 0;
  background: linear-gradient(105deg,#43054d,#df582a) padding-box;
  font-size: var(--booking-action-size); font-weight: var(--booking-action-weight);
}
.booking-flow .slot-card .calendar-submit [data-continue-label] { font: inherit; color: inherit; }
.booking-flow .review-panel > .primary-button { margin-left: auto; }
.booking-flow .center-state > :is(.primary-button, .secondary-button) { margin-inline: auto; }

/* The original landing logo tile, scaled for the compact Booking header. */
.brand-mark-tile {
  display: grid; place-items: center; flex: 0 0 auto;
  width: var(--booking-brand-size); height: var(--booking-brand-size);
  border-radius: 0;
  background: linear-gradient(345.05deg, #e05a2a -188.05%, #3e054d 75.77%);
  box-shadow: inset 0 -1px rgba(255,255,255,.08);
}
.brand-mark-tile > .brand-mark {
  display: block; width: auto; height: var(--booking-brand-mark-size); object-fit: contain;
}

/* Selected A direction: restrained corners on every customer control and panel.
   Status dots, the confirmation check and loading rings remain circular icons. */
.device-frame, .flow-preview { border-radius: var(--booking-radius-card); }
.intake-card .c1-custom-select__menu,
.intake-card .c1-custom-select__option,
.intake-card [data-form-status] { border-radius: var(--booking-radius-field); }
.prototype--booking-flow .prototype__trust span,
.prototype--booking-flow .hold-pill,
.prototype--booking-flow .calendar-days button,
.prototype--booking-flow .state-icon:not(.state-icon--success):not(.state-icon--loading) {
  border-radius: var(--booking-radius-action);
}
.al-consent-dialog, .al-consent-panel { border-radius: var(--booking-radius-card); }

.prototype.approach-a.prototype--booking-flow .prototype__context h1,
.prototype--booking-flow .panel-heading :is(h1, h2),
.prototype--booking-flow .center-state :is(h1, h2),
.prototype--booking-flow .stripe-hosted-preview h2 {
  font-size: var(--booking-heading-size);
  font-weight: var(--booking-heading-weight);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.prototype--booking-flow .prototype__eyebrow {
  font-size: var(--booking-label-size) !important;
  font-weight: 500;
  letter-spacing: .12em;
}

.prototype.approach-a.prototype--booking-flow .prototype__trust span,
.prototype--booking-flow .prototype__progress b,
.prototype--booking-flow .panel-heading > span,
.prototype--booking-flow .review-card small,
.prototype--booking-flow .confirmed-card small,
.prototype--booking-flow .calendar-week span,
.prototype--booking-flow .calendar-timezone,
.prototype--booking-flow .calendar-timezone span,
.prototype--booking-flow .slot-card button span,
.prototype--booking-flow .hold-pill,
.prototype--booking-flow .stripe-handoff-summary small,
.prototype--booking-flow .stripe-auto,
.prototype--booking-flow .stripe-hosted-preview > small,
.prototype--booking-flow .prototype__footer {
  font-size: var(--booking-label-size);
  font-weight: var(--booking-label-weight);
  line-height: 1.4;
  letter-spacing: normal;
}

/* Override the legacy tiny mobile progress labels without changing the steps. */
.prototype--booking-flow .prototype__progress b { font-size: var(--booking-label-size) !important; }
.prototype--booking-flow .prototype__progress span { font-size: 12px; font-weight: 500; }
.prototype--booking-flow .review-card small,
.prototype--booking-flow .confirmed-card small,
.prototype--booking-flow .calendar-week span,
.prototype--booking-flow .calendar-timezone,
.prototype--booking-flow .calendar-timezone span,
.prototype--booking-flow .slot-card button span,
.prototype--booking-flow .stripe-handoff-summary small,
.prototype--booking-flow .stripe-auto,
.prototype--booking-flow .stripe-hosted-preview > small,
.prototype--booking-flow .prototype__footer { color: var(--booking-label-color); }
.prototype--booking-flow .review-card small { text-transform: none; }

.prototype--booking-flow .calendar-month strong { font-size: 18px; font-weight: 500; line-height: 1.35; }
.prototype--booking-flow .calendar-month small { font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.prototype--booking-flow .calendar-timezone strong,
.prototype--booking-flow .calendar-timezone select,
.prototype--booking-flow .calendar-days button,
.prototype--booking-flow .slot-card button,
.prototype--booking-flow .slot-card button strong,
.prototype--booking-flow .review-card strong,
.prototype--booking-flow .confirmed-card :is(strong, span),
.prototype--booking-flow .stripe-handoff-summary :is(span, strong),
.prototype--booking-flow .stripe-window__body strong {
  font-size: var(--booking-value-size);
  font-weight: var(--booking-value-weight);
  line-height: 1.4;
  letter-spacing: normal;
}
.prototype--booking-flow .calendar-timezone :is(strong, select),
.prototype--booking-flow .slot-card button,
.prototype--booking-flow .review-card strong,
.prototype--booking-flow .confirmed-card :is(strong, span),
.prototype--booking-flow .stripe-handoff-summary :is(span, strong) { color: var(--booking-value-color); }
.prototype--booking-flow .calendar-days button.available { font-weight: 500; }
.prototype--booking-flow .calendar-timezone select { min-height: 44px; border-radius: var(--booking-radius-field); }
.prototype--booking-flow .calendar-timezone { flex-wrap: wrap; gap: 8px 18px; }

.prototype--booking-flow .panel-heading p,
.prototype--booking-flow .center-state > p:not(.prototype__eyebrow),
.prototype--booking-flow .stripe-hosted-preview > p:not(.prototype__eyebrow),
.prototype--booking-flow .slot-card > :is(small, p),
.prototype--booking-flow .calendar-status,
.prototype--booking-flow .recovery-grid p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.prototype--booking-flow .slot-card > :is(h2, h3),
.prototype--booking-flow .recovery-grid h3 { font-size: 16px; font-weight: 500; line-height: 1.4; }
.prototype--booking-flow .panel-heading--review .review-greeting strong,
.prototype--booking-flow .hold-pill strong { font-weight: 500; }
.prototype--booking-flow .review-card span { font-size: 12px; font-weight: 400; line-height: 1.4; }
.prototype--booking-flow .secondary-link,
.prototype--booking-flow .flow-back b,
.prototype--booking-flow .recovery-grid button { font-size: 12px; font-weight: 400; line-height: 1.4; }

.prototype--booking-flow :is(.primary-button, .secondary-button) {
  font-size: var(--booking-action-size);
  font-weight: var(--booking-action-weight);
  line-height: 1.4;
  padding: 12px 38px;
  border-radius: var(--booking-radius-action);
  text-align: center;
}
.prototype--booking-flow .prototype__header-close,
.prototype--booking-flow .calendar-month button {
  width: 44px;
  height: 44px;
  border-radius: var(--booking-radius-action);
}
.prototype--booking-flow .flow-actions :is(a, button) { height: 44px; border-radius: var(--booking-radius-action); }
.prototype--booking-flow .flow-actions :is(.flow-close, .flow-back) { min-width: 44px; }
.prototype--booking-flow .slot-card button { border-radius: var(--booking-radius-action); }

/* Privacy controls keep their existing behavior, focus and consent choices. */
.al-consent-dialog h2,
.al-consent-panel > strong { font-weight: 500; }
.al-consent-actions button { min-height: 44px; border-radius: var(--booking-radius-action); font-weight: 500; }

@container (max-width: 520px) {
  .prototype--booking-flow .prototype__header {
    --booking-brand-size: 40px; --booking-brand-mark-size: 28px;
  }
  .prototype--booking-flow :is(.prototype__context, .prototype__workarea) {
    --booking-heading-size: 22px;
    --booking-value-size: 16px;
  }
  .prototype--booking-flow .calendar-timezone :is(strong, select) { font-size: 16px; }
  /* Center the mobile introduction, but keep closing notes on the content's left edge. */
  .prototype--booking-flow .panel-heading--review {
    flex-direction: column; align-items: center; gap: 6px; text-align: center;
  }
  .prototype--booking-flow .panel-heading--review > div { width: 100%; }
  .prototype--booking-flow .panel-heading--review + .hold-pill {
    display: flex; width: fit-content; max-width: 100%;
    justify-content: center; margin-inline: auto; text-align: center;
  }
  .prototype--booking-flow .prototype__footer {
    justify-items: start; gap: 8px; text-align: left;
  }
  .prototype--booking-flow .primary-button {
    width:min(300px,calc(100% - 24px)); min-width:0; min-height:48px;
    padding:10px 42px; margin-inline:auto;
  }
  .booking-flow .slot-card .calendar-submit,
  .booking-flow .secondary-button {
    width:min(300px,calc(100% - 24px)); min-width:0; min-height:48px;
    padding:10px 42px; margin-inline:auto;
  }
  .prototype--booking-flow :is(.prototype__header-close, .flow-close) {
    position:relative; font-size:0; color:#c2b8c7;
    border-color:rgba(255,255,255,.1);
  }
  .prototype--booking-flow :is(.prototype__header-close, .flow-close)::before,
  .prototype--booking-flow :is(.prototype__header-close, .flow-close)::after {
    content:""; position:absolute; top:50%; left:50%; width:14px; height:1.5px;
    border-radius:1px; background:currentColor; pointer-events:none;
    transform:translate(-50%,-50%) rotate(45deg);
  }
  .prototype--booking-flow :is(.prototype__header-close, .flow-close)::after {
    transform:translate(-50%,-50%) rotate(-45deg);
  }
}

@media (max-width: 520px) {
  body.booking-intake { background-size: auto 1000px; }
  .booking-header { --booking-brand-size: 40px; --booking-brand-mark-size: 28px; }
  .booking-footer { align-items: flex-start; text-align: left; }
  .intake-card .primary-action {
    display:block; width:min(300px,calc(100% - 24px)); min-width:0; min-height:48px;
    padding:10px 30px; margin-inline:auto;
  }
  .booking-intake .intake-card .primary-action { min-width:0; }
  .intake-close {
    position:relative; font-size:0; color:#c2b8c7;
    border-color:rgba(255,255,255,.1);
  }
  .intake-close::before, .intake-close::after {
    content:""; position:absolute; top:50%; left:50%; width:14px; height:1.5px;
    border-radius:1px; background:currentColor; pointer-events:none;
    transform:translate(-50%,-50%) rotate(45deg);
  }
  .intake-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
}