/* Стили для полей телефона с маской и floating labels */
.form-floating .phone-formatted {
    font-family: var(--font-family-primary);
    font-size: 16px;
    padding: 12px 16px;
    padding-left: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
    background-color: var(--color-bg-secondary);
}

.form-floating .phone-formatted:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    background-color: var(--color-bg-primary);
}

/* Скрываем placeholder чтобы не конфликтовать с floating label */
.form-floating .phone-formatted::placeholder {
    color: transparent;
}

/* Фикс для автозаполнения браузера (минимальный) */
.form-floating .phone-formatted:-webkit-autofill,
.form-floating .phone-formatted:-webkit-autofill:hover,
.form-floating .phone-formatted:-webkit-autofill:focus,
.form-floating .phone-formatted:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fafafa inset !important;
    -webkit-text-fill-color: #333 !important;
    border: 2px solid #e0e0e0 !important;
    transition: background-color 5000s ease-in-out 0s;
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.form-floating .phone-formatted:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #333 !important;
    border: 2px solid #007bff !important;
}

/* Firefox (он нормальный) */
.form-floating .phone-formatted:-moz-autofill {
    box-shadow: 0 0 0 1000px #fafafa inset !important;
    -moz-text-fill-color: #333 !important;
    border: 2px solid #e0e0e0 !important;
}

.form-floating .phone-formatted:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px #fff inset !important;
    border: 2px solid #007bff !important;
}

.form-floating .phone-formatted:invalid {
    border-color: #dc3545;
    background: #fff5f5;
}

.form-floating .phone-formatted:invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}


.form-floating .phone-formatted:not(:placeholder-shown) ~ label {
    opacity: 1;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Invalid not empty состояние */
.form-floating .phone-formatted:invalid:not(:placeholder-shown) {
    border-color: var(--color-danger) !important;
    background-color: var(--color-bg-secondary) !important;
}

.form-floating .phone-formatted:invalid:not(:placeholder-shown):focus {
    border-color: var(--color-danger) !important;
    background-color: var(--color-bg-primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Valid not empty состояние */
.form-floating .phone-formatted:valid:not(:placeholder-shown) {
    border-color: var(--color-success) !important;
    background-color: var(--color-success-bg) !important;
}

.form-floating .phone-formatted:valid:not(:placeholder-shown):focus {
    border-color: var(--color-success) !important;
    background-color: var(--color-bg-primary) !important;
    box-shadow: 0 0 0 3px var(--color-success-border) !important;
}

/* Анимация ввода - убираем иконку чтобы не мешать floating label */
.phone-formatter-container::before {
    display: none;
}


/* Для мобильных устройств */
@media (max-width: 768px) {
    .form-floating .phone-formatted {
        font-size: 16px; /* Предотвращает zoom на iOS */
        padding: 14px 18px;
    }
}

/* Индикатор валидности */
.phone-validator {
    margin-top: 5px;
    font-size: 12px;
    color: #6c757d;
    display: none;
}

.phone-validator.show {
    display: block;
}

.phone-validator.valid {
    color: #28a745;
}

.phone-validator.invalid {
    color: #dc3545;
}