/**
 * Phone Validation Styles
 * Стили для валидации и форматирования телефонных номеров
 */

/* Базовые стили для полей телефона */
input[type="tel"],
input[name="phone"] {
    position: relative;
    transition: all 0.3s ease;
}

/* Стили для валидного номера телефона */
input[type="tel"].phone-valid,
input[name="phone"].phone-valid {
    border-color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1) !important;
}

/* Стили для невалидного номера телефона */
input[type="tel"].phone-invalid,
input[name="phone"].phone-invalid {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
}

/* Анимация для изменения состояния */
input[type="tel"],
input[name="phone"] {
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Стили для placeholder */
input[type="tel"]::placeholder,
input[name="phone"]::placeholder {
    color: #999;
    transition: color 0.3s ease;
}

input[type="tel"]:focus::placeholder,
input[name="phone"]:focus::placeholder {
    color: #666;
}

/* Стили для фокуса */
input[type="tel"]:focus,
input[name="phone"]:focus {
    outline: none;
    border-color: #007AFF !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1) !important;
}

/* Стили для модальных окон */
.modal-container input[type="tel"],
.modal-container input[name="phone"] {
    border: none !important;
    border-bottom: 1px solid #666666 !important;
    background: transparent !important;
    padding: 15px 0 !important;
    border-radius: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 200 !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    box-shadow: none !important;
}

.modal-container input[type="tel"]:focus,
.modal-container input[name="phone"]:focus {
    border-bottom-color: #ffffff !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.modal-container input[type="tel"].phone-valid,
.modal-container input[name="phone"].phone-valid {
    border-bottom-color: #28a745 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.modal-container input[type="tel"].phone-invalid,
.modal-container input[name="phone"].phone-invalid {
    border-bottom-color: #dc3545 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Стили для форм на страницах */
.tour-form input[type="tel"],
.tour-form input[name="phone"] {
    color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #666666 !important;
    background: transparent !important;
    padding: 15px 0 !important;
    border-radius: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 200 !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    box-shadow: none !important;
}

.tour-form input[type="tel"]:focus,
.tour-form input[name="phone"]:focus {
    border-bottom-color: #ffffff !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.tour-form input[type="tel"].phone-valid,
.tour-form input[name="phone"].phone-valid {
    border-bottom-color: #28a745 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tour-form input[type="tel"].phone-invalid,
.tour-form input[name="phone"].phone-invalid {
    border-bottom-color: #dc3545 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Стили для контактных форм */
.contact-form input[type="tel"],
.contact-form input[name="phone"] {
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="tel"]:focus,
.contact-form input[name="phone"]:focus {
    outline: none;
    border-color: #007AFF !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1) !important;
}

.contact-form input[type="tel"].phone-valid,
.contact-form input[name="phone"].phone-valid {
    border-color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1) !important;
}

.contact-form input[type="tel"].phone-invalid,
.contact-form input[name="phone"].phone-invalid {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
}

/* Анимации */
@keyframes phoneValidationPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 122, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
    }
}

input[type="tel"]:focus,
input[name="phone"]:focus {
    animation: phoneValidationPulse 2s infinite;
}

/* Отключаем анимацию для пользователей, предпочитающих уменьшенную анимацию */
@media (prefers-reduced-motion: reduce) {
    input[type="tel"],
    input[name="phone"] {
        transition: none;
        animation: none;
    }
    
    input[type="tel"]:focus,
    input[name="phone"]:focus {
        animation: none;
    }
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    input[type="tel"],
    input[name="phone"] {
        font-size: 16px !important; /* Предотвращает зум на iOS */
    }
    
    .modal-container input[type="tel"],
    .modal-container input[name="phone"] {
        font-size: 1rem !important;
    }
    
    .tour-form input[type="tel"],
    .tour-form input[name="phone"] {
        font-size: 1rem !important;
    }
}

/* Стили для темной темы */
@media (prefers-color-scheme: dark) {
    input[type="tel"].phone-valid,
    input[name="phone"].phone-valid {
        border-color: #28a745 !important;
        background-color: rgba(40, 167, 69, 0.1) !important;
    }
    
    input[type="tel"].phone-invalid,
    input[name="phone"].phone-invalid {
        border-color: #dc3545 !important;
        background-color: rgba(220, 53, 69, 0.1) !important;
    }
}

/* Стили для высокого контраста */
@media (prefers-contrast: high) {
    input[type="tel"].phone-valid,
    input[name="phone"].phone-valid {
        border-color: #00ff00 !important;
        background-color: rgba(0, 255, 0, 0.1) !important;
    }
    
    input[type="tel"].phone-invalid,
    input[name="phone"].phone-invalid {
        border-color: #ff0000 !important;
        background-color: rgba(255, 0, 0, 0.1) !important;
    }
}