/**
 * natural — forms.css
 *
 * Form-field design layer for every CORE Joomla form (contact, checkout,
 * mod_login, registration, comments) rendered with plain Bootstrap 5
 * `.form-control` / `.form-select` / `.form-check` classes — no bespoke
 * `-brand` suffix, because real Joomla-rendered fields never carry one.
 * Lifted from the mockup's login (log-in.html) and contact (contact-us.html)
 * forms. Token-driven via --template-* so it follows colors.css.
 *
 * Depends on bootstrap.css + template.colors (see joomla.asset.json).
 */

.form-control,
.form-select {
    background-color: var(--template-bg, #fff);
    border: 1px solid var(--template-border, #E2E4E8);
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
    color: var(--template-text, #202324);
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.form-control::placeholder {
    color: var(--template-text-secondary, #585956);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--template-primary, #B11117);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--template-primary, #B11117);
    box-shadow: 0 0 0 .2rem var(--template-primary-subtle, #FBE7E7);
    outline: none;
}

.form-control-lg,
.form-select-lg {
    padding: .85rem 1.1rem;
    font-size: var(--text-md, 1.125rem);
}

.form-control-sm,
.form-select-sm {
    padding: .4rem .65rem;
    font-size: var(--text-sm, .875rem);
}

.form-label {
    font-weight: 600;
    color: var(--template-text, #202324);
    margin-bottom: .4rem;
}

.form-check-input {
    border-color: var(--brand-border-strong, #8A9099);
}

.form-check-input:checked {
    background-color: var(--template-primary, #B11117);
    border-color: var(--template-primary, #B11117);
}

.form-check-input:focus {
    border-color: var(--template-primary, #B11117);
    box-shadow: 0 0 0 .2rem var(--template-primary-subtle, #FBE7E7);
}

.input-group-text {
    background-color: var(--template-bg-alt, #F6F8F9);
    border: 1px solid var(--template-border, #E2E4E8);
    color: var(--template-text-secondary, #585956);
}

/* Validation */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--color-danger, #B11117);
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--color-success, #1E7A46);
}

.invalid-feedback {
    color: var(--color-danger, #B11117);
    font-weight: 500;
}

.valid-feedback {
    color: var(--color-success, #1E7A46);
    font-weight: 500;
}

fieldset legend {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, .04em);
    font-size: var(--text-md, 1.125rem);
    margin-bottom: .5rem;
}