/* ==========================================================================
   Forminator — Stepica skin
   Mirrors the static contact form (.form-group / .form-row / .btn-primary).

   Specificity: Forminator's own rules look like
   `.forminator-ui.forminator-custom-form[data-design=default] …` and may load
   after this file, so the scope repeats `.forminator-ui` once to win without
   `!important`. Works with any Forminator design style; for the lightest page
   set Form → Appearance → Design style → "None" (Forminator then skips its
   design CSS and this file does all the work).
   ========================================================================== */

.forminator-ui.forminator-ui.forminator-custom-form {
  --sf-gap: 18px;
  --sf-error: #dc2626;
  --sf-focus-ring: 0 0 0 3px rgba(37, 48, 91, 0.12);
  margin: 0;
  font-family: var(--font-body);
}

/* ---- Grid: two columns, 18px gutters (Forminator default is 30px) ------- */
.forminator-ui.forminator-ui.forminator-custom-form[data-grid] .forminator-row:not(:last-child) { margin-bottom: var(--sf-gap); }
.forminator-ui.forminator-ui.forminator-custom-form[data-grid] .forminator-col:not(:last-child) { margin-bottom: var(--sf-gap); }

@media (min-width: 783px) {
  .forminator-ui.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid] .forminator-row {
    margin-inline: calc(var(--sf-gap) / -2);
  }
  .forminator-ui.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid] .forminator-col {
    padding-inline: calc(var(--sf-gap) / 2);
    margin-bottom: 0;
  }
}

/* ---- Labels --------------------------------------------------------------- */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-label {
  display: block;
  margin: 0 0 7px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-label .forminator-required { color: var(--orange); }

/* ---- Inputs, textarea, native select ------------------------------------- */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-input,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-textarea,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select--field:not(.forminator-select2),
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--off-white);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-dark);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-input::placeholder,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-textarea::placeholder { color: var(--mid-gray); opacity: 1; }

.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-input:hover,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-textarea:hover,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single:hover {
  border-color: var(--teal-light);
}

.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-input:focus,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-textarea:focus,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select--field:not(.forminator-select2):focus,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single:focus,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single[aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: var(--sf-focus-ring);
  outline: none;
}

.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-textarea {
  min-height: var(--forminator-textarea-min-height, 110px);
  resize: vertical;
}

/* Native <select> (used when the "Design style" is None / select2 is off) */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select--field:not(.forminator-select2) {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%235b6b80' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* ---- Select2 (Forminator styled dropdown) -------------------------------- */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  cursor: pointer;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-dark);
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single .select2-selection__placeholder { color: var(--mid-gray); }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single .select2-selection__arrow {
  width: auto;
  height: auto;
  margin-left: 12px;
  color: var(--dark-gray);
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single .select2-selection__arrow [class*="forminator-icon-"] { font-size: 11px; }

/* Dropdown panel (Select2 appends it to <body>, outside the form) */
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-select-dropdown {
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-select-dropdown .select2-results .select2-results__options .select2-results__option {
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-body);
  background: transparent;
}
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-select-dropdown .select2-results .select2-results__options .select2-results__option--highlighted,
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-select-dropdown .select2-results .select2-results__options .select2-results__option:hover {
  background: var(--off-white);
  color: var(--primary);
}
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-select-dropdown .select2-results .select2-results__options .select2-results__option--selected,
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-select-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected="true"] {
  background: rgba(37, 48, 91, 0.08);
  color: var(--primary);
  font-weight: 600;
}

/* ---- Character counter (textarea) → small, under the field, right -------- */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-field-textarea .forminator-field { display: flex; flex-direction: column; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-field-textarea .forminator-label { order: 1; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-field-textarea .forminator-textarea { order: 2; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-field-textarea .forminator-error-message { order: 3; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-description {
  order: 4;
  align-self: flex-end;
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--mid-gray);
  font-variant-numeric: tabular-nums;
}

/* ---- Validation ------------------------------------------------------------ */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-input,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-textarea,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error select.forminator-select--field:not(.forminator-select2),
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error select.forminator-select2 + .forminator-select .selection span[role="combobox"].select2-selection--single {
  border-color: var(--sf-error);
  background: #fff;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-input:focus,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }

.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-error-message {
  margin: 6px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sf-error);
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-error-message { display: block; }

/* ---- Response message (success / error after submit) -------------------- */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-response-message {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-response-message[aria-hidden="true"]:empty { display: none; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-success {
  background: rgba(69, 114, 183, 0.06);
  border-color: rgba(69, 114, 183, 0.2);
  color: var(--text-dark);
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-error {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.2);
  color: #991b1b;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-response-message p { margin: 0; color: inherit; font-size: inherit; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-response-message ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- Submit button = .btn.btn-primary.form-submit ------------------------ */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-row-last { margin-top: 6px; }
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 26px;
  border: 0;
  border-radius: 50px;
  background: var(--primary);
  box-shadow: 0 8px 20px rgba(10, 92, 158, 0.25);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
/* Paper-plane icon (Font Awesome 6 solid, already loaded by the theme) */
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit::before {
  content: "\f1d8";
  font: var(--fa-font-solid, 900 1em/1 "Font Awesome 6 Free");
  font-size: 0.9em;
  -webkit-font-smoothing: antialiased;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover {
  background: var(--primary-dark);
  box-shadow: 0 12px 26px rgba(10, 92, 158, 0.32);
  transform: translateY(-2px);
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit.forminator-onload,
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:disabled {
  cursor: wait;
  opacity: 0.75;
  transform: none;
}
.forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit.forminator-onload::before { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit { transition: none; }
  .forminator-ui.forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover { transform: none; }
}