/**
 * redline — 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(--brand-bg);
    /* --bs-border-color is pinned to #8A9099 by colors.css (3.22:1 on white,
       5.24:1 on ink) so it clears 1.4.11 on both grounds; --brand-border is a
       decorative 1.27:1 hairline and would undo that fix if used here. */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: .65rem .9rem;
    color: var(--brand-text);
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.form-control::placeholder {
    color: var(--brand-text-secondary);
    opacity: 1;
}

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

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem var(--brand-primary-subtle);
    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(--brand-text);
    margin-bottom: .4rem;
}

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

.form-check-input:checked {
    background-color: var(--brand-primary-fill);
    border-color: var(--brand-primary);
}

/* Bootstrap's checked check/radio glyph is a fixed white SVG (no dark-mode
   variant in this vendor build). --brand-primary is dark mode's TEXT red
   (#FF6B7D, 6.14:1 for text) but only 2.74:1 as a fill under that glyph,
   failing 1.4.11. var(--brand-primary-fill) is the fill red colors.css already pins for
   [data-bs-theme=dark] .btn-primary (5.08:1 for white). */
[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--brand-primary-fill);
    border-color: var(--brand-primary-fill);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem var(--brand-primary-subtle);
}

.input-group-text {
    background-color: var(--brand-bg-alt);
    border: 1px solid var(--bs-border-color);
    color: var(--brand-text-secondary);
}

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

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

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

.valid-feedback {
    color: var(--color-success);
    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;
}