/* ============================================================
   FLTF FORMS — Inputs, Labels, Validation, OTP, Selects
   Depends on: fltf-base.css
   ============================================================ */

/* ============================================================
   FORM GROUP
   ============================================================ */

.fltf-form-group {
  margin-bottom: var(--space-5);
}

.fltf-form-group:last-child {
  margin-bottom: 0;
}

/* ============================================================
   LABELS
   ============================================================ */

.fltf-label,
label.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--fltf-primary-dark);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.fltf-label--required::after,
label.required::after {
  content: ' *';
  color: var(--fltf-danger);
}

/* ============================================================
   INPUTS & TEXTAREA
   ============================================================ */

.fltf-input,
.fltf-select,
.fltf-textarea,
input.form-control,
select.form-control,
textarea.form-control,
.form-control {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--fltf-text);
  background: var(--fltf-white);
  border: 2px solid var(--fltf-grey-100);
  border-radius: var(--radius-md);
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.fltf-input::placeholder,
.form-control::placeholder {
  color: var(--fltf-grey-400);
  opacity: 1;
}

/* Focus state */
.fltf-input:focus,
.fltf-select:focus,
.fltf-textarea:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-control:focus {
  outline: none;
  border-color: var(--fltf-accent);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.15);
  background: var(--fltf-white);
}

/* Hover (not focused) */
.fltf-input:hover:not(:focus),
.form-control:hover:not(:focus) {
  border-color: var(--fltf-grey-200);
}

/* Disabled */
.fltf-input:disabled,
.form-control:disabled {
  background: var(--fltf-grey-50);
  border-color: var(--fltf-grey-100);
  color: var(--fltf-text-muted);
  cursor: not-allowed;
}

/* Readonly */
.fltf-input:read-only,
.form-control:read-only {
  background: var(--fltf-grey-50);
  cursor: default;
}

/* ── Validation States ── */
.fltf-input--valid,
.form-control.is-valid {
  border-color: var(--fltf-success) !important;
  box-shadow: 0 0 0 3px rgba(11, 122, 78, 0.12) !important;
}

.fltf-input--invalid,
.form-control.is-invalid {
  border-color: var(--fltf-danger) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

/* ── Field Error Message ── */
.fltf-field-error,
.text-danger {
  font-size: var(--text-xs);
  color: var(--fltf-danger) !important;
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Field Help Text ── */
.fltf-field-help,
.form-text {
  font-size: var(--text-xs);
  color: var(--fltf-text-muted);
  margin-top: var(--space-1);
}

/* ============================================================
   INPUT WITH ICON
   ============================================================ */

.fltf-input-wrapper {
  position: relative;
}

.fltf-input-wrapper .fltf-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fltf-grey-400);
  pointer-events: none;
  font-size: var(--text-base);
  transition: color 0.2s;
}

.fltf-input-wrapper:focus-within .fltf-input-icon {
  color: var(--fltf-accent);
}

.fltf-input-wrapper .fltf-input {
  padding-left: 42px;
}

/* Password toggle button */
.fltf-input-wrapper .fltf-toggle-pw {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fltf-grey-400);
  transition: color 0.2s;
  line-height: 1;
}

.fltf-input-wrapper .fltf-toggle-pw:hover {
  color: var(--fltf-primary);
}

/* ============================================================
   SELECT
   ============================================================ */

.fltf-select,
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%3Cpath d='M1 1l5 5 5-5' stroke='%234A6A82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ============================================================
   TEXTAREA
   ============================================================ */

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

/* ============================================================
   CHECKBOX & RADIO
   ============================================================ */

.fltf-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.fltf-check__input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--fltf-grey-200);
  border-radius: var(--radius-sm);
  background: var(--fltf-white);
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--fltf-primary);
  transition: var(--transition-fast);
}

.fltf-check__input[type="radio"] {
  border-radius: 50%;
}

.fltf-check__label {
  font-size: var(--text-sm);
  color: var(--fltf-text);
  line-height: 1.4;
}

/* ============================================================
   OTP / CODE INPUT GRID
   ============================================================ */

.fltf-otp-group {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.fltf-otp-input,
.otp-box {
  width: clamp(52px, 16vw, 72px);
  height: clamp(52px, 16vw, 72px);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: var(--fw-bold);
  color: var(--fltf-primary);
  background: var(--fltf-sky);
  border: 2px solid var(--fltf-grey-100);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--fltf-accent);
}

.fltf-otp-input:focus,
.otp-box:focus {
  outline: none;
  border-color: var(--fltf-accent);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.18);
  background: var(--fltf-white);
  color: var(--fltf-primary-dark);
}

.fltf-otp-input.filled,
.otp-box.filled {
  border-color: var(--fltf-primary);
  background: var(--fltf-white);
}

/* ── OTP separator dot ── */
.fltf-otp-group .fltf-otp-sep {
  display: flex;
  align-items: center;
  color: var(--fltf-grey-400);
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 480px) {
  .fltf-otp-group {
    gap: var(--space-2);
  }
}

/* ============================================================
   SELECT2 — Full FLTF Theme Override
   Targets all DOM nodes Select2 injects so they match
   our inputs exactly: same border, radius, font, colours.
   ============================================================ */

/* ── Container width fix ── */
.select2-container {
  width: 100% !important;
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ── The visible "input" box (single select) ── */
.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  background: var(--fltf-white);
  border: 2px solid var(--fltf-grey-100);
  border-radius: var(--radius-md) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-shadow: none;
}

/* Hover */
.select2-container--default:not(.select2-container--open)
  .select2-selection--single:hover {
  border-color: var(--fltf-grey-200);
}

/* Open / focused */
.select2-container--default.select2-container--open
  .select2-selection--single,
.select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: var(--fltf-accent);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.15);
  outline: none;
}

/* Selected text */
.select2-container--default .select2-selection--single
  .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
  color: var(--fltf-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
}

/* Placeholder text */
.select2-container--default .select2-selection--single
  .select2-selection__placeholder {
  color: var(--fltf-grey-400);
  font-weight: var(--fw-regular);
}

/* Custom chevron arrow — replaces Select2's default */
.select2-container--default .select2-selection--single
  .select2-selection__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-container--default .select2-selection--single
  .select2-selection__arrow b {
  /* Hide the default triangle */
  display: none;
}

/* Inject our own SVG chevron via pseudo-element */
.select2-container--default .select2-selection--single
  .select2-selection__arrow::after {
  content: '';
  display: block;
  width: 12px;
  height: 8px;
  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%3Cpath d='M1 1l5 5 5-5' stroke='%234A6A82' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
}

/* Rotate chevron when open */
.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow::after {
  transform: rotate(180deg);
}

/* Clear button (×) */
.select2-container--default .select2-selection--single
  .select2-selection__clear {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fltf-grey-400);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.15s;
}

.select2-container--default .select2-selection--single
  .select2-selection__clear:hover {
  color: var(--fltf-danger);
}

/* ── Multiple select ── */
.select2-container--default .select2-selection--multiple {
  min-height: 44px;
  padding: 6px 10px;
  background: var(--fltf-white);
  border: 2px solid var(--fltf-grey-100) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: none !important;
}

.select2-container--default.select2-container--open
  .select2-selection--multiple,
.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border-color: var(--fltf-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.15) !important;
  outline: none;
}

/* Multi: selected tags */
.select2-container--default .select2-selection--multiple
  .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 3px 4px 3px 0;
  padding: 3px 10px 3px 8px;
  background: var(--fltf-sky);
  border: 1px solid var(--fltf-accent-light);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: var(--fltf-primary);
  line-height: 1.4;
}

/* Tag remove × */
.select2-container--default .select2-selection--multiple
  .select2-selection__choice__remove {
  color: var(--fltf-grey-400);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  order: 2;
  transition: color 0.15s;
  margin-left: 2px;
}

.select2-container--default .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  color: var(--fltf-danger);
  background: none;
}

/* Multi: search input inside the tags box */
.select2-container--default .select2-selection--multiple
  .select2-search--inline .select2-search__field {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fltf-text);
  margin-top: 4px;
  min-width: 120px;
}

/* ── Dropdown panel ── */
.select2-dropdown {
  background: var(--fltf-white);
  border: 2px solid var(--fltf-accent);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 9999;
}

/* Dropdown opens below */
.select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single {
  border-bottom-color: var(--fltf-accent);
  border-bottom-left-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

/* Dropdown opens above */
.select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single {
  border-top-color: var(--fltf-accent);
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
}

/* ── Search field inside dropdown ── */
.select2-container--default .select2-search--dropdown {
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.select2-container--default .select2-search--dropdown
  .select2-search__field {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fltf-text);
  background: var(--fltf-grey-50);
  border: 1.5px solid var(--fltf-grey-100);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select2-container--default .select2-search--dropdown
  .select2-search__field:focus {
  border-color: var(--fltf-accent);
  box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.12);
  background: var(--fltf-white);
}

.select2-container--default .select2-search--dropdown
  .select2-search__field::placeholder {
  color: var(--fltf-grey-400);
}

/* ── Results list ── */
.select2-results__options {
  padding: var(--space-1) 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fltf-grey-200) transparent;
}

.select2-results__options::-webkit-scrollbar { width: 4px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb {
  background: var(--fltf-grey-200);
  border-radius: 4px;
}

/* ── Individual option ── */
.select2-container--default .select2-results__option {
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--fltf-text);
  cursor: pointer;
  transition: background 0.12s ease;
  border-radius: 0;
}

/* Hover */
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: var(--fltf-sky);
  color: var(--fltf-primary);
}

/* Selected (already chosen, shown in list) */
.select2-container--default
  .select2-results__option[aria-selected="true"] {
  background: var(--fltf-gradient-soft);
  color: var(--fltf-primary-dark);
  font-weight: var(--fw-semi);
  position: relative;
}

/* Tick mark on selected option */
.select2-container--default
  .select2-results__option[aria-selected="true"]::after {
  content: '✓';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--fltf-accent);
  font-weight: var(--fw-bold);
}

/* Disabled option */
.select2-container--default
  .select2-results__option[aria-disabled="true"] {
  color: var(--fltf-grey-400);
  cursor: not-allowed;
  background: none;
}

/* Group label */
.select2-results__group {
  padding: var(--space-2) 14px var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--fltf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: default;
}

/* "No results" / "Searching…" messages */
.select2-container--default .select2-results__message,
.select2-results__option.select2-results__message {
  color: var(--fltf-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-4) 14px;
  text-align: center;
  font-style: italic;
}

/* ── Validation states ── */
/* When the hidden <select> has is-invalid, propagate to Select2 */
select.form-control.is-invalid + .select2-container--default
  .select2-selection--single,
select.is-invalid + .select2-container--default
  .select2-selection--single {
  border-color: var(--fltf-danger) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

select.form-control.is-valid + .select2-container--default
  .select2-selection--single,
select.is-valid + .select2-container--default
  .select2-selection--single {
  border-color: var(--fltf-success) !important;
  box-shadow: 0 0 0 3px rgba(11, 122, 78, 0.12) !important;
}

/* ── Inside modal (dropdownParent) ── */
.modal .select2-dropdown,
[role="dialog"] .select2-dropdown {
  z-index: calc(var(--z-modal) + 100);
}

/* ── Disabled container ── */
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
  background: var(--fltf-grey-50) !important;
  border-color: var(--fltf-grey-100) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.select2-container--disabled .select2-selection--single
  .select2-selection__rendered {
  color: var(--fltf-text-muted);
}

/* ============================================================
   FORM FOOTER LINKS
   ============================================================ */

.fltf-form-link {
  font-size: var(--text-sm);
  color: var(--fltf-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: var(--transition-fast);
}

.fltf-form-link:hover {
  color: var(--fltf-primary);
}

.fltf-form-footer {
  text-align: center;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--fltf-grey-100);
}