/* Visual fallback only. JS removes the hint's native width while editing. */
input[placeholder]:not([readonly]):not([disabled]):not([data-keep-placeholder]):focus::placeholder,
textarea[placeholder]:not([readonly]):not([disabled]):not([data-keep-placeholder]):focus::placeholder {
    color: transparent !important;
    opacity: 0 !important;
    transition: none !important;
}

/*
 * Boxed form components keep their border while editing. Width/radius/padding
 * and height stay unchanged; only the border colour and soft ring animate.
 * Match the existing 1px checkout/Bootstrap and 2px auth/tracking designs.
 * Do not restyle plain search fields, hidden fields, payment radios or buttons.
 */
:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input) {
    --store-field-border-width: 1px;
    --store-field-focus-border: var(--bs-primary, #3b82f6);
    --store-field-focus-ring: rgba(13, 110, 253, 0.12);
}

:is(input, textarea, select).form-control-custom {
    --store-field-focus-border: var(--primary-color, #0f3460);
    --store-field-focus-ring: rgba(15, 52, 96, 0.12);
}

:is(.modern-login-section, .modern-auth-section) :is(input, textarea).custom-input,
:is(input, textarea).modern-input {
    --store-field-border-width: 2px;
    --store-field-focus-border: #764ba2;
    --store-field-focus-ring: rgba(118, 75, 162, 0.12);
}

:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input):is(.is-valid, .parsley-success) {
    --store-field-focus-border: var(--bs-success, #198754);
    --store-field-focus-ring: rgba(25, 135, 84, 0.12);
}

:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input):is(.is-invalid, .parsley-error, [aria-invalid="true"]) {
    --store-field-focus-border: var(--bs-danger, #dc3545);
    --store-field-focus-ring: rgba(220, 53, 69, 0.12);
}

/* Parsley already draws its validation border at 1px in the base theme. */
:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input).parsley-error {
    --store-field-border-width: 1px;
}

:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input):user-invalid {
    --store-field-focus-border: var(--bs-danger, #dc3545);
    --store-field-focus-ring: rgba(220, 53, 69, 0.12);
}

:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input):not([readonly]):not([disabled]):not([data-keep-field-style]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
}

:is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input):not([readonly]):not([disabled]):not([data-keep-field-style]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus {
    border-style: solid !important;
    border-width: var(--store-field-border-width) !important;
    border-color: var(--store-field-focus-border) !important;
    box-shadow: 0 0 0 3px var(--store-field-focus-ring) !important;
}

/* Retain the site's existing autofill background treatment plus the focus ring. */
:is(input, textarea):is(.form-control, .form-control-custom, .custom-input, .modern-input):not([readonly]):not([disabled]):not([data-keep-field-style]):focus:-webkit-autofill {
    box-shadow: 0 0 0 3px var(--store-field-focus-ring),
        0 0 0 1000px var(--input-bg, #fff) inset !important;
}

@media (prefers-reduced-motion: reduce) {
    :is(input, textarea, select):is(.form-control, .form-control-custom, .form-select, .custom-input, .modern-input):not([readonly]):not([disabled]):not([data-keep-field-style]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
        transition: none !important;
    }
}