/**
 * Component — Form Elements
 * @package Recipes_Lola
 * @version 1.0.0
 */

.rl-field { display: flex; flex-direction: column; gap: var(--rl-space-2); }
.rl-field__label { font-size: var(--rl-text-sm); font-weight: var(--rl-weight-medium); color: var(--rl-color-foreground); }
.rl-field__hint { font-size: var(--rl-text-xs); color: var(--rl-color-foreground-muted); }
.rl-field__error { font-size: var(--rl-text-xs); color: var(--rl-color-danger); }
.rl-input, .rl-textarea, .rl-select { inline-size: 100%; block-size: var(--rl-input-height); padding-inline: var(--rl-input-padding-x); background-color: var(--rl-input-bg); border: var(--rl-border-width) solid var(--rl-input-border); border-radius: var(--rl-input-radius); font-size: var(--rl-input-font-size); color: var(--rl-color-foreground); transition: border-color var(--rl-input-transition); }
.rl-textarea { block-size: auto; min-block-size: var(--rl-space-24); padding-block: var(--rl-space-3); resize: vertical; }
.rl-input::placeholder, .rl-textarea::placeholder { color: var(--rl-color-foreground-placeholder); }
.rl-input:focus-visible, .rl-textarea:focus-visible, .rl-select:focus-visible { outline: none; border-color: var(--rl-input-border-focus); box-shadow: var(--rl-shadow-focus); }
.rl-input[aria-invalid="true"], .rl-textarea[aria-invalid="true"] { border-color: var(--rl-color-danger); }
.rl-input:disabled, .rl-textarea:disabled, .rl-select:disabled { background-color: var(--rl-color-surface-disabled); color: var(--rl-color-foreground-disabled); cursor: not-allowed; }
.rl-input--sm { block-size: var(--rl-input-height-sm); font-size: var(--rl-text-sm); }
.rl-input--lg { block-size: var(--rl-input-height-lg); font-size: var(--rl-text-lg); }
.rl-checkbox, .rl-radio { inline-size: var(--rl-space-5); block-size: var(--rl-space-5); border: var(--rl-border-width-2) solid var(--rl-color-border-strong); accent-color: var(--rl-color-primary); }
.rl-checkbox { border-radius: var(--rl-radius-xs); }
.rl-radio { border-radius: var(--rl-radius-full); }

/**
 * Contact Form 7 compatibility.
 *
 * No bundled contact-form mechanism exists in this theme (standard
 * WordPress convention — this is universally handled by dedicated
 * plugins). This baseline styling means a buyer who installs Contact
 * Form 7 — the most widely used option — gets a form matching this
 * theme's existing input/button visual language with zero
 * configuration, rather than entirely unstyled default markup.
 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  inline-size: 100%;
  padding-inline: var(--rl-input-padding-x);
  background-color: var(--rl-input-bg);
  border: var(--rl-border-width) solid var(--rl-input-border);
  border-radius: var(--rl-input-radius);
  font-size: var(--rl-input-font-size);
  color: var(--rl-color-foreground);
  transition: border-color var(--rl-input-transition);
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-select {
  block-size: var(--rl-input-height);
}

.wpcf7-form-control.wpcf7-textarea {
  block-size: auto;
  padding-block: var(--rl-space-3);
  min-block-size: calc(var(--rl-input-height) * 3);
}

.wpcf7-form-control:focus-visible {
  outline: none;
  border-color: var(--rl-input-border-focus);
  box-shadow: var(--rl-shadow-focus);
}

.wpcf7-form-control.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--rl-input-height);
  padding-inline: var(--rl-space-6);
  background-color: var(--rl-btn-primary-bg);
  color: var(--rl-btn-primary-fg);
  border: none;
  border-radius: var(--rl-btn-radius);
  font-weight: var(--rl-weight-medium);
  cursor: pointer;
  transition: background-color var(--rl-btn-transition);
}

.wpcf7-form-control.wpcf7-submit:hover { background-color: var(--rl-btn-primary-hover); }

.wpcf7 label { display: flex; flex-direction: column; gap: var(--rl-space-2); font-size: var(--rl-text-sm); font-weight: var(--rl-weight-medium); color: var(--rl-color-foreground); margin-block-end: var(--rl-space-4); }

.wpcf7-not-valid-tip { color: var(--rl-color-danger); font-size: var(--rl-text-xs); margin-block-start: var(--rl-space-1); }

.rl-notice { padding: var(--rl-space-4); border-radius: var(--rl-radius-md); margin-block-end: var(--rl-space-6); font-size: var(--rl-text-sm); }
.rl-notice--success { background-color: var(--rl-color-success-subtle); color: var(--rl-color-success); }
.rl-notice--error { background-color: var(--rl-color-danger-subtle); color: var(--rl-color-danger); }

/* Honeypot field: visually hidden from real visitors, but never via
   display:none — some automated bots specifically skip fields with
   display:none, precisely because it's a well-known honeypot marker.
   Positioned off-screen instead, which is functionally invisible to
   a real user without being detectable-and-skippable the same way. */
.rl-field--honeypot { position: absolute; inset-inline-start: -9999px; }

.rl-faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding-block: var(--rl-space-5);
  border: none;
  border-block-end: var(--rl-border-width) solid var(--rl-color-border);
  background: none;
  text-align: start;
  font-family: var(--rl-font-sans);
  font-size: var(--rl-text-lg);
  font-weight: var(--rl-weight-semibold);
  color: var(--rl-color-foreground);
  cursor: pointer;
}

.rl-faq-accordion__question::after {
  content: "+";
  font-size: var(--rl-text-2xl);
  color: var(--rl-color-foreground-muted);
  flex-shrink: 0;
  margin-inline-start: var(--rl-space-4);
  transition: transform var(--rl-transition-fast);
}

.rl-faq-accordion__question[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.rl-faq-accordion__answer {
  padding-block: var(--rl-space-4);
  color: var(--rl-color-foreground-muted);
}