/**
 * Site-wide floating labels (Bootstrap 5 .form-floating — BS4 example equivalent).
 * Pairs with js/form-floating-site.js for progressive enhancement.
 *
 * Dark theme aligned with common.css “Dark Theme Form Elements” (.form-control / .form-select).
 */

.form-floating > label {
    color: #6c757d;
}

.form-floating.eff-auto-floating {
    margin-bottom: 1rem;
}

.form-floating.eff-auto-floating.mb-0 {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Dark theme — match storefront .dark-theme form fields                      */
/* -------------------------------------------------------------------------- */

.dark-theme .form-floating > .form-control,
.dark-theme .form-floating > .form-select {
    background: #2c3136 !important;
    color: #f1f1f1 !important;
    border: 1px solid #555 !important;
}

/* Bootstrap floating labels require an invisible placeholder; common.css sets
   .dark-theme ::placeholder { color: #888 !important } which breaks the pattern
   (label + visible placeholder overlap, especially on textareas). */
.dark-theme .form-floating > .form-control::placeholder,
.dark-theme .form-floating > .form-control::-webkit-input-placeholder,
.dark-theme .form-floating > .form-control::-moz-placeholder,
.dark-theme .form-floating > .form-control:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.dark-theme .form-floating > .form-control:focus,
.dark-theme .form-floating > .form-select:focus {
    background: #2c3136 !important;
    color: #f1f1f1 !important;
    border-color: #dc143c !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 20, 60, 0.25) !important;
}

/* Multi-line: Bootstrap gives .form-control a fixed floating height; allow textarea to grow */
.form-floating > textarea.form-control {
    height: auto !important;
    min-height: 7.5rem;
}

.dark-theme .form-floating > label {
    color: rgba(241, 241, 241, 0.55) !important;
}

/* Floated label (focused or filled) — Bootstrap moves label with opacity/transform */
.dark-theme .form-floating > .form-control:focus ~ label,
.dark-theme .form-floating > .form-control:not(:placeholder-shown) ~ label,
.dark-theme .form-floating > .form-select ~ label {
    color: rgba(241, 241, 241, 0.88) !important;
}

.dark-theme .form-floating > .form-control:disabled,
.dark-theme .form-floating > .form-select:disabled {
    background: #1e2226 !important;
    color: rgba(241, 241, 241, 0.55) !important;
    border-color: #444 !important;
    opacity: 1;
}

.dark-theme .form-floating > .form-control:disabled ~ label,
.dark-theme .form-floating > .form-select:disabled ~ label {
    color: rgba(241, 241, 241, 0.45) !important;
}

/* Valid / invalid — keep readable on dark */
.dark-theme .form-floating > .form-control.is-valid {
    border-color: #198754 !important;
}

.dark-theme .form-floating > .form-control.is-invalid {
    border-color: #dc3545 !important;
}

.dark-theme .form-floating > .form-control.is-valid ~ label,
.dark-theme .form-floating > .form-control.is-invalid ~ label {
    color: rgba(241, 241, 241, 0.9) !important;
}

/* Floated label “chip” — Bootstrap uses label::after with var(--bs-body-bg); keep it same as field */
.dark-theme .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after,
.dark-theme .form-floating > .form-control:focus ~ label::after,
.dark-theme .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.dark-theme .form-floating > .form-control-plaintext ~ label::after,
.dark-theme .form-floating > .form-select ~ label::after,
.dark-theme .form-floating > .form-control:-webkit-autofill ~ label::after {
    background-color: #2c3136 !important;
}

.dark-theme .form-floating > :disabled ~ label::after,
.dark-theme .form-floating > .form-control:disabled ~ label::after {
    background-color: #1e2226 !important;
}