/* Mijoz saytining qobig'i.

   Panel'ning `layout.css` i ATAYLAB ko'chirilmadi: u admin qobig'i — doimiy
   yon menyu + 4 tabli pastki panel. Mijoz saytiga yon menyu kerak emas:
   yuqorida gorizontal menyu, telefonda pastda tab bar.

   Qoida o'zgarmadi: bu yerda ANIQ RANG yozilmaydi, faqat `tokens.css` dagi
   tokenlar. `components.css` (karta, ro'yxat, tugma, maydon, varaqa, toast)
   panel'dan o'zgarishsiz keladi. */

/* ── Umumiy qobiq ────────────────────────────────────────────────────────── */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* ── Yuqori panel ────────────────────────────────────────────────────────── */
/* Gorizontal chekinish — profil menyusi va o'ng tepadagi xabar ham shu bilan
 * tekislanadi (components.css), shuning uchun bitta o'zgaruvchi. */
:root { --bar-pad-x: var(--sp-5); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--bar-h);
    padding: var(--sp-2) var(--bar-pad-x);
    padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
    background: var(--surface-bar);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-in-out);
}

/* Sahifa pastga suriladi — chiziq paydo bo'ladi (iOS navbar xatti-harakati). */
.topbar.is-scrolled { border-bottom-color: var(--separator); }

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    text-decoration: none;
    color: var(--label);
}

.topbar__logo { height: 22px; width: auto; }

/* Brend so'z-logosi: yorug'/qorong'i variant. Mavzu tokens.css dagi kabi aniqlanadi —
 * <picture> + media yetmaydi, chunki foydalanuvchi rejimni qo'lda ham almashtiradi.
 * Bu klasslarga boshqa joyda `display` berilmasin — aks holda ikkalasi ham ko'rinadi. */
.brand-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-light { display: none; }
    :root:not([data-theme="light"]) .brand-dark { display: inline; }
}
:root[data-theme="dark"] .brand-light { display: none; }
:root[data-theme="dark"] .brand-dark { display: inline; }
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* ── Gorizontal menyu (keng ekran) ───────────────────────────────────────── */
.topnav { display: flex; align-items: center; gap: var(--sp-1); }

.topnav__item {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-pill);
    font: var(--text-subhead);
    color: var(--label-2);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out);
}

.topnav__item:hover { background: var(--fill-4); color: var(--label); }

.topnav__item[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* ── Sahifa ──────────────────────────────────────────────────────────────── */
.page {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-5) var(--sp-12);
}

.page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) 0 var(--sp-5);
}

.page__title { font: var(--text-large-title); letter-spacing: -.022em; }
.page__subtitle { margin-top: var(--sp-1); font: var(--text-subhead); color: var(--label-2); }
.page__head-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* ── Pastki kolontitul ───────────────────────────────────────────────────── */
.site-foot {
    border-top: 1px solid var(--separator);
    padding: var(--sp-6) var(--sp-5);
    padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
    background: var(--surface-sunken);
}

.site-foot__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

.site-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); max-width: var(--content-max); margin: 0 auto; }

.site-foot__links a {
    font: var(--text-footnote);
    color: var(--label-2);
    text-decoration: none;
}

.site-foot__links a:hover { color: var(--accent); }

/* ── Pastki tab bar (faqat telefonda) ────────────────────────────────────── */
.tabbar { display: none; }

/* ── Kirish ekrani ───────────────────────────────────────────────────────── */
/* Telefonda — kartochkasiz, sahifaning o'zi forma (ilovadagi kabi); keng ekranda —
   markazda yumshoq kartochka. */
.auth {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 100dvh;
    padding: calc(var(--sp-12) + var(--sp-8) + env(safe-area-inset-top)) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
    background:
        radial-gradient(900px 520px at 10% -10%, var(--blue-soft), transparent 60%),
        radial-gradient(700px 420px at 100% 0%, var(--purple-soft), transparent 55%),
        var(--surface);
}
.auth__card { width: 100%; max-width: 420px; }
.auth__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.auth__logo { display: flex; margin-bottom: var(--sp-6); }
.auth__logo img { height: 26px; width: auto; }
.auth__title { font: var(--text-large-title); letter-spacing: -.022em; }
.auth__sub { font: var(--text-subhead); color: var(--label-2); line-height: 1.45; }
.auth .stack .btn--filled { margin-top: var(--sp-2); min-height: 50px; border-radius: var(--r-lg); font: var(--text-headline); }
.auth__foot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); margin-top: var(--sp-6); text-align: center; }
.auth__bot { gap: var(--sp-1); color: var(--accent); }
.auth__bot svg { width: 18px; height: 18px; }
.auth__corner {
    position: absolute;
    top: calc(var(--sp-4) + env(safe-area-inset-top));
    right: calc(var(--sp-4) + env(safe-area-inset-right));
}
/* Menyu sarlavha ostida emas — kirish sahifasida tugmaning o'zi ostidan ochiladi (34px — .btn-icon). */
.auth .pop-menu {
    top: calc(var(--sp-4) + 34px + var(--sp-2) + env(safe-area-inset-top));
    right: calc(var(--sp-4) + env(safe-area-inset-right));
}
.auth__card > .field__error { margin-bottom: var(--sp-4); }

@media (min-width: 768px) {
    .auth { align-content: center; padding-block: var(--sp-10); }
    .auth__card {
        padding: var(--sp-10) var(--sp-8) var(--sp-8);
        border-radius: var(--r-2xl);
        background: var(--surface-overlay);
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        box-shadow: var(--shadow-3);
    }
}

/* ── Moslashuvchanlik ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .page { padding-inline: var(--sp-4); }
    :root { --bar-pad-x: var(--sp-4); }
    .topbar { gap: var(--sp-3); }
    .site-foot { padding-inline: var(--sp-4); }
    /* Mehmonda suzuvchi "E'lon berish" tugmasi havolalarni yopmasin — pastdan joy. */
    body:has(.sell-fab) .site-foot { padding-bottom: calc(var(--sp-6) + 52px + var(--sp-4) + env(safe-area-inset-bottom)); }
}

/* Telefonda gorizontal menyu o'rnini pastdagi tab bar oladi. */
@media (max-width: 767px) {
    .topnav { display: none; }

    /* Tab bar faqat kirgan mijozda (kirmaganga yo'q) — bo'sh joy ham faqat o'shanda. */
    .site--tabbar .page {
        padding-bottom: calc(var(--tabbar-space) + var(--sp-10) + env(safe-area-inset-bottom));
    }

    .page__head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
        padding-bottom: var(--sp-4);
    }

    .page__title { font: var(--text-title-1); letter-spacing: -.02em; }

    .page__head-actions {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .page__head-actions::-webkit-scrollbar { display: none; }
    .page__head-actions > * { flex: none; }

    /* Kolontitul tab bar ostida qolib ketmasin. */
    .site--tabbar .site-foot { padding-bottom: calc(var(--tabbar-space) + var(--sp-6) + env(safe-area-inset-bottom)); }
    .site-foot__row { justify-content: center; text-align: center; }

    /* Suzuvchi, chetlardan ajratilgan, ikki tomoni dumaloq (iOS 26 uslubi). */
    .tabbar {
        position: fixed;
        left: var(--tabbar-gap);
        right: var(--tabbar-gap);
        bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
        z-index: 40;
        display: flex;
        align-items: stretch;
        height: var(--tabbar-h);
        padding: 0 var(--sp-2);
        border-radius: var(--r-pill);
        background: var(--surface-bar);
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        box-shadow: 0 0 0 1px var(--separator), var(--shadow-3);
    }

    .tabbar__item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--label-3);
        font: var(--text-caption-2);
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease);
    }

    .tabbar__item svg { width: 24px; height: 24px; }
    .tabbar__icon { position: relative; display: flex; }
    .tabbar__icon .count-badge { position: absolute; top: -5px; left: 15px; }
    /* Uzun nom joylashuvni buzmasin: bir qatorda, sig'masa "…" (asosiy yechim — tab_title). */
    .tabbar__item { min-width: 0; }
    .tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabbar__item:active { transform: scale(.92); }
    .tabbar__item[aria-current="page"] { color: var(--accent); }
}
/* interaction-only: tekshiruv kerak bo'lgandagina ko'rinadi — bo'sh joy qoldirmaymiz. */
.auth__turnstile:empty { display: none; }
.auth__turnstile iframe { display: block; }

/* Filtr oynasi ochiq bo'lganda "E'lon berish" tugmasi uning ustiga chiqmasin. */
body:has(.sheet:not([hidden])) .sell-fab { display: none; }