/* ============================================================
   tires template — forms.css
   Design layer for CORE Bootstrap 5 field classes (.form-control,
   .form-select, .form-check, .input-group-text), so every Joomla
   component form (contact, checkout, comments, mod_login) matches
   the mockup's .form-control-c / .form-label-c treatment WITHOUT the
   -c suffix classes — real Joomla output never carries them.

   Source pattern: MOCKUP/assets/css/styles.css .form-control-c block
   (login.html + contact.html reference), token-driven via --template-*
   so it follows the light/dark toggle.
   ============================================================ */

.form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm, .875rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, .05em);
    color: var(--template-text);
    margin-bottom: var(--space-2, .5rem);
}

.form-control,
.form-select,
textarea.form-control {
    width: 100%;
    background-color: var(--template-bg);
    border: 1px solid var(--template-border);
    color: var(--template-text);
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-body);
    font-size: var(--text-base, 1rem);
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease);
}

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

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

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background-color: var(--template-bg);
    color: var(--template-text);
    outline: none;
    border-color: var(--template-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 200, 113, 55), .45);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--template-bg-alt);
    color: var(--template-text-secondary);
    opacity: .65;
}

.form-control-sm,
.form-select-sm {
    padding: var(--space-2, .5rem) var(--space-3, .75rem);
    font-size: var(--text-sm, .875rem);
}

.form-control-lg,
.form-select-lg {
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-size: var(--text-md, 1.125rem);
}

.form-text {
    color: var(--template-text-secondary);
    font-size: var(--text-sm, .875rem);
}

.form-check-input {
    background-color: var(--template-bg);
    border: 1px solid var(--template-border);
}

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

.form-check-input:focus {
    border-color: var(--template-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 200, 113, 55), .35);
}

.form-check-label {
    color: var(--template-text-body);
}

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

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

.invalid-feedback {
    color: var(--color-danger-text, #F0806A);
}

.is-valid,
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--color-success, #5F8F4E);
}

.valid-feedback {
    color: var(--color-success-text, #7FB069);
}

fieldset legend,
.control-group legend {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, .05em);
    color: var(--template-text);
    font-size: var(--text-lg, 1.25rem);
    margin-bottom: var(--space-4, 1rem);
}