/* ============================================================
   enesay.ru — shared/css/base.css
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    margin: 0;
    padding: 0;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hi); }
::selection { background: var(--accent-soft); color: var(--fg); }


/* ============================================================
   СБРОС БРАУЗЕРНЫХ АРТЕФАКТОВ
   ============================================================ */
button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}
button:focus, button:focus-visible,
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
a:focus, a:focus-visible {
    outline: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fg);
    transition: background-color 9999s ease-in-out 0s;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
}
.app-shell > * { position: relative; z-index: 1; }

.app-shell.has-gradient::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 40% at 20% 0%, var(--grad-blue) 0%, transparent 60%),
        radial-gradient(50% 35% at 90% 10%, var(--grad-purple) 0%, transparent 65%),
        radial-gradient(45% 30% at 50% 100%, var(--grad-pink) 0%, transparent 70%);
    opacity: .35;
}

/* ============================================================
   CONTENT
   ============================================================ */
.content {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    overflow: visible;
    padding: var(--s-6);
    padding-left: max(var(--s-6), env(safe-area-inset-left, 0px));
    padding-right: max(var(--s-6), env(safe-area-inset-right, 0px));
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   TABBAR — СНИЗУ, safe-area
   ============================================================ */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    min-height: 56px;
    padding: 6px 8px;
    padding-bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) - 10px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    margin: 0;
    background: var(--glass-bg-strong);
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border);
}
.tabbar .tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--fg-mute);
    font-size: var(--fs-xs);
    font-weight: var(--fw-med);
    letter-spacing: var(--ls-loose);
    text-decoration: none;
    border-radius: var(--r-2);
    transition: color var(--t-fast) var(--ease);
    min-width: 0;
}
.tabbar .tab:hover { color: var(--fg-dim); }
.tabbar .tab.active { color: var(--accent); }
.tabbar .tab svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: transform var(--t-fast) var(--ease);
}
.tabbar .tab:active svg { transform: scale(.9); }
.tabbar .tab span {
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ============================================================
   ЗАГОЛОВКИ
   ============================================================ */
h1, h2, h3 { margin: 0; color: var(--fg); }
h1 {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}
h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug);
}
h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug);
}
h2.section {
    font-size: var(--fs-sm);
    font-weight: var(--fw-med);
    color: var(--fg-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    line-height: 1.3;
    margin: var(--s-8) 0 var(--s-3);
}
h2.section:first-child { margin-top: 0; }

/* ============================================================
   MOBILE (< 640)
   ============================================================ */
@media (max-width: 640px) {
    .content {
        padding: var(--s-5);
        padding-left: max(var(--s-5), env(safe-area-inset-left, 0px));
        padding-right: max(var(--s-5), env(safe-area-inset-right, 0px));
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   УЗКИЙ МОБИЛЬНЫЙ (< 400)
   ============================================================ */
@media (max-width: 400px) {
    .content {
        padding: var(--s-4);
        padding-left: max(var(--s-4), env(safe-area-inset-left, 0px));
        padding-right: max(var(--s-4), env(safe-area-inset-right, 0px));
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
    .tabbar {
        padding-top: 4px;
    }
    .tabbar .tab { padding: 4px 2px; gap: 2px; }
    .tabbar .tab svg { width: 22px; height: 22px; }
    .tabbar .tab span { font-size: 10px; }
}

/* ============================================================
   ПЛАНШЕТ / ПК (>= 900)
   ============================================================ */
@media (min-width: 900px) {
    .content {
        padding: var(--s-8);
        padding-bottom: var(--s-8);
        max-width: var(--content-max);
        margin: 0 auto;
    }
    .tabbar {
        padding-bottom: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* PWA / Safari — отступ сверху под статус-бар iPhone */
.content {
    padding-top: max(var(--s-6), env(safe-area-inset-top, 0px)) !important;
}

@media (max-width: 640px) {
    .content {
        padding-top: max(var(--s-5), env(safe-area-inset-top, 0px)) !important;
    }
}

@media (max-width: 400px) {
    .content {
        padding-top: max(var(--s-4), env(safe-area-inset-top, 0px)) !important;
    }
}

@media (min-width: 900px) {
    .content {
        padding-top: var(--s-8) !important;
    }
}

/* ============================================================
   ПК (≥ 900px) — сайдбар слева
   ============================================================ */
@media (min-width: 900px) {
    .content {
        margin-left: 240px !important;
        margin-right: 0 !important;
        padding: var(--s-8) !important;
        max-width: none !important;
    }
    .tabbar {
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 240px !important;
        min-height: 0 !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: var(--s-5) var(--s-3) !important;
        padding-left: max(var(--s-3), env(safe-area-inset-left, 0px)) !important;
        border-top: none !important;
        border-right: 1px solid var(--glass-border) !important;
        border-bottom: none !important;
        overflow-y: auto !important;
    }
    .tabbar .tab {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: var(--s-3) !important;
        padding: 12px var(--s-3) !important;
        font-size: var(--fs-md) !important;
        letter-spacing: var(--ls-base) !important;
        text-transform: none !important;
        border-radius: var(--r-2) !important;
        color: var(--fg-dim) !important;
    }
    .tabbar .tab:hover {
        color: var(--fg) !important;
        background: rgba(255,255,255,.06) !important;
    }
    .tabbar .tab.active {
        color: var(--fg) !important;
        background: rgba(255,255,255,.08) !important;
    }
    .tabbar .tab.active svg {
        color: var(--accent) !important;
    }
    .tabbar .tab svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 auto !important;
    }
    .tabbar .tab span {
        font-size: var(--fs-md) !important;
        font-weight: var(--fw-med) !important;
        line-height: 1.2 !important;
    }
}

/* ============================================================
   ПК (≥ 900px) — правильное центрирование и ширина контента
   ============================================================ */
@media (min-width: 900px) {
    /* контейнер контента — центрируется в области справа от сайдбара */
    .app-shell.has-tabbar > .content,
    .content {
        margin-left: 240px !important;
        margin-right: 0 !important;
        padding: var(--s-8) var(--s-10) !important;
        max-width: none !important;
        width: auto !important;
        display: block !important;
    }

    /* внутренний ограничитель — центрирует блоки контента */
    .app-shell.has-tabbar > .content > * {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* но флекс-элементы не должны центрироваться */
    .app-shell.has-tabbar > .content > .hero-card,
    .app-shell.has-tabbar > .content > .quick-grid,
    .app-shell.has-tabbar > .content > .ads-list {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* очень широкий экран (≥ 1400px) — чуть больше */
@media (min-width: 1400px) {
    .app-shell.has-tabbar > .content {
        padding: var(--s-10) var(--s-12) !important;
    }
    .app-shell.has-tabbar > .content > *,
    .app-shell.has-tabbar > .content > .hero-card,
    .app-shell.has-tabbar > .content > .quick-grid,
    .app-shell.has-tabbar > .content > .ads-list {
        max-width: 1080px;
    }
}