/**
 * Form Components — v3.2
 *
 * CSS global de formulários consumindo tokens --input-* (Camada 3).
 * Usado por: sec-contact-form.php e qualquer formulário do tema.
 *
 * REGRAS:
 *   - Todos os valores vêm de tokens (--input-*, --space-*, --radius-*, etc.)
 *   - Nenhum valor hardcoded
 *   - Compatível com CF7, Gravity Forms e formulários nativos WP
 *
 * @package FocofyFactory
 * @version 3.3
 * v3.2 → v3.3: max-width: 600px → 767px
 */

/* ══════════════════════════════════════════════════════════════════════════
   FIELDSET / LABEL
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form fieldset {
  border:  none;
  padding: 0;
  margin:  0;
}

.focofy-form legend,
.focofy-form label,
.focofy-label {
  display:       block;
  font-size:     var(--font-size-sm);
  font-weight:   var(--fw-medium);
  color:         var(--color-text);
  margin-bottom: var(--space-2);
}

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

/* ══════════════════════════════════════════════════════════════════════════
   INPUTS BASE
   Aplica a: input text/email/tel/url/number/search, textarea, select
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form input[type="text"],
.focofy-form input[type="email"],
.focofy-form input[type="tel"],
.focofy-form input[type="url"],
.focofy-form input[type="number"],
.focofy-form input[type="search"],
.focofy-form input[type="password"],
.focofy-form textarea,
.focofy-form select,
.focofy-input,
.focofy-textarea,
.focofy-select {
  display:        block;
  width:          100%;
  padding:        var(--input-padding-y) var(--input-padding-x);
  font-family:    var(--font-body, inherit);
  font-size:      var(--font-size-base);
  font-weight:    var(--fw-normal);
  line-height:    var(--lh-normal);
  color:          var(--input-text);
  background:     var(--input-bg);
  border:         1px solid var(--input-border);
  border-radius:  var(--input-radius);
  outline:        none;
  transition:
    border-color var(--input-transition) ease,
    box-shadow   var(--input-transition) ease,
    background   var(--input-transition) ease;
  appearance:     none;
  -webkit-appearance: none;
}

/* Placeholder */
.focofy-form input::placeholder,
.focofy-form textarea::placeholder,
.focofy-input::placeholder,
.focofy-textarea::placeholder {
  color:   var(--input-placeholder);
  opacity: 1;
}

/* Focus */
.focofy-form input:focus,
.focofy-form textarea:focus,
.focofy-form select:focus,
.focofy-input:focus,
.focofy-textarea:focus,
.focofy-select:focus {
  border-color: var(--input-border-focus);
  box-shadow:   var(--input-shadow-focus);
}

/* Error */
.focofy-form input.has-error,
.focofy-form textarea.has-error,
.focofy-form select.has-error,
.focofy-input--error {
  border-color: var(--input-border-error);
}

/* Disabled */
.focofy-form input:disabled,
.focofy-form textarea:disabled,
.focofy-form select:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEXTAREA
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form textarea,
.focofy-textarea {
  min-height: 120px;
  resize:     vertical;
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECT — seta customizada
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form select,
.focofy-select {
  padding-right:       var(--space-10);
  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='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--input-padding-x) center;
  cursor:              pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKBOX / RADIO
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form input[type="checkbox"],
.focofy-form input[type="radio"],
.focofy-checkbox,
.focofy-radio {
  width:         18px;
  height:        18px;
  accent-color:  var(--color-accent);
  cursor:        pointer;
  flex-shrink:   0;
}

.focofy-check-label {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  cursor:      pointer;
  font-size:   var(--font-size-sm);
  color:       var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM GROUP
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-bottom:  var(--space-6);
}

.focofy-form-row {
  display: grid;
  gap:     var(--grid-gap);
}

.focofy-form-row--2 { grid-template-columns: repeat(2, 1fr); }
.focofy-form-row--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  .focofy-form-row--2,
  .focofy-form-row--3 {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MENSAGENS DE FEEDBACK
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-form-hint {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
  margin-top: var(--space-1);
}

.focofy-form-error {
  font-size:   var(--font-size-xs);
  color:       var(--color-danger);
  margin-top:  var(--space-1);
  font-weight: var(--fw-medium);
}

.focofy-form-success {
  font-size:   var(--font-size-sm);
  color:       var(--color-success);
  font-weight: var(--fw-medium);
  padding:     var(--space-4);
  background:  color-mix(in srgb, var(--color-success) 10%, transparent);
  border:      1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPATIBILIDADE — Contact Form 7
   ══════════════════════════════════════════════════════════════════════════ */

.wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
  display:        block;
  width:          100%;
  padding:        var(--input-padding-y) var(--input-padding-x);
  font-family:    var(--font-body, inherit);
  font-size:      var(--font-size-base);
  color:          var(--input-text);
  background:     var(--input-bg);
  border:         1px solid var(--input-border);
  border-radius:  var(--input-radius);
  outline:        none;
  transition:     border-color var(--input-transition) ease, box-shadow var(--input-transition) ease;
  appearance:     none;
  -webkit-appearance: none;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--input-border-focus);
  box-shadow:   var(--input-shadow-focus);
}

.wpcf7-not-valid { border-color: var(--input-border-error) !important; }

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

.wpcf7-response-output {
  font-size:     var(--font-size-sm);
  padding:       var(--space-4);
  border-radius: var(--radius-md);
  margin-top:    var(--space-4);
  border-width:  1px;
  border-style:  solid;
}

.wpcf7-mail-sent-ok {
  color:        var(--color-success);
  background:   color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  color:        var(--color-danger);
  background:   color-mix(in srgb, var(--color-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}