/* ========================================= */
/* MOBILE.CSS - ТАЧ-ПРИСТРОЇ (MOBILE+TABLET) */
/* ========================================= */

/* ДЕТЕКЦІЯ РЕЖИМУ ЧЕРЕЗ CSS */
body::before {
  content: 'desktop';
  display: none;
}

/* ========================================= */
/* ТАЧ-ПРИСТРОЇ: MOBILE + TABLET + МОНОБЛОК  */
/* (pointer: coarse) - Є тач-екран           */
/* ========================================= */
@media (pointer: coarse) {
    body::before {
        content: 'mobile';
    }

    /* ===== BODY & LAYOUT ===== */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .header {
        flex-shrink: 0;
    }

    .navigator {
        flex-shrink: 0;
        position: relative;
    }

    .main-content {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden;
        min-height: 0;
    }

    .footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
    }

    /* ===== HEADER ===== */
    .header-qr,
    .header-qr-placeholder {
        display: none !important;
    }

    .header {
        padding: 10px !important;
    }

    .header-left img,
    .header-right img,
    .header-logo-center-left,
    .header-logo-center-right {
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .header-right {
        display: flex !important;
    }

    .header-title {
        font-size: 20px !important;
    }

    .header-subtitle {
        font-size: 11px !important;
    }

    .header-clock {
        display: none !important;
    }

    /* ===== NAVIGATOR ===== */
    .navigator {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px !important;
    }

    .nav-buttons {
        display: flex;
        gap: 10px;
        flex-shrink: 0;
    }

    .nav-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
    }

    .nav-search {
        flex: 1;
        min-width: 0;
        position: relative;
    }

    .nav-search::before {
        display: none !important;
    }

    .nav-search input {
        width: 100%;
        font-size: 14px;
        padding: 12px 15px !important;
    }

    /* ===== BURGER ===== */
    .burger-icon {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #667eea;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        border: none;
        outline: none;
        padding: 0 !important;
    }

    .burger-icon svg {
        width: 24px;
        height: 24px;
        fill: white;
        transition: transform 0.3s ease;
    }

    .burger-icon:active {
        background: #5568d3;
        transform: scale(1.05);
    }

    .burger-icon.active {
        background: #764ba2;
    }

    .burger-icon.active svg {
        transform: rotate(90deg);
    }

    /* ===== BREADCRUMBS (BURGER MENU) ===== */
    .breadcrumbs {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 12px 12px;
        z-index: 200;

        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .breadcrumbs.mobile-open {
        max-height: 320px;
        opacity: 1;
        pointer-events: all;
    }

    .breadcrumbs.mobile-open .breadcrumb-item {
        padding: 14px 20px;
        font-size: 14px;
        border-radius: 0;
    }

    .breadcrumbs.mobile-open .breadcrumb-separator {
        display: none;
    }

    /* ===== GRID ===== */
    .main-content {
        padding: 15px;
    }

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

    .button {
        height: 180px !important;
    }

    .item-image-section {
        padding: 10px;
    }

    .item-category {
        top: 8px;
        right: 8px;
        font-size: 7px;
        padding: 3px 8px;
    }

    .item-name {
        font-size: 13px;
    }

    .item-description {
        font-size: 12px;
    }

    .iframe-container {
        min-height: 400px;
    }

    /* ===== SLIDER ===== */
    .slider-image-wrapper {
        width: 85vw;
        height: 50vh;
    }

    #slider-title {
        font-size: 30px !important;
        padding: 0 5px !important;
        width: calc(100% - 10px) !important;
        max-width: 100% !important;
        letter-spacing: 1px !important;
        line-height: 1.3 !important;
    }

    .slider-qr-corner {
        display: none !important;
    }

    .slider-btn {
        width: 20px;
        height: 20px;
        font-size: 18px;
    }

    .slider-close-btn,
    .slider-hint {
        display: none !important;
    }

    .slider-indicator-wrapper {
        bottom: 15px;
    }

    /* ===== FOOTER ===== */
    .footer {
        padding: 5px !important;
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid rgba(102, 126, 234, 0.1);
        flex-direction: column !important;
        gap: 5px !important;
    }

    .footer-copyright {
        font-size: 10px !important;
        opacity: 0.6;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-links {
        flex-direction: row !important;
        gap: 10px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-link {
        font-size: 11px !important;
        padding: 0 !important;
    }

    .footer-help {
        display: none !important;
    }
}