/* ─────────────────────────────────────────────
   ❶  Grid layout
─────────────────────────────────────────────*/
.form-section{
  display:flex;flex-wrap:wrap;
  column-gap:var(--field-gap);
  row-gap:1.6rem;
}
.form-section>h2{width:100%;}

.field-wrapper{display:flex;flex-direction:column;gap:.6rem;padding:.6rem .8rem;}
.field-wrapper:focus-within{
  background:var(--focus-glow);
}
.field-wrapper.invalid{
  background:var(--error-glow);
}
.field-wrapper.invalid input,
.field-wrapper.invalid textarea,
.field-wrapper.invalid select{
  border-color:#f23a3c;
}

.width-whole{flex:1 1 100%;}
.width-half {
  flex:1 1 calc(50% - (var(--field-gap)/2));
  min-width:260px;
}

/* ─────────────────────────────────────────────
   ❷  Labels & helper text
─────────────────────────────────────────────*/
label{font-weight:500;}
label.required{display:inline-block;}
label.required::after{content:"*";color:#f23a3c;margin-left:.25rem;}

small.helper-text{color:#57647e;font-size:.85rem;line-height:1.3;}

/* ─────────────────────────────────────────────
   ❸  Base inputs
─────────────────────────────────────────────*/
input,select,textarea{
  width:100%;padding:.65rem .75rem;
  border:1px solid var(--c-border);border-radius:var(--radius);
  font:inherit;background:#fff;
}
textarea{min-height:6rem;resize:vertical;}

input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--c-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 25%,transparent);
}
/* Add ONLY this block; leave your other rules untouched */
.address-group{
  width:100%;                               /* full row of main form */
  display:grid;
  grid-template-columns: 1fr 1fr;           /* two equal columns     */
  gap:1rem var(--field-gap);                /* row gap • column gap  */
}

/* Grid hints */
.address-group .width-whole{ padding: 0; grid-column:1 / -1; }  /* span both cols */
.address-group .width-half { padding: 0; grid-column:auto; }    /* default = one col */
.address-group label{ grid-column:1 / -1; margin-bottom:.4rem; }

/* ─────────────────────────────────────────────
   ❹  Choice controls
─────────────────────────────────────────────*/
.radio-group,.checkbox-group{display:flex;flex-wrap:wrap;gap:1rem;}
.radio-group label,.checkbox-group label{
  display:flex;align-items:center;gap:.45rem;cursor:pointer;font-weight:400;
}
input[type=radio],input[type=checkbox]{
  width:1rem;height:1rem;margin:0;accent-color:var(--c-accent);cursor:pointer;
}
.form-radio-item{display:inline-flex;align-items:center;margin-right:1.25rem;}
.form-radio-item input{margin-right:.35rem;}
.form-radio-item label{margin-left:.05rem;line-height:1;}

/* ─────────────────────────────────────────────
   ❻  Misc
─────────────────────────────────────────────*/
.phone-input::placeholder{letter-spacing:2px;}
.hidden{display:none;}


/* host select: no borders, stack items */
select.multi-checkbox{
  border:0; width:100%; background:transparent;
  font:inherit; padding:0; outline:0;
}

/* show scrollbar only when needed */
select.multi-checkbox:focus { outline:0; }

/* each option displayed like a checkbox row */
select.multi-checkbox option{
  padding:.45rem 1rem .45rem 2.2rem;     /* room for faux box */
  position:relative;
  cursor:pointer;
  color:var(--c-text);
}

/* faux box */
select.multi-checkbox option::before{
  content:"";
  position:absolute; left:.8rem; top:50%;
  width:1rem; height:1rem;
  border:1px solid var(--c-border);
  border-radius:3px;
  transform:translateY(-50%);
}

/* filled when selected */
select.multi-checkbox option:checked::before{
  background:var(--c-accent);
  border-color:var(--c-accent);
}

/* optional hover highlight */
select.multi-checkbox option:hover{
  background:rgba(0,0,0,.05);
}


/* ---------- file‑uploader wrapper ---------- */
.file-upload {
  margin-top: 1rem;
  font-family: inherit;
}

/* ---------- drop zone / button ------------- */
.file-upload .upload-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  padding:1rem 1.25rem;
  border:2px dashed #8a8a8a;
  border-radius:8px;
  cursor:pointer;
  text-align:center;

  transition:background-color .15s ease-in-out,
             border-color       .15s ease-in-out;
}
.file-upload .upload-drop:hover{
  border-color:#4a8cff;
}
.file-upload .upload-drop.drag{
  background:#e8f1ff;
  border-color:#4a8cff;
}

.file-upload .upload-btn{
  font-weight:600;
}
.file-upload .upload-hint{
  font-size:.875rem;
  color:#666;
}
/* hide the desktop hint on small screens */
@media (max-width: 640px){
  .file-upload .upload-hint.forDesktop{ display:none; }
}
/* hide the mobile hint on wider screens */
@media (min-width: 641px){
  .file-upload .upload-hint.forMobile{ display:none; }
}

/* ---------- file list ---------------------- */
.file-upload .upload-list{
  list-style:none;
  margin:.75rem 0 0;
  padding:0;
}
.file-upload .upload-list li{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.375rem .5rem;
  border:1px solid #d0d0d0;
  border-radius:6px;
  margin-bottom:.5rem;
}
.file-upload .upload-list .fname{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-upload .upload-list .fsize{
  flex:0 0 auto;
  font-size:.8125rem;
  color:#555;
}
.file-upload .upload-list .fdel{
  flex:0 0 auto;
  background:none;
  border:none;
  font-weight:bold;
  color:#c00;
  cursor:pointer;
  line-height:1;
  padding:0 .25rem;
}
.file-upload .upload-list .fdel:hover{
  color:#900;
}


/* ───────────────── Signature field ─────────────────────── */
.signature-pad .sig-canvas{
  width:100%;            /* fills whatever column/width you give it   */
  height:115px;          /* visual height; change if you want taller  */
  border:1px solid var(--c-border);
  border-radius:4px;
  display:block;
}
.signature-pad .sig-clear{
  margin-top:.5rem;padding:.3rem .6rem;
  font:600 .8rem/1 var(--ff);
  border:none;border-radius:4px;
  background:#eee;cursor:pointer;
}
.signature-pad .sig-clear:hover{background:#ddd;}