/* ============================================
   Telegram Mini App — Fullscreen & Safe-area

   Telegram (Bot API 8.0+) пробрасывает в :root:
     --tg-safe-area-inset-*          — челка / статус-бар устройства
     --tg-content-safe-area-inset-*  — собственный UI Telegram (кнопка закрытия)

   Класс body.tg-fullscreen ставит tg_app.js только на мобильных.
   ============================================ */

:root {
    /* Суммарный верхний отступ: статус-бар + панель Telegram */
    --tg-top-inset: calc(
        var(--tg-safe-area-inset-top, 0px)
        + max(46px, var(--tg-content-safe-area-inset-top, 0px))
    );
    --tg-bottom-inset: var(--tg-safe-area-inset-bottom, 0px);
}

/* Боковые отступы (альбомная ориентация, вырезы) */
body.tg-webapp {
    padding-left: var(--tg-safe-area-inset-left, 0px);
    padding-right: var(--tg-safe-area-inset-right, 0px);
}

/* --- Страницы без sticky-шапки: просто опускаем контент --- */
body.tg-fullscreen.page-pad {
    padding-top: var(--tg-top-inset);
}

/* --- Страницы со sticky-шапкой (.header-container из new_goods.css):
       фон шапки продлеваем под панель Telegram --- */
body.tg-fullscreen .header-container {
    padding-top: var(--tg-top-inset);
}

/* --- Checkout / подарочный сертификат: sticky .header --- */
body.tg-fullscreen.page-sticky-title .header {
    padding-top: calc(var(--tg-top-inset) + 14px);
}

/* --- Карты (выбор ПВЗ): плавающая строка поиска ниже панели Telegram --- */
body.tg-fullscreen.page-map .search-container {
    top: calc(var(--tg-top-inset) + 10px);
}

/* --- Нижняя навигация и плавающие кнопки: учитываем нижний inset --- */
body.tg-fullscreen .ds-bottom-nav,
body.tg-fullscreen .bottom-nav {
    padding-bottom: max(10px, env(safe-area-inset-bottom), var(--tg-bottom-inset));
}

body.tg-fullscreen .floating-cart-button {
    margin-bottom: var(--tg-bottom-inset);
}

/* --- Тост профиля («Ваш баланс баллов»): в fullscreen опускаем ниже
       системного бара Telegram, иначе он налезает на панель. --- */
body.tg-fullscreen .user-profile {
    top: calc(var(--tg-top-inset) + 10px);
}

/* --- Тосты-уведомления («Товар добавлен в корзину» и т.п.): в fullscreen
       якорь top:16px уводит их под системный бар Telegram — опускаем ниже
       инсета, иначе тост «улетает» наверх и не виден. --- */
body.tg-fullscreen .notification,
body.tg-fullscreen #notification,
body.tg-fullscreen .ds-toast {
    top: calc(var(--tg-top-inset) + 12px);
}

/* ============================================================
   Верхний системный бар Telegram как «капсула» бренда/заголовка.

   В fullscreen контент страницы уходит под бар Telegram, а сам бар
   (зона --tg-top-inset) остаётся свободным по центру. Туда мы и
   помещаем: на главной — логотип, на внутренних страницах — заголовок
   раздела. Общая геометрия описана переменными --tg-bar-h/--brand-h.
   ============================================================ */

/* --- Заголовок раздела (внутренние страницы) --- */
.tg-section-title { display: none; }

body.tg-fullscreen .tg-section-title {
    --brand-h: 36px;
    --tg-bar-h: max(46px, var(--tg-content-safe-area-inset-top, 46px));
    position: fixed;
    top: calc(var(--tg-safe-area-inset-top, 0px) + (var(--tg-bar-h) - var(--brand-h)) / 2);
    left: 50%;
    transform: translateX(-50%);
    height: var(--brand-h);
    max-width: 60vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--color-text, #1C1C1E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2410;
    pointer-events: none;
}

/* Каталог: собственная «шапка» с дублирующим заголовком/кнопкой назад
   прячется — её роль берут нативная кнопка Telegram и .tg-section-title. */
body.tg-fullscreen .cat-header { display: none; }

/* --- Не-fullscreen (десктоп Telegram, браузер): системного бара нет, а
       большой центральный логотип съедает вертикаль и толкает поиск вниз.
       Бренд считывается по плашке адреса и плейсхолдеру поиска, поэтому
       блок логотипа здесь скрываем целиком. --- */
body.iherb-home:not(.tg-fullscreen) .logo-section { display: none; }

/* --- Главная: логотип переезжает в системный бар Telegram по центру --- */
body.tg-fullscreen.iherb-home .logo-section {
    --brand-h: 40px;
    --tg-bar-h: max(46px, var(--tg-content-safe-area-inset-top, 46px));
    position: fixed;
    top: calc(var(--tg-safe-area-inset-top, 0px) + (var(--tg-bar-h) - var(--brand-h)) / 2);
    left: 50%;
    transform: translateX(-50%);
    height: var(--brand-h);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70vw;
    z-index: 2410;
    pointer-events: none;
}

body.tg-fullscreen.iherb-home .logo-section .text-logo {
    font-size: 26px;
    letter-spacing: -1px;
    line-height: 1;
}

/* Логотип уехал наверх — подтягиваем остальные блоки, чтобы не осталось
   пустоты и композиция читалась цельно. */
body.tg-fullscreen.iherb-home .location-blocks {
    margin-top: var(--space-4, 4px);
}

/* --- Дублирующие кнопки «назад/домой» слева сверху.
       Внутри Telegram есть нативная кнопка «Назад», поэтому свои прячем.
       Вне Telegram (обычный браузер) класс tg-inapp не ставится — кнопки
       остаются видимыми. --- */
body.tg-inapp .home-button,
body.tg-inapp .back-button,
body.tg-inapp .cat-back-btn {
    display: none;
}

/* Плавное появление контента (нативное ощущение) */
@media (prefers-reduced-motion: no-preference) {
    body.tg-webapp {
        animation: tg-view-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes tg-view-in {
        from {
            opacity: 0.01;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}