/**
 * Ateca – Form Component (components/forms.css)
 * @package Ateca
 */

/* ============================================================
   FIELDSET & LEGEND
   ============================================================ */
:where(fieldset) {
  border: 1px solid var(--ateca-border);
  border-radius: var(--ateca-radius-l);
  padding: var(--ateca-space-l);
  margin: 0 0 var(--ateca-space-l);
}
:where(legend) {
  font-weight: var(--ateca-font-weight-semibold);
  font-size: var(--ateca-font-size-s);
  padding-inline: var(--ateca-space-xs);
  color: var(--ateca-text);
}

/* ============================================================
   LABELS
   ============================================================ */
:where(label) {
  display: block;
  font-size: var(--ateca-font-size-s);
  font-weight: var(--ateca-font-weight-medium);
  color: var(--ateca-text);
  margin-block-end: var(--ateca-space-xs);
}

/* ============================================================
   TEXT INPUTS, TEXTAREA, SELECT
   ============================================================ */
:where(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select
) {
  display: block;
  inline-size: 100%;
  min-block-size: var(--ateca-input-height);
  padding-block: var(--ateca-space-s);
  padding-inline: var(--ateca-input-padding-x);
  background: var(--ateca-input-bg);
  border: var(--ateca-border-width-thin) solid var(--ateca-input-border);
  border-radius: var(--ateca-input-radius);
  font-family: var(--ateca-font-sans);
  font-size: var(--ateca-font-size-base);
  color: var(--ateca-text);
  line-height: var(--ateca-line-height-base);
  transition:
    border-color var(--ateca-duration-fast) var(--ateca-ease-out),
    box-shadow   var(--ateca-duration-fast) var(--ateca-ease-out);
  appearance: none;
  -webkit-appearance: none;
}

:where(
  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="url"]:hover,
  input[type="tel"]:hover,
  input[type="number"]:hover,
  input[type="password"]:hover,
  input[type="search"]:hover,
  input[type="date"]:hover,
  textarea:hover,
  select:hover
) {
  border-color: var(--ateca-border-strong);
}

:where(
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="search"]:focus,
  input[type="date"]:focus,
  textarea:focus,
  select:focus
) {
  border-color: var(--ateca-focus-ring);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
  outline: none;
}

:where(input::placeholder, textarea::placeholder) {
  color: var(--ateca-input-placeholder);
  opacity: 1;
}

:where(textarea) {
  min-block-size: 120px;
  resize: vertical;
}

/* ============================================================
   SELECT CHEVRON
   ============================================================ */
:where(select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M4.293 5.293a1 1 0 011.414 0L8 7.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ateca-space-m) center;
  padding-inline-end: calc(var(--ateca-space-m) + 20px);
  cursor: pointer;
}

/* ============================================================
   CHECKBOX & RADIO
   ============================================================ */
:where(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  inline-size:  18px;
  block-size:   18px;
  min-block-size: unset;
  min-inline-size: unset;
  border: 2px solid var(--ateca-border-strong);
  background: var(--ateca-bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--ateca-duration-fast) var(--ateca-ease-out);
  vertical-align: middle;
}
:where(input[type="checkbox"]) { border-radius: var(--ateca-radius-s); }
:where(input[type="radio"])    { border-radius: 50%; }

:where(input[type="checkbox"]:checked) {
  background: var(--ateca-brand);
  border-color: var(--ateca-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M10.28 1.28L4 7.56 1.72 5.28A1 1 0 00.28 6.72l3 3a1 1 0 001.44 0l7-7a1 1 0 00-1.44-1.44z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
:where(input[type="radio"]:checked) {
  border-color: var(--ateca-brand);
  box-shadow: inset 0 0 0 4px var(--ateca-brand);
}
:where(input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible) {
  outline: 2px solid var(--ateca-focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   FORM GROUP / ROW
   ============================================================ */
:where(.ateca-form-group) {
  margin-block-end: var(--ateca-space-l);
}
:where(.ateca-form-row) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ateca-space-m);
}
@media (min-width: 600px) {
  :where(.ateca-form-row.cols-2) { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   HELP TEXT, ERROR, SUCCESS
   ============================================================ */
:where(.ateca-form-help) {
  font-size: var(--ateca-font-size-xs);
  color: var(--ateca-text-muted);
  margin-block-start: var(--ateca-space-2xs);
}
:where(.ateca-form-error) {
  font-size: var(--ateca-font-size-xs);
  color: var(--ateca-color-error);
  margin-block-start: var(--ateca-space-2xs);
  display: flex;
  align-items: center;
  gap: var(--ateca-space-2xs);
}
:where(input.has-error, textarea.has-error, select.has-error) {
  border-color: var(--ateca-color-error);
}
:where(input.has-success, textarea.has-success, select.has-success) {
  border-color: var(--ateca-color-success);
}