/* =====================================================================
 * shared-form.css — the ONE customer form design, used by both the
 * forms-v2 editor Preview and the live customer widgets (quote/booking/
 * contact). Ported from the approved forms-v2 editor design (the old
 * .fv2e-* preview) to a neutral .bsf-* prefix so it can load in either
 * context without the editor's scoping. Source of truth — keep in sync
 * with shared-form.js. (2026-06-07)
 * --------------------------------------------------------------------- */

.bsf { max-width: 560px; margin: 0 auto; }
.bsf *, .bsf *::before, .bsf *::after { box-sizing: border-box; }

/* Card shell (the "Your business" framed form) */
.bsf-stage { background: var(--bsf-stage, #edeae4); border: 1px solid rgba(31,22,17,.1); border-radius: 18px; padding: 16px; }
.bsf-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(31,22,17,.08), 0 16px 32px -18px rgba(31,22,17,.24), inset 0 1px 0 rgba(255,255,255,.7); }
.bsf-biz { text-align: center; font-size: 1.05rem; font-weight: 680; letter-spacing: -.01em; color: #1f1611; padding: 19px 16px; border-bottom: 1px solid rgba(31,22,17,.08); background: linear-gradient(180deg,#fff,#fcfbf9); }
.bsf-body { padding: 18px 16px; }

/* Standalone (whole-page) mode — drop the framed card chrome */
.bsf--standalone .bsf-stage { background: transparent; border: 0; border-radius: 0; padding: 0; }
.bsf--standalone .bsf-card { box-shadow: none; border-radius: 0; }
.bsf--standalone .bsf-biz { display: none; } /* standalone page provides its own header */

/* Transparent embed (bg=transparent — booking widget embedded inside a site
   treatment's form slot, incl. GLASS treatments). Drop the white card + frame so
   the HOST section shows through and the booking form BLENDS like the native
   quote/contact forms do, instead of sitting as a solid white panel on the frost
   (founder 2026-06-25: booking forms stayed white on glassy variants). Inputs,
   calendar tiles and buttons keep their own fills, exactly like the native form's
   white inputs. The treatment that owns the slot provides the card/frost. */
html[data-bare="1"] .bsf-stage { background: transparent; border: 0; border-radius: 0; padding: 0; }
html[data-bare="1"] .bsf-card { background: transparent; box-shadow: none; border-radius: 0; }
html[data-bare="1"] .bsf-biz { background: transparent; } /* treatment provides the heading */

/* Section headings */
.bsf-stitle { font-size: 1rem; font-weight: 650; color: #1f1611; margin: 0 0 14px; }
.bsf-section + .bsf-section { margin-top: 4px; }
.bsf-hr { height: 1px; background: rgba(31,22,17,.1); margin: 18px 0; border: 0; }

/* Fields */
.bsf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsf-field { display: block; margin-bottom: 12px; }
.bsf-fl { display: block; font-size: .76rem; font-weight: 600; color: #2a1f17; margin-bottom: 5px; }
.bsf-opt { font-weight: 500; color: #b3a796; font-size: .7rem; }
.bsf-req { display: inline-block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #c8511e; background: rgba(200,81,30,.1); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.bsf-in { width: 100%; border: 1px solid rgba(31,22,17,.16); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: .82rem; color: #1f1611; background: #fff; box-shadow: inset 0 1px 2px rgba(31,22,17,.05); }
.bsf-in::placeholder { color: #b3a796; }
.bsf-in:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.bsf-ta { width: 100%; min-height: 88px; resize: vertical; }
.bsf-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(31,22,17,.16); border-radius: 9px; padding: 11px 12px; font-size: .82rem; color: #6b5a4c; background: linear-gradient(180deg,#fff,#fafafa); box-shadow: inset 0 1px 2px rgba(31,22,17,.04); cursor: pointer; }
.bsf-sel svg { width: 18px; height: 18px; flex-shrink: 0; color: #b3a796; }

/* Photo drop */
.bsf-cap-cnt { font-weight: 500; color: #b3a796; }
.bsf-drop { position: relative; border: 1.5px dashed rgba(31,22,17,.22); border-radius: 11px; padding: 16px 20px; display: flex; align-items: center; justify-content: center; color: #6b5a4c; background: #faf9f7; cursor: pointer; font-size: .82rem; }
.bsf-drop svg { width: 24px; height: 24px; opacity: .55; }
.bsf-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 8px; }
.bsf-photo-grid:empty { display: none; }
.bsf-photo-tile { position: relative; aspect-ratio: 1; border: 1px solid rgba(31,22,17,.1); border-radius: 9px; overflow: hidden; background: #f1efe9; }
.bsf-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsf-photo-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; background: rgba(31,22,17,.65); color: #fff; border-radius: 50%; font-size: 14px; line-height: 22px; text-align: center; cursor: pointer; }

/* Consent (AU Spam Act) */
.bsf-consent { font-size: .7rem; line-height: 1.5; color: #9c8e7e; margin: 10px 0 2px; }
.bsf-check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 2px; cursor: pointer; }
.bsf-box { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(31,22,17,.22); margin-top: 1px; background: linear-gradient(180deg,#fff,#f1efe9); box-shadow: inset 0 1px 2px rgba(31,22,17,.08); }
.bsf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.bsf-check input:checked + .bsf-box { background: linear-gradient(180deg,#5aa2ff,#2563eb); border-color: #2563eb; }
.bsf-check input:checked + .bsf-box::after { content: "\2713"; color: #fff; font-size: 12px; display: block; text-align: center; line-height: 15px; }
.bsf-ctxt { font-size: .76rem; line-height: 1.45; color: #6b5a4c; }
.bsf-ctxt em { color: #9c8e7e; font-style: italic; }

/* Progress (stepped) */
.bsf-prog { display: flex; gap: 7px; margin-bottom: 18px; }
.bsf-prog span { flex: 1; height: 6px; border-radius: 999px; background: #e5e3dd; }
.bsf-prog span.on { background: linear-gradient(90deg,#2a2520,#1f1611); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.bsf-cap { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b3a796; margin: 22px 0 8px 2px; }

/* Nav / submit */
.bsf-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(31,22,17,.08); }
.bsf-back { background: transparent; border: 0; color: #6b5a4c; font: inherit; font-size: .84rem; font-weight: 600; padding: 10px 4px; cursor: pointer; }
.bsf-next { background: linear-gradient(180deg,#2a2520,#171717); color: #fff; border: 1px solid #171717; border-bottom-color: #0a0a0a; border-radius: 10px; padding: 10px 24px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1); }
.bsf-next:active { transform: translateY(.5px); }
.bsf-foot { text-align: center; font-size: .67rem; letter-spacing: .02em; color: #b3a796; padding: 13px; }

/* Schedule (booking) */
.bsf-cal { margin-top: 4px; }
.bsf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bsf-cal-mon { font-size: .92rem; font-weight: 620; color: #1f1611; }
.bsf-cal-nav { display: flex; gap: 6px; }
.bsf-cal-nav span { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(31,22,17,.14); display: flex; align-items: center; justify-content: center; color: #6b5a4c; background: linear-gradient(180deg,#fff,#f4f2ee); }
.bsf-cal-nav svg { width: 15px; height: 15px; }
.bsf-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.bsf-cal-dow { font-size: .58rem; font-weight: 700; text-transform: uppercase; color: #b3a796; text-align: center; padding-bottom: 3px; }
.bsf-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #b3a796; border-radius: 50%; }
.bsf-cal-day.avail { background: #eceae4; color: #1f1611; cursor: pointer; }
.bsf-cal-day.sel { background: linear-gradient(180deg,#2a2520,#1f1611); color: #fff; font-weight: 600; box-shadow: 0 2px 6px -1px rgba(31,22,17,.32), inset 0 1px 0 rgba(255,255,255,.12); }
.bsf-tz { margin-top: 14px; display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid rgba(31,22,17,.16); border-radius: 9px; font-size: .82rem; font-weight: 500; color: #1f1611; background: linear-gradient(180deg,#fff,#f7f5f1); }
.bsf-slot-h { font-size: .84rem; font-weight: 650; color: #1f1611; margin: 16px 0 1px; }
.bsf-slot-sub { font-size: .74rem; color: #6b5a4c; margin-bottom: 10px; }
.bsf-slot { text-align: center; padding: 12px; border: 1px solid rgba(31,22,17,.14); border-radius: 10px; font-size: .84rem; font-weight: 500; color: #1f1611; background: linear-gradient(180deg,#fff,#fafafa); margin-bottom: 8px; box-shadow: 0 1px 2px rgba(31,22,17,.04), inset 0 1px 0 rgba(255,255,255,.8); cursor: pointer; }

/* Review-step summary — label/value rows for every visible field (2026-06-07). */
.bsf-review { margin: 4px 0 2px; border-top: 1px solid rgba(31,22,17,.08); }
.bsf-rev-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(31,22,17,.07); }
.bsf-rev-l { flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: #6b5a4c; }
.bsf-rev-v { flex: 1 1 auto; min-width: 0; text-align: right; font-size: .86rem; color: #1f1611; word-break: break-word; }
.bsf-rev-empty { color: #b8afa4; }

/* Done state (after submit, live mode) */
.bsf-done { text-align: center; padding: 24px 8px; }
.bsf-done-ic { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(180deg,rgba(46,158,91,.22),rgba(46,158,91,.1)); color: #2e9e5b; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 700; margin: 6px auto 14px; }
.bsf-done-t { font-size: 1.05rem; font-weight: 680; color: #1f1611; margin: 0 0 8px; }
.bsf-done-s { font-size: .82rem; line-height: 1.5; color: #6b5a4c; margin: 0 auto; max-width: 36ch; }