/* ============================================================
   FORMS — koji-academy-theme/css/forms.css
   Contact form, inputs, labels, validation states
   ============================================================ */

.koji-kojo-contact-form .koji-kojo-form-dropdown select, .koji-kojo-contact-form .koji-kojo-form-name input[type="text"], .koji-kojo-contact-form .koji-kojo-form-email input[type="email"], .koji-kojo-contact-form .koji-kojo-form-message textarea {
	padding: 10px !important;
}

.form-group {
    margin-bottom: var(--space-sm);
}

.form-label {
    display: block;
    font-weight: 700;
    font-size: var(--text-base);
    margin-bottom: 0.375rem;
    color: var(--color-heading);
}

.form-label .required {
    color: #c0392b;
    margin-left: 0.25rem;
}

.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: 10px !important;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-body);
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
    min-height: 48px;
    line-height: 1.5;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(61,122,138,0.2);
}

.form-textarea {
    min-height: 160px;
    resize: vertical;
}

/* Error state */
.form-error {
    display: none;
    color: #c0392b;
    font-size: var(--text-sm);
    margin-top: 0.375rem;
    font-weight: 600;
}
.form-group.has-error .form-error {
    display: block;
}
.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
    border-color: #c0392b;
}

/* Success / error status banners */
.form-status-banner {
    display: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    margin-bottom: var(--space-md);
}
.form-status-banner--success {
    background: rgba(106,140,128,0.15);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}
.form-status-banner--error {
    background: rgba(192,57,43,0.1);
    color: #c0392b;
    border: 1px solid #c0392b;
}

/* Honeypot — hidden from real users */
.form-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Form layout */
.form-row {
    display: grid;
    gap: var(--space-sm);
}
@media (min-width: 640px) {
    .form-row--2col {
        grid-template-columns: 1fr 1fr;
    }
}

/* WPForms overrides — match our design system */
.wpforms-form .wpforms-field-label {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    color: var(--color-heading) !important;
    font-size: var(--text-base) !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpforms-form select {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.875rem 1rem !important;
    color: var(--color-body) !important;
    background: var(--color-bg-alt) !important;
    min-height: 48px !important;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(61,122,138,0.2) !important;
    outline: none !important;
}
.wpforms-form .wpforms-submit {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.875rem 1.75rem !important;
    font-size: var(--text-base) !important;
    min-height: 48px !important;
    cursor: pointer !important;
    transition: background-color var(--transition) !important;
}
.wpforms-form .wpforms-submit:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}