/* ============================================================
 * Booking form — minimal light landing/wizard.
 * Same aesthetic as salon_profile.css: Inter + Instrument Serif,
 * white background, hairline borders, no chromatic accents.
 *
 * Visibility orchestration via body classes:
 *   body.bb-landing-mode → show .bb-landing only
 *   body.bb-sf-mode      → show .bb-sf-pane keyed by [data-sf-stage]
 *   else                 → show .bb-booking-page wizard
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
    --bb-bg:        #ffffff;
    --bb-off:       #faf9f6;
    --bb-off-2:     #f4f2ec;
    --bb-ink:       #0a0a0a;
    --bb-ink-2:     #1f1f1f;
    --bb-muted:     #7a7770;
    --bb-muted-2:   #a5a39c;
    --bb-hair:      #e8e5dd;
    --bb-hair-2:    #efece4;
    --bb-paper:     #ffffff;
    --bb-paper-2:   #faf9f6;
    --bb-acid:      #0a0a0a;     /* legacy var mapped to ink for safety */
    --bb-pink:      #0a0a0a;     /* legacy var mapped to ink */
    --bb-line:      rgba(10, 10, 10, .08);
    --bb-line-2:    rgba(10, 10, 10, .12);
    --bb-danger:    #c5221f;
    --bb-max:       1240px;
    --bb-pad:       40px;
    --bb-pad-sm:    20px;
}

/* ── Reset ─────────────────────────────────────────────────── */
body.appointments-external-form {
    background: var(--bb-bg) !important;
    color: var(--bb-ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    padding-bottom: 130px;
    line-height: 1.4;
}
body.appointments-external-form a { color: inherit; text-decoration: none; }
body.appointments-external-form button { font-family: inherit; cursor: pointer; }
body.appointments-external-form input,
body.appointments-external-form select,
body.appointments-external-form textarea { font-family: inherit; color: inherit; }

/* Full-width strips, content centered in max-width container. */
.bb-wizard-topbar,
.bb-wizard-salon-strip,
.bb-booking-hero,
.bb-landing,
#bb-sf-staff,
#bb-sf-services,
.bb-booking-page,
.bb-wizard-footer { background-color: var(--bb-bg); }

.bb-wizard-topbar-inner,
.bb-wizard-salon-strip-inner,
.bb-landing-inner,
.bb-sf-pane-inner,
.bb-booking-page,
.bb-wizard-cta {
    max-width: var(--bb-max);
    margin-left: auto;
    margin-right: auto;
}
.bb-booking-page { padding: 0 var(--bb-pad); }

/* ── Visibility orchestration ──────────────────────────────── */
.bb-landing,
#bb-sf-staff,
#bb-sf-services { display: none; }

body.bb-landing-mode .bb-landing { display: block; }
body.bb-landing-mode .bb-booking-page,
body.bb-landing-mode .bb-wizard-footer,
body.bb-landing-mode .bb-wizard-back { display: none !important; }

body.bb-sf-mode .bb-booking-page,
body.bb-sf-mode .bb-wizard-footer { display: none !important; }
body.bb-sf-mode[data-sf-stage="staff"]    #bb-sf-staff    { display: block; }
body.bb-sf-mode[data-sf-stage="services"] #bb-sf-services { display: block; }

.hidden, .tw-hidden { display: none !important; }
.booking-step { display: none; }
.booking-step.active { display: block; }

/* ── Wizard topbar ─────────────────────────────────────────── */
.bb-wizard-topbar {
    padding: 0;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bb-hair);
    position: sticky; top: 0; z-index: 90;
}
.bb-wizard-topbar-inner {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    padding: 18px var(--bb-pad);
    max-width: var(--bb-max);
    margin: 0 auto;
}
.bb-wizard-back {
    width: 40px; height: 40px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--bb-hair);
    display: grid; place-items: center;
    color: var(--bb-ink);
    transition: background .2s ease, color .2s ease;
}
.bb-wizard-back:hover { background: var(--bb-ink); color: #fff; }
.bb-wizard-back.hidden { visibility: hidden; display: grid; }
.bb-wizard-titles { text-align: center; }
.bb-wizard-step-num {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
}
.bb-wizard-title {
    margin: 4px 0 0;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    color: var(--bb-ink);
    letter-spacing: -.015em;
}
.bb-wizard-spacer { width: 40px; height: 40px; }

/* ── Salon strip ───────────────────────────────────────────── */
.bb-wizard-salon-strip {
    background: var(--bb-bg);
    border-bottom: 1px solid var(--bb-hair);
}
.bb-wizard-salon-strip-inner {
    padding: 12px var(--bb-pad);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
}
.bb-wizard-salon-name {
    margin: 0;
    display: inline;
    font: inherit;
    color: var(--bb-ink);
    font-weight: 500;
}
.bb-wizard-salon-address {
    display: inline;
    color: var(--bb-muted);
}
.bb-wizard-salon-address::before { content: ' · '; }

/* ── Booking hero (used on wizard mode, not landing) ───────── */
.bb-booking-hero {
    text-align: center;
    padding: 48px var(--bb-pad) 24px;
    border-bottom: 1px solid var(--bb-hair);
    position: relative;
}
body.bb-landing-mode .bb-booking-hero,
body.bb-sf-mode      .bb-booking-hero { display: none; }
.bb-booking-hero h1 {
    margin: 0;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 400;
    color: var(--bb-ink);
    letter-spacing: -.025em;
    line-height: 1;
}
.bb-booking-hero-logo {
    display: inline-block;
    margin-bottom: 12px;
}
.bb-booking-hero-logo img {
    max-width: 96px;
    max-height: 64px;
    object-fit: contain;
}
.bb-booking-hero-subtitle {
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--bb-muted);
    letter-spacing: -.005em;
}
.bb-lang-select {
    margin-top: 14px;
    padding: 10px 16px;
    border: 1px solid var(--bb-hair);
    border-radius: 999px;
    background: var(--bb-bg);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--bb-ink);
    cursor: pointer;
}

/* ── Per-step content + headers ────────────────────────────── */
.bb-step-content { padding: 56px 0 80px; }
.bb-step-header {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 36px;
}
.bb-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--bb-ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.005em;
    border-bottom: 1px solid var(--bb-ink);
    padding-bottom: 2px;
    transition: opacity .2s ease;
}
.bb-back-link:hover { opacity: .6; }

.bb-section-title {
    margin: 0 0 28px;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: .96;
    letter-spacing: -.03em;
    color: var(--bb-ink);
}

.bb-step-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
}
.bb-step-eyebrow .pulse { display: none; }

.bb-section-mark {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 14px;
}
.bb-section-mark .num {
    color: var(--bb-ink);
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-size: 18px;
    letter-spacing: 0;
}
.bb-section-mark .line { flex: 1; height: 1px; background: var(--bb-hair); }

/* ── Steps progress (4-segment hairline bar) ─────────────── */
.bb-steps {
    padding: 28px 0 10px;
    background: transparent;
}
.bb-steps-track {
    display: flex; align-items: center; gap: 6px;
}
.bb-step {
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: var(--bb-hair);
    overflow: hidden;
    position: relative;
    display: block;
    min-width: 0;
}
.bb-step-dot,
.bb-step-label,
.bb-step-connector { display: none; }
.bb-step::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--bb-ink);
    transform: translateX(-100%);
    transition: transform .4s ease;
}
.bb-step.completed::after { transform: translateX(0); }
.bb-step.active::after {
    background: var(--bb-ink);
    transform: translateX(0);
}
.bb-progress-bar-wrap { display: none; }

/* ── Landing screen ────────────────────────────────────────── */
.bb-landing-inner { padding: 80px var(--bb-pad) 120px; }
.bb-landing-h {
    margin: 0 0 56px;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(56px, 9vw, 120px);
    line-height: .9;
    letter-spacing: -.035em;
    color: var(--bb-ink);
    max-width: 16ch;
}
.bb-landing-h::after {
    content: ' ✦';
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: var(--bb-muted);
    font-size: .5em;
    font-weight: 400;
    margin-left: 8px;
    vertical-align: super;
}
.bb-landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.bb-landing-card {
    background: var(--bb-bg);
    color: var(--bb-ink);
    border: 1px solid var(--bb-hair);
    border-radius: 24px;
    padding: 44px 36px;
    aspect-ratio: 1.3;
    display: flex; flex-direction: column;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
    position: relative; overflow: hidden;
    font-family: inherit;
}
.bb-landing-card:hover {
    border-color: var(--bb-ink);
    transform: translateY(-3px);
}
.bb-landing-card--specialists:hover {
    background: var(--bb-ink);
    color: #fff;
}
.bb-landing-card:active { transform: scale(.99); }
.bb-landing-illo {
    width: 56px; height: 56px;
    border-radius: 999px;
    background: var(--bb-off-2);
    color: var(--bb-ink);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: background .25s ease, color .25s ease;
}
.bb-landing-card--specialists:hover .bb-landing-illo {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.bb-landing-illo svg { width: 28px; height: 28px; color: currentColor; }
.bb-landing-illo svg rect,
.bb-landing-illo svg path,
.bb-landing-illo svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}
.bb-landing-illo--services svg rect { fill: currentColor; fill-opacity: .12; stroke: currentColor; }
.bb-landing-illo--services svg circle { fill: currentColor; stroke: currentColor; }
.bb-landing-illo--specialists svg circle { fill: currentColor; fill-opacity: .15; stroke: currentColor; }
.bb-landing-card-label {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1;
    color: inherit;
    letter-spacing: -.02em;
}

/* ── Staff-first panes ─────────────────────────────────────── */
.bb-sf-pane-inner { padding: 56px var(--bb-pad) 80px; }
.bb-sf-pane-inner .bb-section-title { margin-bottom: 36px; }

.bb-sf-staff-card {
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.bb-sf-staff-card:hover { border-color: var(--bb-ink); }
.bb-sf-staff-card.selected {
    border-color: var(--bb-ink);
    background: var(--bb-ink);
    color: #fff;
}
.bb-sf-staff-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bb-off-2);
    color: var(--bb-muted);
    display: grid; place-items: center;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    flex-shrink: 0;
}
.bb-sf-staff-card.selected .bb-sf-staff-avatar { background: rgba(255, 255, 255, .12); color: #fff; }
.bb-sf-staff-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bb-sf-staff-name {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -.015em;
    color: inherit;
}
.bb-sf-staff-meta {
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
}
.bb-sf-staff-card.selected .bb-sf-staff-meta { color: rgba(255, 255, 255, .65); }

/* ── Service cards (grid + sf) ─────────────────────────────── */
.bb-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}
.bb-sf-svc-card,
.bb-service-card,
.svc-card {
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 0;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
    position: relative;
}
.bb-sf-svc-card:hover,
.bb-service-card:hover { border-color: var(--bb-ink); }
.bb-sf-svc-card.selected,
.bb-service-card.selected {
    background: var(--bb-ink);
    color: #fff;
    border-color: var(--bb-ink);
}
.bb-sf-svc-row { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.bb-sf-svc-info { flex: 1; min-width: 0; }
.bb-sf-svc-name,
.bb-service-name {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--bb-ink);
    display: flex; align-items: center; gap: 10px;
}
.bb-service-card.selected .bb-service-name { color: #fff; }
.bb-service-color-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bb-sf-svc-meta,
.bb-service-meta {
    margin-top: 14px;
    display: flex; flex-wrap: wrap; gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-muted);
}
.bb-service-card.selected .bb-service-meta { color: rgba(255, 255, 255, .65); }
.bb-sf-svc-badge,
.bb-service-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    color: var(--bb-ink);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--bb-hair);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -.005em;
}
.bb-service-card.selected .bb-service-badge {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
}
.bb-sf-svc-badge svg,
.bb-service-badge svg { width: 11px; height: 11px; }
.bb-sf-svc-desc,
.bb-service-desc {
    margin-top: 12px;
    font-size: 13px;
    color: var(--bb-muted);
    line-height: 1.55;
}
.bb-service-card.selected .bb-service-desc { color: rgba(255, 255, 255, .7); }
.bb-sf-svc-price {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 24px;
    color: var(--bb-ink);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -.02em;
}

/* ── Providers grid ────────────────────────────────────────── */
.bb-providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.provider-card,
.bb-provider-styled {
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    border-radius: 16px;
    padding: 22px 20px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    color: var(--bb-ink);
}
.provider-card:hover { border-color: var(--bb-ink); }
.provider-card.selected {
    background: var(--bb-ink);
    color: #fff;
    border-color: var(--bb-ink);
}

/* ── Date strip ────────────────────────────────────────────── */
.bb-date-row { margin-bottom: 16px; }
.bb-field-label {
    display: block;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
}
.bb-day-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--bb-pad));
    padding: 4px var(--bb-pad) 20px;
    scroll-snap-type: x mandatory;
}
.bb-day-strip::-webkit-scrollbar { display: none; }
.bb-day-strip-loading { width: 100%; padding: 14px 0; }
.bb-day-btn {
    flex-shrink: 0;
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 72px;
    text-align: center;
    scroll-snap-align: start;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
    color: var(--bb-ink);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer;
}
.bb-day-btn:hover { border-color: var(--bb-ink); }
.bb-day-btn.selected,
.bb-day-btn.active {
    background: var(--bb-ink);
    color: #fff;
    border-color: var(--bb-ink);
}
.bb-day-btn-name {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
}
.bb-day-btn.selected .bb-day-btn-name,
.bb-day-btn.active   .bb-day-btn-name { color: rgba(255, 255, 255, .7); }
.bb-day-btn-date {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    margin: 2px 0 0;
    color: inherit;
    letter-spacing: -.02em;
}

/* ── Time slots ────────────────────────────────────────────── */
.bb-time-section { margin-top: 24px; }
.bb-time-section h5 {
    margin: 0 0 16px;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--bb-ink);
    letter-spacing: -.015em;
}
.bb-time-section h5::before { display: none; }
.bb-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.bb-time-grid button,
.time-slot {
    padding: 14px 8px;
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--bb-ink);
    text-align: center;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
    cursor: pointer;
    letter-spacing: -.005em;
}
.bb-time-grid button:hover,
.time-slot:hover { border-color: var(--bb-ink); }
.bb-time-grid button.selected,
.time-slot.selected,
.time-slot.active {
    background: var(--bb-ink);
    color: #fff;
    border-color: var(--bb-ink);
}
.time-slot.disabled,
.time-slot[disabled] {
    background: var(--bb-off-2);
    color: var(--bb-muted-2);
    text-decoration: line-through;
    pointer-events: none;
    border-color: var(--bb-hair);
}

/* ── Summary (step 4) ──────────────────────────────────────── */
.bb-summary {
    background: var(--bb-ink);
    color: #fff;
    border-radius: 20px;
    padding: 28px 28px;
    margin-bottom: 28px;
}
.bb-summary-item {
    display: flex; justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    gap: 20px;
}
.bb-summary-item:first-child { padding-top: 0; }
.bb-summary-item:last-child { border-bottom: none; padding-bottom: 0; }
.bb-summary-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: rgba(255, 255, 255, .55);
    flex-shrink: 0;
}
.bb-summary-label svg { display: none; }
.bb-summary-val {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    text-align: right;
    letter-spacing: -.015em;
    line-height: 1.2;
}
.bb-summary-sub {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    margin-top: 4px;
    text-align: right;
    letter-spacing: -.005em;
}

/* ── Form sections + grid ──────────────────────────────────── */
.bb-form-section {
    background: transparent;
    border: none;
    margin-bottom: 28px;
    overflow: visible;
}
.bb-form-section-head {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
}
.bb-form-section-head::before { display: none; }
.bb-form-section-icon { display: none; }
.bb-form-section-title {
    font: inherit;
    color: var(--bb-muted);
}
.bb-form-section-head::after {
    content: '';
    flex: 1; height: 1px; background: var(--bb-hair);
}
.bb-form-section-body { padding: 0; }
.bb-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.bb-form-field { display: flex; flex-direction: column; gap: 8px; }
.bb-form-field.full,
.bb-form-grid > .bb-form-field:nth-child(n+3) { grid-column: 1 / -1; }
.bb-form-field label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--bb-muted);
    letter-spacing: -.005em;
}
.bb-form-field label .req { color: var(--bb-ink); }
.bb-form-field input,
.bb-form-field textarea,
.bb-form-field select {
    padding: 14px 16px;
    border: 1px solid var(--bb-hair);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    background: var(--bb-bg);
    color: var(--bb-ink);
    width: 100%;
    outline: none;
    transition: border-color .2s ease;
    letter-spacing: -.005em;
}
.bb-form-field input::placeholder { color: var(--bb-muted-2); }
.bb-form-field input:focus,
.bb-form-field textarea:focus,
.bb-form-field select:focus {
    border-color: var(--bb-ink);
    background: var(--bb-bg);
}

/* ── Checkbox + consent block ──────────────────────────────── */
.bb-checkbox-wrap,
.bb-consent-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px;
    border: 1px solid var(--bb-hair);
    border-radius: 14px;
    margin-top: 6px;
    background: var(--bb-bg);
}
.bb-checkbox-wrap input[type="checkbox"],
.bb-consent-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    background: var(--bb-bg);
    border: 1px solid var(--bb-ink);
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    margin-top: 1px;
    transition: background .15s ease;
}
.bb-checkbox-wrap input[type="checkbox"]:checked,
.bb-consent-row input[type="checkbox"]:checked { background: var(--bb-ink); }
.bb-checkbox-wrap input[type="checkbox"]:checked::after,
.bb-consent-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bb-checkbox-label,
.bb-consent-text {
    font-size: 13px;
    color: var(--bb-ink-2);
    line-height: 1.55;
    cursor: pointer;
    font-weight: 400;
}
.bb-checkbox-label a,
.bb-consent-text a {
    color: var(--bb-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.bb-consent-required { color: var(--bb-ink); font-weight: 600; }

.bb-consent-block {
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 10px;
}

.bb-recaptcha-wrap { margin: 18px 0 0; }

/* ── Hide the per-step "Continue" buttons — global CTA proxies them ── */
.bb-step-actions,
.bb-btn-next { display: none !important; }
.bb-btn-submit { display: none; }

/* ── Empty / loading states ────────────────────────────────── */
.bb-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--bb-muted);
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-size: 20px;
    background: var(--bb-off);
    border-radius: 18px;
    border: 1px dashed var(--bb-hair);
    font-weight: 400;
}
.bb-loading {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 48px 0;
    color: var(--bb-muted);
    grid-column: 1 / -1;
}
.bb-loading-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
}
.bb-spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--bb-hair);
    border-top-color: var(--bb-ink);
    border-radius: 50%;
    animation: bb-spin 1s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* ── Sticky bottom CTA bar ─────────────────────────────────── */
.bb-wizard-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 14px var(--bb-pad) 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--bb-bg) 40%);
    z-index: 40;
    pointer-events: none;
}
.bb-wizard-cta {
    pointer-events: auto;
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    border-radius: 999px;
    padding: 8px 8px 8px 24px;
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    max-width: var(--bb-max);
    margin: 0 auto;
    box-shadow: 0 18px 40px rgba(10, 10, 10, .12);
    font-family: inherit;
    color: inherit;
    text-align: left;
}
.bb-wizard-cta[disabled] .bb-wizard-cta-btn { opacity: .35; cursor: not-allowed; }
.bb-wizard-cta-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.bb-wizard-cta-step {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--bb-muted);
    white-space: nowrap;
}
.bb-wizard-cta-value {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.15;
    margin-top: 4px;
    color: var(--bb-ink);
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bb-wizard-cta-value .price { color: var(--bb-ink); font-style: normal; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; margin-left: 6px; }
.bb-wizard-cta-btn {
    background: var(--bb-ink); color: #fff;
    height: 52px; padding: 0 14px 0 24px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 13px;
    letter-spacing: -.005em;
    display: inline-flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background .2s ease;
}
.bb-wizard-cta-btn:hover { background: var(--bb-ink-2); }
.bb-wizard-cta-btn .arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid; place-items: center;
}
.bb-wizard-cta-label { display: inline; font: inherit; }

/* ── Legacy provider modal (Perfex bootstrap) ─────────────── */
#providerDetailsModal .modal-content {
    border-radius: 18px;
    border: 1px solid var(--bb-hair);
    overflow: hidden;
    background: var(--bb-bg);
}
#providerDetailsModal .modal-header {
    background: var(--bb-bg);
    border-bottom: 1px solid var(--bb-hair);
}
#providerDetailsModal .modal-title {
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    color: var(--bb-ink);
    letter-spacing: -.015em;
}
#providerDetailsModal .btn-primary {
    background: var(--bb-ink);
    border-color: var(--bb-ink);
    color: #fff;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
#providerDetailsModal .btn-default {
    background: var(--bb-bg);
    border: 1px solid var(--bb-hair);
    color: var(--bb-ink);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 760px) {
    :root {
        --bb-pad: var(--bb-pad-sm);
    }
    .bb-landing-inner { padding: 56px var(--bb-pad) 88px; }
    .bb-landing-h { margin-bottom: 36px; }
    .bb-landing-grid { gap: 12px; }
    .bb-landing-card { padding: 32px 24px; aspect-ratio: 1.1; border-radius: 18px; }

    .bb-step-content { padding: 36px 0 60px; }
    .bb-step-header { gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
    .bb-step-header .bb-back-link { order: -1; }
    .bb-section-title { font-size: 36px; margin-bottom: 22px; }

    .bb-wizard-topbar-inner { padding: 14px var(--bb-pad); }

    .bb-services-grid,
    .bb-providers-grid { grid-template-columns: 1fr; }

    .bb-summary { padding: 22px; }
    .bb-summary-item { padding: 12px 0; gap: 14px; }
    .bb-summary-val { font-size: 18px; }

    .bb-form-grid { grid-template-columns: 1fr; }
    .bb-form-grid > .bb-form-field:nth-child(n+3) { grid-column: 1 / -1; }

    .bb-wizard-cta { padding: 6px 6px 6px 18px; gap: 8px; }
    .bb-wizard-cta-btn { height: 48px; padding: 0 8px 0 18px; font-size: 12px; }
    .bb-wizard-cta-btn .arrow { width: 28px; height: 28px; }
    .bb-wizard-cta-value { font-size: 15px; }

    .bb-time-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

@media (max-width: 460px) {
    .bb-landing-grid { grid-template-columns: 1fr; }
    .bb-landing-card { aspect-ratio: 1.6; }
    .bb-landing-h { font-size: 56px; }
}

/* ── Подпись «Работает на 77CRM» под формой ──────────────────── */
.bb-brand-footer {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px;
    margin: 28px auto 36px; padding-top: 18px;
    border-top: 1px solid var(--bb-line);
    font-size: 12.5px; color: var(--bb-muted); letter-spacing: .01em;
}
.bb-brand-footer b { color: var(--bb-ink); font-weight: 700; }
.bb-brand-footer a { color: var(--bb-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--bb-line); }
.bb-brand-footer a:hover { border-bottom-color: var(--bb-ink); }