/* ============================================================================
   ПЛОТНИК — Mobile / Tablet RWD Optimizations
   Подключается на всех страницах после Tailwind CDN.
   Не переопределяет десктопную логику, только ≤1024px (tablet) и ≤768px (mobile).
   ========================================================================== */

/* ---------- 1. Глобальная защита от горизонтального скролла ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
table { table-layout: auto; }
pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* ---------- Фиксация кнопки AI-агента: всегда поверх и не теряется ---------- */
:root { --mo-cookie-h: 0px; }

/* AI-виджет выше cookie-баннера (z-9999) и overlay (z-9998), но ниже drawer.
   При открытом drawer прячем виджет и quickbar (см. ниже), поэтому z-index 10002 безопасен. */
#ai-widget-container {
    z-index: 10002 !important;
    bottom: calc(2rem + var(--mo-cookie-h, 0px)) !important;
}

/* Плавающая панель мессенджеров тоже поднимается над cookie-баннером */
.mo-quickbar {
    bottom: calc(0.75rem + var(--mo-cookie-h, 0px)) !important;
}

/* Когда открыт мобильный drawer — прячем AI-виджет и quickbar,
   чтобы они не висели поверх выезжающего меню */
body.mo-no-scroll #ai-widget-container,
body.mo-no-scroll .mo-quickbar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ============================================================================ */
@media (max-width: 1024px) {

    /* ---------- 2. Шапка / навигация (tablet) ---------- */
    nav.fixed.w-full { padding: 0.6rem 0.75rem !important; }
    nav .max-w-7xl { padding: 0.75rem 0.85rem !important; gap: 0.5rem; flex-wrap: wrap; }

    nav a.text-xl,
    nav a.text-2xl { font-size: 1.15rem !important; letter-spacing: -0.02em; }

    /* ---------- Touch-таргеты ≥48px ---------- */
    nav a,
    nav button,
    .dropdown-link { min-height: 48px; display: inline-flex; align-items: center; }

    /* ---------- Кнопки-CTA ---------- */
    a[class*="bg-white"],
    a[class*="bg-cyan"],
    button[class*="bg-white"],
    button[class*="bg-cyan"] {
        min-height: 48px;
        display: inline-flex; align-items: center; justify-content: center; text-align: center;
    }

    /* ---------- 3. Сетки → адаптив на tablet ---------- */
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.grid-cols-5,
    .grid.grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* ---------- Flex-ряды с кнопками переносятся ---------- */
    .flex.gap-4,
    .flex.gap-6,
    .flex.gap-8 { flex-wrap: wrap; row-gap: 0.75rem; }

    /* ---------- Гамбургер + компактные иконки в шапке (≤1024) ---------- */
    .mo-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 48px; height: 48px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 0.75rem; cursor: pointer; color: #fff;
        transition: background 0.2s ease, border-color 0.2s ease;
    }
    .mo-hamburger:hover, .mo-hamburger:focus-visible {
        background: rgba(0,242,255,0.08); border-color: rgba(0,242,255,0.5); outline: none;
    }
    .mo-hamburger span {
        display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.2s ease;
    }
    .mo-hamburger span + span { margin-top: 5px; }
    .mo-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mo-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .mo-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mo-nav-cta {
        display: inline-flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; border-radius: 0.75rem;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.03); color: #e5e5e5;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .mo-nav-cta:hover, .mo-nav-cta:focus-visible { outline: none; }
    .mo-nav-cta--call:hover { border-color: rgba(0,242,255,0.6); color: #00f2ff; background: rgba(0,242,255,0.08); }
    .mo-nav-cta--tg:hover  { border-color: rgba(0,242,255,0.6); color: #00f2ff; background: rgba(0,242,255,0.08); }
}
/* ============================================================================ */
@media (max-width: 768px) {

    /* ---------- 1. Сетка → одна колонка на mobile ---------- */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.grid-cols-5,
    .grid.grid-cols-6 { grid-template-columns: 1fr !important; }

    /* ---------- 2. Шапка: прячем «сырые» длинные элементы ---------- */
    nav .phone-wave { display: none !important; }
    nav .hidden.sm\:flex { display: none !important; }
    nav .hidden.md\:flex { display: none !important; }
    .mo-nav-cta { display: inline-flex !important; }

    /* ---------- 2b. Классический mobile-хедер: лого слева, кнопки справа ---------- */
    /* justify-between: логотип прижат влево, кластер кнопок (TG/Call/меню) — вправо */
    nav .max-w-7xl {
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    /* Логотип не сжимается и не растягивается */
    nav .max-w-7xl > .flex.items-center.gap-2 { flex: 0 0 auto; }
    /* Десктоп-навигация скрыта — не занимает место */
    nav .hidden.lg\:flex { display: none !important; }
    /* Кластер кнопок: уплотняем TG/Call/меню вплотную друг к другу у правого края */
    nav .flex.items-center.gap-6,
    nav .flex.items-center.gap-4 {
        gap: 0.4rem !important;
        margin-left: auto !important;
        flex: 0 0 auto;
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* ---------- 3. Контейнеры / отступы 16–20px ---------- */
    section, main, header, footer, .max-w-7xl {
        padding-left: 1rem !important; padding-right: 1rem !important;
    }
    section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

    /* ---------- 4. Типографика — адаптивный масштаб ---------- */
    h1 { font-size: clamp(2rem, 9vw, 2.75rem) !important; line-height: 0.98 !important; letter-spacing: -0.02em !important; }
    h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.05 !important; }
    h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; line-height: 1.15 !important; }
    h4 { font-size: 1.05rem !important; }

    .text-6xl, .text-7xl, .text-8xl, .text-9xl { font-size: clamp(2rem, 10vw, 3rem) !important; line-height: 0.95 !important; }
    .text-5xl { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; line-height: 1 !important; }
    .text-4xl { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.05 !important; }

    /* ---------- 5. Карточки — выравнивание высот / padding ---------- */
    .bento-card, [class*="bento-card"] { padding: 1.25rem !important; min-height: auto; }

    /* ---------- 6. Кнопки / CTA — finger-friendly ---------- */
    a[class*="bg-white"], a[class*="bg-cyan"],
    button[class*="bg-white"], button[class*="bg-cyan"],
    a.inline-block {
        min-height: 48px;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.9rem !important; width: auto;
    }

    /* ---------- 7. Аккордеоны / pricing ---------- */
    .accordion-item.active .accordion-content { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .accordion-item { padding: 1.1rem 1.25rem !important; }

    /* ---------- 8. AI-чат виджет на mobile ---------- */
    #ai-widget-container { bottom: calc(0.75rem + var(--mo-cookie-h, 0px)) !important; right: 0.75rem !important; }
    #ai-toggle-btn { width: 3.75rem !important; height: 3.75rem !important; }
}
/* ---------- 9. Плавающая панель мессенджеров ---------- */
.mo-quickbar {
    position: fixed;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 9997;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mo-quickbar__btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(8,8,8,0.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.mo-quickbar__btn:hover, .mo-quickbar__btn:focus-visible { transform: translateY(-2px); outline: none; }
.mo-quickbar__btn--tg   { color: #00f2ff; border-color: rgba(0,242,255,0.45); }
.mo-quickbar__btn--wa   { color: #25d366; border-color: rgba(37,211,102,0.45); }
.mo-quickbar__btn--call { color: #fff;     border-color: rgba(255,255,255,0.3); }
.mo-quickbar__btn svg { width: 22px; height: 22px; }

/* ---------- 10. Drawer (выезжающее мобильное меню) ---------- */
.mo-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 9998;
}
.mo-overlay.is-open { opacity: 1; visibility: visible; }

.mo-drawer {
    position: fixed; top: 0; right: 0;
    height: 100dvh; height: 100vh;
    width: min(86vw, 360px); max-width: 100vw;
    background: rgba(8,8,8,0.96);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-left: 1px solid rgba(255,255,255,0.1);
    box-shadow: -30px 0 80px rgba(0,0,0,0.85);
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10000;
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
}
.mo-drawer.is-open { transform: translateX(0); }

.mo-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky; top: 0;
    background: rgba(8,8,8,0.95);
    backdrop-filter: blur(14px); z-index: 2;
}
.mo-drawer__brand { font-size: 1.25rem; font-weight: 900; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.mo-drawer__close {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 0.75rem;
    background: transparent; color: #fff; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mo-drawer__close:hover { background: rgba(255,255,255,0.06); border-color: rgba(0,242,255,0.5); }

.mo-drawer__body { padding: 1rem 1.25rem 0.5rem; }
.mo-drawer__group { margin-top: 1.25rem; margin-bottom: 0.5rem; }
.mo-drawer__group:first-child { margin-top: 0; }
.mo-drawer__grouptitle {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: #00f2ff;
    font-style: italic; margin: 0 0 0.5rem;
}
.mo-drawer__link {
    display: flex; align-items: center; min-height: 48px;
    padding: 0.75rem 0.5rem;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: #d4d4d4;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.mo-drawer__link:hover, .mo-drawer__link:focus-visible { color: #00f2ff; padding-left: 0.9rem; outline: none; }

.mo-drawer__foot {
    margin-top: auto; padding: 1.1rem 1.25rem 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: 'JetBrains Mono', monospace;
}
.mo-drawer__footlabel { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.6rem; }
.mo-drawer__phone {
    display: flex; align-items: center; gap: 0.5rem; min-height: 48px;
    font-size: 1rem; font-weight: 700; color: #00f2ff; margin-bottom: 0.75rem;
}
.mo-drawer__messengers { display: flex; gap: 0.6rem; }
.mo-drawer__messenger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.mo-drawer__messenger:hover { outline: none; }
.mo-drawer__messenger--tg:hover { border-color: rgba(0,242,255,0.6); color: #00f2ff; }
.mo-drawer__messenger--wa:hover { border-color: rgba(37,211,102,0.6); color: #25d366; }
.mo-drawer__lang { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }

body.mo-no-scroll { overflow: hidden; position: fixed; width: 100%; }

/* На десктопе (>1024px) плавающая панель и компактные иконки шапки скрыты */
@media (min-width: 1025px) {
    .mo-quickbar, .mo-hamburger, .mo-nav-cta { display: none !important; }
}

/* Очень узкие экраны (320–360px) */
@media (max-width: 360px) {
    nav .max-w-7xl { padding: 0.6rem 0.65rem !important; }
    nav a.text-xl, nav a.text-2xl { font-size: 1.05rem !important; }
    h1 { font-size: 1.95rem !important; }
    .mo-drawer { width: 92vw; }
}