/* ============================================================================
   Boss & Hoss — canonical form styling (theme-aware: light + dark)
   One source of truth for every .bhf form site-wide. All colors come from
   --bhf-* tokens that flip with body[data-theme]. Verified WCAG AA.
   ============================================================================ */

/* ---- form-surface tokens (LIGHT / default) ---- */
.bhf{
  --bhf-bg:#ffffff;            /* input background        */
  --bhf-ink:#1c2430;           /* input / value text      */
  --bhf-mut:#5b6673;           /* placeholder + label     */
  --bhf-bd:#7c8792;            /* border (AA 3:1)         */
  --bhf-bd2:#5b6673;           /* border hover            */
  --bhf-acc:#17a637;           /* accent (checks/fills)   */
  --bhf-focus:#0f7a34;         /* focus ring (AA 3:1)     */
  --bhf-focus-glow:rgba(23,166,55,.22);
  --bhf-surface:#ffffff;       /* lightbox card           */
  --bhf-scrim:rgba(12,16,20,.5);
  --bhf-ok-bg:#eef7f0; --bhf-ok-ink:#0f7a34; --bhf-ok-bd:rgba(23,166,55,.4);
  --bhf-err-bg:#fdeeee; --bhf-err-ink:#b3261e; --bhf-err-bd:rgba(179,38,30,.4);
  --bhf-btn-bg:#1c2430; --bhf-btn-ink:#ffffff; --bhf-btn-bg-h:#000000;
  color-scheme:light;
}
/* ---- DARK ---- */
body[data-theme="dark"] .bhf{
  --bhf-bg:#171717;           /* neutral, a touch darker than the page (#1c1c1c) — no blue cast */
  --bhf-ink:#ededed;
  --bhf-mut:#a3a3a3;
  --bhf-bd:#6e6e6e;           /* neutral gray, AA 3:1 so the field stays perceptible */
  --bhf-bd2:#9a9a9a;
  --bhf-acc:#37d35a;
  --bhf-focus:#4ade80;
  --bhf-focus-glow:rgba(74,222,128,.24);
  --bhf-surface:#1a1a1a;
  --bhf-scrim:rgba(0,0,0,.62);
  --bhf-ok-bg:#16241b; --bhf-ok-ink:#6ee79a; --bhf-ok-bd:rgba(55,211,90,.45);
  --bhf-err-bg:#2a1917; --bhf-err-ink:#ff8078; --bhf-err-bd:rgba(255,128,120,.45);
  --bhf-btn-bg:#ededed; --bhf-btn-ink:#12161b; --bhf-btn-bg-h:#ffffff;
  color-scheme:dark;
}
/* BBB Rating label ships with a hardcoded dark inline color (#2d2926) — invisible on dark. */
body[data-theme="dark"] h3[style*="2d2926"]{color:#ffffff !important;}
/* native controls (spinners, select popup, date, scrollbars) follow the theme */
body[data-theme="light"]{color-scheme:light}
body[data-theme="dark"]{color-scheme:dark}

.bhf{max-width:620px;margin:0 auto;font-family:inherit;text-align:left;color:var(--bhf-ink)}
.bhf *{box-sizing:border-box}
/* all text inputs full-width + identical size (uniform) */
.bhf-grid{display:grid;grid-template-columns:1fr;gap:14px}
.bhf-field{position:relative;margin:0 0 14px}
.bhf-field.full{grid-column:1/-1}

/* ---- text / email / tel / number / textarea / select ---- */
.bhf input,.bhf textarea,.bhf select{
  width:100%;padding:22px 15px 8px;border:1.5px solid var(--bhf-bd);border-radius:12px;
  background:var(--bhf-bg);color:var(--bhf-ink);font-size:15.5px;font-family:inherit;line-height:1.3;
  caret-color:var(--bhf-acc);transition:border-color .18s,box-shadow .18s,background .18s;outline:none;
}
.bhf textarea{padding-top:25px;min-height:130px;resize:vertical}
.bhf select{padding:20px 15px 6px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bhf-mut) 50%),linear-gradient(135deg,var(--bhf-mut) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.4em + 2px),calc(100% - 14px) calc(1.4em + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
.bhf option{background:var(--bhf-bg);color:var(--bhf-ink)}
.bhf input:hover,.bhf textarea:hover,.bhf select:hover{border-color:var(--bhf-bd2)}
.bhf input:focus,.bhf textarea:focus,.bhf select:focus,
.bhf input:focus-visible,.bhf textarea:focus-visible,.bhf select:focus-visible{
  border-color:var(--bhf-focus);box-shadow:0 0 0 3px var(--bhf-focus-glow),0 0 0 1px var(--bhf-focus)}

/* floating label */
.bhf-field>label{position:absolute;left:16px;top:15px;color:var(--bhf-mut);font-size:15.5px;pointer-events:none;transition:.16s ease}
.bhf input:focus~label,.bhf input:not(:placeholder-shown)~label,
.bhf textarea:focus~label,.bhf textarea:not(:placeholder-shown)~label,
.bhf select:focus~label,.bhf select:valid~label{
  top:8px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--bhf-focus)}
.bhf input::placeholder,.bhf textarea::placeholder{color:transparent}
.bhf input:-ms-input-placeholder,.bhf textarea:-ms-input-placeholder{color:transparent}

/* ---- autofill (webkit overrides yellow bg + black text) ---- */
.bhf input:-webkit-autofill,
.bhf input:-webkit-autofill:hover,
.bhf input:-webkit-autofill:focus,
.bhf input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--bhf-ink);
  -webkit-box-shadow:0 0 0 1000px var(--bhf-bg) inset;
  box-shadow:0 0 0 1000px var(--bhf-bg) inset;
  caret-color:var(--bhf-acc);transition:background-color 9999s ease-out}

/* ---- native number spinners / date follow color-scheme; keep them tinted ---- */
.bhf input[type=number]::-webkit-inner-spin-button,
.bhf input[type=number]::-webkit-outer-spin-button{opacity:1;filter:none}
.bhf input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer}

/* ---- checkbox / radio GROUPS (restored fields) ---- */
.bhf-group{margin:0 0 16px}
.bhf-group>.bhf-legend{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--bhf-ink);margin:0 0 9px}
/* checkbox/radio options: uniform equal-width grid, equal-height rows */
.bhf-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bhf-opt{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 15px;border:1.5px solid var(--bhf-bd);
  border-radius:10px;background:var(--bhf-bg);color:var(--bhf-ink);font-size:14.5px;line-height:1.35;cursor:pointer;transition:border-color .16s,background .16s}
.bhf-opt:hover{border-color:var(--bhf-bd2)}
.bhf-opt:has(input:checked){border-color:var(--bhf-acc);background:var(--bhf-ok-bg)}
.bhf-opt input[type=checkbox],.bhf-opt input[type=radio]{
  width:19px;height:19px;margin:0;flex:none;accent-color:var(--bhf-acc);cursor:pointer;caret-color:auto}
.bhf-opt input:focus-visible{outline:2px solid var(--bhf-focus);outline-offset:2px}

/* ---- file picker + its button ---- */
.bhf-file{margin:0 0 16px}
.bhf-file>.bhf-legend{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--bhf-ink);margin:0 0 8px}
.bhf-file input[type=file]{width:100%;padding:12px 14px;border:1.5px dashed var(--bhf-bd);border-radius:12px;
  background:var(--bhf-bg);color:var(--bhf-mut);font-size:14px;font-family:inherit;cursor:pointer;caret-color:auto}
.bhf-file input[type=file]:hover{border-color:var(--bhf-bd2)}
.bhf-file input[type=file]:focus-visible{outline:none;border-color:var(--bhf-focus);box-shadow:0 0 0 3px var(--bhf-focus-glow)}
.bhf-file input[type=file]::file-selector-button{
  margin-right:14px;padding:9px 16px;border:0;border-radius:9px;background:var(--bhf-btn-bg);color:var(--bhf-btn-ink);
  font-weight:600;font-size:13.5px;font-family:inherit;cursor:pointer;transition:background .16s}
.bhf-file input[type=file]::-webkit-file-upload-button{
  margin-right:14px;padding:9px 16px;border:0;border-radius:9px;background:var(--bhf-btn-bg);color:var(--bhf-btn-ink);
  font-weight:600;font-size:13.5px;font-family:inherit;cursor:pointer}
.bhf-file input[type=file]:hover::file-selector-button{background:var(--bhf-btn-bg-h)}
.bhf-file .bhf-hint{font-size:12px;color:var(--bhf-mut);margin-top:6px}

/* ---- "Verify you are human" + ONLINEX secured indicator ---- */
.bhf-hv{display:flex;align-items:center;gap:12px;margin:2px 0 16px;padding:13px 15px;border:1.5px solid var(--bhf-bd);
  border-radius:12px;background:var(--bhf-bg);cursor:pointer;user-select:none;transition:border-color .2s,background .2s}
.bhf-hv:hover{border-color:var(--bhf-bd2)}
.bhf-hv.ok{border-color:var(--bhf-acc);background:var(--bhf-ok-bg)}
.bhf-hv input{position:absolute;opacity:0;width:0;height:0}
.bhf-hv:focus-within{border-color:var(--bhf-focus);box-shadow:0 0 0 3px var(--bhf-focus-glow)}
.bhf-box{position:relative;width:24px;height:24px;border:2px solid var(--bhf-bd2);border-radius:7px;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--bhf-bg);transition:.2s}
.bhf-hv.ok .bhf-box{background:var(--bhf-acc);border-color:var(--bhf-acc)}
.bhf-check{color:#fff;font-size:15px;line-height:1;opacity:0;transform:scale(.4);transition:.25s cubic-bezier(.2,.8,.2,1)}
.bhf-hv.ok .bhf-check{opacity:1;transform:scale(1)}
.bhf-spin{position:absolute;width:18px;height:18px;border:2px solid transparent;border-top-color:var(--bhf-acc);border-radius:50%;opacity:0;animation:bhfspin .7s linear infinite}
.bhf-hv.checking .bhf-spin{opacity:1}
@keyframes bhfspin{to{transform:rotate(360deg)}}
.bhf-hvtxt{font-size:14.5px;color:var(--bhf-ink);font-weight:500}
.bhf-hv.ok .bhf-hvtxt{color:var(--bhf-ok-ink)}
.bhf-brand{margin-left:auto;font-size:11px;color:var(--bhf-mut);letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:6px}
.bhf-brand b{color:var(--bhf-ink);font-weight:700;letter-spacing:.09em}
.bhf-brand .dot{width:6px;height:6px;border-radius:50%;background:var(--bhf-acc);box-shadow:0 0 0 3px var(--bhf-focus-glow)}

/* ---- submit: hover / focus / active / disabled ---- */
.bhf-send{width:100%;padding:16px;border:0;border-radius:12px;background:var(--bhf-btn-bg);color:var(--bhf-btn-ink);
  font-weight:600;font-size:15.5px;letter-spacing:.01em;cursor:pointer;transition:background .18s,transform .1s,box-shadow .18s;font-family:inherit}
.bhf-send:hover{background:var(--bhf-btn-bg-h)}
.bhf-send:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bhf-focus-glow),0 0 0 1px var(--bhf-focus)}
.bhf-send:active{transform:translateY(1px)}
.bhf-send:disabled{opacity:.55;cursor:default}
.bhf-send .bhf-sspin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;border-radius:50%;vertical-align:-3px;margin-right:8px;animation:bhfspin .7s linear infinite}
.bhf-send.sending .bhf-sspin{display:inline-block}

/* ---- success + error states ---- */
.bhf-sent{display:none;padding:26px 22px;border-radius:12px;background:var(--bhf-ok-bg);border:1.5px solid var(--bhf-ok-bd);color:var(--bhf-ok-ink);text-align:center}
.bhf-sent b{display:block;font-size:17px;margin-bottom:4px}
.bhf.sent form{display:none}
.bhf.sent .bhf-sent{display:block;animation:bhfpop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes bhfpop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.bhf-err{display:none;margin:0 0 14px;padding:12px 15px;border-radius:10px;background:var(--bhf-err-bg);border:1.5px solid var(--bhf-err-bd);color:var(--bhf-err-ink);font-size:14px}
.bhf-err.show{display:block}

/* ---- lightbox overlay + inner surface (theme-aware) ---- */
.bhf-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;
  background:var(--bhf-scrim);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s ease}
.bhf-modal.on{display:flex;opacity:1}
.bhf-modal .bhf-card{width:min(640px,100%);max-height:88vh;overflow:auto;background:var(--bhf-surface);
  border:1.5px solid var(--bhf-bd);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.35);padding:26px}

@media(max-width:560px){.bhf-grid,.bhf-opts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bhf *{animation-duration:.001s!important;transition-duration:.05s!important}}