/* Django-side glue for the Design System styles (components.css is the DS bundle, unchanged). */
:root:not(.bf-legacy), :root:not(.bf-legacy) body { margin: 0; background: var(--bg); }
.bf-root [hidden], .bf-scope [hidden] { display: none !important; }

/* Server-rendered controls keep both states in the markup; these rules show the right one. */
.bf-check-box:not(.is-on) > .bf-icon { visibility: hidden; }
.bf-select-menu .bf-menu-item:not(.is-selected) > .bf-icon { display: none; }
.bf-show-open { display: none; }
.bf-select.is-open > .bf-select-trigger > .bf-show-open,
.bf-acc-item.is-open > .bf-acc-q > .bf-show-open,
.bf-password.is-revealed .bf-show-open { display: inline-block; }
.bf-select.is-open > .bf-select-trigger > .bf-show-closed,
.bf-acc-item.is-open > .bf-acc-q > .bf-show-closed,
.bf-password.is-revealed .bf-show-closed { display: none; }

/* Links styled as controls (server-side tabs, pagination, icon links) keep the control colours
   instead of the generic `.bf-root a` link colour. */
.bf-root a.bf-iconbtn { color: var(--ink-muted); }
.bf-root a.bf-iconbtn:is(.bf-iconbtn-secondary, .bf-iconbtn-ghost), .bf-root a.bf-iconbtn:hover { color: var(--ink); }
.bf-root a.bf-tab { color: var(--ink-muted); }
.bf-root a.bf-tab:hover, .bf-root .bf-tabs-line a.bf-tab.is-active { color: var(--ink); }
.bf-root .bf-tabs-segmented a.bf-tab.is-active { color: #fff; }
.bf-root a.bf-page { display: inline-grid; place-items: center; padding-inline: 4px; color: var(--ink-muted); }
.bf-root a.bf-page:hover { color: var(--ink); }
.bf-root a.bf-page.is-active { color: var(--on-accent); }

/* The 404 bot is a square picture, unlike the wider mood bots */
.bf-minibot.is-lost { aspect-ratio: 1; }
.bf-minibot.is-lost.is-lg { inline-size: 200px; }

/* Orb3D is a picture now; it keeps the tinted halo and floats above a light floor shadow.
   The shadow shrinks and fades as the orb rises, so the two read as one motion. */
.bf-orb-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(3,5,24,.45)); }
.bf-orb-shadow { position: absolute; inset-inline: 14%; inset-block-end: -16%; block-size: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,230,255,.7), color-mix(in srgb, var(--kg) 60%, transparent) 55%, transparent); filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  .bf-orb-img { animation: bf-orb-float 6s ease-in-out infinite; }
  .bf-orb-shadow { animation: bf-orb-shadow 6s ease-in-out infinite; }
}
@keyframes bf-orb-float { 50% { transform: translateY(-14%); } }
@keyframes bf-orb-shadow { 50% { transform: scale(.6); opacity: .35; } }

/* ---------- Page shells ---------- */
/* Public header: a thin glowing blue line along its bottom edge that fades out at both
   ends (carried over from the previous site header at Negar's request). */
.bf-pheader { border-block-end-color: transparent; }
.bf-pheader::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #38D9FF 20%, #168CFF 50%, #38D9FF 80%, transparent);
  box-shadow: 0 0 10px 0 rgba(23,140,214,.45); }
.bf-pheader.is-open .bf-pheader-menu .bf-show-open { display: inline-block; }
.bf-pheader.is-open .bf-pheader-menu .bf-show-closed { display: none; }

/* Sidebar logout is a POST form; its button looks like the other menu items. */
.bf-sidebar-foot form { margin: 0; }
button.bf-sidebar-item { inline-size: 100%; background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; text-align: start; }

/* Phone: the open sidebar drawer dims the page behind it; tapping the dim closes it. */
.bf-nav-scrim { display: none; }
.bf-layout-app.is-nav-open > .bf-nav-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(3,6,24,.6); }

/* Pages still on the previous stylesheet (Home and friends) wear the new header and
   footer through a .bf-scope island; the html element carries .bf-legacy so the new
   design tokens stay inside the island instead of overriding the old ones. */
.bf-legacy-chrome { background: transparent; }
.bf-legacy-chrome.is-header { position: sticky; inset-block-start: 0; z-index: 100; }
.bf-legacy-chrome .bf-pheader { position: relative; }
.bf-legacy-chrome .bf-pfooter { margin-block-start: 0; }
/* Phones: the wordmark logo gives way so the menu button never leaves the screen. */
.bf-pheader-inner > .bf-logo { min-inline-size: 0; flex-shrink: 1; }
.bf-pheader-inner > .bf-logo .bf-logo-img { max-inline-size: 100%; object-fit: contain; object-position: right center; }
@container bfpage (max-width: 640px) { .bf-pheader .bf-logo-img { block-size: 40px; } }
/* The wordmark logo leaves room for the CRM "internal panel" chip. */
.bf-sidebar-head > .bf-logo { min-inline-size: 0; flex-shrink: 1; }
.bf-sidebar-head > .bf-logo .bf-logo-img { max-inline-size: 100%; object-fit: contain; object-position: right center; }
.bf-sidebar-crm .bf-sidebar-head .bf-logo-img { block-size: 30px; }
.bf-sidebar-head > .bf-env-chip { flex-shrink: 0; }
button.bf-bottomnav-item { background: none; border: 0; font: inherit; font-size: 11px; cursor: pointer; }
/* Old pages: keep the skip link fully off-screen until it gets keyboard focus. */
.bf-legacy .skip-link:not(:focus) { transform: translateY(-200%); }

/* ---------- Step 2: sign-in pages ---------- */
/* OTP: one transparent input over a row of digit boxes. */
.bf-otp { position: relative; inline-size: 100%; }
.bf-otp-boxes { display: flex; justify-content: center; gap: 10px; }
.bf-otp-box { flex: 1 1 0; max-inline-size: 54px; aspect-ratio: 54 / 62; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line-control); background: var(--surface-2); font: 700 24px/1 var(--font-sans); color: var(--ink); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.bf-otp-box.is-filled { border-color: rgba(110,195,255,.55); }
.bf-otp:focus-within .bf-otp-box.is-current { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(56,217,255,.22); }
.bf-otp.is-error .bf-otp-box { border-color: var(--danger); }
.bf-otp-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; cursor: text; }
.bf-layout-auth .bf-auth-card > form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.bf-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bf-auth-switch { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.bf-auth-center { text-align: center; margin: 0; }
.bf-resend { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; }
.bf-resend form { margin: 0; }
.bf-resend.is-ready .bf-resend-wait { display: none; }
.bf-auth-inline { color: var(--link) !important; font-weight: 600; white-space: nowrap; }
.bf-check.is-error .bf-check-box { border-color: var(--danger); }

/* ---------- Step 3: public pages ---------- */
/* Form Page: form at the start, "what happens next" aside at the end. */
.bf-lead-page { padding-block-start: var(--space-12); }
.bf-lead-grid { gap: var(--space-10); }
.bf-lead-main > [data-bf-lead-panel] { display: flex; flex-direction: column; gap: var(--space-8); }
.bf-lead-form { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; }
.bf-lead-pair { gap: var(--space-4); }
.bf-lead-more { padding: var(--space-4); }
.bf-lead-more > summary { cursor: pointer; font-weight: 600; }
.bf-lead-more-body { display: flex; flex-direction: column; gap: var(--space-4); margin-block-start: var(--space-4); }
.bf-lead-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.bf-lead-aside .bf-mascot { align-self: center; }
.bf-lead-next { gap: 14px; padding: var(--space-6); }
.bf-lead-privacy { display: flex; align-items: center; gap: 6px; margin: 0; }
.bf-lead-success:focus { outline: none; }
@container bfpage (max-width: 640px) { .bf-lead-aside .bf-mascot { display: none; } }

/* Product selector: one centred column; the question steps and the result share one width. */
.bf-selector { max-inline-size: 760px; padding-block-start: var(--space-12); align-items: center; }
.bf-selector .bf-sechead { max-inline-size: none; }
.bf-selector-body { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; inline-size: 100%; max-inline-size: 500px; }
.bf-selector-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }
.bf-selector-q > legend { padding: 0; margin-block-end: var(--space-4); text-align: center; inline-size: 100%; }
.bf-selector-options { display: flex; flex-direction: column; gap: 10px; }
.bf-selector-nav { display: flex; justify-content: space-between; gap: var(--space-3); }
.bf-selector-verdict { align-items: center; gap: var(--space-3); }
.bf-selector-verdict > .bf-minibot { flex: none; }
.bf-selector-verdict > .bf-alert-body { flex: 1; min-inline-size: 0; }
.bf-selector-again { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-5); }
.bf-selector-again > .bf-btn { flex: 1 1 0; min-inline-size: 190px; max-inline-size: 240px; }
/* One line from 1440 down to 390: the heading scales with the viewport (18px at 390). */
.bf-selector .bf-sechead .t-h1 { white-space: nowrap; font-size: clamp(18px, 4.5vw, 36px); line-height: 1.5; }
/* The recommended card: a clean 1px violet→tier gradient frame and a soft, short glow
   instead of the corner brackets and the wide halo. */
.bf-selector .bf-pc { inline-size: 100%; max-inline-size: none; border: 1px solid transparent;
  background:
    radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(10,24,70,.92), rgba(6,14,44,.94)) padding-box,
    linear-gradient(135deg, rgba(139,92,255,.75), color-mix(in srgb, var(--pc) 70%, transparent)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px -24px var(--pcg); }
.bf-selector .bf-pc-corner { display: none; }

/* Training index and article. */
.bf-training-phones { display: flex; justify-content: center; gap: var(--space-6); }
.bf-training { padding-block-start: 0; }
.bf-training > .bf-tabs { align-self: flex-start; }
.bf-training-card { gap: 10px; color: inherit; text-decoration: none; }
.bf-training-card-top { display: flex; align-items: center; justify-content: space-between; }
.bf-training-read { margin-block-start: auto; display: inline-flex; align-items: center; gap: 4px; }
.bf-article { max-inline-size: 960px; padding-block-start: var(--space-8); gap: var(--space-4); }
.bf-article-meta { display: flex; align-items: center; gap: var(--space-4); }
.bf-article-step { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-8); align-items: center; padding-block: var(--space-6); border-block-end: 1px solid var(--line); }
.bf-article-step.is-text { grid-template-columns: minmax(0, 1fr); }
.bf-article-step-copy { display: flex; flex-direction: column; gap: 10px; }
.bf-article-step-head { display: flex; align-items: center; gap: 10px; }
.bf-article-step-head .bf-count-pill { inline-size: 28px; block-size: 28px; }
.bf-article-helpful [data-bf-helpful-thanks] { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; }
.bf-article-related { display: flex; flex-direction: column; gap: var(--space-4); margin-block-start: var(--space-4); }
.bf-article-cta { flex-direction: row; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-block-start: var(--space-4); }
.bf-article-cta > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-inline-size: 0; }
@container bfpage (max-width: 900px) {
  .bf-article-step { grid-template-columns: 1fr; justify-items: center; }
  .bf-article-step-copy { justify-self: stretch; }
}

/* ---------- Step 4: order wizard ---------- */
.bf-order-form { display: contents; }
.bf-order-step { display: flex; flex-direction: column; gap: var(--space-5); }
.bf-order-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@container bfpage (max-width: 760px) { .bf-order-plans { grid-template-columns: 1fr; } }
.bf-order-later { gap: 10px; padding: var(--space-4); }
.bf-order-later-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bf-order-review { display: flex; flex-direction: column; gap: 6px; padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); }
.bf-order-review-head { display: flex; align-items: center; justify-content: space-between; }
.bf-order-pay { gap: 8px; padding: var(--space-5); }
.bf-order-pay dd { display: flex; align-items: center; gap: 6px; }
.bf-order-done { align-items: center; text-align: center; }
.bf-order-done > .bf-stepper { inline-size: 100%; }
.bf-order-done-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.bf-order-sum-product { display: flex; align-items: center; gap: 12px; }
.bf-order-sum-product > span:last-child { display: flex; flex-direction: column; }
.bf-order-sum-total { display: flex; justify-content: space-between; font-weight: 800; padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.bf-order-sum-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.bf-step.is-skipped { opacity: .45; }
.bf-order-saved.is-pulse { animation: bf-saved-pulse 1.2s ease-out; }
@keyframes bf-saved-pulse { 0% { opacity: .2; } 100% { opacity: 1; } }
@media print { .bf-order-top, .bf-order-foot, .bf-ambient, .bf-order-done-actions { display: none !important; } }
/* Four lifecycle steps fit the confirmation card, so they never fold into the phone bar. */
.bf-order-done .bf-stepper .bf-stepper-list { display: flex; }
.bf-order-done .bf-stepper .bf-stepper-mobile { display: none; }

/* ---------- Step 5: customer dashboard ---------- */
.bf-dash-search { max-inline-size: 420px; margin: 0; }
.bf-dash-single { grid-template-columns: minmax(0, 560px); }
.bf-ticket-thread { gap: var(--space-5); }
.bf-ticket-msg { display: flex; gap: var(--space-3); align-items: flex-start; }
.bf-ticket-msg.is-support { flex-direction: row-reverse; }
.bf-ticket-bubble { flex: 1; max-inline-size: 640px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-3); border: 1px solid var(--line); }
.bf-ticket-msg.is-support .bf-ticket-bubble { background: var(--primary-soft); }
.bf-ticket-bubble p { margin: 6px 0 0; }
.bf-ticket-meta { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.bf-ticket-composer { position: sticky; inset-block-end: var(--space-4); }
.bf-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.bf-account-card { gap: var(--space-4); margin: 0; }
@container bfpage (max-width: 900px) { .bf-account { grid-template-columns: 1fr; } }
.bf-article.is-embedded { max-inline-size: none; padding: var(--space-6); margin: 0; }

/* ---------- Step 6: CRM ---------- */
.bf-crm-messages { padding: var(--space-3) var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bf-crm-form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.bf-crm-form select.bf-input, .bf-crm-form textarea.bf-input { inline-size: 100%; }
.bf-crm-form textarea.bf-input { min-block-size: 96px; padding-block: 10px; }
.bf-crm-review { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@container bfpage (max-width: 1000px) { .bf-crm-review { grid-template-columns: 1fr; } }
.bf-crm-decision { gap: var(--space-3); margin: 0; }
.bf-ticket-desc { margin: 0; white-space: pre-line; }

/* Plan option cards (order step 1). One proportional scale that grows with the card
   (container units, so names never clip in a narrow three-column row):
   name 16–24 (900, gradient) › price 15–20 (800) › tagline / unit / note 13 (DS floor),
   the note one tone quieter. Icon tile 40 (glyph 20), radio 20, padding 20/18. */
.bf-oc.is-plan { container-type: inline-size; gap: 10px; padding: 20px 18px; }
.bf-oc.is-plan .bf-oc-titlerow { block-size: auto; }
.bf-oc.is-plan .bf-oc-title { font-size: clamp(16px, 12cqi, 24px); line-height: 1.5; overflow: visible; text-overflow: clip; }
.bf-oc.is-plan .bf-oc-desc { font-size: 13px; line-height: 20px; white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-block-size: 40px; }
.bf-oc.is-plan .bf-oc-icon { inline-size: 40px; block-size: 40px; border-radius: 12px; }
.bf-oc.is-plan .bf-oc-icon svg { inline-size: 20px; block-size: 20px; }
.bf-oc.is-plan .bf-oc-control { inline-size: 20px; block-size: 20px; }
.bf-oc.is-plan .bf-oc-price { column-gap: 6px; }
.bf-oc.is-plan .bf-oc-price b { font-size: clamp(15px, 9.5cqi, 20px); line-height: 1.4; }
.bf-oc.is-plan .bf-oc-price small { font: var(--dc-meta); color: var(--dc-text-2); }
.bf-oc.is-plan .bf-oc-note { font: var(--dc-meta); color: var(--dc-text-3); margin-block-start: -6px; }

/* Browser autofill keeps the dark field instead of Chrome's light fill: the fill colour's
   transition is delayed for days so it never shows, and the text keeps the token colour.
   (No inset shadow: the field background is translucent and an opaque one would not match.) */
.bf-root input:-webkit-autofill, .bf-root input:-webkit-autofill:hover, .bf-root input:-webkit-autofill:focus,
.bf-root textarea:-webkit-autofill, .bf-root select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.bf-root input:autofill { -webkit-text-fill-color: var(--ink); }

/* Order step 2: a one-line log-in link over the sign-up form, the inline SMS code, and the
   member summary card. */
.bf-order-login-line { margin: 0 0 var(--space-4); color: var(--ink-muted); }
[data-order-signup] { display: flex; flex-direction: column; gap: var(--space-4); }
.bf-order-otp { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.bf-order-otp p { margin: 0; }
.bf-order-otp .bf-field, .bf-order-otp .bf-otp { inline-size: 100%; max-inline-size: 360px; }
.bf-order-member { flex-direction: row; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.bf-order-member-icon { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--link); }
.bf-order-member-facts { flex: 1; min-inline-size: 0; }
.bf-order-member-edit { flex: none; }

/* The tilted ring of the marketing backdrop sat alone at the lower page edge and read as a
   stray shape (its tile and orb companions are already hidden), so it goes too. */
.bf-amb-form.is-ring { display: none; }

/* ---------- Dashboard owner tools (sidebar groups, deposits, finance, settings) ---------- */
.bf-sidebar-switch { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--space-5) var(--space-3); }
.bf-sidebar-switch .t-overline { color: var(--ink-subtle); }
.bf-sidebar-switch-select { inline-size: 100%; min-block-size: 38px; padding: 6px 10px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; }
@container bfpage (max-width: 1100px) { .bf-layout-app > .bf-sidebar .bf-sidebar-switch { display: none; } .bf-layout-app.is-nav-open > .bf-sidebar .bf-sidebar-switch { display: flex; } }
.bf-sidebar-badge.is-danger { background: var(--danger); color: #fff; }
.bf-bottomnav-item { position: relative; }
.bf-bottomnav-badge { position: absolute; inset-block-start: 4px; inset-inline-end: calc(50% - 22px); min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.bf-pending-row { flex-wrap: wrap; gap: var(--space-3); }
.bf-pending-actions { gap: var(--space-2); }
button.bf-receipt-row { inline-size: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.bf-receipt-image { display: grid; place-items: center; gap: 6px; block-size: 220px; margin-block-end: var(--space-4); border: 1px dashed var(--line-control); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-subtle); }
.bf-finance-stats { gap: var(--space-4); }
@container bfpage (max-width: 760px) { .bf-finance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A simple on/off switch built on a hidden checkbox. */
.bf-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.bf-switch-track { position: relative; inline-size: 38px; block-size: 22px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line-control); transition: background var(--dur-fast); }
.bf-switch-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--ink-muted); transition: transform var(--dur-fast), background var(--dur-fast); }
.bf-switch input:checked + .bf-switch-track { background: var(--success); border-color: var(--success); }
.bf-switch input:checked + .bf-switch-track::after { background: #fff; transform: translateX(-16px); }
.bf-switch input:focus-visible + .bf-switch-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-service-row { gap: var(--space-3); }
.bf-hours { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.bf-hours-day { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0; min-inline-size: 0; }
.bf-hours-head { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; padding: 0; float: inline-start; margin-block-end: var(--space-2); }
.bf-hours-ranges { clear: both; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.bf-hours-range { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bf-time { inline-size: 92px; text-align: center; font-variant-numeric: tabular-nums; min-block-size: 38px; padding: 6px 10px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); color-scheme: dark; }
.bf-hours-range > .bf-field-msg { flex-basis: 100%; margin: 0; }
.bf-dayoff-add { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.bf-dayoff-add > .bf-field { flex: 1; min-inline-size: 200px; }
.bf-narrow-form { max-inline-size: 360px; }
.bf-receipt-row, .bf-pending-row { flex-wrap: wrap; }
.bf-receipt-row .bf-list-title, .bf-receipt-row .bf-list-sub, .bf-pending-row .bf-list-title, .bf-pending-row .bf-list-sub { white-space: normal; }
@container bfpage (max-width: 640px) { .bf-receipt-row .bf-list-chip { margin-inline-start: 52px; } }
@container bfpage (max-width: 1100px) { .bf-layout-app.is-nav-open > .bf-sidebar .bf-sidebar-badge { display: inline-grid; } }

/* ---------- Badge palette: one vivid hue per meaning, used by every badge in both themes ----------
   Tinted fill (16–24% alpha), bright text, a same-hue ring and icon. On the dark surfaces
   every text colour here is ≥ 7:1 against its tint.
   info/new cyan · progress sky-blue · teal in progress/contacted · review amber (under
   review / waiting) · payment yellow (payment due) · orange needs attention / high ·
   accent violet (trial, qualified) · success green · danger red · expired magenta ·
   neutral bright slate. */
:root {
  --st-info: #4FE0FF; --st-info-bg: rgba(56,217,255,0.18);
  --st-progress: #82B4FF; --st-progress-bg: rgba(91,155,255,0.22);
  --st-teal: #3EF0C8; --st-teal-bg: rgba(32,214,170,0.18);
  --st-review: #FFC24D; --st-review-bg: rgba(255,176,32,0.2);
  --st-payment: #FFE15A; --st-payment-bg: rgba(255,214,10,0.18);
  --st-warning: #FFC24D; --st-warning-bg: rgba(255,176,32,0.2);
  --st-orange: #FF9A4D; --st-orange-bg: rgba(255,122,26,0.22);
  --st-accent: #C9A8FF; --st-accent-bg: rgba(164,112,255,0.24);
  --st-success: #5BE89A; --st-success-bg: rgba(46,204,113,0.2);
  --st-danger: #FF7B86; --st-danger-bg: rgba(255,64,82,0.24);
  --st-expired: #FF7FD1; --st-expired-bg: rgba(236,72,180,0.22);
  --st-neutral: #C3CAEE; --st-neutral-bg: rgba(170,180,230,0.16);
}
.bf-root .bf-badge.is-info:not(.is-solid), [data-theme="crm"] .bf-badge.is-info:not(.is-solid) { background: var(--st-info-bg); color: var(--st-info); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-info) 42%, transparent); }
.bf-root .bf-badge.is-progress:not(.is-solid), [data-theme="crm"] .bf-badge.is-progress:not(.is-solid) { background: var(--st-progress-bg); color: var(--st-progress); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-progress) 42%, transparent); }
.bf-root .bf-badge.is-teal:not(.is-solid), [data-theme="crm"] .bf-badge.is-teal:not(.is-solid) { background: var(--st-teal-bg); color: var(--st-teal); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-teal) 42%, transparent); }
.bf-root .bf-badge.is-review:not(.is-solid), [data-theme="crm"] .bf-badge.is-review:not(.is-solid) { background: var(--st-review-bg); color: var(--st-review); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-review) 42%, transparent); }
.bf-root .bf-badge.is-payment:not(.is-solid), [data-theme="crm"] .bf-badge.is-payment:not(.is-solid) { background: var(--st-payment-bg); color: var(--st-payment); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-payment) 42%, transparent); }
.bf-root .bf-badge.is-warning:not(.is-solid), [data-theme="crm"] .bf-badge.is-warning:not(.is-solid) { background: var(--st-warning-bg); color: var(--st-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-warning) 42%, transparent); }
.bf-root .bf-badge.is-orange:not(.is-solid), [data-theme="crm"] .bf-badge.is-orange:not(.is-solid) { background: var(--st-orange-bg); color: var(--st-orange); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-orange) 42%, transparent); }
.bf-root .bf-badge.is-accent:not(.is-solid), [data-theme="crm"] .bf-badge.is-accent:not(.is-solid) { background: var(--st-accent-bg); color: var(--st-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-accent) 42%, transparent); }
.bf-root .bf-badge.is-success:not(.is-solid), [data-theme="crm"] .bf-badge.is-success:not(.is-solid) { background: var(--st-success-bg); color: var(--st-success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-success) 42%, transparent); }
.bf-root .bf-badge.is-danger:not(.is-solid), [data-theme="crm"] .bf-badge.is-danger:not(.is-solid) { background: var(--st-danger-bg); color: var(--st-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-danger) 42%, transparent); }
.bf-root .bf-badge.is-expired:not(.is-solid), [data-theme="crm"] .bf-badge.is-expired:not(.is-solid) { background: var(--st-expired-bg); color: var(--st-expired); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-expired) 42%, transparent); }
.bf-root .bf-badge.is-neutral:not(.is-solid), [data-theme="crm"] .bf-badge.is-neutral:not(.is-solid) { background: var(--st-neutral-bg); color: var(--st-neutral); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-neutral) 42%, transparent); }
.bf-badge .bf-icon { color: currentColor; }
.bf-badge .bf-badge-dot { background: currentColor; }

/* ---------- CRM list filters (leads) ---------- */
.bf-crm-filters { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bf-crm-search { margin: 0; flex: 1 1 260px; max-inline-size: 360px; }
.bf-crm-date-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bf-chip-link { display: inline-flex; align-items: center; block-size: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-control); color: var(--ink-muted) !important; font-size: 13px; text-decoration: none; white-space: nowrap; }
.bf-chip-link:hover { color: var(--ink) !important; border-color: var(--ink-subtle); }
.bf-chip-link.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--ink) !important; font-weight: 600; }
.bf-crm-date-custom { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.bf-crm-date-custom > .bf-field { inline-size: 200px; }
a.bf-chip-x { display: inline-grid; place-items: center; color: inherit; }
/* Lead names and business names are shown in full. */
.bf-lead-name, .bf-lead-name b, .bf-lead-name .t-caption, .bf-leads-table td.bf-lead-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* Accent bar on attention rows: inset from the edge, rounded, with room before the icon.
   Every row of a list that has one gets the same inline-start padding, so icons line up. */
.bf-list-row.is-attention::before { inset-block: 10px; inset-inline-start: 5px; inline-size: 4px; border-radius: 4px; }
.bf-list:has(.bf-list-row.is-attention) .bf-list-row { padding-inline-start: 22px; }
.bf-list.is-divided:has(.bf-list-row.is-attention) .bf-list-row { padding-inline-end: 10px; }
.bf-list.is-divided .bf-list-row.is-attention { padding-block: 12px; border-radius: 12px; }
/* Narrow screens: list titles wrap instead of being cut to «…». */
@container bfpage (max-width: 640px) { .bf-list.is-divided .bf-list-title, .bf-list .bf-list-sub { white-space: normal; overflow-wrap: anywhere; } }

/* Trend chart axes: HTML labels at a fixed small size (12px, muted). On narrow charts the
   x labels tilt so full names (e.g. weekdays) still fit. */
.bf-chart { container-type: inline-size; }
.bf-chart-plot { position: relative; padding-block-end: 26px; }
.bf-chart-plot .bf-chart-svg { display: block; }
.bf-chart-yaxis span, .bf-chart-xaxis span { position: absolute; font: 500 12px/1 var(--font-sans); color: var(--ink-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-chart-yaxis span { right: 2px; transform: translateY(-50%); }
.bf-chart-xaxis { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 20px; }
.bf-chart-xaxis span { inset-block-start: 6px; transform: translateX(-50%); }
@container (max-width: 520px) {
  .bf-chart-plot { padding-block-end: 46px; }
  .bf-chart-xaxis span { font-size: 11px; transform: translateX(-50%) rotate(-38deg); transform-origin: center top; inset-block-start: 10px; }
}
/* Finance: the two Toman figures take a full row on phones so long amounts never overflow. */
@container bfpage (max-width: 640px) { .bf-finance-stats > :nth-child(n+5) { grid-column: 1 / -1; } }
.bf-finance-stats .bf-sc-num-text { overflow-wrap: anywhere; }

/* Avatar with a picture: same circle and size, the image fills it. */
.bf-avatar.has-img { padding: 0; overflow: hidden; background: var(--surface-3); box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.bf-avatar.has-img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; border-radius: 50%; }
.bf-avatar-lg { inline-size: 72px; block-size: 72px; font-size: 24px; }
.bf-account-hero { display: flex; align-items: center; gap: var(--space-4); }
.bf-account-hero > div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Home (ScreenHome) ---------- */
.bf-home-stage { min-block-size: 500px; display: grid; place-items: center; }
.bf-home-mascot { margin: 0; inline-size: min(100%, 460px); }
@container bfpage (max-width: 900px) { .bf-home-mascot { inline-size: min(80%, 340px); } }
.bf-home-mascot img { inline-size: 100%; block-size: auto; display: block; }
/* The chips float on the right edge of the mascot. */
.bf-home-chip { position: absolute; z-index: 3; inset-inline: auto; }
.bf-home-chip.is-a { right: -8px; left: auto; top: 40px; }
.bf-home-chip.is-b { right: -8px; left: auto; bottom: 70px; }
.bf-home-chip.is-a .bf-icon { color: var(--info); } .bf-home-chip.is-b .bf-icon { color: var(--success); }
@container bfpage (max-width: 900px) { .bf-home-stage { min-block-size: 0; place-items: center; } .bf-home-chip { display: none; } }
.bf-home-intents { padding-block-start: 0; }
.bf-home-intent { gap: 10px; color: inherit; text-decoration: none; }
.bf-home-intent-link { margin-block-start: auto; display: inline-flex; align-items: center; gap: 4px; }
.bf-home-plans-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.bf-home-plans { align-items: stretch; }
.bf-home-plan { display: flex; } .bf-home-plan > .bf-pc { flex: 1; }
.bf-home-note { margin: 0; }
.bf-home-compare td:not(.is-primary), .bf-home-compare th:not(:first-child) { text-align: center; }
.bf-home-yes { color: var(--success); display: inline-flex; }
.bf-home-step { gap: 8px; }
.bf-home-step p { margin: 0; }
.bf-home-step-n { inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); font-weight: 800; }
.bf-home-showcase { justify-items: center; }
.bf-home-showcase figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.bf-home-showcase figcaption { display: flex; align-items: center; gap: 8px; justify-content: center; }
.bf-home-confirm { display: flex; align-items: flex-end; block-size: 100%; padding: 14px 10px; background: linear-gradient(180deg, #17212b, #0e1621); }
.bf-home-bubble { background: #182533; color: #e8edf2; border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 13px; line-height: 22px; }
.bf-home-bubble span { color: #8a9bab; }
.bf-home-quotes { gap: var(--space-5); }
.bf-home-quote { margin: 0; gap: var(--space-3); }
.bf-home-quote blockquote { margin: 0; color: var(--ink-muted); line-height: 28px; }
.bf-home-quote figcaption { display: flex; align-items: center; gap: 10px; }
.bf-home-quote figcaption span { display: flex; flex-direction: column; }
.bf-home-stars { color: var(--amber-500, #FFB914); letter-spacing: 2px; }
.bf-home-lead { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-10); border-radius: 28px; }
.bf-home-lead > figure { margin: 0; flex: 0 0 200px; }
.bf-home-lead > figure img { inline-size: 100%; display: block; }
.bf-home-lead-copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
@container bfpage (max-width: 640px) { .bf-home-lead { padding: var(--space-6); } .bf-home-lead-copy > .bf-btn { inline-size: 100%; } }