/**
 * 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):not(.iti input):not(.is-invalid):not(.border-danger):not(.is-valid),
body .form-select:not(.rounded-input):not(.is-invalid):not(.border-danger):not(.is-valid) {
  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;
}

/* intl-tel-input sets horizontal padding (inline padding-left with separateDialCode). */
body .iti input.form-control:not(.rounded-input):not(.form-control-plaintext):not(.is-invalid):not(.border-danger):not(.is-valid) {
  border: var(--5alas-form-border-width) solid var(--5alas-form-border);
  border-radius: var(--5alas-form-radius);
  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):not(.is-invalid):not(.border-danger):focus,
body .form-select:not(.rounded-input):not(.is-invalid):not(.border-danger):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 — match specificity of default border rules above */
body .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti 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):not(.form-control-plaintext):not(.iti input).is-invalid:focus,
body .form-select:not(.rounded-input).is-invalid:focus,
body .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti input).border-danger:focus,
body .form-select:not(.rounded-input).border-danger: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):not(.form-control-plaintext):not(.iti 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):not(.form-control-plaintext):not(.iti 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;
}

/*
 * Native <select class="form-select rounded-input"> (e.g. supplier business type):
 * The rules above deliberately use :not(.rounded-input) so pill input-groups don’t double borders.
 * Standalone selects with both classes were skipped entirely and picked up custom.css .rounded-input
 * { border: none }, so they looked like plain browser defaults (native triangle, weak chrome).
 * Match other form-select fields: border, radius, and Bootstrap-style SVG chevron (not native arrow).
 */
body select.form-select.rounded-input {
  border: var(--5alas-form-border-width) solid var(--5alas-form-border);
  border-radius: var(--5alas-form-radius);
  padding: 12px 2.25rem 12px 15px;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

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

body select.form-select.rounded-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #212529;
}

body select.form-select.rounded-input:disabled {
  opacity: 0.85;
  background-color: #f8f9fa;
}

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

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

body select.form-select.rounded-input.is-valid {
  border-color: var(--5alas-form-success) !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;
}

/*
 * Mosque registration — address modal: Select2 was fixed at 48px while plain .form-control
 * uses padding + line-height (shorter). Match Select2 to the same rhythm as sibling inputs.
 */
#mosqueAddressModal .select2-container .select2-selection--single {
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 2.5rem 12px 15px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#mosqueAddressModal .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#mosqueAddressModal .select2-container .select2-selection--single .select2-selection__placeholder {
  line-height: 1.5 !important;
}

#mosqueAddressModal .select2-container--default .select2-selection--single .select2-selection__arrow,
#mosqueAddressModal .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  right: 12px !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;
}

/* Placeholder spans for JS validation — hide until they have real content (avoids uneven grid/wizard gaps) */
body .error-message:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Error lines under inputs — same spacing/weight as volunteer + checkout */
body .error-message:not(:empty) {
  display: block;
  margin-top: 0.375rem;
  margin-bottom: 0;
  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: var(--5alas-form-border-width) solid var(--5alas-form-border) !important;
  border-radius: var(--5alas-form-radius) !important;
  padding: 12px 15px;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 0;
  box-shadow: none;
}

body .signupnow-modal .newsletter-form .newsletter-modal-input:focus {
  border-color: var(--5alas-form-focus) !important;
  box-shadow: 0 0 0 0.2rem var(--5alas-form-focus-ring) !important;
  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);
}

/*
 * Admin dashboard (admin_v1): undo global form/Select2 sizing above so fields match
 * theme style.css (.form-control-sm = 40px, default = 2.75rem, 1px borders).
 * Select2 uses the same chevron as Bootstrap form-select; dropdown highlight uses primary.
 */
body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(textarea):not(.iti input):not(.is-invalid):not(.border-danger):not(.is-valid),
body.admin-dashboard .form-select:not(.rounded-input):not(.is-invalid):not(.border-danger):not(.is-valid) {
  border-width: 1px !important;
  border-color: var(--input-form-light, #dee2e6) !important;
  border-radius: 0.375rem !important;
  transition: border-color 0.2s ease;
}

body.admin-dashboard .iti input.form-control:not(.rounded-input):not(.form-control-plaintext):not(.is-invalid):not(.border-danger):not(.is-valid) {
  border-width: 1px !important;
  border-color: var(--input-form-light, #dee2e6) !important;
  border-radius: 0.375rem !important;
}

body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(textarea):not(.iti input):not(.is-invalid):not(.border-danger):focus,
body.admin-dashboard .form-select:not(.rounded-input):not(.is-invalid):not(.border-danger):focus {
  border-color: var(--primary-600, var(--primary-color, #036441)) !important;
  box-shadow: none !important;
  outline: none;
}

body.admin-dashboard .iti input.form-control:not(.rounded-input):not(.is-invalid):not(.border-danger):focus {
  border-color: var(--primary-600, var(--primary-color, #036441)) !important;
  box-shadow: none !important;
  outline: none;
}

/* Height / typography only — padding must NOT use shorthand so intl-tel can set padding-left inline */
body.admin-dashboard .form-control.form-control-sm:not(.rounded-input):not(.form-control-plaintext):not(textarea),
body.admin-dashboard .form-select.form-select-sm:not(.rounded-input) {
  height: 40px !important;
  min-height: 40px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

body.admin-dashboard .form-control.form-control-sm:not(.rounded-input):not(.form-control-plaintext):not(textarea):not(.iti input),
body.admin-dashboard .form-select.form-select-sm:not(.rounded-input) {
  padding: 0.5625rem 1.25rem !important;
}

body.admin-dashboard .iti input.form-control.form-control-sm:not(.rounded-input):not(.form-control-plaintext) {
  padding-top: 0.5625rem !important;
  padding-bottom: 0.5625rem !important;
  padding-right: 6px !important;
  /* padding-left: intlTelInput sets inline from dial-code width (+ separateDialCode) */
}

body.admin-dashboard .form-select.form-select-sm:not(.rounded-input) {
  padding: 0.5625rem 1.875rem 0.5625rem 0.9375rem !important;
}

body.admin-dashboard .form-control:not(.form-control-sm):not(.form-control-lg):not(.rounded-input):not(.form-control-plaintext):not(textarea):not(.iti input),
body.admin-dashboard .form-select:not(.form-select-sm):not(.form-select-lg):not(.rounded-input) {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0.5625rem 1.25rem !important;
  font-size: 1rem !important;
}

body.admin-dashboard .iti input.form-control:not(.form-control-sm):not(.form-control-lg):not(.rounded-input):not(.form-control-plaintext) {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding-top: 0.5625rem !important;
  padding-bottom: 0.5625rem !important;
  padding-right: 6px !important;
  font-size: 1rem !important;
}

body.admin-dashboard .form-select:not(.form-select-sm):not(.form-select-lg):not(.rounded-input) {
  padding: 0.5625rem 1.875rem 0.5625rem 0.9375rem !important;
}

body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti input).is-invalid,
body.admin-dashboard textarea.form-control:not(.rounded-input).is-invalid,
body.admin-dashboard .form-select:not(.rounded-input).is-invalid,
body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti input).border-danger,
body.admin-dashboard textarea.form-control:not(.rounded-input).border-danger,
body.admin-dashboard .form-select:not(.rounded-input).border-danger {
  border-color: var(--5alas-validation-danger) !important;
  border-width: var(--5alas-form-border-width) !important;
  box-shadow: none !important;
}

body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti input).is-invalid:focus,
body.admin-dashboard textarea.form-control:not(.rounded-input).is-invalid:focus,
body.admin-dashboard .form-select:not(.rounded-input).is-invalid:focus,
body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti input).border-danger:focus,
body.admin-dashboard textarea.form-control:not(.rounded-input).border-danger:focus,
body.admin-dashboard .form-select:not(.rounded-input).border-danger:focus {
  border-color: var(--5alas-validation-danger) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--5alas-validation-danger-rgb), 0.22) !important;
}

/* Room for validation icon — admin padding shorthand otherwise hides it */
body.admin-dashboard .form-control.form-control-sm:not(.rounded-input):not(.form-control-plaintext):not(.iti input).is-invalid,
body.admin-dashboard textarea.form-control.form-control-sm:not(.rounded-input).is-invalid,
body.admin-dashboard .form-select.form-select-sm:not(.rounded-input).is-invalid,
body.admin-dashboard .form-control.form-control-sm:not(.rounded-input):not(.form-control-plaintext):not(.iti input).border-danger,
body.admin-dashboard textarea.form-control.form-control-sm:not(.rounded-input).border-danger,
body.admin-dashboard .form-select.form-select-sm:not(.rounded-input).border-danger {
  padding-right: 2.25rem !important;
}

body.admin-dashboard .form-control:not(.form-control-sm):not(.form-control-lg):not(.rounded-input):not(.form-control-plaintext):not(.iti input):not(textarea).is-invalid,
body.admin-dashboard textarea.form-control:not(.rounded-input).is-invalid,
body.admin-dashboard .form-select:not(.form-select-sm):not(.form-select-lg):not(.rounded-input).is-invalid,
body.admin-dashboard .form-control:not(.form-control-sm):not(.form-control-lg):not(.rounded-input):not(.form-control-plaintext):not(.iti input):not(textarea).border-danger,
body.admin-dashboard textarea.form-control:not(.rounded-input).border-danger,
body.admin-dashboard .form-select:not(.form-select-sm):not(.form-select-lg):not(.rounded-input).border-danger {
  padding-right: 2.25rem !important;
}

body.admin-dashboard .form-control:not(.rounded-input):not(.form-control-plaintext):not(.iti input).is-valid,
body.admin-dashboard textarea.form-control:not(.rounded-input).is-valid {
  border-color: var(--primary-600, var(--5alas-form-success)) !important;
}

body.admin-dashboard textarea.form-control:not(.rounded-input) {
  height: auto !important;
  min-height: 110px;
  padding: 0.5625rem 1.25rem !important;
  font-size: 1rem !important;
}

/* Select2 single: height follows initialized select (.form-control-sm vs default) */
body.admin-dashboard .select2-container--bootstrap4 .select2-selection--single,
body.admin-dashboard .select2-container--default .select2-selection--single {
  display: flex !important;
  align-items: center !important;
  border-width: 1px !important;
  border-color: var(--input-form-light, #dee2e6) !important;
  border-radius: 0.375rem !important;
  transition: border-color 0.2s ease;
  box-shadow: none !important;
}

/* Stronger than rule above + validation-5alas: keep error border on Select2 when native select is invalid */
body.admin-dashboard select.is-invalid ~ .select2-container.select2-container--bootstrap4 .select2-selection--single,
body.admin-dashboard select.border-danger ~ .select2-container.select2-container--bootstrap4 .select2-selection--single,
body.admin-dashboard select.is-invalid ~ .select2-container.select2-container--default .select2-selection--single,
body.admin-dashboard select.border-danger ~ .select2-container.select2-container--default .select2-selection--single,
body.admin-dashboard select.is-invalid ~ .select2-container.select2-container--bootstrap4 .select2-selection--multiple,
body.admin-dashboard select.border-danger ~ .select2-container.select2-container--bootstrap4 .select2-selection--multiple,
body.admin-dashboard select.is-invalid ~ .select2-container.select2-container--default .select2-selection--multiple,
body.admin-dashboard select.border-danger ~ .select2-container.select2-container--default .select2-selection--multiple,
body.admin-dashboard form.was-validated select:invalid ~ .select2-container.select2-container--bootstrap4 .select2-selection--single,
body.admin-dashboard form.was-validated select:invalid ~ .select2-container.select2-container--default .select2-selection--single,
body.admin-dashboard form.was-validated select:invalid ~ .select2-container.select2-container--bootstrap4 .select2-selection--multiple,
body.admin-dashboard form.was-validated select:invalid ~ .select2-container.select2-container--default .select2-selection--multiple {
  border-color: var(--5alas-validation-danger) !important;
  border-width: var(--5alas-form-border-width) !important;
}

body.admin-dashboard select.form-control-sm.select2-hidden-accessible + .select2-container .select2-selection--single,
body.admin-dashboard select.form-select-sm.select2-hidden-accessible + .select2-container .select2-selection--single {
  height: 40px !important;
  min-height: 40px !important;
  padding-left: 0.9375rem !important;
  padding-right: 2rem !important;
}

body.admin-dashboard select.form-control:not(.form-control-sm).select2-hidden-accessible + .select2-container .select2-selection--single,
body.admin-dashboard select.form-select:not(.form-select-sm).select2-hidden-accessible + .select2-container .select2-selection--single {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding-left: 0.9375rem !important;
  padding-right: 2rem !important;
}

body.admin-dashboard .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
body.admin-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: inherit !important;
  line-height: 1.5 !important;
  color: var(--text-primary-light, #212529) !important;
}

body.admin-dashboard select.form-control-sm.select2-hidden-accessible + .select2-container .select2-selection__rendered,
body.admin-dashboard select.form-select-sm.select2-hidden-accessible + .select2-container .select2-selection__rendered {
  font-size: 0.875rem !important;
}

body.admin-dashboard .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
body.admin-dashboard .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-secondary-light, #6c757d) !important;
}

body.admin-dashboard .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
body.admin-dashboard .select2-container--bootstrap4.select2-container--open .select2-selection--single,
body.admin-dashboard .select2-container--default.select2-container--focus .select2-selection--single,
body.admin-dashboard .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary-600, var(--primary-color, #036441)) !important;
  box-shadow: none !important;
}

body.admin-dashboard select.is-invalid + .select2-container.select2-container--focus .select2-selection--single,
body.admin-dashboard select.border-danger + .select2-container.select2-container--focus .select2-selection--single,
body.admin-dashboard select.is-invalid + .select2-container.select2-container--open .select2-selection--single,
body.admin-dashboard select.border-danger + .select2-container.select2-container--open .select2-selection--single,
body.admin-dashboard select.is-invalid + .select2-container.select2-container--focus .select2-selection--multiple,
body.admin-dashboard select.border-danger + .select2-container.select2-container--focus .select2-selection--multiple,
body.admin-dashboard select.is-invalid + .select2-container.select2-container--open .select2-selection--multiple,
body.admin-dashboard select.border-danger + .select2-container.select2-container--open .select2-selection--multiple,
body.admin-dashboard form.was-validated select:invalid + .select2-container.select2-container--focus .select2-selection--single,
body.admin-dashboard form.was-validated select:invalid + .select2-container.select2-container--open .select2-selection--single,
body.admin-dashboard form.was-validated select:invalid + .select2-container.select2-container--focus .select2-selection--multiple,
body.admin-dashboard form.was-validated select:invalid + .select2-container.select2-container--open .select2-selection--multiple {
  border-color: var(--5alas-validation-danger) !important;
}

body.admin-dashboard .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
body.admin-dashboard .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  right: 0.625rem !important;
  width: 1rem !important;
}

/* Match Bootstrap form-select chevron (same SVG as native selects in this project) */
body.admin-dashboard .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,
body.admin-dashboard .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  width: 16px !important;
  height: 12px !important;
  margin: 0 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 12px;
}

body.admin-dashboard .select2-container--bootstrap4 .select2-selection--multiple,
body.admin-dashboard .select2-container--default .select2-selection--multiple {
  border-width: 1px !important;
  border-color: var(--input-form-light, #dee2e6) !important;
  border-radius: 0.375rem !important;
  min-height: 40px !important;
  padding: 0.25rem 0.5rem !important;
}

body.admin-dashboard .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
body.admin-dashboard .select2-container--bootstrap4.select2-container--open .select2-selection--multiple,
body.admin-dashboard .select2-container--default.select2-container--focus .select2-selection--multiple,
body.admin-dashboard .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--primary-600, var(--primary-color, #036441)) !important;
  box-shadow: none !important;
}

body.admin-dashboard .select2-container--bootstrap4 .select2-results__option--highlighted,
body.admin-dashboard .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"],
body.admin-dashboard .select2-container--default .select2-results__option--highlighted {
  background-color: var(--primary-600, var(--primary-color, #036441)) !important;
  color: #fff !important;
}

body.admin-dashboard .select2-container--bootstrap4 .select2-dropdown {
  border-color: var(--input-form-light, #ced4da);
  border-radius: 0.375rem;
}

body.admin-dashboard select.form-control.is-invalid.select2-hidden-accessible + .select2-container .select2-selection--single,
body.admin-dashboard select.form-control.border-danger.select2-hidden-accessible + .select2-container .select2-selection--single,
body.admin-dashboard select.form-select.is-invalid.select2-hidden-accessible + .select2-container .select2-selection--single,
body.admin-dashboard select.form-select.border-danger.select2-hidden-accessible + .select2-container .select2-selection--single {
  padding-right: 3rem !important;
}

body.admin-dashboard select.form-control.is-invalid.select2-hidden-accessible + .select2-container .select2-selection--multiple,
body.admin-dashboard select.form-control.border-danger.select2-hidden-accessible + .select2-container .select2-selection--multiple,
body.admin-dashboard select.form-select.is-invalid.select2-hidden-accessible + .select2-container .select2-selection--multiple,
body.admin-dashboard select.form-select.border-danger.select2-hidden-accessible + .select2-container .select2-selection--multiple {
  padding-right: 2rem !important;
}

body.admin-dashboard select.is-invalid + .select2-container.select2-container--focus .select2-selection,
body.admin-dashboard select.border-danger + .select2-container.select2-container--focus .select2-selection,
body.admin-dashboard select.is-invalid + .select2-container.select2-container--open .select2-selection,
body.admin-dashboard select.border-danger + .select2-container.select2-container--open .select2-selection {
  box-shadow: none !important;
}

/* Grid rows: one vertical rhythm from gutters — avoid stacking 1.5rem form-group mb + gy */
body.admin-dashboard .dashboard-main .row[class*="gy-"] > [class*="col"] > .form-group {
  margin-bottom: 0 !important;
}

/* ----- Activate Your Business wizard: flex stack + gap (same rhythm intro ↔ grid ↔ actions) ----- */
body.admin-dashboard .dashboard-main .form-wizard fieldset.wizard-fieldset {
  --wizard-grid-gap: 1rem;
}

/* Override theme .wizard-fieldset.show { display:block } — flex gap replaces stacked margins */
body.admin-dashboard .dashboard-main .form-wizard fieldset.wizard-fieldset.show {
  display: flex !important;
  flex-direction: column;
  gap: var(--wizard-grid-gap);
}

body.admin-dashboard .dashboard-main .form-wizard fieldset.wizard-fieldset > .mb-3 > h6:first-child {
  margin-bottom: 0.35rem;
}

body.admin-dashboard .dashboard-main .form-wizard fieldset.wizard-fieldset > .mb-3 > p:last-child {
  margin-bottom: 0;
}

body.admin-dashboard .dashboard-main .form-wizard fieldset.wizard-fieldset > .mb-3 {
  margin-bottom: 0 !important;
}

body.admin-dashboard .dashboard-main .form-wizard .form-wizard-step-actions {
  margin-top: 0 !important;
  margin-bottom: 0;
}

body.admin-dashboard .dashboard-main .wizard-grid {
  display: grid;
  gap: var(--wizard-grid-gap, 1rem);
  row-gap: var(--wizard-grid-gap, 1rem);
  column-gap: var(--wizard-grid-gap, 1rem);
  align-items: start;
  margin: 0;
}

@media (max-width: 767.98px) {
  body.admin-dashboard .dashboard-main .wizard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-dashboard .dashboard-main .wizard-grid > [class*="wizard-span-"] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  body.admin-dashboard .dashboard-main .wizard-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body.admin-dashboard .dashboard-main .wizard-grid > .wizard-span-3 {
    grid-column: span 3;
  }

  body.admin-dashboard .dashboard-main .wizard-grid > .wizard-span-4 {
    grid-column: span 4;
  }

  body.admin-dashboard .dashboard-main .wizard-grid > .wizard-span-6 {
    grid-column: span 6;
  }

  body.admin-dashboard .dashboard-main .wizard-grid > .wizard-span-12 {
    grid-column: span 12;
  }
}

body.admin-dashboard .dashboard-main .wizard-grid > [class*="wizard-span-"] {
  min-width: 0;
  margin: 0;
}

body.admin-dashboard .dashboard-main .wizard-grid .form-group {
  margin-bottom: 0 !important;
}

body.admin-dashboard .dashboard-main .wizard-grid .form-group > label,
body.admin-dashboard .dashboard-main .wizard-grid .form-label {
  margin-bottom: 0.375rem;
}

body.admin-dashboard .dashboard-main .wizard-grid input[type="file"].form-control {
  min-height: 48px;
  line-height: 1.25;
}

body.admin-dashboard .dashboard-main .wizard-grid input[type="file"].form-control-sm {
  min-height: 38px;
}

body.admin-dashboard .dashboard-main .wizard-grid .avatar-upload.mt-16 {
  margin-top: 0.75rem !important;
}

body.admin-dashboard .dashboard-main .wizard-grid .select2-container {
  margin-bottom: 0 !important;
}

body.admin-dashboard .dashboard-main .row.gy-2 {
  --bs-gutter-y: 1rem;
}