/* =====================================================================
   TheHostingDirectory — shared form fields
   Loaded LAST in every layout (public, auth pages, admin, provider) so
   all inputs, selects, checkboxes, input groups, file pickers and
   validation states look and behave the same site-wide.
   Requires Bootstrap 5.x class names; no other dependency.
   ===================================================================== */

:root {
  --f-primary: #0A6100;
  --f-primary-hover: #074700;
  --f-primary-tint: rgba(10, 97, 0, .07);
  --f-ring: 0 0 0 3px rgba(10, 97, 0, .16);
  --f-ring-danger: 0 0 0 3px rgba(220, 53, 69, .15);
  --f-text: #1a202c;
  --f-label: #343a40;
  --f-muted: #626b73;
  --f-placeholder: #8a939b;
  --f-border: #d3d9de;
  --f-border-hover: #aeb7bf;
  --f-addon-bg: #f6f8f7;
  --f-disabled-bg: #f3f5f4;
  --f-danger: #c4323f;
  --f-success: #0A6100;
  --f-radius: 8px;
  --f-h: 44px;
  --f-h-sm: 36px;
  --f-h-lg: 52px;
  --f-font: .9375rem;
}

/* ---------- Labels, help text, required marker ---------- */
.form-label,
legend.form-label {
  display: inline-block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--f-label);
  margin-bottom: .4rem;
  letter-spacing: 0;
}
/* Required marker: explicit class, or detected automatically from the field that follows.
   Labels that already carry a hand-written marker (.required-mark / .pv-required / .text-danger) are skipped. */
.form-label.required:not(:has(.required-mark, .pv-required, .text-danger))::after,
.form-label:not(:has(.required-mark, .pv-required, .text-danger)):has(+ :is(input, select, textarea)[required])::after,
.form-label:not(:has(.required-mark, .pv-required, .text-danger)):has(+ .input-group :is(input, select, textarea)[required])::after,
.form-label:not(:has(.required-mark, .pv-required, .text-danger)):has(+ .position-relative :is(input, select, textarea)[required])::after,
.form-label:not(:has(.required-mark, .pv-required, .text-danger)):has(+ .file-drop input[required])::after {
  content: ' *';
  color: var(--f-danger);
  font-weight: 600;
}
.form-label .required-mark,
.form-label .pv-required { color: var(--f-danger); font-weight: 600; margin-left: 2px; }
.form-label .optional,
.form-label .text-muted { font-weight: 400; color: var(--f-muted) !important; }
.form-text {
  display: block;
  margin-top: .35rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--f-muted);
}

/* ---------- Text inputs, selects, textareas ---------- */
.form-control,
.form-select {
  min-height: var(--f-h);
  padding: .55rem .85rem;
  font-size: var(--f-font);
  line-height: 1.45;
  color: var(--f-text);
  background-color: #fff;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-select { padding-right: 2.4rem; background-position: right .85rem center; }
.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--f-border-hover); }
.form-control:focus,
.form-select:focus {
  color: var(--f-text);
  background-color: #fff;
  border-color: var(--f-primary);
  box-shadow: var(--f-ring);
  outline: 0;
}
.form-control::placeholder { color: var(--f-placeholder); opacity: 1; }
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
  background-color: var(--f-disabled-bg);
  color: #5b646c;
  box-shadow: none;
  cursor: not-allowed;
}
.form-control[readonly] { cursor: default; }
.form-control[readonly]:focus { border-color: var(--f-border); box-shadow: none; }

textarea.form-control { min-height: 112px; resize: vertical; line-height: 1.55; }
textarea.form-control[rows="2"] { min-height: 72px; }
select[multiple].form-select, select[size].form-select { padding-right: .85rem; background-image: none; min-height: 140px; }
input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control { min-width: 0; }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }
input[type="color"].form-control { padding: .3rem; min-height: var(--f-h); width: 4rem; }

/* Sizes */
.form-control-sm, .form-select-sm { min-height: var(--f-h-sm); padding: .35rem .7rem; font-size: .875rem; border-radius: 7px; }
.form-select-sm { padding-right: 2.1rem; background-position: right .7rem center; }
.form-control-lg, .form-select-lg { min-height: var(--f-h-lg); padding: .7rem 1rem; font-size: 1.0625rem; border-radius: 10px; }

/* Floating labels keep Bootstrap's own sizing */
.form-floating > .form-control,
.form-floating > .form-select { min-height: calc(3.5rem + 2px); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--f-muted); }

/* ---------- Input groups ---------- */
.input-group { flex-wrap: nowrap; border-radius: var(--f-radius); }
.input-group.has-validation { flex-wrap: wrap; }
.input-group > .form-control,
.input-group > .form-select { box-shadow: none; min-width: 0; }
.input-group-text {
  min-height: var(--f-h);
  padding: .5rem .85rem;
  font-size: .9rem;
  color: var(--f-muted);
  background: var(--f-addon-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  white-space: nowrap;
}
.input-group-sm > .input-group-text { min-height: var(--f-h-sm); }
.input-group-lg > .input-group-text { min-height: var(--f-h-lg); }
.input-group > .input-group-text > i,
.input-group > .input-group-text > svg { width: 1em; text-align: center; }
/* One focus ring around the whole group instead of on the inner input.
   Groups marked .has-validation hold their error text inside, so they ring the input only. */
.input-group:focus-within { box-shadow: var(--f-ring); }
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text,
.input-group:focus-within > .btn-toggle-password,
.input-group:focus-within > .btn-outline-secondary { border-color: var(--f-primary); }
.input-group > .form-control:focus,
.input-group > .form-select:focus { box-shadow: none; z-index: 3; }
/* provider/custom.css forces a ring on every focused input with !important */
.input-group:not(.has-validation) > .form-control:focus,
.input-group:not(.has-validation) > .form-select:focus { box-shadow: none !important; }
.input-group.has-validation:focus-within { box-shadow: none; }
.input-group.has-validation > .form-control:focus,
.input-group.has-validation > .form-select:focus { box-shadow: var(--f-ring); }
.input-group:focus-within > .is-invalid,
.was-validated .input-group:focus-within > :invalid { border-color: var(--f-danger); }
.input-group.has-validation > .form-control.is-invalid:focus,
.was-validated .input-group.has-validation > .form-control:invalid:focus { box-shadow: var(--f-ring-danger); }
.input-group:not(.has-validation):has(.is-invalid):focus-within { box-shadow: var(--f-ring-danger); }
.input-group:not(.has-validation):has(.is-invalid):focus-within > * { border-color: var(--f-danger); }
.input-group > .btn { min-height: var(--f-h); border-radius: var(--f-radius); }
/* Neutral buttons inside a group (show password, copy, clear) look like a field addon */
.input-group > .btn-outline-secondary {
  min-width: 46px;
  color: var(--f-muted);
  background: #fff;
  border-color: var(--f-border);
}
.input-group > .btn-outline-secondary:hover { color: var(--f-text); background: var(--f-addon-bg); border-color: var(--f-border); }
.input-group > .btn-outline-secondary:active { color: var(--f-text); background: var(--f-addon-bg); }
.input-group-sm > .btn { min-height: var(--f-h-sm); }

/* Password show/hide button used inside input groups */
.btn-toggle-password {
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f-muted);
  background: #fff;
  border: 1px solid var(--f-border);
  border-left: 0 !important;
  border-radius: 0 var(--f-radius) var(--f-radius) 0 !important;
}
.btn-toggle-password:hover { color: var(--f-text); background: var(--f-addon-bg); }
.btn-toggle-password:focus-visible { outline: 2px solid var(--f-primary); outline-offset: -2px; box-shadow: none; }
.input-group > .form-control:has(+ .btn-toggle-password) { border-right: 0; }

/* Leading icon inside a plain input: wrap in .input-icon and put <i> before the input */
.input-icon { position: relative; }
.input-icon > i, .input-icon > svg {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--f-muted); pointer-events: none; font-size: .9rem; z-index: 4;
}
.input-icon > .form-control { padding-left: 2.5rem; }

/* ---------- Checkboxes, radios, switches ---------- */
.form-check { min-height: 1.5rem; padding-left: 1.75em; margin-bottom: .35rem; }
.form-check .form-check-input { margin-left: -1.75em; }
.form-check-input {
  width: 1.125em;
  height: 1.125em;
  margin-top: .2em;
  border: 1.5px solid #b9c2c9;
  background-color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-check-input[type="checkbox"] { border-radius: 5px; }
.form-check-input:hover:not(:disabled) { border-color: var(--f-primary); }
.form-check-input:focus { border-color: var(--f-primary); box-shadow: var(--f-ring); outline: 0; }
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--f-primary); border-color: var(--f-primary); }
.form-check-label { color: #343a40; font-size: var(--f-font); cursor: pointer; user-select: none; }
.form-check-input:disabled ~ .form-check-label { cursor: not-allowed; opacity: .6; }
.form-switch { padding-left: 2.75em; }
.form-switch .form-check-input { width: 2.25em; margin-left: -2.75em; border-radius: 2em; }
.form-switch .form-check-input:focus:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A6100'/%3e%3c/svg%3e");
}

/* Selectable choice cards: wrap .form-check items in .choice-grid
   <div class="choice-grid"><div class="form-check">…</div>…</div> */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: .5rem;
}
.choice-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.choice-grid > .form-check,
.form-check.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin: 0;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.choice-grid > .form-check .form-check-input,
.form-check.choice .form-check-input { margin: 0; flex-shrink: 0; float: none; }
.choice-grid > .form-check .form-check-label,
.form-check.choice .form-check-label { flex: 1; font-size: .9rem; line-height: 1.3; }
/* Make the whole card clickable */
.choice-grid > .form-check .form-check-label::after,
.form-check.choice .form-check-label::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.choice-grid > .form-check:hover,
.form-check.choice:hover { border-color: var(--f-border-hover); }
.choice-grid > .form-check:has(.form-check-input:checked),
.form-check.choice:has(.form-check-input:checked) {
  border-color: var(--f-primary);
  background: var(--f-primary-tint);
}
.choice-grid > .form-check:has(.form-check-input:checked) .form-check-label,
.form-check.choice:has(.form-check-input:checked) .form-check-label { color: var(--f-primary-hover); font-weight: 600; }
.choice-grid > .form-check:has(.form-check-input:focus-visible),
.form-check.choice:has(.form-check-input:focus-visible) { box-shadow: var(--f-ring); }
.choice-grid > .form-check:has(.is-invalid) { border-color: var(--f-danger); }

/* Fieldsets used for grouped choices */
fieldset > legend.form-label { float: none; width: auto; padding: 0; }

/* ---------- File inputs ---------- */
input[type="file"].form-control { padding: 0; line-height: var(--f-h); min-height: var(--f-h); cursor: pointer; overflow: hidden; }
input[type="file"].form-control::file-selector-button {
  height: var(--f-h);
  margin: -1px .85rem -1px -1px;
  padding: 0 1rem;
  border: 0;
  border-right: 1px solid var(--f-border);
  border-radius: 0;
  background: var(--f-addon-bg);
  color: var(--f-label);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
input[type="file"].form-control:hover::file-selector-button { background: var(--f-primary-tint); color: var(--f-primary); }
input[type="file"].form-control-sm { line-height: var(--f-h-sm); min-height: var(--f-h-sm); }
input[type="file"].form-control-sm::file-selector-button { height: var(--f-h-sm); }

/* Drag-and-drop zone (progressive enhancement in js/forms.js):
   <div class="file-drop"><input type="file" …><div class="file-drop__ui">…</div></div> */
.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 1.5px dashed #c2cbd2;
  border-radius: 10px;
  background: #fafbfa;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.file-drop > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--f-primary); background: var(--f-primary-tint); }
.file-drop:focus-within { border-color: var(--f-primary); box-shadow: var(--f-ring); }
.file-drop.is-invalid, .file-drop:has(.is-invalid) { border-color: var(--f-danger); background: #fff8f8; }
.file-drop__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #fff; border: 1px solid var(--f-border);
  color: var(--f-primary); font-size: 1.05rem;
}
.file-drop__text { min-width: 0; line-height: 1.35; }
.file-drop__title { display: block; font-weight: 600; font-size: .9rem; color: var(--f-text); }
.file-drop__title u { color: var(--f-primary); text-decoration: none; }
.file-drop__hint { display: block; font-size: .8rem; color: var(--f-muted); }
.file-drop__name { display: block; font-size: .8125rem; font-weight: 600; color: var(--f-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop__name:empty { display: none; }

/* ---------- Validation ---------- */
.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid, .was-validated .form-select:invalid {
  border-color: var(--f-danger);
  background-color: #fffafa;
  background-image: none;
  padding-right: .85rem;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus { border-color: var(--f-danger); box-shadow: var(--f-ring-danger); }
.form-control.is-valid, .was-validated .form-control:valid { background-image: none; padding-right: .85rem; }
.form-check-input.is-invalid, .was-validated .form-check-input:invalid { border-color: var(--f-danger); }
.form-check-input.is-invalid ~ .form-check-label { color: var(--f-danger); }
.invalid-feedback {
  font-size: .8125rem;
  color: var(--f-danger);
  margin-top: .35rem;
  align-items: flex-start;
  gap: .35rem;
}
.invalid-feedback::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: .1rem;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c4323f'%3e%3cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-.75 3.5h1.5v5h-1.5v-5Zm0 6h1.5V12h-1.5v-1.5Z'/%3e%3c/svg%3e") no-repeat center / contain;
}
.is-invalid ~ .invalid-feedback,
.is-invalid + .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback,
.invalid-feedback.d-block { display: flex !important; }
.valid-feedback { font-size: .8125rem; color: var(--f-success); }

/* ---------- Form layout helpers ---------- */
.form-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #e9ecef;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--f-primary);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid #e9ecef;
}
.char-counter { float: right; font-size: .75rem; color: var(--f-muted); font-variant-numeric: tabular-nums; }
.char-counter.is-near { color: #8a6200; }
.char-counter.is-over { color: var(--f-danger); font-weight: 600; }

/* Autofill: keep fields white instead of Chrome's yellow/blue */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--f-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Touch devices: 16px text prevents iOS zoom on focus */
@media (max-width: 575.98px) {
  .form-control, .form-select, .input-group-text { font-size: 1rem; }
  .form-control-sm, .form-select-sm { font-size: .9375rem; }
  .form-actions { justify-content: stretch; }
  .form-actions > .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .form-control, .form-select, .form-check-input, .choice-grid > .form-check, .file-drop { transition: none; }
}

/* Error text placed after a .file-drop (not after the hidden input) */
.was-validated .file-drop:has(:invalid) { border-color: var(--f-danger); background: #fff8f8; }
.was-validated .file-drop:has(:invalid) ~ .invalid-feedback,
.file-drop:has(.is-invalid) ~ .invalid-feedback,
.file-drop.is-invalid ~ .invalid-feedback { display: flex !important; }
.was-validated .file-drop:has(:valid) { border-style: solid; border-color: var(--f-primary); }