/* =========================
   Booking Flow
========================= */

.bf-page {
    min-height:75vh;
    padding: 170px 0 82px;
   
}

.bf {
    --bf-line:color-mix(in srgb,var(--uicolor) 8%,var(--diver));
    --bf-soft:color-mix(in srgb,var(--background) 62%,var(--surface-color));
    --bf-text:var(--primary-text);
    --bf-muted:var(--secondarytext);
    --bf-blue:var(--uicolor);
}

.bf * {
    box-sizing:border-box;
}

.bf button,
.bf input,
.bf textarea,
.bf .-selectbox-button {
    min-width:0;
}

.bf button {
    touch-action:manipulation;
}

.bf-head {
    max-width:850px;
    margin:0 auto 18px;
    text-align:center;
}

.bf-head>span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-block-end:10px;
    color:var(--uicolor2);
    font-size:16px;
    font-weight:900;
}

.bf-head>span::before,
.bf-head>span::after {
    content:"";
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--uicolor2);
}

.bf-head :is(h1,h2,h3,div) {
    margin:0;
    color:var(--bf-text);
    font-size:clamp(34px,3vw,46px);
    font-weight:900;
    line-height:1.22;
    letter-spacing:-1px;
}

.bf-head p {
    max-width:700px;
    margin:12px auto 0;
    color:var(--bf-muted);
    font-size:17px;
    line-height:1.8;
}

.bf-head-badges {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:0 auto 26px;
}

.bf-head-badges span {
    min-height:46px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:0 17px;
    border:1px solid var(--bf-line);
    border-radius:999px;
    background:color-mix(in srgb,var(--surface-color) 94%,transparent);
    box-shadow:0 8px 22px rgb(var(--primary-text-code) / 5%);
    color:var(--bf-text);
    font-size:13px;
    font-weight:800;
}

.bf-head-badges i {
    color:var(--uicolor4);
    font-size:16px;
}

.bf-card {
    min-width:0;
}

.bf-form {
    display:flex;
    align-items:flex-start;
    gap:26px;
    min-width:0;
}

.bf-work,
.bf-order-summary {
    direction:rtl;
}

html[dir="ltr"] .bf-work,
html[dir="ltr"] .bf-order-summary {
    direction:ltr;
}

/* =========================
   Main Steps Card
========================= */

.bf-work {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--bf-line);
    border-radius:24px;
    background:color-mix(in srgb,var(--surface-color) 97%,transparent);
    box-shadow:0 24px 60px rgb(var(--primary-text-code) / 10%);
}

.bf-top {
    display:flex;
    align-items:center;
    min-height:54px;
    padding:10px 22px 0;
}

.bf-back {
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    border:1px solid var(--bf-line);
    border-radius:50%;
    background:var(--surface-color);
    color:var(--bf-blue);
    cursor:pointer;
}

.bf-prog {
    display:flex;
    align-items:center;
    gap:10px;
    margin-inline-start: auto;
}

.bf-prog>span {
    color:var(--bf-muted);
    font-family:var(--f-number);
    font-size:12px;
    font-weight:800;
}

.bf-prog>div {
    display:flex;
    gap:4px;
}

.bf-prog i {
    width:24px;
    height:4px;
    display:block;
    border-radius:999px;
    background:var(--diver);
}

.bf-prog i.active,
.bf-prog i.done {
    background:var(--bf-blue);
}

.bf-flow {
    display:flex;
    align-items:flex-start;
    padding:0 28px 20px;
    border-bottom:1px solid var(--bf-line);
}

.bf-flow button {
    position:relative;
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:4px 8px 0;
    border:0;
    background:transparent;
    color:var(--bf-muted);
    text-align:center;
    cursor:pointer;
}

.bf-flow button::before {
    content:"";
    position:absolute;
    inset-block-start:19px;
    inset-inline-start:calc(50% + 24px);
    width:calc(100% - 48px);
    border-top:1px dashed color-mix(in srgb,var(--primary-text) 18%,transparent);
}

.bf-flow button:last-child::before {
    display:none;
}

.bf-flow button:disabled {
    cursor:default;
}

.bf-flow button>span {
    position:relative;
    z-index:2;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--bf-line);
    border-radius:50%;
    background:var(--surface-color);
    color:var(--bf-text);
    font-family:var(--f-number);
    font-size:16px;
    font-weight:900;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}

.bf-flow strong {
    color:inherit;
    font-size:14px;
    font-weight:900;
    line-height:1.35;
}

.bf-flow small {
    max-width:125px;
    color:inherit;
    font-size:11px;
    line-height:1.45;
}

.bf-flow button.active,
.bf-flow button.done {
    color:var(--bf-text);
}

.bf-flow button.active>span,
.bf-flow button.done>span {
    border-color:transparent;
    background:var(--bf-blue);
    color:var(--on-color);
    box-shadow:0 9px 20px rgb(var(--uicolor-code) / 24%);
}

.bf-flow button.done>span {
    background:color-mix(in srgb,var(--bf-blue) 82%,var(--uicolor4));
}

.bf-stages {
    display:flex;
    flex-direction:column;
    padding:0 12px 12px;
}

.bf-stage {
    min-width:0;
    border-bottom:1px solid var(--bf-line);
}

.bf-stage[hidden] {
    display:block;
}

.bf-stage:last-child {
    border-bottom:0;
}

.bf-pane {
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:10px 12px;
    background:transparent;
}

.bf-stage.active .bf-pane {
    padding:22px 12px 26px;
    animation:bfReveal .3s ease;
}

.bf-stage:not(.active) .bf-pane>:not(.bf-pane-head) {
    display:none!important;
}

.bf-stage:not(.active) .bf-pane-head {
    min-height:66px;
    margin:0;
}

.bf-stage:not(.active):not(.available) .bf-pane-head {
    opacity:.62;
}

.bf-stage.available:not(.active) .bf-pane-head {
    cursor:pointer;
}

.bf-pane-head {
    display:flex;
    align-items:center;
    gap:12px;
    margin-block-end:18px;
    outline:0;
}

.bf-pane-head>small {
    order:3;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    margin-inline-start:auto;
    border-radius:50%;
    background:var(--bf-soft);
    color:var(--bf-text);
    font-family:var(--f-number);
    font-size:12px;
    font-weight:900;
}

.bf-stage.active .bf-pane-head>small {
    display:none;
}

.bf-pane-head>span {
    order:1;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    border-radius:13px;
    background:rgb(var(--uicolor-code) / 9%);
    color:var(--bf-blue);
    font-size:19px;
}

.bf-pane-head>div {
    order:2;
    min-width:0;
}

.bf-pane-head h2 {
    margin:0;
    color:var(--bf-text);
    font-size:20px;
    font-weight:900;
    line-height:1.35;
}

.bf-pane-head p {
    margin:3px 0 0;
    color:var(--bf-muted);
    font-size:12px;
    line-height:1.55;
}

.bf-stage.done .bf-pane-head>small {
    color:var(--on-color);
    background:var(--uicolor4);
}

.bf-stage.done .bf-pane-head>span {
    color:var(--uicolor4);
    background:color-mix(in srgb,var(--uicolor4) 10%,var(--surface-color));
}

/* =========================
   Service Selection
========================= */

.bf-search,
.bf-map-search {
    position:relative;
    display:flex;
    align-items:center;
}

.bf-search {
    max-width:430px;
    margin-block-end:14px;
}

label.bf-map-search {
    flex:1;
}

.bf-search input,
.bf-map-search input {
    width:100%;
    height:46px;
    padding-inline:42px 15px;
    border:1px solid var(--bf-line);
    border-radius:12px;
    background:var(--surface-color);
    color:var(--bf-text);
    outline:0;
}

.bf-search i,
.bf-map-search i {
    position:absolute;
    inset-inline-start:15px;
    color:var(--bf-muted);
}

.bf-srv-list {
    display:flex;
    align-items:stretch;
    gap:14px;
    padding:3px 2px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:inline proximity;
    scrollbar-width:thin;
}

.bf-srv {
    position:relative;
    min-width:190px;
    min-height: 202px;
    display:flex;
    flex: 0 0 calc((100% - 312px) / 4);
    flex-direction:column;
    align-items:stretch;
    overflow:hidden;
    padding:0;
    border:1px solid var(--bf-line);
    border-radius:16px;
    background:var(--surface-color);
    color:var(--bf-text);
    text-align:start;
    scroll-snap-align:start;
    cursor:pointer;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.bf-srv-img {
    width:100%;
    height: 102px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 112px;
    overflow:hidden;
    background-color:var(--media-placeholder);
    color:var(--bf-blue);
    font-size:25px;
}

.bf-srv-img img {
    max-width:100%;
    width:100%;
    height:100%;
    object-fit:cover;
}

.bf-srv-txt {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    padding:13px 14px 15px;
}

.bf-srv strong {
    color:var(--bf-text);
    font-size:14px;
    font-weight:900;
    line-height:1.45;
}

.bf-srv small {
    margin-block-start:auto;
    padding-block-start:8px;
    color:var(--bf-muted);
    font-size:11px;
    font-weight:700;
    line-height:1.55;
}

.bf-srv>i {
    position:absolute;
    inset-block-start:10px;
    inset-inline-end:10px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:color-mix(in srgb,var(--surface-color) 88%,transparent);
    color:transparent;
    font-size:12px;
}

.bf-srv:hover,
.bf-srv.active {
    transform:translateY(-2px);
    border-color:var(--bf-blue);
    box-shadow:0 12px 25px rgb(var(--uicolor-code) / 12%);
}

.bf-srv.active>i {
    background:var(--bf-blue);
    color:var(--on-color);
}

.bf-more {
    min-height:40px;
    align-self:center;
    margin-block-start:10px;
    padding:0 18px;
    border:0;
    border-radius:999px;
    background:var(--bf-soft);
    color:var(--bf-blue);
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.bf-more.loading {
    opacity:.55;
    pointer-events:none;
}

.bf-empty {
    width:100%;
    padding:30px 16px;
    border:1px dashed var(--bf-line);
    border-radius:14px;
    color:var(--bf-muted);
    text-align:center;
}

/* =========================
   Fields & Location
========================= */

.bf-field-row {
    display:flex;
    gap:12px;
    margin-block-end:12px;
}

.bf-field-row>div {
    min-width:0;
    flex:1;
}

.bf .-YC-FM-inputs-area {
    margin:0 0 13px;
}

.bf .-YC-FM-inputs-area>label,
.bf .-YC-FM-inputs-area>span {
    color:var(--bf-text);
    font-size:12px;
    font-weight:900;
}

.bf .-YC-FM-inputs-area input,
.bf .-YC-FM-inputs-area textarea,
.bf .-selectbox-button {
    min-height:46px;
    border-color:var(--bf-line);
    border-radius:12px;
    background:var(--surface-color);
}

.bf .-YC-FM-inputs-area textarea {
    min-height:110px;
}

.bf-map-box,
.bf-date,
.bf-times,
.bf-quote,
.bf-customer-fields {
    padding:17px;
    border:1px solid var(--bf-line);
    border-radius:17px;
    background:var(--surface-color);
}

.bf-map-box {
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:9px;
}

.bf-locate {
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:var(--bf-text);
    color:var(--on-color);
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.bf-locate.loading {
    opacity:.6;
    pointer-events:none;
}

.bf-map {
    position:relative;
    width:100%;
    height:265px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid var(--bf-line);
    border-radius:15px;
    background-color:var(--media-placeholder);
}

.bf-map iframe {
    width:100%;
    height:100%;
    border:0;
}

.bf-map>[data-bf-map-pick] {
    position:absolute;
    inset:0;
    z-index:2;
    border:0;
    background:transparent;
    cursor:crosshair;
}

.bf-map>[data-bf-map-pin] {
    position:absolute;
    z-index:3;
    width:20px;
    height:20px;
    display:none;
    transform:translate(-50%,-100%);
    rotate:-45deg;
    border:5px solid var(--bf-blue);
    border-radius:50% 50% 50% 0;
    background:var(--surface-color);
    pointer-events:none;
}

.bf-map>[data-bf-map-pin].active {
    display:block;
}

.bf-map-box>p {
    width:100%;
    margin:0;
    color:var(--bf-muted);
    font-size:11px;
    line-height:1.5;
}

.bf-act {
    display:flex;
    justify-content:flex-end;
    padding-block-start:17px;
}

.bf-next,
.bf-submit {
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 24px;
    border:0;
    border-radius:13px;
    background:linear-gradient(90deg,var(--uicolor2),color-mix(in srgb,var(--uicolor2) 80%,var(--danger-color)));
    box-shadow:0 12px 24px rgb(var(--uicolor2-code) / 20%);
    color:var(--on-color);
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease;
}

/* =========================
   Appointment & Packages
========================= */

.bf-modes {
    display:flex;
    align-self:flex-start;
    margin-block-end:14px;
    padding:4px;
    border-radius:12px;
    background:var(--bf-soft);
}

.bf-modes button {
    min-height:38px;
    padding:0 14px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--bf-muted);
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.bf-modes button.active {
    background:var(--surface-color);
    color:var(--bf-blue);
    box-shadow:0 3px 10px rgb(var(--primary-text-code) / 8%);
}

.bf-direct {
    display:flex;
    align-items:stretch;
    gap:14px;
}

.bf-date {
    min-width:0;
    flex:1.2;
    font-weight: 800;
}

.bf-times {
    min-width:190px;
    display:flex;
    flex:.8;
    flex-direction:column;
}

.bf-cal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-block-end:13px;
}

.bf-cal-head button {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    color:var(--bf-blue);
}

.bf-cal-head strong,
.bf-times>strong {
    color:var(--bf-text);
    font-size: 14px;
    font-weight:900;
}

.bf-week,
.bf-days {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
}

.bf-week {
    margin-block-end:6px;
}

.bf-week span {
    padding:4px 0;
    color:var(--bf-muted);
    font-size: 13px;
    text-align:center;
}

.bf-days button,
.bf-days>i {
    min-height:40px;
}

.bf-days button {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--bf-text);
    font-family:var(--f-number);
    font-size: 13px;
    cursor:pointer;
}

.bf-days button:hover {
    background:var(--bf-soft);
}

.bf-days button.active {
    background:var(--bf-blue);
    color:var(--on-color);
}

.bf-days button small {
    font-size:7px;
}

.bf-times>strong {
    margin-block-end:11px;
}

.bf-times>div {
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:310px;
    overflow:auto;
    padding-inline-end:3px;
}

.bf-times button {
    min-height:43px;
    border:1px solid color-mix(in srgb,var(--bf-blue) 45%,var(--bf-line));
    border-radius:11px;
    background:var(--surface-color);
    color:var(--bf-blue);
    font-size: 13px;
    font-weight:900;
    cursor:pointer;
}

.bf-times button.active {
    border-color:var(--bf-blue);
    background:var(--bf-blue);
    color:var(--on-color);
}

.bf-quote {
    display:flex;
    flex-direction:column;
}

.bf-pack-list {
    display:flex;
    flex-direction:column;
    gap:9px;
}

.bf-pick-row {
    display:flex;
    align-items:stretch;
}

.bf-pack {
    position:relative;
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    padding:10px 13px;
    border:1px solid var(--bf-line);
    border-radius:13px;
    background:var(--surface-color);
    color:var(--bf-text);
    text-align:start;
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.bf-pack>span {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
}

.bf-pack strong {
    font-size: 18px;
    font-weight:900;
}

.bf-pack small {
    margin-block-start:3px;
    color:var(--bf-muted);
    font-size: 15px;
    line-height:1.5;
    font-weight: 600;
}

.bf-pack b {
    margin-inline-start:12px;
    color:var(--bf-blue);
    font-size: 14px;
    white-space:nowrap;
}

.bf-pack>i {
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 24px;
    margin-inline-start:9px;
    border-radius:50%;
    background:var(--diver2);
    color:transparent;
    font-size:10px;
}

.bf-pack:hover,
.bf-pack.active,
.bf-pack.pending {
    border-color:var(--bf-blue);
    background:var(--surface-soft);
    box-shadow:0 0 0 1px rgb(var(--uicolor-code) / 7%);
}

.bf-pack.active>i {
    background:var(--bf-blue);
    color:var(--on-color);
}

.bf-packages.is-selecting .bf-pack {
    opacity:.62;
    cursor:wait;
}

.bf-packages.is-selecting .bf-pack.pending {
    opacity:1;
}

.bf-packages.is-selecting .bf-pack.pending>i {
    border:2px solid color-mix(in srgb,var(--bf-blue) 25%,transparent);
    border-top-color:var(--bf-blue);
    background:transparent;
    animation:bfSpin .7s linear infinite;
}

.bf-customer-fields {
    display:flex;
    flex-wrap:wrap;
    gap:0 12px;
}

.bf-customer-fields>div {
    min-width:220px;
    flex:1 1 calc(50% - 6px);
}

.bf-customer-fields>div:last-child {
    flex-basis:100%;
}

/* =========================
   Order Summary
========================= */

.bf-order-summary {
    position:sticky;
    top:102px;
    min-width:0;
    display:flex;
    flex:0 0 360px;
    flex-direction:column;
    gap:16px;
    background:transparent;
}

.bf-summary-inner {
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:23px;
    border:1px solid var(--bf-line);
    border-radius:24px;
    background:color-mix(in srgb,var(--surface-color) 97%,transparent);
    box-shadow:0 24px 60px rgb(var(--primary-text-code) / 10%);
}

.bf-summary-title {
    display:flex;
    align-items:center;
    gap:10px;
    padding-block-end:15px;
    border-bottom:1px solid var(--bf-line);
}

.bf-summary-title>span {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    border-radius:12px;
    background:rgb(var(--uicolor-code) / 9%);
    color:var(--bf-blue);
    font-size:17px;
}

.bf-summary-title small {
    display:block;
    color:var(--bf-muted);
    font-size:10px;
    font-weight:700;
}

.bf-summary-title h2 {
    margin:2px 0 0;
    color:var(--bf-text);
    font-size:21px;
    font-weight:900;
    line-height:1.3;
}

.bf-summary-service {
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    margin:16px 0 10px;
    padding:12px;
    border-radius:15px;
    background:var(--bf-soft);
}

.bf-side-img {
    width:88px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 88px;
    overflow:hidden;
    border-radius:12px;
    background-color:var(--media-placeholder);
    color:var(--bf-blue);
    font-size:24px;
}

.bf-side-img img {
    max-width:100%;
    width:100%;
    height:100%;
    object-fit:cover;
}

.bf-summary-service>div:last-child {
    min-width:0;
}

.bf-side-kicker {
    color:var(--uicolor2);
    font-size:10px;
    font-weight:900;
}

.bf-summary-service h3 {
    margin:4px 0 0;
    color:var(--bf-text);
    font-size:15px;
    font-weight:900;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.bf-side-copy {
    margin:0 0 8px;
    color:var(--bf-muted);
    font-size: 15px;
    line-height:1.6;
}

.bf-sum {
    display:flex;
    flex-direction:column;
}

.bf-sum p {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:13px;
    margin:0;
    padding:9px 1px;
    border-bottom:1px solid var(--diver2);
    font-size: 14px;
}

.bf-sum span {
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--bf-muted);
}

.bf-sum span i {
    width:17px;
    display:inline-flex;
    justify-content:center;
    flex:0 0 17px;
    color:var(--bf-blue);
    font-size:13px;
}

.bf-sum strong {
    min-width:0;
    max-width:62%;
    color:var(--bf-text);
    font-size: 14px;
    line-height:1.45;
    text-align:end;
    overflow-wrap:anywhere;
}

.bf-sum p.total {
    margin-block-start:7px;
    padding:13px 10px;
    border:1px solid rgb(var(--uicolor-code) / 12%);
    border-radius:11px;
    background:rgb(var(--uicolor-code) / 6%);
}

.bf-sum p.price {
    margin-block-start:5px;
    border-top:1px dashed var(--bf-line);
}

.bf-sum p.discount strong {
    color:var(--uicolor4);
}

.bf-sum p.total span {
    color:var(--bf-text);
    font-size:13px;
    font-weight:900;
}

.bf-sum p.total strong {
    color:var(--bf-blue);
    font-size:19px;
    font-weight:900;
}

.bf-coupon {
    display:block;
    margin-block-start:15px;
    padding-block-start:14px;
    border-top:1px dashed var(--bf-line);
}

.bf-coupon>strong {
    display:block;
    margin-block-end:8px;
    color:var(--bf-text);
    font-size: 12px;
    font-weight:900;
}

.bf-coupon-controls {
    display:flex;
    align-items:stretch;
    gap:7px;
}

.bf-coupon-controls .-YC-FM-inputs-area {
    min-width:0;
    flex:1;
    margin:0;
}

.bf-coupon-controls .-YC-FM-inputs-area>label,
.bf-coupon-controls .-YC-FM-inputs-area>span {
    display:none;
}

.bf-coupon-controls input {
    min-height:43px;
}

.bf-coupon-controls>button {
    min-width:68px;
    padding:0 12px;
    border:1px solid var(--bf-line);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--bf-blue);
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.bf-coupon>small {
    display:block;
    margin-block-start:6px;
    color:var(--bf-muted);
    font-size:10px;
    line-height:1.5;
}

.bf-coupon>small.ok {
    color:var(--uicolor4);
}

.bf-submit-msg {
    min-height:18px;
    margin:10px 0 6px;
    color:var(--danger-color);
    font-size:11px;
    line-height:1.5;
}

.bf-submit-msg.success {
    color:var(--uicolor4);
}

.bf-submit {
    width:100%;
    min-height:54px;
}

.bf-submit:disabled {
    opacity:.48;
    box-shadow:none;
    cursor:not-allowed;
}

.bf-submit.loading {
    opacity:.65;
    pointer-events:none;
}

.bf-summary-trust {
    display:flex;
    align-items:stretch;
    gap:4px;
    padding:13px 10px;
    border:1px solid var(--bf-line);
    border-radius:18px;
    background:color-mix(in srgb,var(--surface-color) 96%,transparent);
    box-shadow:0 14px 35px rgb(var(--primary-text-code) / 7%);
}

.bf-summary-trust span {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:5px;
    color:var(--bf-muted);
    text-align:center;
}

.bf-summary-trust i {
    color:var(--uicolor4);
    font-size:17px;
}

.bf-summary-trust b {
    font-size:9px;
    line-height:1.45;
}

/* =========================
   Validation & Success
========================= */

.bf .field-error input,
.bf .field-error textarea,
.bf .field-error .-selectbox-button,
.bf-map-box.field-error .bf-map,
.bf-services.field-error .bf-srv-list,
.bf-packages.field-error .bf-pack-list,
.bf-date.field-error,
.bf-times.field-error {
    border-color:var(--danger-color)!important;
}

.bf-field-error {
    display:block;
    margin-block-start:5px;
    color:var(--danger-color);
    font-size:10px;
    line-height:1.5;
}

.bf-success {
    width:100%;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:42px;
    border:1px solid var(--bf-line);
    border-radius:24px;
    background:var(--surface-color);
    box-shadow:var(--box-shadow-defult);
    text-align:center;
}

.bf-success>i {
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-block-end:17px;
    border-radius:50%;
    background:color-mix(in srgb,var(--uicolor4) 11%,var(--surface-color));
    color:var(--uicolor4);
    font-size:29px;
}

.bf-success h2 {
    margin:0 0 8px;
    color:var(--bf-text);
    font-size:27px;
}

.bf-success p {
    max-width:470px;
    margin:0;
    color:var(--bf-muted);
    line-height:1.7;
}

.bf-success strong,
.bf-success a {
    margin-block-start:15px;
    color:var(--bf-blue);
    font-weight:900;
}

.bf button:focus-visible,
.bf input:focus-visible,
.bf textarea:focus-visible,
.bf .-selectbox-button:focus-visible,
.bf-success a:focus-visible,
.bf-pane-head:focus-visible {
    outline:2px solid var(--bf-blue);
    outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
    .bf-next:hover,
    .bf-submit:not(:disabled):hover {
        transform:translateY(-2px);
        box-shadow:0 16px 28px rgb(var(--uicolor2-code) / 27%);
    }
}

html[dir="ltr"] .bf-back i,
html[dir="ltr"] .bf-next i,
html[dir="ltr"] .bf-submit i {
    transform:scaleX(-1);
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:1100px) {
    .bf-form {
        gap:18px;
    }

    .bf-order-summary {
        flex-basis:320px;
    }

    .bf-srv {
        flex-basis:calc((100% - 28px) / 3);
    }

    .bf-date {
        flex:1.15;
    }

    .bf-times {
        min-width:180px;
        flex:.85;
    }
}

@media only screen and (max-width:900px) {
    .bf-form {
        flex-direction:column;
    }

    .bf-work,
    .bf-order-summary {
        width:100%;
    }

    .bf-order-summary {
        position:static;
        flex-basis:auto;
    }

    .bf-summary-inner {
        min-height:0;
    }

    .bf-direct {
        gap:12px;
    }

    .bf-times>div {
        max-height:310px;
    }
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
    .bf-page {
        padding:124px 0 46px;
    }

    .bf-head {
        margin-block-end:14px;
        text-align:start;
    }

    .bf-head :is(h1,h2,h3,div) {
        font-size:clamp(27px,7vw,34px);
        letter-spacing:-.5px;
    }

    .bf-head p {
        font-size:14px;
        line-height:1.7;
    }

    .bf-head-badges {
        justify-content:flex-start;
        flex-wrap:nowrap;
        gap:9px;
        margin-inline:calc(var(--container-padding--value) * -1);
        padding:3px var(--container-padding--value) 10px;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scroll-padding-inline:var(--container-padding--value);
        scroll-snap-type:inline proximity;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .bf-head-badges::-webkit-scrollbar,
    .bf-srv-list::-webkit-scrollbar,
    .bf-flow::-webkit-scrollbar {
        display:none;
    }

    .bf-head-badges span {
        min-height:42px;
        flex:0 0 auto;
        padding-inline:14px;
        font-size:11px;
        scroll-snap-align:start;
    }

    .bf-card,
    .bf-form,
    .bf-work,
    .bf-stages,
    .bf-pane,
    .bf-order-summary,
    .bf-summary-inner {
        min-width:0;
    }

    .bf-work,
    .bf-summary-inner {
        border-radius:20px;
    }

    .bf-top {
        position:sticky;
        top:0;
        z-index:8;
        min-height:54px;
        padding:8px 13px;
        border-bottom:1px solid var(--bf-line);
        background:color-mix(in srgb,var(--surface-color) 96%,transparent);
        backdrop-filter:blur(10px);
    }

    .bf-back {
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .bf-prog {
        min-width:0;
        gap:8px;
    }

    .bf-prog i {
        width:clamp(16px,5vw,24px);
    }

    .bf-flow {
        align-items:stretch;
        gap:8px;
        padding:12px 13px 14px;
        overflow-x:auto;
        overflow-y:hidden;
        overscroll-behavior-inline:contain;
        scroll-padding-inline:13px;
        scroll-snap-type:inline proximity;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .bf-flow button {
        flex:0 0 108px;
        align-items:flex-start;
        gap:4px;
        padding:0;
        text-align:start;
        scroll-snap-align:start;
    }

    .bf-flow button::before {
        display:none;
    }

    .bf-flow button>span {
        width:34px;
        height:34px;
        flex-basis:34px;
        font-size:13px;
    }

    .bf-flow strong {
        font-size:12px;
    }

    .bf-flow small {
        max-width:100%;
        font-size:10px;
    }

    .bf-stages {
        padding:0 9px 9px;
    }

    .bf-stage.active .bf-pane {
        padding:18px 8px 20px;
    }

    .bf-pane {
        padding-inline:8px;
    }

    .bf-stage:not(.active) .bf-pane-head {
        min-height:64px;
    }

    .bf-pane-head {
        gap:10px;
    }

    .bf-pane-head>span {
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:17px;
    }

    .bf-pane-head h2 {
        font-size:18px;
    }

    .bf-pane-head p {
        font-size:11px;
    }

    .bf-search {
        max-width:none;
    }

    .bf-search input,
    .bf-map-search input {
        min-height:48px;
    }

    .bf-srv-list {
        gap:11px;
        margin-inline:-8px;
        padding:4px 8px 12px;
        overscroll-behavior-inline:contain;
        scroll-padding-inline:8px;
        scroll-snap-type:inline mandatory;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .bf-srv {
        min-width:0;
        flex:0 0 clamp(142px,42vw,176px);
        scroll-snap-stop:always;
    }

    .bf-srv-img {
        height:100px;
        flex-basis:100px;
    }

    .bf-srv-txt {
        padding:12px 12px 14px;
    }

    .bf-srv strong {
        font-size:13px;
    }

    .bf-srv small {
        font-size:10px;
    }

    .bf-field-row {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .bf-field-row>div {
        min-width:0;
    }

    .bf-map-box {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:start;
        gap:9px;
    }

    .bf-map-search {
        min-width:0;
    }

    .bf-locate {
        min-height:46px;
        white-space:nowrap;
    }

    .bf-map,
    .bf-map-box>p {
        grid-column:1 / -1;
    }

    .bf-map {
        height:230px;
    }

    .bf-direct {
        flex-direction:column;
        gap:12px;
    }

    .bf-times {
        min-width:0;
        margin:0;
    }

    .bf-times>div {
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(min(138px,100%),1fr));
        gap:8px;
        max-height:none;
        overflow:visible;
        padding-inline-end:0;
    }

    .bf-pack {
        min-height:76px;
        gap:8px;
    }

    .bf-pack strong {
        overflow-wrap:anywhere;
    }

    .bf-pack small {
        overflow-wrap:anywhere;
    }

    .bf-pack b {
        max-width:38%;
        text-align:end;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .bf-customer-fields>div {
        min-width:0;
        flex:1 1 calc(50% - 6px);
    }

    .bf-customer-fields>div:last-child {
        flex-basis:100%;
    }

    .bf-act {
        position:sticky;
        bottom:0;
        z-index:6;
        justify-content:stretch;
        margin:16px -8px -20px;
        padding:10px 8px calc(10px + env(safe-area-inset-bottom));
        border-top:1px solid var(--bf-line);
        background:color-mix(in srgb,var(--surface-color) 95%,transparent);
        backdrop-filter:blur(10px);
    }

    .bf-act .bf-next {
        width:100%;
    }

    .bf-summary-inner {
        padding:20px;
    }

    .bf-summary-trust {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:4px;
        overflow:visible;
    }

    .bf-summary-trust span {
        min-width:0;
        flex:none;
    }

    .bf-coupon-controls {
        min-width:0;
    }

    .bf-coupon-controls>button {
        flex:0 0 auto;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:520px) {
    .bf-page {
        padding:116px 0 38px;
    }

    .bf-head>span {
        font-size:13px;
    }

    .bf-head :is(h1,h2,h3,div) {
        font-size:26px;
    }

    .bf-head-badges {
        margin-inline:calc(var(--container-padding--value) * -1);
    }

    .bf-modes {
        width:100%;
        align-self:stretch;
    }

    .bf-modes button {
        min-width:0;
        flex:1;
        padding-inline:10px;
    }

    .bf-date,
    .bf-times,
    .bf-quote,
    .bf-customer-fields,
    .bf-map-box {
        padding:13px;
    }

    .bf-week,
    .bf-days {
        gap:3px;
    }

    .bf-days button,
    .bf-days>i {
        min-height:38px;
    }

    .bf-customer-fields>div {
        flex-basis:100%;
    }

    .bf-summary-inner {
        padding:17px;
    }

    .bf-side-img {
        width:76px;
        height:68px;
        flex-basis:76px;
    }

    .bf-summary-service {
        gap:10px;
        padding:10px;
    }

    .bf-sum p {
        gap:10px;
    }

    .bf-coupon-controls {
        flex-direction:row;
        align-items:stretch;
    }

    .bf-coupon-controls>button {
        min-width:70px;
    }

    .bf-success {
        min-height:360px;
        padding:30px 17px;
    }
}

@media only screen and (max-width:390px) {
    .bf-page {
        padding-block-start: 130px;
    }

    .bf-work,
    .bf-summary-inner {
        border-radius:17px;
    }

    .bf-top {
        padding-inline:10px;
    }

    .bf-flow {
        gap:7px;
        padding-inline:10px;
        scroll-padding-inline:10px;
    }

    .bf-flow button {
        flex-basis:102px;
    }

    .bf-stages {
        padding-inline:7px;
        padding-block-end:7px;
    }

    .bf-stage.active .bf-pane {
        padding:16px 6px 18px;
    }

    .bf-pane {
        padding-inline:6px;
    }

    .bf-pane-head h2 {
        font-size:17px;
    }

    .bf-field-row {
        grid-template-columns:minmax(0,1fr);
        gap:0;
    }

    .bf-map-box {
        grid-template-columns:minmax(0,1fr);
    }

    .bf-locate,
    .bf-map,
    .bf-map-box>p {
        grid-column:1;
    }

    .bf-locate {
        width:100%;
    }

    .bf-map {
        height:210px;
    }

    .bf-srv {
        flex-basis:clamp(140px,43vw,160px);
    }

    .bf-srv-img {
        height:96px;
        flex-basis:96px;
    }

    .bf-pack {
        align-items:flex-start;
        flex-wrap:wrap;
        padding:11px;
    }

    .bf-pack>span {
        flex-basis:calc(100% - 34px);
    }

    .bf-pack b {
        max-width:none;
        order:3;
        margin-inline-start:0;
        color:var(--bf-blue);
        text-align:start;
    }

    .bf-pack>i {
        margin-inline-start:auto;
    }

    .bf-summary-service {
        align-items:flex-start;
    }

    .bf-side-img {
        width:70px;
        height:64px;
        flex-basis:70px;
    }

    .bf-sum strong {
        max-width:58%;
    }

    .bf-summary-trust {
        gap:3px;
        padding:10px 6px;
    }

    .bf-summary-trust span {
        padding:4px 2px;
    }

    .bf-summary-trust b {
        font-size:8px;
    }
}

@media only screen and (max-width:340px) {
    .bf-prog {
        gap:5px;
    }

    .bf-prog i {
        width:14px;
    }

    .bf-flow button {
        flex-basis:96px;
    }

    .bf-pane-head>small {
        width:27px;
        height:27px;
        flex-basis:27px;
    }

    .bf-pane-head>span {
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .bf-pane-head h2 {
        font-size:16px;
    }

    .bf-times>div {
        grid-template-columns:minmax(0,1fr);
    }

    .bf-sum p {
        gap:8px;
    }

    .bf-coupon-controls {
        gap:5px;
    }

    .bf-coupon-controls>button {
        min-width:62px;
        padding-inline:8px;
    }
}

/* =========================
   Touch & Reduced Motion
========================= */

@media (hover:none) {
    .bf-srv:hover,
    .bf-pack:hover {
        transform:none;
        box-shadow:none;
    }

    .bf-srv:active,
    .bf-pack:active,
    .bf-times button:active,
    .bf-modes button:active,
    .bf-back:active,
    .bf-more:active,
    .bf-locate:active,
    .bf-coupon-controls>button:active,
    .bf-cal-head button:active {
        transform:scale(.985);
    }
}

@media (prefers-reduced-motion:reduce) {
    .bf-stage.active .bf-pane,
    .bf-next,
    .bf-submit,
    .bf-srv,
    .bf-pack,
    .bf-flow button>span,
    .bf-packages.is-selecting .bf-pack.pending>i {
        animation:none;
        transition:none;
    }
}

@keyframes bfReveal {
    from {
        opacity:0;
        transform:translateY(8px);
    }
    to {
        opacity:1;
        transform:none;
    }
}

@keyframes bfSpin {
    to {
        transform:rotate(360deg);
    }
}