/**
 * 5alas — unified form UI site-wide (aligned with volunteer onboarding workflow).
 * Load order: after custom.css, before validation-5alas.css (invalid/valid states layer on top).
 * Skips .rounded-input inside .rounded-input-group (border drawn on the group).
 */
:root {
  /* Single thickness for default + valid/invalid (matches intl-tel phone field) */
  --5alas-form-border-width: 2px;
  --5alas-form-border: #dee2e6;
  --5alas-form-radius: 8px;
  --5alas-form-focus: var(--primary-color, #036441);
  --5alas-form-focus-ring: rgba(3, 100, 65, 0.25);
  --5alas-form-invalid: var(--5alas-validation-danger, #b42318);
  /* Matches validation-5alas danger ring */
  --5alas-form-invalid-ring: rgba(180, 35, 24, 0.22);
  --5alas-form-success: var(--5alas-validation-success, #036441);
}

/* Privacy / info hints on registration (replaces grey alert-secondary) */
body .alert-5alas-hint {
  background-color: var(--5alas-success-surface, #e8f5ef);
  border: 1px solid rgba(var(--5alas-validation-success-rgb, 3, 100, 65), 0.28);
  color: var(--5alas-validation-info, #245e52);
  border-radius: var(--5alas-form-radius);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
body .alert-5alas-hint p {
  margin-bottom: 0;
  color: inherit;
}

/* ----- Labels (match volunteer: semibold, tight label–field gap) ----- */
body .form-label {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.9375rem;
  line-height: 1.4;
}

body .form-label .required,
body .form-label .text-danger {
  color: var(--5alas-form-invalid);
  font-weight: 600;
}

/* ----- Vertical rhythm: form-group blocks (public + admin dashboard) ----- */
body #page-content .form-group,
body .dashboard-main .form-group {
  margin-bottom: 1.5rem;
}

body #page-content .form-group:last-child,
body .dashboard-main .form-group:last-child {
  margin-bottom: 0;
}

/* ----- Text inputs & native selects ----- */
body .form-control:not(.rounded-input):not(.form-control-plaintext),
body .form-select:not(.rounded-input) {
  border: var(--5alas-form-border-width) solid var(--5alas-form-border);
  border-radius: var(--5alas-form-radius);
  padding: 12px 15px;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body textarea.form-control:not(.rounded-input) {
  min-height: 110px;
}

body .form-control:not(.rounded-input):not(.form-control-plaintext):focus,
body .form-select:not(.rounded-input):focus {
  border-color: var(--5alas-form-focus);
  box-shadow: 0 0 0 0.2rem var(--5alas-form-focus-ring);
  outline: none;
}

body .form-control:not(.rounded-input):not(.form-control-plaintext):disabled,
body .form-select:not(.rounded-input):disabled {
  opacity: 0.85;
  background-color: #f8f9fa;
}

/* JS / Bootstrap invalid (volunteer uses red border + ring on focus) */
body .form-control:not(.rounded-input).is-invalid,
body .form-select:not(.rounded-input).is-invalid {
  border-color: var(--5alas-form-invalid) !important;
  border-width: var(--5alas-form-border-width) !important;
}

body .form-control:not(.rounded-input).is-invalid:focus,
body .form-select:not(.rounded-input).is-invalid:focus {
  border-color: var(--5alas-form-invalid) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-invalid-ring) !important;
}

body .form-control:not(.rounded-input).border-danger,
body .form-select:not(.rounded-input).border-danger {
  border-color: var(--5alas-form-invalid) !important;
  border-width: var(--5alas-form-border-width) !important;
}

body .form-control:not(.rounded-input).is-valid,
body .form-select:not(.rounded-input).is-valid {
  border-color: var(--5alas-form-success) !important;
  border-width: var(--5alas-form-border-width) !important;
}

body .was-validated .form-control:not(.rounded-input):valid,
body .was-validated .form-control:not(.rounded-input):invalid,
body .was-validated .form-select:not(.rounded-input):valid,
body .was-validated .form-select:not(.rounded-input):invalid {
  border-width: var(--5alas-form-border-width) !important;
}

/* ----- Icon groups: lock/eye + password fields (registration style) ----- */
body .rounded-input-group .input-group-text {
  color: #23292f;
}

body .rounded-input-group .input-group-text .fa-light,
body .rounded-input-group .input-group-text .fa-solid {
  color: #23292f !important;
}

/* Pill groups: same stroke as plain inputs (overrides custom.css 1px on .rounded-input-group) */
body .rounded-input-group {
  border-width: var(--5alas-form-border-width);
  border-style: solid;
  border-color: var(--5alas-form-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Invalid / valid border on whole pill (resting state — no focus ring) */
body .rounded-input-group:has(.form-control.is-invalid),
body .rounded-input-group:has(.form-control.border-danger) {
  border-color: var(--5alas-form-invalid) !important;
  border-width: var(--5alas-form-border-width) !important;
}

body .rounded-input-group:has(.form-control.is-valid) {
  border-color: var(--5alas-form-success) !important;
  border-width: var(--5alas-form-border-width) !important;
}

/* Focus: green ring like phone field; cleared on blur (:focus-within ends — no JS) */
body .rounded-input-group:focus-within:not(:has(.form-control.is-invalid)):not(:has(.form-control.border-danger)) {
  border-color: var(--5alas-form-focus) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-focus-ring);
}

body .rounded-input-group:has(.form-control.is-invalid):focus-within,
body .rounded-input-group:has(.form-control.border-danger):focus-within {
  border-color: var(--5alas-form-invalid) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-invalid-ring) !important;
}

body .rounded-input-group:has(.form-control.is-valid):focus-within:not(:has(.form-control.border-danger)) {
  border-color: var(--5alas-form-success) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--5alas-validation-success-rgb, 3, 100, 65), 0.22) !important;
}

/* No double outline on the inner field — ring is on the pill */
body .rounded-input-group .rounded-input:focus {
  outline: none;
  box-shadow: none;
}

/* ----- Select2 (single) — match volunteer heights & chevron ----- */
body .select2-container--default .select2-selection--single {
  height: 48px !important;
  border: var(--5alas-form-border-width) solid var(--5alas-form-border) !important;
  border-radius: var(--5alas-form-radius) !important;
  padding: 8px 15px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 30px !important;
  padding-left: 0 !important;
  color: #212529;
}

/* Do not fix arrow height to 46px — conflicts with bootstrap4 theme (top:50%) and drops the caret below the field */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  bottom: auto !important;
  right: 10px !important;
}

body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--5alas-form-focus) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-focus-ring) !important;
}

body .select2-container {
  width: 100% !important;
}

body .select2-container--default .select2-selection--single.border-danger {
  border-color: var(--5alas-form-invalid) !important;
  border-width: var(--5alas-form-border-width) !important;
}

body .select2-container--default .select2-selection--single.is-invalid,
body .select2-container--default .select2-selection--single.is-valid {
  border-width: var(--5alas-form-border-width) !important;
}

body .select2-container--default.select2-container--focus .select2-selection--single.border-danger,
body .select2-container--default.select2-container--open .select2-selection--single.border-danger {
  border-color: var(--5alas-form-invalid) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-invalid-ring) !important;
}

/* Bootstrap4 theme (admin) — same field height, border, focus as default theme */
body .select2-container--bootstrap4 .select2-selection--single {
  height: 48px !important;
  min-height: 48px !important;
  border: var(--5alas-form-border-width) solid var(--5alas-form-border) !important;
  border-radius: var(--5alas-form-radius) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-left: 0 !important;
  color: #212529;
}

body .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  bottom: auto !important;
  right: 10px !important;
}

body .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
body .select2-container--bootstrap4.select2-container--open .select2-selection--single {
  border-color: var(--5alas-form-focus) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-focus-ring) !important;
}

body .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  line-height: 44px !important;
}

body .select2-container--bootstrap4 .select2-selection--single.is-invalid,
body .select2-container--bootstrap4 .select2-selection--single.is-valid,
body .select2-container--bootstrap4 .select2-selection--single.border-danger {
  border-width: var(--5alas-form-border-width) !important;
}

/* ----- intl-tel-input ----- */
body .iti {
  width: 100%;
}

body .iti--allow-dropdown input[type="tel"].form-control:not(.rounded-input) {
  border-radius: var(--5alas-form-radius);
}

/* intl-tel inside .input-group: Bootstrap applies margin-left:-1px and flattens the left
   radius on non-first children so joined controls share one edge. Here only hidden inputs
   precede .iti, so that offset stacks the border and the phone field looks thicker than
   other plain .form-control errors. Reset to match the rest of the form. */
body .input-group > .iti {
  margin-left: 0 !important;
  border-top-left-radius: var(--5alas-form-radius) !important;
  border-bottom-left-radius: var(--5alas-form-radius) !important;
}

/* separateDialCode: one 2px error outline on the whole widget. The inner input still has a
   full box border; with border-danger that stacks against the dial strip and reads much
   thicker than plain .form-control errors — inset ring on .iti + transparent input border. */
body .iti--separate-dial-code:has(input.phone_number.border-danger),
body .iti--separate-dial-code:has(input.phone_number.is-invalid) {
  border-radius: var(--5alas-form-radius);
  background-color: #fff;
  box-shadow: inset 0 0 0 var(--5alas-form-border-width) var(--5alas-form-invalid);
}

body .iti--separate-dial-code:has(input.phone_number.border-danger) input.phone_number.form-control:not(.rounded-input),
body .iti--separate-dial-code:has(input.phone_number.is-invalid) input.phone_number.form-control:not(.rounded-input) {
  border-color: transparent !important;
  box-shadow: none !important;
}

body .iti--separate-dial-code:has(input.phone_number.border-danger) input.phone_number.form-control:not(.rounded-input):focus,
body .iti--separate-dial-code:has(input.phone_number.is-invalid) input.phone_number.form-control:not(.rounded-input):focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}

body .iti--separate-dial-code:has(input.phone_number.border-danger):focus-within,
body .iti--separate-dial-code:has(input.phone_number.is-invalid):focus-within {
  box-shadow: inset 0 0 0 var(--5alas-form-border-width) var(--5alas-form-invalid), 0 0 0 0.2rem var(--5alas-form-invalid-ring);
}

/* ----- Inline help / hints under fields (password hints, helper copy) ----- */
body .form-text,
body small.text-muted.form-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #6c757d;
}

/* Error lines under inputs — same spacing/weight as volunteer + checkout */
body .error-message:not(:empty) {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--5alas-form-invalid);
}

/* Stay Connected / newsletter modal — dedicated fields (not the heavy global 2px default) */
body .signupnow-modal .newsletter-form .newsletter-modal-input {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 2.75rem;
  box-shadow: none;
}

body .signupnow-modal .newsletter-form .newsletter-modal-input:focus {
  border-color: var(--5alas-form-focus);
  box-shadow: 0 0 0 0.2rem var(--5alas-form-focus-ring);
  outline: none;
  background-color: #ffffff;
}

body .signupnow-modal .newsletter-form .newsletter-modal-input::placeholder {
  color: #6b7280;
}

body .signupnow-modal .newsletter-form .form-group {
  margin-bottom: 0;
}

body .signupnow-modal .newsletter-form .error_msg:not(:empty) {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--5alas-form-invalid);
}