/**
 * COMPONENTS / FORMS
 * -----------------------------------------------------------------------------
 * Formularios sobre fondo claro. Sirven tanto para el formulario de contacto
 * del tema como para los que inyecten plugins (Contact Form 7, checkout, etc.).
 */

.form-field {
    display: grid;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.form-label,
.form-field > label {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--heading);
}

.form-label .required,
.form-field .required {
    color: var(--orange);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--white);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--heading);
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    transition: var(--transition);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint-12);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--blue);
}

.form-help {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.form-error {
    font-size: var(--fs-sm);
    color: #d64545;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

/* =============================================================
   TARJETA DE FORMULARIO
============================================================= */

.form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.form-card__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    color: var(--heading);
    margin-bottom: var(--space-2xs);
}

.form-card__text {
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
}

/* Mensajes de respuesta del formulario de contacto */
.form-message {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
}

.form-message--ok {
    background: var(--green-soft);
    border: 1px solid var(--green-mid);
    color: var(--green);
}

.form-message--error {
    background: #fdecec;
    border: 1px solid #e9a3a3;
    color: #a02c2c;
}

/* =============================================================
   BUSCADOR
============================================================= */

.search-form {
    display: flex;
    gap: var(--space-xs);
}

.search-form .search-field {
    flex: 1;
}

/* =============================================================
   RESPONSIVE
============================================================= */

@media (max-width: 700px) {

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: var(--space-md);
    }
}