/* ========== TOUCH ОПТИМИЗАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ========== */

/*
 * Минимальный размер touch-целей согласно рекомендациям WCAG: 44x44px
 * Apple рекомендует минимум 44x44pt
 * Google рекомендует минимум 48x48dp
 * Используем 48x48px как золотую середину
 */

/* ========== БАЗОВЫЕ TOUCH-ЦЕЛИ ========== */

/* Улучшение размеров кнопок */
.btn {
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px; /* Предотвращает зум на iOS */
    line-height: 1.2;
    position: relative;
    cursor: pointer;

    /* Улучшенная обратная связь */
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Увеличиваем область касания без изменения визуального размера */
.btn::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
    border-radius: inherit;
}

/* Компактные кнопки с минимальным размером */
.btn-sm {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
}

.btn-lg {
    min-height: 56px;
    padding: 16px 32px;
    font-size: 18px;
}

/* ========== ССЫЛКИ И НАВИГАЦИЯ ========== */

/* Улучшение ссылок */
a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.2);
}

/* Навигационные ссылки */
.nav-link {
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* Breadcrumb ссылки */
.breadcrumb-item a {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 6px;
}

/* ========== КАРТОЧКИ И ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ ========== */

/* Карточки такси */
.taxi-card {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1);
}

.taxi-card:hover,
.taxi-card:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Кнопки в карточках */
.btn-card {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
}

/* Контактные карточки */
.contact-card {
    min-height: 100px;
    padding: 16px;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1);
}

/* ========== ФОРМЫ И ПОЛЯ ВВОДА ========== */

/* Поля ввода */
.form-control {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px; /* Предотвращает зум на iOS */
    border-radius: 8px;
    border: 2px solid rgba(0, 191, 255, 0.2);
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Select элементы */
.form-select {
    min-height: 48px;
    padding: 12px 40px 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid rgba(0, 191, 255, 0.2);
    background-position: right 12px center;
}

/* Checkboxes и radio buttons */
.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0.125em;
    border: 2px solid rgba(0, 191, 255, 0.2);
    border-radius: 4px;
}

.form-check-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-left: 32px;
    cursor: pointer;
    position: relative;
}

/* Увеличиваем область касания для чекбоксов */
.form-check-label::before {
    content: '';
    position: absolute;
    left: -8px;
    top: -12px;
    right: -8px;
    bottom: -12px;
    z-index: -1;
}

/* ========== СПЕЦИАЛЬНЫЕ TOUCH-ЭЛЕМЕНТЫ ========== */

/* Переключатель языков */
.language-switcher {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 16px;
    cursor: pointer;
}

/* Звезды рейтинга - увеличиваем для touch */
.rating-stars {
    font-size: 24px;
    gap: 4px;
}

.rating-stars i {
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.rating-stars i:hover,
.rating-stars i:focus {
    background-color: rgba(255, 193, 7, 0.2);
    transform: scale(1.1);
}

/* Пагинация */
.page-link {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
    margin: 0 2px;
}

/* ========== ЖЕСТЫ И SWIPE ПОДДЕРЖКА ========== */

/* Контейнеры поддерживающие swipe */
.swipeable {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.swipeable-vertical {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* Индикаторы возможности swipe */
.swipe-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 10;
}

.swipe-indicator-left {
    left: 8px;
}

.swipe-indicator-right {
    right: 8px;
}

/* ========== АКТИВНЫЕ СОСТОЯНИЯ И FEEDBACK ========== */

/* Универсальные активные состояния */
.touchable {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.touchable:active {
    transform: scale(0.98);
}

/* Эффект нажатия для кнопок */
.btn:active {
    transform: translateY(1px) scale(0.98);
}

/* Ripple эффект для материального дизайна */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.ripple:active::before {
    width: 200px;
    height: 200px;
}

/* ========== ДОСТУПНОСТЬ ========== */

/* Улучшения для focus состояний */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Скрытие outline для мыши, оставляя для клавиатуры */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ========== АДАПТИВНЫЕ МЕДИА-ЗАПРОСЫ ========== */

/* Большие экраны - немного уменьшаем touch-области */
@media (min-width: 992px) {
    .btn {
        min-height: 44px;
        padding: 10px 20px;
    }

    .form-control,
    .form-select {
        min-height: 44px;
        padding: 10px 14px;
    }

    .nav-link {
        min-height: 44px;
        padding: 10px 14px;
    }
}

/* Планшеты и большие телефоны */
@media (max-width: 991.98px) and (min-width: 768px) {
    .btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 16px;
    }

    .btn-sm {
        min-height: 44px;
        padding: 10px 18px;
    }

    .page-link {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }
}

/* Мобильные устройства */
@media (max-width: 767.98px) {
    /* Увеличиваем все touch-цели */
    .btn {
        min-height: 52px;
        padding: 14px 28px;
        font-size: 18px;
    }

    .btn-sm {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .form-control,
    .form-select {
        min-height: 52px;
        padding: 14px 18px;
        font-size: 18px;
    }

    .nav-link {
        min-height: 52px;
        padding: 14px 18px;
        font-size: 18px;
    }

    .page-link {
        min-height: 52px;
        min-width: 52px;
        padding: 14px 18px;
        font-size: 18px;
    }

    /* Увеличиваем карточки */
    .contact-card {
        min-height: 120px;
        padding: 20px;
    }

    /* Увеличиваем иконки */
    .contact-card-icon {
        font-size: 2.5rem;
    }

    /* Больше пространства между элементами */
    .taxi-features {
        gap: 8px;
    }

    .taxi-feature-badge {
        padding: 8px 12px;
        font-size: 16px;
        min-height: 44px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 575.98px) {
    .btn {
        min-height: 56px;
        padding: 16px 32px;
        font-size: 18px;
        width: 100%;
        margin-bottom: 8px;
    }

    .btn-sm {
        min-height: 52px;
        padding: 14px 24px;
        font-size: 16px;
    }

    .form-control,
    .form-select {
        min-height: 56px;
        padding: 16px 20px;
        font-size: 18px;
    }

    /* Стековая компоновка кнопок */
    .taxi-card-actions {
        flex-direction: column;
        gap: 8px;
    }

    .taxi-card-actions .btn {
        width: 100%;
    }

    /* Увеличиваем пространство между карточками */
    .taxi-card {
        margin-bottom: 20px;
    }
}

/* ========== УЛУЧШЕНИЯ ДЛЯ СПЕЦИФИЧЕСКИХ ЭЛЕМЕНТОВ ========== */

/* Dropdown меню */
.dropdown-item {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 191, 255, 0.1);
}

/* Modal окна */
.modal-header .btn-close {
    min-width: 48px;
    min-height: 48px;
    padding: 16px;
    margin: -16px;
}

/* Tabs навигация */
.nav-tabs .nav-link {
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
}

/* Accordion */
.accordion-button {
    min-height: 56px;
    padding: 16px 20px;
    font-size: 16px;
}

/* ========== ТЕСТОВЫЕ СТИЛИ ДЛЯ ОТЛАДКИ ========== */

/* Включить для визуализации touch-областей */
/*
.btn::before,
.form-check-label::before {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px dashed red;
}
*/

/* ========== ДОПОЛНИТЕЛЬНЫЕ TOUCH-ОПТИМИЗАЦИИ ========== */

/* Предотвращение случайного выделения текста */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Оптимизация скролла */
.smooth-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Отключение highlight при касании */
.no-tap-highlight {
    -webkit-tap-highlight-color: transparent;
}

/* Быстрые касания */
.fast-tap {
    touch-action: manipulation;
}

/* ========== LOADING СОСТОЯНИЯ ========== */

/* Индикатор загрузки для кнопок */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* ========== HAPTIC FEEDBACK СИМУЛЯЦИЯ ========== */

/* Имитация вибрации через анимацию */
.haptic-light {
    animation: haptic-light 0.1s ease;
}

.haptic-medium {
    animation: haptic-medium 0.15s ease;
}

.haptic-heavy {
    animation: haptic-heavy 0.2s ease;
}

@keyframes haptic-light {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

@keyframes haptic-medium {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

@keyframes haptic-heavy {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
}