/* ============================================================
   Bristow & Sutor — Shared form utility classes
   (Phase 5/6 inline-style extraction, 25 Aug 2026)
   ============================================================ */

/* Required-field asterisk — replaces <span style="color:var(--bs-pink);">*</span> */
.form-required-star { color: var(--bs-pink); font-weight: 700; }

/* Optional label sub-text — replaces style="font-weight:400;color:#8493a3;" */
.form-label-optional { font-weight: 400; color: #8493a3; }

/* Fieldset with no visual border — replaces style="border:none;padding:0;margin:0;" */
.fieldset-reset { border: none; padding: 0; margin: 0; }

/* Textarea that allows vertical resize only — replaces style="resize:vertical;" */
.form-textarea-resizable { resize: vertical; }

/* Full-width grid column span — replaces style="grid-column:1/-1;" */
.form-grid-full { grid-column: 1 / -1; }

/* DOB / short input constraint — replaces style="max-width:180px;" on date inputs */
.form-input-dob { max-width: 180px; }

/* Inline label with no bottom margin — replaces style="margin:0;" on form-label */
.form-label-inline { margin: 0; }

/* NI number format hint — replaces style="margin-top:4px;" */
.form-hint-tight { margin-top: 4px; }

/* Do-not-contact label alignment — replaces style="margin:0;" on label[for] */
.form-label-aligned { margin: 0; display: flex; align-items: center; }

/* ============================================================
   BRISTOW & SUTOR — FORM CONTROLS
   ============================================================ */

/* ---- LAYOUT ---- */
.ctrl-card {
  background: var(--bs-white); border-radius: var(--radius-lg);
  padding: 2.07rem 25.6px; box-shadow: var(--shadow-md); margin-bottom: 1.19rem;
}
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.48rem 22.4px;
}
.form-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.48rem 22.4px;
}
.form-grid-3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.48rem 22.4px;
}
.form-grid-full { grid-column: 1 / -1; }

/* ---- LABELS ---- */
.form-group { display: flex; flex-direction: column; gap: 0.44rem; }
.form-group label:not(.bs-checkbox):not(.bs-radio) {
  font-size: var(--text-sm); font-weight: 700; color: var(--bs-dark-blue);
}
.form-row-label {
  display: block; font-size: var(--text-sm); font-weight: 700; color: var(--bs-dark-blue);
  margin-bottom: 0.74rem;
}

/* Required field asterisk — add class .required to label */
.form-group label.required::after,
.form-row-label.required::after {
  content: ' *'; color: var(--bs-pink); font-weight: 700;
}

/* ---- TEXT INPUTS / SELECT / TEXTAREA ---- */
.form-control {
  width: 100%;
  padding: 0.74rem 11.2px;
  border: 1.5px solid var(--bs-light-grey);
  border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-control); color: var(--bs-body-text);
  background: var(--bs-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* appearance:none is only for text/select/textarea chrome we style ourselves — applying it to
   date/time inputs strips the browser's native calendar/clock picker icon entirely (in some
   browsers, "restoring" it afterwards with appearance:auto doesn't reliably bring it back), so
   those types are excluded from the reset up front rather than stripped-then-restored. */
.form-control:not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]) {
  appearance: none; -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--bs-dark-blue);
  box-shadow: 0 0 0 3px var(--bs-dark-blue-10);
}
.form-control:disabled {
  background: var(--bs-off-white); color: var(--bs-mid-grey);
  cursor: not-allowed; border-color: var(--bs-light-grey);
}
.form-control.error {
  border-color: var(--bs-pink);
  box-shadow: 0 0 0 3px var(--bs-pink-10);
}
.form-control.success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
.form-control.loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='6' fill='none' stroke='%23E8EDF2' stroke-width='2'/%3E%3Cpath d='M9 3 A6 6 0 0 1 15 9' fill='none' stroke='%23002D41' stroke-width='2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 9 9' to='360 9 9' dur='0.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30.4px;
  pointer-events: none; opacity: 0.8;
}
.form-control::placeholder { color: var(--bs-mid-grey); font-weight: 400; }

textarea.form-control { resize: vertical; min-height: 80px; line-height: 1.6; }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline points='1,1 6,7 11,1' fill='none' stroke='%23002D41' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 30.4px;
}
select.form-control[multiple] { background-image: none; padding-right: 1.04rem; height: auto; }

/* ---- HINTS / ERRORS / SUCCESS ---- */
.form-hint    { font-size: var(--text-xs); color: var(--bs-muted-text); margin-top: 0.3rem; line-height: 1.5; }
.form-error   { font-size: var(--text-xs); color: var(--bs-pink-text); font-weight: 600; margin-top: 0.3rem; }
.form-success { font-size: var(--text-xs); color: var(--color-success-text); font-weight: 600; margin-top: 0.3rem; }

/* ---- CHECKBOX ---- */
.check-group { display: flex; flex-direction: column; gap: 0.74rem; }
.check-group.inline { flex-direction: row; flex-wrap: wrap; gap: 1.04rem; }
.rc-block { margin-top: 0.3rem; }

.bs-checkbox {
  display: inline-flex; align-items: center; gap: 0.74rem;
  cursor: pointer; font-size: var(--text-body); color: var(--bs-body-text); font-weight: 500;
  user-select: none;
}
.bs-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.check-indicator {
  flex-shrink: 0; width: 14.4px; height: 14.4px;
  border: 2px solid var(--bs-mid-grey); border-radius: 3px;
  background: var(--bs-white);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.bs-checkbox input:checked ~ .check-indicator {
  background: var(--bs-dark-blue); border-color: var(--bs-dark-blue);
}
.bs-checkbox.gold input:checked ~ .check-indicator   { background: var(--bs-gold); border-color: var(--bs-gold); }
.bs-checkbox.turq input:checked ~ .check-indicator   { background: var(--bs-turquoise); border-color: var(--bs-turquoise); }
.bs-checkbox.pink input:checked ~ .check-indicator   { background: var(--bs-pink); border-color: var(--bs-pink); }
.bs-checkbox.disabled { opacity: 0.45; cursor: not-allowed; }
.bs-checkbox:hover:not(.disabled) .check-indicator { border-color: var(--bs-dark-blue); }
.bs-checkbox input:focus-visible ~ .check-indicator { outline: 2px solid var(--bs-gold); outline-offset: 2px; }

/* ---- RADIO ---- */
.radio-group { display: flex; flex-direction: column; gap: 0.74rem; }
.radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: 1.04rem; }

.bs-radio {
  display: inline-flex; align-items: center; gap: 0.74rem;
  cursor: pointer; font-size: var(--text-body); color: var(--bs-body-text); font-weight: 500;
  user-select: none;
}
.bs-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.radio-indicator {
  flex-shrink: 0; width: 14.4px; height: 14.4px;
  border: 2px solid var(--bs-mid-grey); border-radius: 50%;
  background: var(--bs-white);
  position: relative;
  transition: all var(--transition-fast);
}
.radio-indicator::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 6.4px; height: 6.4px; border-radius: 50%;
  background: transparent; transition: background var(--transition-fast);
}
.bs-radio input:checked ~ .radio-indicator {
  border-color: var(--bs-dark-blue);
}
.bs-radio input:checked ~ .radio-indicator::after { background: var(--bs-dark-blue); }
.bs-radio.gold input:checked ~ .radio-indicator   { border-color: var(--bs-gold); }
.bs-radio.gold input:checked ~ .radio-indicator::after { background: var(--bs-gold); }
.bs-radio.turq input:checked ~ .radio-indicator  { border-color: var(--bs-turquoise); }
.bs-radio.turq input:checked ~ .radio-indicator::after { background: var(--bs-turquoise); }
.bs-radio.pink input:checked ~ .radio-indicator  { border-color: var(--bs-pink); }
.bs-radio.pink input:checked ~ .radio-indicator::after { background: var(--bs-pink); }
.bs-radio.disabled { opacity: 0.45; cursor: not-allowed; }
.bs-radio:hover:not(.disabled) .radio-indicator { border-color: var(--bs-dark-blue); }
.bs-radio input:focus-visible ~ .radio-indicator { outline: 2px solid var(--bs-gold); outline-offset: 2px; }
.bs-radio.gold:hover:not(.disabled) .radio-indicator  { border-color: var(--bs-gold); }
.bs-radio.turq:hover:not(.disabled) .radio-indicator  { border-color: var(--bs-turquoise); }
.bs-radio.pink:hover:not(.disabled) .radio-indicator  { border-color: var(--bs-pink); }

/* ---- RANGE SLIDER ---- */
.range-wrap {
  position: relative; padding-bottom: 0.3rem;
}
.bs-range {
  width: 100%; height: 4.8px;
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: var(--bs-light-grey);
  outline: none;
}
.bs-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17.6px; height: 17.6px; border-radius: 50%;
  background: var(--bs-dark-blue); border: 3px solid var(--bs-white);
  box-shadow: 0 0 0 1px var(--bs-dark-blue), var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.bs-range::-webkit-slider-thumb:hover,
.bs-range::-webkit-slider-thumb:active {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--bs-dark-blue-20), var(--shadow-sm);
}
.bs-range::-moz-range-thumb {
  width: 17.6px; height: 17.6px; border-radius: 50%;
  background: var(--bs-dark-blue); border: 3px solid var(--bs-white);
  box-shadow: 0 0 0 1px var(--bs-dark-blue); cursor: pointer;
}
.bs-range::-moz-range-track {
  height: 4.8px; border-radius: var(--radius-pill);
  background: var(--bs-light-grey);
}
.bs-range:focus { outline: none; }
.bs-range:focus-visible { box-shadow: 0 0 0 3px var(--bs-dark-blue-20); border-radius: var(--radius-pill); }

/* Floating value bubble */
.range-bubble {
  position: absolute; top: -34px;
  background: var(--bs-dark-blue); color: var(--bs-white);
  font-size: var(--text-xs); font-weight: 700; font-family: var(--font-primary);
  padding: 0.22rem 6.4px; border-radius: var(--radius-md);
  pointer-events: none; white-space: nowrap; transform: translateX(-50%);
  transition: left 0.05s linear;
}
.range-bubble::after {
  content: '';
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bs-dark-blue);
}

/* Gold variant */
.bs-range.range-gold::-webkit-slider-thumb {
  background: var(--bs-gold);
  box-shadow: 0 0 0 1px var(--bs-gold), var(--shadow-sm);
}
.bs-range.range-gold::-moz-range-thumb { background: var(--bs-gold); box-shadow: 0 0 0 1px var(--bs-gold); }
.bs-range.range-gold:focus-visible { box-shadow: 0 0 0 3px var(--bs-gold-20); border-radius: var(--radius-pill); }

/* Turq variant */
.bs-range.range-turq::-webkit-slider-thumb {
  background: var(--bs-turquoise);
  box-shadow: 0 0 0 1px var(--bs-turquoise), var(--shadow-sm);
}
.bs-range.range-turq::-moz-range-thumb { background: var(--bs-turquoise); box-shadow: 0 0 0 1px var(--bs-turquoise); }

/* Gradient-fill variants — full track has a gradient; thumb colour interpolates via --thumb-col */
.bs-range.range-gradient-blue-gold {
  background: linear-gradient(to right, #002D41, #BE8C3C) !important;
}
.bs-range.range-gradient-blue-turq {
  background: linear-gradient(to right, #002D41, #25C9D0) !important;
}
.bs-range.range-gradient-traffic {
  background: linear-gradient(to right, #22c55e 0%, #f59e0b 50%, #ef4444 100%) !important;
}
.bs-range.range-gradient-brand {
  background: linear-gradient(to right, #002D41 0%, #25C9D0 33%, #BE8C3C 66%, #D53F77 100%) !important;
}

/* Gradient thumb — uses CSS variable set by JS */
.bs-range.range-gradient-blue-gold::-webkit-slider-thumb,
.bs-range.range-gradient-blue-turq::-webkit-slider-thumb,
.bs-range.range-gradient-traffic::-webkit-slider-thumb,
.bs-range.range-gradient-brand::-webkit-slider-thumb {
  background: var(--thumb-col, #002D41) !important;
  box-shadow: 0 0 0 1px var(--thumb-col, #002D41), 0 2px 6px rgba(0,0,0,0.2) !important;
}
.bs-range.range-gradient-blue-gold::-moz-range-thumb,
.bs-range.range-gradient-blue-turq::-moz-range-thumb,
.bs-range.range-gradient-traffic::-moz-range-thumb,
.bs-range.range-gradient-brand::-moz-range-thumb {
  background: var(--thumb-col, #002D41) !important;
  box-shadow: 0 0 0 1px var(--thumb-col, #002D41) !important;
}

/* For gradient variants the bubble bg/arrow is set via JS interpolation */
.range-bubble.gradient-bubble {
  transition: background 0.1s linear, color 0.1s linear, left 0.05s linear;
}
.range-bubble.gradient-bubble::after {
  border-top-color: var(--bubble-col, #002D41) !important;
}

.range-value-display { color: var(--bs-dark-blue); font-weight: 700; }

/* ---- HIDDEN FIELD INFO ---- */
.hidden-info-block {
  background: var(--bs-off-white); border-radius: var(--radius-md);
  padding: 1.19rem 16px; font-size: var(--text-body); line-height: 1.7;
}
.code-snippet {
  display: inline-block; background: #f0f0f5; color: #333;
  font-family: 'Courier New', monospace; font-size: var(--text-xs);
  padding: 0.3rem 6.4px; border-radius: 3px; margin: 0.44rem 0; word-break: break-all;
}

/* ---- FORM SUBMIT ROW ---- */
.form-submit-row { padding: 1.19rem 0 6.4px; }

/* ---- FORM-LEVEL VALIDATION SUMMARY ---- */
.form-error-summary {
  background: var(--color-danger-bg); border: 1.5px solid var(--bs-pink);
  border-radius: var(--radius-md); padding: 1.04rem 14.4px; margin-bottom: 1.48rem;
}
.form-error-summary h4 {
  font-size: var(--text-body); font-weight: 700; color: var(--bs-pink-text); margin-bottom: 0.59rem;
}
.form-error-summary ul { padding-left: 1.19rem; }
.form-error-summary li {
  font-size: var(--text-body); color: var(--color-danger-text); line-height: 1.8;
}
.form-error-summary a { color: var(--bs-pink-text); text-decoration: underline; }

/* ---- FORM SUBMIT ROW ---- */
.form-submit-row { padding: 1.19rem 0 6.4px; }

/* ---- CHARACTER COUNT ---- */
.char-count { font-size: var(--text-xs); color: var(--bs-muted-text); text-align: right; margin-top: 0.3rem; }
.char-count.near-limit { color: var(--color-warning-text); font-weight: 600; }
.char-count.at-limit   { color: var(--bs-pink-text); font-weight: 700; }

/* ---- RESPONSIVE ---- */
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}