/* Beacon forms (front) — 12-column layout, v2 field controls, multi-step chrome.
   Base form styling belongs to the theme; everything here leans on its tokens
   (--accent, --line, --ink, --muted, --surface) with plain fallbacks.
   Selectors are scoped under .bf so they win over the theme's 4-column grid
   regardless of stylesheet order. */

/* ---- layout ---------------------------------------------------- */

.bf .bf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 16px;align-items:start}
/* Start is reset to auto because a `span` on BOTH ends makes CSS drop the end
   one — the v1 theme still ships `.bf-field{grid-column:span 4}`. */
.bf .bf-field{grid-column-start:auto;grid-column-end:span 12;display:flex;flex-direction:column;gap:6px;min-width:0}
.bf .bf-field.bf-w-1{grid-column-end:span 1}
.bf .bf-field.bf-w-2{grid-column-end:span 2}
.bf .bf-field.bf-w-3{grid-column-end:span 3}
.bf .bf-field.bf-w-4{grid-column-end:span 4}
.bf .bf-field.bf-w-5{grid-column-end:span 5}
.bf .bf-field.bf-w-6{grid-column-end:span 6}
.bf .bf-field.bf-w-7{grid-column-end:span 7}
.bf .bf-field.bf-w-8{grid-column-end:span 8}
.bf .bf-field.bf-w-9{grid-column-end:span 9}
.bf .bf-field.bf-w-10{grid-column-end:span 10}
.bf .bf-field.bf-w-11{grid-column-end:span 11}
.bf .bf-field.bf-w-12{grid-column-end:span 12}
/* Start line only — a `grid-column` shorthand here would reset the span to one track. */
.bf .bf-field.bf-break{grid-column-start:1}
.bf.bf-layout-grid .bf-grid{align-items:stretch}
.bf .bf-field[hidden]{display:none}
fieldset.bf-section[hidden]{display:none}

/* One column below 640px; every span collapses so nothing can overflow. */
@media(max-width:640px){
  .bf .bf-grid{grid-template-columns:1fr;gap:14px}
  .bf .bf-field,
  .bf .bf-field[class*="bf-w-"]{grid-column:1 / -1}
}

.bf-help{margin:0;font-size:.82rem;line-height:1.45;color:var(--muted,#646970)}
.bf-adminnote{margin:8px 0 0;font-size:.82rem;line-height:1.45;color:var(--muted,#646970);
  border-left:3px solid var(--accent-2,#c05621);padding-left:10px}
.bf-filehint{margin:0;font-size:.78rem;color:var(--muted,#646970)}
.bf .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- range ------------------------------------------------------ */

.bf-rangewrap{display:flex;align-items:center;gap:12px}
.bf-rangewrap input[type=range]{flex:1 1 auto;padding:0;accent-color:var(--accent,#2c2352);background:none;border:0}
.bf-rangeout{flex:0 0 auto;min-width:3ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink,#1d2327);background:var(--surface-2,#f2f3f5);border-radius:8px;padding:4px 9px}

/* ---- rating + scale --------------------------------------------- */

.bf-rating,.bf-scale{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}
.bf-tick{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.bf-tick input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0}
.bf-star{width:30px;height:30px;fill:var(--line,#d5d7db);transition:fill .12s ease,transform .12s ease}
.bf-tick.bf-on .bf-star{fill:var(--accent,#2c2352)}
.bf-tick:active .bf-star{transform:scale(.92)}
.bf-tick input:focus-visible+.bf-star{outline:3px solid var(--accent,#2c2352);outline-offset:2px;border-radius:4px}
.bf-scale .bf-tick-txt{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 6px;border:1px solid var(--line,#d5d7db);border-radius:10px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--paper,#fff);color:var(--ink,#1d2327);transition:.12s}
.bf-scale .bf-tick:hover .bf-tick-txt{border-color:var(--accent,#2c2352)}
.bf-scale input:checked+.bf-tick-txt{background:var(--accent,#2c2352);border-color:var(--accent,#2c2352);color:#fff}
.bf-scale input:focus-visible+.bf-tick-txt{outline:3px solid var(--accent,#2c2352);outline-offset:2px}

/* ---- matrix ------------------------------------------------------ */

.bf-matrixwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bf-matrix{width:100%;border-collapse:collapse;font-size:.9rem;min-width:min(100%,420px)}
table.bf-matrix th,table.bf-matrix td{border-bottom:1px solid var(--line,#e2e4e7);padding:9px 10px;text-align:center}
table.bf-matrix thead th{font-size:.78rem;font-weight:700;color:var(--muted,#646970);text-align:center;vertical-align:bottom}
table.bf-matrix tbody th{text-align:left;font-weight:600;color:var(--ink,#1d2327)}
.bf-mcell{display:flex;align-items:center;justify-content:center;min-height:34px;cursor:pointer}
.bf-mcell input{width:19px;height:19px;accent-color:var(--accent,#2c2352)}

/* ---- image choice ------------------------------------------------ */

.bf-imgchoice{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.bf-imgchoice .bf-choice{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;cursor:pointer;
  border:1.5px solid var(--line,#d5d7db);border-radius:12px;padding:10px;background:var(--paper,#fff);transition:.15s}
.bf-imgchoice .bf-choice:hover{border-color:var(--accent,#2c2352)}
.bf-imgchoice .bf-choice input{position:absolute;opacity:0;width:1px;height:1px}
.bf-imgchoice .bf-choice:has(input:checked){border-color:var(--accent,#2c2352);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#2c2352) 22%,transparent)}
.bf-imgchoice .bf-choice:has(input:focus-visible){outline:3px solid var(--accent,#2c2352);outline-offset:2px}
.bf-choice-img img{display:block;width:100%;height:96px;object-fit:cover;border-radius:8px}
.bf-choice-txt{font-weight:600;font-size:.86rem;line-height:1.3}

/* ---- address, region, repeater ----------------------------------- */

fieldset.bf-address{border:1px solid var(--line,#e2e4e7);border-radius:12px;padding:14px 16px 16px;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px}
fieldset.bf-address legend{padding:0 6px}
fieldset.bf-address label{display:block;font-size:.78rem;font-weight:600;color:var(--muted,#646970);margin-bottom:3px}
.bf-addr-line1,.bf-addr-line2{grid-column:1 / -1}
@media(max-width:640px){fieldset.bf-address{grid-template-columns:1fr}}

.bf-regionwrap{display:flex;flex-direction:column;gap:6px}
.bf-regionwrap.bf-has-regions .bf-region-free{display:none}
.bf-regionwrap:not(.bf-has-regions) .bf-region{display:none}

.bf-repeater{display:flex;flex-direction:column;gap:10px}
.bf-rep-rows{display:flex;flex-direction:column;gap:10px}
.bf-rep-row{display:flex;align-items:flex-end;gap:10px;background:var(--surface-2,#f6f7f8);
  border:1px solid var(--line,#e2e4e7);border-radius:12px;padding:10px 12px}
.bf-rep-cell{flex:1 1 0;min-width:0}
.bf-rep-cell label{display:block;font-size:.78rem;font-weight:600;color:var(--muted,#646970);margin-bottom:3px}
.bf-rep-del{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line,#d5d7db);border-radius:9px;background:var(--paper,#fff);color:var(--muted,#646970);cursor:pointer}
.bf-rep-del:hover:not(:disabled){border-color:var(--accent-2,#c05621);color:var(--accent-2,#c05621)}
.bf-rep-del:disabled{opacity:.4;cursor:not-allowed}
.bf-rep-del svg{width:16px;height:16px}
.bf-rep-add{align-self:flex-start;border:1px dashed var(--line,#c3c4c7);border-radius:100px;background:none;
  padding:8px 18px;font:inherit;font-weight:600;color:var(--accent,#2c2352);cursor:pointer}
.bf-rep-add:hover:not(:disabled){border-style:solid}
.bf-rep-add:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:640px){.bf-rep-row{flex-wrap:wrap}.bf-rep-cell{flex:1 1 100%}}

/* ---- calc, payment, consent -------------------------------------- */

.bf input.bf-calc{font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface-2,#f2f3f5)}
.bf-payment{border:1px solid var(--line,#e2e4e7);border-left:4px solid var(--accent,#2c2352);border-radius:12px;
  padding:14px 16px;background:var(--surface,#fff)}
.bf-pay-desc{margin:4px 0 0;color:var(--muted,#646970);font-size:.88rem}
.bf-pay-total{margin:6px 0 0;display:flex;align-items:baseline;gap:8px}
.bf-pay-amount{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink,#1d2327)}
.bf-pay-cur{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--muted,#646970)}
.bf-consent-link{font-size:.82rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--muted,#646970)}
.bf-consent-link:hover{color:var(--accent,#2c2352)}
.bf-captcha{margin:18px 0 0}

/* ---- notices ------------------------------------------------------ */

.bf-resume{background:var(--surface-2,#f2f3f5);border:1px solid var(--line,#e2e4e7);border-radius:10px;
  padding:10px 14px;margin:0 0 16px;font-size:.9rem;color:var(--ink,#1d2327)}
.bf-resume a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bf-error ul{margin:0;padding-left:20px}
.bf-error li{font-weight:500}
.bf-success.bf-pending{border-style:dashed}

/* ---- multi-step chrome -------------------------------------------- */

.bf-progress{margin:0 0 22px}
.bf-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.bf-progress-label{font-weight:700;color:var(--ink,#1d2327)}
.bf-progress-step{font-size:.82rem;font-weight:600;color:var(--muted,#646970);white-space:nowrap}
.bf-progress-bar{height:6px;border-radius:100px;background:var(--line,#e2e4e7);overflow:hidden}
.bf-progress-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent,#2c2352);transition:width .25s ease}

.bf-stepnav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line,#e2e4e7)}
.bf-stepnav .bf-next{margin-left:auto;cursor:pointer;border:0}
.bf-stepnav .bf-back{background:none;border:1px solid var(--line,#c3c4c7);border-radius:100px;padding:10px 22px;cursor:pointer;
  font:inherit;font-weight:600;color:var(--muted,#50575e);transition:.15s}
.bf-stepnav .bf-back:hover{border-color:var(--accent,#2c2352);color:var(--accent,#2c2352)}
.bf-stepnav [hidden]{display:none}

/* Multi-step hides the actions row until the last step; keep layout stable when it returns. */
.bf-ms .bf-actions[hidden]{display:none}

.bf-closed{background:var(--surface,#fff);border:1px solid var(--line,#e2e4e7);border-left:4px solid var(--accent,#2c2352);
  border-radius:14px;padding:22px 24px;line-height:1.6;color:var(--ink,#1d2327);font-weight:500}

/* Stepping engaged: the progress header already carries the section title. */
.bf-stepping .bf-section legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bf-stepping .bf-section{border-top:0;padding-top:0}

@media (prefers-reduced-motion:reduce){
  .bf-star,.bf-progress-bar i,.bf-scale .bf-tick-txt{transition:none}
}

/* ---- dropping files in ----
   The browser's own control stays inside this and keeps doing the work; the
   zone only makes it obvious that a file can be dragged onto it. */
.bf-drop{
  position:relative;display:grid;justify-items:center;gap:.45rem;
  padding:1.5rem 1.25rem;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line,#d8d8d8);border-radius:12px;
  background:var(--surface,transparent);
  transition:border-color .2s ease, background .2s ease;
}
.bf-drop:hover,.bf-drop.is-over{border-color:var(--accent,#6E7F6C)}
.bf-drop.is-over{background:color-mix(in srgb, var(--accent,#6E7F6C) 8%, transparent)}
.bf-drop.has-files{border-style:solid}
.bf-drop__icon{width:26px;height:26px;color:var(--muted,#6a6a6a)}
.bf-drop__lead{margin:0;font-size:.94rem;color:var(--text,inherit)}
.bf-drop__list{margin:0;font-size:.82rem;color:var(--muted,#6a6a6a);word-break:break-word}
.bf-drop__list:empty{display:none}
/* The input still receives the click and the keyboard, so it is present but not
   drawn over the zone's own message. */
.bf-drop input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.bf-drop:focus-within{border-color:var(--accent,#6E7F6C);box-shadow:0 0 0 3px var(--focus-halo,rgba(110,127,108,.25))}