/* ============================================================
   AIHPG SHARED PILL-BUTTON COMPONENT (.choice-group)
   Cross-cutting CC-4 (see /docs/FORM-AUDIT.txt).

   Consolidates three pre-existing pill patterns:
       /components/callback-widget.html  .cb-choice  (canonical)
       /included-difference.html         .calc-chip
       per-form ad-hoc                   .vf-choice / similar

   Canonical HTML pattern:

     <div class="choice-group" role="radiogroup" aria-label="Bedrooms">
       <input type="hidden" name="bedrooms" id="vf-bedrooms-hidden" value="">
       <button type="button"
               class="choice"
               role="radio"
               aria-checked="false"
               data-target="vf-bedrooms-hidden"
               data-value="studio">Studio</button>
       <button type="button"
               class="choice"
               role="radio"
               aria-checked="false"
               data-target="vf-bedrooms-hidden"
               data-value="1">1</button>
     </div>

   Variants:
     .choice-group--single   single-select / radio behaviour (default)
     .choice-group--multi    multi-select / checkbox behaviour
     .choice-group--chips    multi-select bound to native checkboxes;
                             pills size to content (no stretch) so
                             varying-length service labels read well
                             (Form 7 partnerships "Services of Interest")

   Optional icon span:
     <span class="choice-icon" aria-hidden="true">📞</span>

   Site palette is themed via existing custom properties (--gold,
   --gold-light, --gold-dark, --gold-muted, --cream, --charcoal,
   --warm-grey, --light-grey, --t).  Colour values are intentionally
   inherited so individual hosts (light section vs. dark section)
   continue to work.
   ============================================================ */

.choice-group{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.choice{
  flex:1;
  min-width:80px;
  min-height:44px;
  padding:11px 12px;
  background:var(--cream,#f5f1e8);
  border:1px solid rgba(0,0,0,.08);
  font-family:var(--font-body,inherit);
  font-size:12px;
  font-weight:500;
  color:var(--warm-grey,#5a5a5a);
  cursor:pointer;
  text-align:center;
  transition:all .3s var(--t,ease);
  -webkit-tap-highlight-color:transparent;
}

.choice:hover:not(.is-active):not(:disabled){
  border-color:rgba(201,168,76,.4);
  background:var(--white,#fff);
}

.choice:focus-visible{
  outline:2px solid var(--gold,#c9a84c);
  outline-offset:2px;
}

.choice.is-active,
.choice[aria-checked="true"]{
  background:var(--charcoal,#2a2318);
  border-color:var(--charcoal,#2a2318);
  color:var(--gold-light,#d4b965);
}

.choice:disabled,
.choice[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
}

.choice-icon{
  display:block;
  font-size:16px;
  margin-bottom:4px;
}

.choice-group--chips .choice{
  flex:0 1 auto;
  padding:10px 16px;
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
}

.choice-group--invalid .choice{
  border-color:#c44;
  box-shadow:0 0 0 2px rgba(204,68,68,.18);
}

@media (max-width:480px){
  .choice-group{gap:6px}
  .choice{min-width:70px;font-size:11px;padding:10px 8px}
}