/**
 * Адаптивные стили для мобильных устройств
 * Umami Pizza - Mobile First CSS
 */

/* ========================================
   БАЗОВЫЕ НАСТРОЙКИ
   ======================================== */

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   HEADER / ШАПКА
   ======================================== */

@media (max-width: 991px) {
    /* Упрощенная шапка для мобильных */
    .header-top {
        padding: 12px 0 !important;
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .header-top .container {
        flex-direction: row;
        align-items: center !important;
        gap: 12px;
    }

    /* Логотип и кнопки */
    .logo-section {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start !important;
        gap: 10px;
    }

    .logo-section img {
        height: 40px !important;
    }

    .logo-section > div {
        display: block; /* Показываем выбранный адрес/точку */
    }

    /* Кнопка авторизации */
    #authOpenBtn {
        font-size: 14px !important;
        padding: 6px 16px !important;
    }

    /* Блок информации (телефон, адрес) */
    .delivery-info {
        display: none !important; /* Скрываем на мобильных */
    }

    .header-actions {
        flex: 0 0 auto;
        gap: 12px !important;
    }

    /* Навигация по страницам в header */
    .header-top .nav {
        display: none !important;
    }

    /* Address selection pills - делаем компактнее */
    .address_selection_and_time {
        margin-left: 0 !important;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .pill {
        font-size: 11px !important;
        padding: 8px 12px !important;
        border-radius: 20px !important;
        max-width: 100%;
        min-width: 0;
    }

    .pill .icon {
        width: 22px !important;
        height: 22px !important;
        font-size: 12px !important;
    }

    .pill-group {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    #storePillText,
    #timePillText {
        display: inline-block;
        max-width: 55vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ========================================
   NAVIGATION / НАВИГАЦИЯ
   ======================================== */

@media (max-width: 991px) {
    /* Главное меню - горизонтальный скролл */
    #mainNav {
        position: sticky;
        top: 0;
        z-index: 1150;
    }

    .navbar {
        padding: 8px 0 !important;
    }

    .navbar .container {
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }

    .mobile-scroll-horizontal {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
        white-space: nowrap;
        flex-wrap: nowrap !important;
        display: flex;
        gap: 6px;
    }

    .mobile-scroll-horizontal::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .mobile-scroll-horizontal .nav-link {
        font-size: 13px !important;
        padding: 8px 14px !important;
        white-space: nowrap;
    }

    /* Sticky navigation */
    #mainNav.fixed-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
}

/* ========================================
   PRODUCT CARDS / КАРТОЧКИ ТОВАРОВ
   ======================================== */

@media (max-width: 991px) {
    /* Контейнер товаров */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Сетка товаров - 2 колонки */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    /* Карточка товара */
    .product-card {
        border-radius: 12px !important;
        padding: 8px !important;
    }

    .product-card img {
        border-radius: 10px !important;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .product-card h5 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 8px 0 4px !important;
        min-height: auto !important;
    }

    .product-card p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .product-card .price {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .product-card .btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }
}

/* ========================================
   MODAL / МОДАЛЬНЫЕ ОКНА
   ======================================== */

@media (max-width: 991px) {
    /* Модалка товара */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }

    .modal-content .row {
        flex-direction: column;
    }

    .modal-left,
    .modal-right {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }

    .modal-left img {
        max-height: 250px !important;
        width: 100%;
        object-fit: cover;
    }

    #modal-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    #modal-desc,
    #modal-details {
        font-size: 13px !important;
    }

    /* Кнопки размеров/теста */
    .size-select .btn,
    .crust-select .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Добавки */
    .toppings-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .topping-card {
        padding: 6px !important;
        border-radius: 12px !important;
    }

    .topping-card img {
        height: 50px !important;
        margin-bottom: 4px !important;
    }

    .topping-name {
        font-size: 10px !important;
        min-height: auto !important;
    }

    .topping-price1 {
        font-size: 12px !important;
    }

    /* Кнопка добавления в корзину */
    #addToCartBtn {
        font-size: 14px !important;
        padding: 12px !important;
        position: sticky;
        bottom: 0;
        background: rgb(255, 105, 0) !important;
    }

    /* Кастомные модалки — прижимаем к низу экрана */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-overlay .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0 !important;
    }
}

/* ========================================
   CART / КОРЗИНА
   ======================================== */

@media (max-width: 991px) {
    /* Скрываем боковую корзину */
    .cart-panel,
    #cartPanel {
        display: none !important;
    }

    /* Плавающая кнопка корзины */
    .cart-mobile-btn {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgb(255, 105, 0);
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        padding: 14px 20px;
        border: none;
        text-align: left;
        z-index: 2000;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .cart-mobile-btn:active {
        transform: scale(0.98);
    }

    .cart-mobile-btn .cart-count {
        background: rgba(255,255,255,0.2);
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    /* Sidebar корзина на весь экран */
    .cart-sidebar {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important;
        display: none;
    }

    .cart-sidebar.show {
        display: block !important;
    }

    .cart-sidebar-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(4px);
    }

    .cart-sidebar-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        background: #2b2b2b;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        overflow-y: auto;
    }

    .cart-sidebar-content .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 32px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1;
    }

    /* Элементы корзины */
    .cart-row {
        padding: 10px 0 !important;
        border-bottom: 1px solid #3a3a3a;
    }

    .cart-thumb {
        width: 60px !important;
        height: 60px !important;
    }

    .cart-title {
        font-size: 13px !important;
    }

    .cart-sub,
    .cart-meta {
        font-size: 11px !important;
    }

    .cart-price {
        font-size: 14px !important;
    }

    .qty-pill {
        padding: 4px 8px !important;
    }

    /* Форма оформления */
    #orderForm {
        margin-top: 15px !important;
    }

    #orderForm .form-label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    #orderForm .form-control {
        font-size: 14px !important;
        padding: 10px !important;
    }

    #orderForm .btn-group {
        flex-direction: column;
    }

    #orderForm .btn-group .btn {
        border-radius: 8px !important;
        margin-bottom: 8px;
    }

    #placeOrderBtn {
        position: sticky;
        bottom: 0;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        margin-top: 15px !important;
    }
}

/* ========================================
   STORIES / ИСТОРИИ
   ======================================== */

@media (max-width: 991px) {
    .stories {
        margin: 10px 0 15px !important;
    }

    .story-thumb {
        height: 160px !important;
        border-radius: 12px !important;
    }

    .story-title {
        font-size: 11px !important;
    }

    /* Просмотр истории */
    .story-viewer {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-width: 100%;
    }

    .sv-close {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 24px !important;
    }
}

/* ========================================
   FOOTER / ФУТЕР
   ======================================== */

@media (max-width: 991px) {
    footer {
        padding: 30px 15px 80px !important; /* +80px для кнопки корзины */
    }

    footer .container {
        padding: 0 !important;
    }

    footer .row {
        margin: 0 !important;
    }

    footer .col-lg-8,
    footer .col-lg-4,
    footer .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* Меню в футере */
    footer .menu_bottom ul {
        flex-direction: column !important;
        gap: 8px !important;
        float: none !important;
        align-items: center;
        padding: 0 !important;
    }

    footer .nav-link {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Реквизиты */
    footer .footer-row {
        margin-top: 20px !important;
        flex-direction: column;
        gap: 15px;
        text-align: center !important;
    }

    footer .text-left,
    footer .text-right {
        text-align: center !important;
    }

    footer .soc-bot {
        margin: 0 8px !important;
    }

    footer img {
        height: 25px !important;
    }
}

/* ========================================
   МОДАЛЬНЫЕ ОКНА (Store, Time, Auth)
   ======================================== */

@media (max-width: 991px) {
    /* Модалка выбора магазина */
    .modal-store .box {
        width: 100% !important;
        max-width: 100%;
        border-radius: 20px 20px 0 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .modal-store .map {
        height: 300px !important;
    }

    /* Time popover */
    .time-popover {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        border-radius: 20px 20px 0 0 !important;
        min-width: 100% !important;
        max-height: 80vh;
        overflow-y: auto;
    }

    .time-option {
        padding: 12px 0 !important;
        font-size: 18px !important;
    }

    /* Модалка авторизации */
    .modal-dialog-centered {
        align-items: flex-end !important;
    }

    #authModal .modal-content {
        border-radius: 20px 20px 0 0 !important;
    }

    #authModal input {
        font-size: 20px !important;
    }

    #authModal .btn {
        padding: 12px 20px !important;
    }
}

/* ========================================
   УТИЛИТАРНЫЕ КЛАССЫ
   ======================================== */

@media (max-width: 991px) {
    /* Скрыть на мобильных */
    .d-lg-block {
        display: none !important;
    }

    /* Отступы */
    .py-5 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .my-5 {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Заголовки */
    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 16px !important;
    }

    h5 {
        font-size: 14px !important;
    }
}

/* ========================================
   ОПТИМИЗАЦИИ ДЛЯ ПРОИЗВОДИТЕЛЬНОСТИ
   ======================================== */

@media (max-width: 991px) {
    /* Плавная прокрутка */
    html {
        scroll-behavior: smooth;
    }

    /* Оптимизация анимаций */
    * {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }

    /* Убираем transitions при прокрутке */
    .scrolling * {
        transition: none !important;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION / АЛЬБОМНАЯ
   ======================================== */

@media (max-width: 991px) and (orientation: landscape) {
    .header-top {
        padding: 8px 0 !important;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

    .story-viewer {
        margin: 10px auto !important;
        max-height: 95vh;
    }
}

/* ========================================
   SMALL DEVICES (до 576px)
   ======================================== */

@media (max-width: 575px) {
    /* Еще более компактная версия */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .product-card h5 {
        font-size: 13px !important;
    }

    .product-card p {
        font-size: 10px !important;
    }

    .toppings-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pill {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Дополнительная оптимизация для темной темы */
    body {
        background: #1a1a1a;
    }
}

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

@media (max-width: 991px) {
    /* Увеличиваем область нажатия */
    button,
    a,
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Фокус для клавиатуры */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible {
        outline: 2px solid rgb(255, 105, 0);
        outline-offset: 2px;
    }
}