/* =====================
   PHONE FORMATTER AUTOFILL STYLES
   Специфичные стили для полей телефона с форматированием
   ===================== */

/* Основные цвета для полей телефона */
:root {
    --phone-autofill-bg: transparent;
    --phone-autofill-text: white;
    --phone-autofill-bg-focus: transparent;
    --phone-autofill-text-focus: white;
    --phone-autofill-border: #889f67;
    --phone-autofill-border-hover: #caa430;
}

/* Для полей с классом phone-formatted */
.phone-formatted:-webkit-autofill,
.phone-formatted:-webkit-autofill:hover,
.phone-formatted:-webkit-autofill:focus,
.phone-formatted:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text) !important;
    transition: background-color 5000s ease-in-out 0s;
    border-color: var(--phone-autofill-border) !important;
    background-color: var(--phone-autofill-bg) !important;
}

.phone-formatted:-moz-autofill,
.phone-formatted:-moz-autofill:hover,
.phone-formatted:-moz-autofill:focus,
.phone-formatted:-moz-autofill:active {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text) !important;
    background-color: var(--phone-autofill-bg) !important;
    background-image: none !important;
    border-color: var(--phone-autofill-border) !important;
}

/* Для floating labels с phone-formatted */
.form-floating .phone-formatted:-webkit-autofill,
.form-floating .phone-formatted:-webkit-autofill:hover,
.form-floating .phone-formatted:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text) !important;
    transition: background-color 5000s ease-in-out 0s;
    border-color: var(--phone-autofill-border) !important;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating .phone-formatted:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg-focus) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text-focus) !important;
    border-color: var(--phone-autofill-border) !important;
    border-width: 2px;
}

.form-floating .phone-formatted:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text) !important;
    background-color: var(--phone-autofill-bg) !important;
    background-image: none !important;
    border-color: var(--phone-autofill-border) !important;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Для form__field с phone-formatted (кастомные поля Oliviatrading) */
.form__field.phone-formatted:-webkit-autofill,
.form__field.phone-formatted:-webkit-autofill:hover,
.form__field.phone-formatted:-webkit-autofill:focus,
.form__field.phone-formatted:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text) !important;
    transition: background-color 5000s ease-in-out 0s;
    border-bottom-color: var(--phone-autofill-border) !important;
    background-color: var(--phone-autofill-bg) !important;
}

.form__field.phone-formatted:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text) !important;
    background-color: var(--phone-autofill-bg) !important;
    background-image: none !important;
    border-bottom-color: var(--phone-autofill-border) !important;
}

/* Состояние hover для полей телефона */
.phone-formatted:-webkit-autofill:hover {
    border-color: var(--phone-autofill-border-hover) !important;
}

.phone-formatted:-moz-autofill:hover {
    border-color: var(--phone-autofill-border-hover) !important;
}

.form__field.phone-formatted:-webkit-autofill:hover {
    border-bottom-color: var(--phone-autofill-border-hover) !important;
}

.form__field.phone-formatted:-moz-autofill:hover {
    border-bottom-color: var(--phone-autofill-border-hover) !important;
}

/* Фокус состояние для полей телефона */
.phone-formatted:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg-focus) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text-focus) !important;
    border-color: var(--phone-autofill-border) !important;
    outline: 0;
    border-width: 2px;
}

.phone-formatted:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg-focus) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text-focus) !important;
    background-color: var(--phone-autofill-bg-focus) !important;
    border-color: var(--phone-autofill-border) !important;
    outline: 0;
    border-width: 2px;
}

.form__field.phone-formatted:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg-focus) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text-focus) !important;
    border-bottom-color: var(--phone-autofill-border) !important;
    border-bottom-width: 3px;
    outline: 0;
}

.form__field.phone-formatted:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg-focus) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text-focus) !important;
    background-color: var(--phone-autofill-bg-focus) !important;
    border-bottom-color: var(--phone-autofill-border) !important;
    border-bottom-width: 3px;
    outline: 0;
}

/* Для валидации полей телефона */
.phone-formatted:valid:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text) !important;
    border-color: #28a745 !important;
}

.phone-formatted:valid:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text) !important;
    border-color: #28a745 !important;
}

.phone-formatted:invalid:-webkit-autofill:not(:placeholder-shown) {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -webkit-text-fill-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.phone-formatted:invalid:-moz-autofill:not(:placeholder-shown) {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -moz-text-fill-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* Для модальных окон */
.modal .phone-formatted:-webkit-autofill,
.modal .phone-formatted:-webkit-autofill:hover,
.modal .phone-formatted:-webkit-autofill:focus,
.modal .phone-formatted:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--phone-autofill-text) !important;
    transition: background-color 5000s ease-in-out 0s;
    border-color: var(--phone-autofill-border) !important;
}

.modal .phone-formatted:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
    -moz-text-fill-color: var(--phone-autofill-text) !important;
    background-color: var(--phone-autofill-bg) !important;
    background-image: none !important;
    border-color: var(--phone-autofill-border) !important;
}

/* Дополнительные стили для лучшей совместимости */
@media (prefers-color-scheme: dark) {
    :root {
        --phone-autofill-bg: transparent;
        --phone-autofill-text: white;
        --phone-autofill-bg-focus: transparent;
        --phone-autofill-text-focus: white;
    }
}

/* Для Safari */
@supports (-webkit-appearance: none) {
    .phone-formatted:-webkit-autofill {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Для Edge */
@supports (-ms-ime-align: auto) {
    .phone-formatted:-ms-autofill {
        -ms-box-shadow: 0 0 0 1000px var(--phone-autofill-bg) inset !important;
        -ms-text-fill-color: var(--phone-autofill-text) !important;
        background-color: var(--phone-autofill-bg) !important;
    }
}