/*
 * Komponentlar. Har biri iOS'dagi muqobiliga qarab yasalgan:
 *   .card      → grouped section / kartochka
 *   .list      → inset grouped table view
 *   .btn       → filled / tinted / gray / plain tugmalar
 *   .seg       → segmented control
 *   .switch    → UISwitch
 *   .sheet     → modal sheet (telefonda pastdan, katta ekranda markazda)
 *   .toast     → qisqa bildirishnoma
 */

/* ── Belgi (sprite'dan chiqadigan svg) ──────────────────────────────────── */
/* `fill` va `stroke` meros oladigan xossalar — `<use>` chegarasidan o'tadi,
   shuning uchun uslub shu yerda, sprite ichida emas. */
.ic {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ic--sm { width: 16px; height: 16px; }
.ic--lg { width: 26px; height: 26px; }

/* ── Karta ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface-raised);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.card--flat { box-shadow: none; border: 1px solid var(--separator); }
.card--pad { padding: var(--sp-5); }

.card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--separator);
}

.card__title { font: var(--text-headline); letter-spacing: -.012em; }
.card__sub { font: var(--text-footnote); color: var(--label-2); }
.card__body { padding: var(--sp-5); }
.card__foot {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--separator);
    background: var(--fill-4);
}

/* Bo'lim sarlavhasi (iOS'dagi guruh ustidagi kichik yozuv) */
.group-label {
    padding: 0 var(--sp-4) var(--sp-2);
    font: var(--text-caption);
    color: var(--label-2);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.group-note { padding: var(--sp-2) var(--sp-4) 0; font: var(--text-footnote); color: var(--label-2); }

/* ── Ro'yxat (inset grouped) ─────────────────────────────────────────────── */
.list {
    background: var(--surface-raised);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.list__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    color: var(--label);
    position: relative;
    transition: background var(--dur-fast) var(--ease-in-out);
}

/* Soch tolasi chiziq faqat qatorlar orasida va chapdan ichkariga surilgan. */
.list__row + .list__row::before {
    content: "";
    position: absolute;
    inset: 0 0 auto var(--sp-4);
    height: 1px;
    background: var(--separator);
}

a.list__row:hover, button.list__row:hover { background: var(--fill-4); }
a.list__row:active, button.list__row:active { background: var(--fill-3); }

.list__row--interactive { cursor: pointer; }
.list__icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--fill-3);
    color: var(--label-2);
}

.list__icon svg { width: 17px; height: 17px; }
.list__icon--accent { background: var(--accent-soft); color: var(--accent); }
.list__icon--green { background: var(--green-soft); color: var(--green); }
.list__icon--red { background: var(--red-soft); color: var(--red); }
.list__icon--orange { background: var(--orange-soft); color: var(--orange); }

.list__text { min-width: 0; flex: 1 1 auto; }
/* Sarlavha va izoh ikki qatorda turadi (iOS'dagi subtitle qatori). */
.list__label { display: block; font: var(--text-body); letter-spacing: -.008em; }
.list__detail { display: block; margin-top: 1px; font: var(--text-footnote); color: var(--label-2); }
.list__value { font: var(--text-callout); color: var(--label-2); text-align: right; white-space: nowrap; }

.chevron { width: 10px; height: 17px; flex: none; color: var(--label-3); }

/* ── Tugmalar ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 36px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    font: var(--text-subhead);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--accent);
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-in-out),
                transform var(--dur-fast) var(--ease),
                opacity var(--dur-fast) linear;
}

.btn svg { width: 17px; height: 17px; }
.btn:hover { background: var(--fill-4); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.btn--filled { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-1); }
.btn--filled:hover { background: color-mix(in oklab, var(--accent) 88%, black); }

.btn--tinted { background: var(--accent-soft); color: var(--accent); }
.btn--tinted:hover { background: color-mix(in oklab, var(--accent-soft) 70%, var(--accent) 12%); }

.btn--gray { background: var(--fill-3); color: var(--label); }
.btn--gray:hover { background: var(--fill-2); }

.btn--danger { background: var(--red); color: #fff; }
.btn--danger:hover { background: color-mix(in oklab, var(--red) 88%, black); }
.btn--danger-tinted { background: var(--red-soft); color: var(--red); }

.btn--lg { min-height: 50px; padding: 0 var(--sp-6); border-radius: var(--r-lg); font: var(--text-headline); }
.btn--sm { min-height: 30px; padding: 0 var(--sp-3); font: var(--text-footnote); font-weight: 600; }
.btn--block { width: 100%; }

/* Faqat belgili dumaloq tugma (navbar uchun) */
.btn-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill);
    color: var(--label);
    background: var(--fill-4);
    transition: background var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease);
}

.btn-icon svg { width: 19px; height: 19px; }
.btn-icon:hover { background: var(--fill-3); }
.btn-icon:active { transform: scale(.92); }

/* ── Chip (topbar holat ko'rsatkichlari) ─────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--fill-4);
    font: var(--text-footnote);
    font-weight: 600;
    color: var(--label);
    transition: background var(--dur-fast) var(--ease-in-out);
}

.chip:hover { background: var(--fill-3); }
.chip svg { width: 16px; height: 16px; color: var(--label-2); }
.chip__dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--green); }
.chip__dot--off { background: var(--label-3); }
.chip__dot--warn { background: var(--orange); }

/* ── Yorliq (badge) ─────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--gray-soft);
    color: var(--label-2);
    font: var(--text-caption);
    white-space: nowrap;
}

.badge--green { background: var(--green-soft); color: color-mix(in oklab, var(--green) 78%, var(--label)); }
.badge--red { background: var(--red-soft); color: color-mix(in oklab, var(--red) 80%, var(--label)); }
.badge--orange { background: var(--orange-soft); color: color-mix(in oklab, var(--orange) 72%, var(--label)); }
.badge--blue { background: var(--blue-soft); color: color-mix(in oklab, var(--blue) 82%, var(--label)); }
.badge--purple { background: var(--purple-soft); color: color-mix(in oklab, var(--purple) 80%, var(--label)); }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--r-pill);
    background: linear-gradient(145deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--purple)));
    color: var(--accent-contrast);
    font: var(--text-subhead);
    font-weight: 700;
    position: relative;
}

.avatar--sm { width: 28px; height: 28px; font: var(--text-caption); font-weight: 700; }
.avatar__dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--red);
    border: 2px solid var(--surface-raised);
}

/* ── Maydonlar ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font: var(--text-footnote); font-weight: 600; color: var(--label-2); }
.field__hint { font: var(--text-footnote); color: var(--label-3); }
.field__error { font: var(--text-footnote); color: var(--red); }

.input, .select, .textarea {
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--fill-4);
    color: var(--label);
    font: var(--text-body);
    transition: background var(--dur-fast) var(--ease-in-out),
                border-color var(--dur-fast) var(--ease-in-out),
                box-shadow var(--dur-fast) var(--ease-in-out);
}

.input::placeholder, .textarea::placeholder { color: var(--label-3); }

/* background-COLOR: qisqa ``background`` .select'ning o'q belgisini (background-image) o'chirib yuborardi.
   Hover — faqat sichqonchali qurilmada: telefonda barmoq tekkanda "qorayib-oqarib" miltillardi. */
@media (hover: hover) {
    .input:hover, .select:hover, .textarea:hover { background-color: var(--fill-3); }
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    background-color: var(--surface-raised);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Tanlov (select) bosilganda tizim ro'yxati ochiladi — katak rangini almashtirmaymiz;
   halqa faqat klaviatura bilan kelinganda. */
.select:focus { background-color: var(--fill-4); border-color: transparent; box-shadow: none; }
/* Chrome select'ni barmoq bilan bosilganda ham :focus-visible deb hisoblaydi — sensorli ekranda halqa yo'q. */
@media (hover: hover) {
    .select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
}

.input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.textarea { min-height: 96px; resize: vertical; }

.select {
    appearance: none;
    padding-right: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    background-size: 11px;
}

/* Telefon: davlat tanlovi + raqam (accounts/login.html, site.js → PhoneInput).
 * JS'siz: oddiy <select> + maydon. JS bo'lsa (.phone--js): <select> shaffof
 * qatlam bo'lib qoladi — bosilganda tizimning o'z tanlov oynasi ochiladi
 * (iOS g'ildirak, Android ro'yxat) — ustida esa bayroq + kod "chip"i. */
.phone { display: flex; gap: var(--sp-2); }
.phone__input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.phone__country { position: relative; display: flex; flex: none; max-width: 48%; }
.phone__chip { display: none; }

.phone--js .phone__country { max-width: none; }
.phone--js .phone__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--fill-4);
    color: var(--label);
    font: var(--text-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-in-out),
                border-color var(--dur-fast) var(--ease-in-out),
                box-shadow var(--dur-fast) var(--ease-in-out);
}
.phone__flag { font-size: 1.15em; line-height: 1; }
/* Kenglik barqaror: +7 va +998 almashganda raqam maydoni "sakramasin". */
.phone--js .phone__chip { min-width: 7.5em; }
.phone__caret { width: 13px; height: 13px; margin-left: auto; color: var(--label-3); }
.phone--js .phone__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* iOS Safari fokusda sahifani kattalashtirmasin */
}
.phone--js .phone__country:hover .phone__chip { background: var(--fill-3); }
.phone--js .phone__country:focus-within .phone__chip {
    background: var(--surface-raised);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Parol maydoni + ko'z tugmasi */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: calc(var(--tap) + var(--sp-1)); }
.input-wrap__btn {
    position: absolute;
    right: var(--sp-2);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    color: var(--label-2);
}

.input-wrap__btn:hover { background: var(--fill-3); }
.input-wrap__btn svg { width: 19px; height: 19px; }

/* Qidiruv maydoni */
.search { position: relative; display: flex; align-items: center; }
.search svg {
    position: absolute;
    left: var(--sp-3);
    width: 17px;
    height: 17px;
    color: var(--label-3);
    pointer-events: none;
}

.search .input { padding-left: calc(var(--sp-3) * 2 + 17px); border-radius: var(--r-md); }

/* ── Segmented control ──────────────────────────────────────────────────── */
.seg {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    gap: 2px;
}

.seg__item {
    position: relative;
    min-height: 30px;
    padding: 0 var(--sp-4);
    border-radius: calc(var(--r-md) - 2px);
    font: var(--text-footnote);
    font-weight: 600;
    color: var(--label);
    transition: background var(--dur) var(--ease), color var(--dur-fast) linear,
                transform var(--dur-fast) var(--ease);
}

.seg__item:active { transform: scale(.96); }

.seg__item[aria-selected="true"],
.seg__item[aria-checked="true"] {
    background: var(--surface-raised);
    box-shadow: var(--shadow-1);
}

/* Bo'luvchi chiziq: tanlanmagan qo'shni bandlar orasida */
.seg__item + .seg__item::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--separator);
}

.seg__item[aria-selected="true"]::before,
.seg__item[aria-selected="true"] + .seg__item::before,
.seg__item[aria-checked="true"]::before,
.seg__item[aria-checked="true"] + .seg__item::before { opacity: 0; }

/* ── Switch ─────────────────────────────────────────────────────────────── */
.switch {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 51px;
    height: 31px;
    border-radius: var(--r-pill);
    background: var(--fill-1);
    transition: background var(--dur) var(--ease-in-out);
    cursor: pointer;
}

.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: var(--r-pill);
    background: #fff;
    box-shadow: var(--shadow-switch);
    transition: transform var(--dur) var(--ease);
}

.switch:has(input:checked) { background: var(--green); }
.switch:has(input:checked) .switch__knob { transform: translateX(20px); }
.switch:has(input:disabled) { opacity: .5; cursor: default; }
.switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Ko'rsatkich kartasi ────────────────────────────────────────────────── */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-raised);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    /* Karta havola bo'lsa ham matn asosiy rangda qoladi — ko'k faqat
       harakat (tugma/havola) uchun ishlatiladi. */
    color: var(--label);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.stat__head { display: flex; align-items: flex-start; gap: var(--sp-2); }

.stat__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--fill-3);
    color: var(--label-2);
}

/* Ohang modifikatorlari asosiy qoidadan KEYIN turadi — aks holda ustunlik
   bir xil bo'lib, rang qo'llanmaydi. */
.stat__icon--accent { background: var(--accent-soft); color: var(--accent); }
.stat__icon--green { background: var(--green-soft); color: var(--green); }
.stat__icon--red { background: var(--red-soft); color: var(--red); }
.stat__icon--orange { background: var(--orange-soft); color: var(--orange); }
.stat__icon--purple { background: var(--purple-soft); color: var(--purple); }

.stat__icon svg { width: 16px; height: 16px; }

.stat__label {
    font: var(--text-footnote);
    font-weight: 600;
    color: var(--label-2);
    /* Uzun sarlavha kesilmasin — ikki qatorgacha o'tadi. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stat__value {
    font: var(--text-title-2);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--label);
}

.stat__unit { font: var(--text-subhead); color: var(--label-2); margin-left: 2px; }

.stat__foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    /* Kartalar bir xil balandlikda bo'lgani uchun izoh pastga yopishadi. */
    margin-top: auto;
    padding-top: var(--sp-1);
    font: var(--text-footnote);
    color: var(--label-2);
}

.trend { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.trend--up { color: var(--green); }
.trend--down { color: var(--red); }

/* ── Jadval ─────────────────────────────────────────────────────────────── */
.table-wrap {
    background: var(--surface-raised);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.table { font: var(--text-subhead); }

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--separator);
    font: var(--text-caption);
    color: var(--label-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
}

.table tbody td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--separator);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-in-out); }
.table tbody tr:hover { background: var(--fill-4); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Bo'sh holat ────────────────────────────────────────────────────────── */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-5);
    text-align: center;
}

.empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-pill);
    background: var(--fill-4);
    color: var(--label-3);
}

.empty__icon svg { width: 26px; height: 26px; }
.empty__title { font: var(--text-headline); }
.empty__text { font: var(--text-subhead); color: var(--label-2); max-width: 36ch; }

/* ── Varaqa (sheet / modal) ─────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.sheet[hidden] { display: none; }

.sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    animation: fade-in var(--dur) var(--ease-out);
}

.sheet__card {
    position: relative;
    overflow: hidden;
    width: min(560px, calc(100vw - var(--sp-8)));
    max-height: min(84dvh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--surface-overlay);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-3);
    animation: sheet-in var(--dur-slow) var(--ease);
}

.sheet__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--separator);
}

.sheet__title { font: var(--text-headline); flex: 1 1 auto; }
/* min-height: 0 — flex ichida suriladigan qism kichraya olsin; aks holda pastki qatorlar
   tugmalar ostida qolib, surib ham bo'lmasdi (filtrdagi "Kelishiladi"). */
.sheet__body { flex: 1 1 auto; min-height: 0; padding: var(--sp-5); overflow-y: auto; overscroll-behavior: contain; }
.sheet__foot {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--separator);
}

.sheet__grabber { display: none; }
.sheet__card:focus { outline: none; }

@media (max-width: 767px) {
    .sheet { place-items: end stretch; }

    .sheet__card {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: sheet-up var(--dur-slow) var(--ease);
    }

    .sheet__grabber {
        display: block;
        width: 36px;
        height: 5px;
        margin: var(--sp-2) auto 0;
        border-radius: var(--r-pill);
        background: var(--fill-1);
    }

    .sheet__foot { flex-direction: column-reverse; }
    .sheet__foot .btn { width: 100%; }
}

/* ── Profil menyusi (layout/_account_menu.html) ──────────────────────────
 * Popover API tepa qatlamda chizadi. Joylashuv qat'iy: tugma doim sticky
 * sarlavhaning o'ng chetida (CSS anchor-positioning'ni hamma brauzer bilmaydi).
 * DIQQAT: `:popover-open` alohida qoidada — eski brauzer uni tushunmasa, ro'yxatdagi
 * QOLGAN selektorlar ham tashlab yuboriladi (zaxira yo'li `.is-open` ishlamay qolardi). */
.account-btn { cursor: pointer; }
.account-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }

.pop-menu {
    display: none;
    position: fixed;
    inset: auto;   /* popover'ning UA uslubi: inset: 0; margin: auto — bekor */
    top: calc(var(--bar-h) + env(safe-area-inset-top));
    right: calc(var(--bar-pad-x, var(--sp-5)) + env(safe-area-inset-right));
    z-index: 90;   /* zaxira yo'l uchun (tepa qatlam bo'lmaganda) */
    width: min(300px, calc(100vw - var(--sp-8)));
    margin: 0;
    padding: var(--sp-2);
    border: 1px solid var(--separator);
    border-radius: var(--r-xl);
    background: var(--surface-overlay);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-3);
    color: var(--label);
}
.pop-menu.is-open { display: block; animation: pop-in var(--dur) var(--ease-out); }
.pop-menu:popover-open { display: block; animation: pop-in var(--dur) var(--ease-out); }

.pop-menu__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--separator);
    margin-bottom: var(--sp-1);
}
.pop-menu__who { min-width: 0; }
.pop-menu__name { font: var(--text-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-menu__phone { font: var(--text-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; }
.pop-menu__group { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
.pop-menu__label { font: var(--text-footnote); font-weight: 600; color: var(--label-2); }
.pop-menu .seg { display: flex; }
.pop-menu .seg__item { flex: 1; padding: 0 var(--sp-2); }
.pop-menu__sep { height: 1px; margin: var(--sp-1) var(--sp-2); background: var(--separator); }
.pop-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    color: var(--label);
    font: var(--text-body);
    text-decoration: none;
}
.pop-menu__item:hover { background: var(--fill-4); }
.pop-menu__item svg { width: 19px; height: 19px; flex: none; color: var(--label-2); }

/* ── Bildirishnoma (toast) ──────────────────────────────────────────────── */
.toast-host {
    position: fixed;
    z-index: 80;
    left: 50%;
    bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(420px, calc(100vw - var(--sp-8)));
    pointer-events: none;
}

/* Sarlavha ostida o'ngda — rejim tugmasi yonida. Sarlavhaning USTIGA emas:
 * aks holda xabar tugmani yopib, uni qayta bosishga xalal beradi. */
.toast-host--top-end {
    top: calc(var(--bar-h) + var(--sp-2) + env(safe-area-inset-top));
    bottom: auto;
    left: auto;
    right: calc(var(--bar-pad-x, var(--sp-4)) + env(safe-area-inset-right));
    transform: none;
    width: min(320px, calc(100vw - var(--sp-8)));
    --toast-dy: -14px; /* yuqoridan tushib keladi */
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--surface-overlay);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--separator);
    box-shadow: var(--shadow-3);
    font: var(--text-subhead);
    animation: toast-in var(--dur) var(--ease-out);
    pointer-events: auto;
}

.toast svg { width: 19px; height: 19px; flex: none; }
.toast--link { color: inherit; text-decoration: none; cursor: pointer; }
/* Telefonda pastki tab bar bor bo'lsa — toast uning ustida (menyuni yopib qo'ymasin). */
@media (max-width: 767px) {
    body:has(.tabbar) .toast-host { bottom: calc(var(--tabbar-space) + var(--sp-3) + env(safe-area-inset-bottom)); }
}
.toast--link .grow { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast--ok svg { color: var(--green); }
.toast--err svg { color: var(--red); }
.toast--info svg { color: var(--accent); }
.toast.is-leaving { animation: toast-out var(--dur) var(--ease-in-out) forwards; }

/* ── Kod kiritish (6 xonali) ────────────────────────────────────────────── */
.code-row { display: flex; gap: var(--sp-2); justify-content: center; }

.code-box {
    width: 46px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--separator);
    border-radius: var(--r-md);
    background: var(--fill-4);
    text-align: center;
    font: var(--text-title-2);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-fast) var(--ease-in-out),
                box-shadow var(--dur-fast) var(--ease-in-out),
                background var(--dur-fast) var(--ease-in-out);
}

.code-box:focus {
    outline: none;
    background: var(--surface-raised);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (max-width: 420px) {
    .code-box { width: 100%; height: 52px; font: var(--text-title-3); }
}

/* ── Yuklanish ──────────────────────────────────────────────────────────── */
.spinner {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    border: 2px solid var(--fill-1);
    border-top-color: var(--accent);
    animation: spin .7s linear infinite;
}

.skeleton {
    background: linear-gradient(90deg, var(--fill-4) 25%, var(--fill-3) 37%, var(--fill-4) 63%);
    background-size: 400% 100%;
    border-radius: var(--r-sm);
    animation: shimmer 1.4s var(--ease-in-out) infinite;
}

.skeleton--text { height: 1em; }
.skeleton--row { height: var(--tap); }

/* HTMX so'rov davomida: element xira bo'ladi */
.htmx-request.is-busy { opacity: .55; pointer-events: none; transition: opacity var(--dur-fast) linear; }

/* ── Animatsiyalar ──────────────────────────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes sheet-in {
    from { opacity: 0; transform: scale(.94) translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* --toast-dy: pastdagi xabar pastdan chiqadi, tepadagi — tepadan (toast-host--top-end). */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(var(--toast-dy, 14px)) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(calc(var(--toast-dy, 14px) * .7)) scale(.97); }
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ── Ustunli grafik ─────────────────────────────────────────────────────── */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 180px;
    padding-top: var(--sp-2);
}

.chart__col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    height: 100%;
    min-width: 0;
}

.chart__bar {
    width: 100%;
    max-width: 22px;
    min-height: 2px;
    border-radius: var(--r-xs) var(--r-xs) 2px 2px;
    background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--indigo)));
    transition: height var(--dur-slow) var(--ease), opacity var(--dur-fast) linear;
}

.chart__col:hover .chart__bar { opacity: .82; }

.chart__tick {
    font: var(--text-caption-2);
    color: var(--label-3);
    font-variant-numeric: tabular-nums;
}

/* Kunlar ko'p bo'lsa har uchinchi belgi ko'rsatiladi. */
@media (max-width: 760px) {
    .chart__col:not(:nth-child(3n + 1)) .chart__tick { visibility: hidden; }
}

/* ── E'lonlar lentasi ───────────────────────────────────────────────────── */
/* eAvtobozor uslubi: brend rangidagi qidiruv bloki, rasmi katta kartochkalar to'ri
   (telefonda 1, planshetda 2, kompyuterda 3 ustun), narx rasm ustida. */
.feed-wrap { padding-bottom: 72px; }   /* suzuvchi "E'lon berish" oxirgi kartochkani yopmasin */

.feed-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-3); margin: var(--sp-1) var(--sp-1) var(--sp-3); }
.feed-head__title { font: var(--text-title-2); letter-spacing: -.015em; }
.feed-head__count { font: var(--text-subhead); color: var(--label-2); }

/* Qidiruv formasi — aylantirganda sarlavha ostida yopishib turadi (ota bloki — butun lenta).
   Fon QATTIQ rang: backdrop-filter filtr oynasini (position: fixed) buzib qo'yardi. */
.feed-top {
    position: sticky;
    top: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
    z-index: 10;
    margin: 0 calc(-1 * var(--sp-1));
    padding: var(--sp-2) var(--sp-1);
    background: var(--surface);
}
.feed-top__bar { display: flex; gap: var(--sp-2); }
.feed-top__field { position: relative; flex: 1 1 auto; min-width: 0; }
.feed-top__field > svg {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    translate: 0 -50%;
    width: 19px;
    height: 19px;
    color: var(--label-2);
    pointer-events: none;
}
.feed-top__field .input {
    min-height: 46px;
    padding-left: calc(var(--sp-3) + 28px);
    border-radius: var(--r-lg);
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-1);
}
.feed-top__field .input::-webkit-search-cancel-button { appearance: none; }

.feed-top__filter {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--r-lg);
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-fast) var(--ease-in-out);
}
.feed-top__filter:active { transform: scale(.94); }
.feed-top__filter svg { width: 21px; height: 21px; }
.feed-top__count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--red);
    color: var(--accent-contrast);
    font: var(--text-caption-2);
    font-weight: 700;
    box-sizing: content-box;
}

/* Marka tugmachalari: o'ng chetda xiralashadi — surish mumkinligi seziladi. */
.feed-chips {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.feed-chips::-webkit-scrollbar { display: none; }
.feed-chips .chip { flex: none; background: var(--surface-raised); box-shadow: var(--shadow-1); }
@media (hover: hover) { .feed-chips .chip:hover { background: var(--fill-3); } }
.feed-chips .chip--active,
.feed-chips .chip--active:hover { background: var(--accent); color: var(--accent-contrast); }
.feed-chips .chip:last-child { margin-right: 28px; }   /* xiralik oxirgisini yopmasin */
.chip__count { font-weight: 500; opacity: .6; }

.feed-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-5) var(--sp-1) var(--sp-3);
}
.feed-meta__range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font: var(--text-footnote);
    color: var(--label-2);
    font-variant-numeric: tabular-nums;
}
.feed-meta__range svg { flex: none; width: 15px; height: 15px; }

/* Saralash — matn ko'rinishidagi tanlov (bosilganda tizimning o'z ro'yxati ochiladi). */
.feed-sort { flex: none; }
.feed-sort__select {
    appearance: none;
    padding: var(--sp-2) calc(var(--sp-2) + 18px) var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--r-pill);
    background: var(--fill-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center / 10px;
    color: var(--label);
    font: var(--text-subhead);
    font-weight: 600;
    cursor: pointer;
}
.feed-sort__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.feed-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-in-out);
}
@media (hover: hover) { .vcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } }
.vcard:has(.vcard__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Rasmlar kartochkaning o'zida varaqlanadi: telefonda surib (scroll-snap), kompyuterda strelka. */
.vcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--fill-4); }
.vcard__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.vcard__track::-webkit-scrollbar { display: none; }
.vcard__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.vcard__slide img { width: 100%; height: 100%; object-fit: cover; }
.vcard__slide--empty { display: grid; place-items: center; color: var(--label-4); }
.vcard__slide--empty svg { width: 52px; height: 52px; }

/* Rasm ustidagi belgilar barmoq surishini ushlab qolmasin. */
.vcard__price, .vcard__count, .vcard__flags { pointer-events: none; }

.vcard__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    box-shadow: var(--shadow-2);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-in-out);
}
.vcard__nav svg { width: 18px; height: 18px; }
.vcard__nav--prev { left: var(--sp-2); }
.vcard__nav--next { right: var(--sp-2); }
/* any-hover: sensorli ekranli, lekin sichqonchasi ham bor noutbukda ham strelka chiqsin. */
@media (any-hover: hover) {
    .vcard__media:hover .vcard__nav,
    .vcard__nav:focus-visible { opacity: 1; }
}
.vcard__media .vcard__nav[aria-disabled="true"] { opacity: 0; pointer-events: none; }
@media (any-hover: none) { .vcard__nav { display: none; } }

/* Narx — rasm ustida, birinchi ko'riladigan narsa. */
.vcard__price {
    position: absolute;
    left: var(--sp-3);
    bottom: var(--sp-3);
    padding: 6px var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    color: var(--label);
    font: var(--text-headline);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-2);
}
.vcard__count {
    position: absolute;
    right: var(--sp-3);
    top: var(--sp-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    font: var(--text-caption);
}
.vcard__count svg { width: 14px; height: 14px; }
.vcard__flags { position: absolute; left: var(--sp-3); top: var(--sp-3); display: flex; flex-wrap: wrap; gap: 4px; }
.vcard__flag {
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--green);
    color: var(--accent-contrast);
    font: var(--text-caption);
    font-weight: 700;
}
.vcard__flag--credit { background: var(--accent); }

.vcard__body { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1 1 auto; }
.vcard__title { font: var(--text-headline); letter-spacing: -.01em; }
/* Nom havolasi butun pastki qismni qoplaydi — kartochkaning matn qismiga bosish ham e'longa olib boradi. */
.vcard__link { color: inherit; }
.vcard__link::after { content: ""; position: absolute; inset: 0; }
.vcard__link:focus-visible { outline: none; }
.vcard__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
.vcard__facts li { display: flex; align-items: center; gap: 6px; min-width: 0; font: var(--text-footnote); color: var(--label); }
.vcard__facts svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
.vcard__facts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--separator);
    font: var(--text-footnote);
    color: var(--label-2);
}
.vcard__meta svg { flex: none; width: 15px; height: 15px; }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Suzuvchi "E'lon berish" — pastki o'ng burchakda; tab bar bo'lsa undan yuqorida. */
.sell-fab {
    position: fixed;
    right: var(--sp-4);
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 52px;
    padding: 0 var(--sp-5) 0 var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-contrast);
    font: var(--text-headline);
    box-shadow: var(--shadow-3);
    transition: transform var(--dur-fast) var(--ease-in-out);
}
.sell-fab:active { transform: scale(.96); }
.sell-fab svg { width: 22px; height: 22px; }
.site--tabbar ~ .sell-fab { bottom: calc(var(--tabbar-space) + var(--sp-3) + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .site--tabbar ~ .sell-fab { bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); } .sell-fab { right: var(--sp-6); bottom: var(--sp-6); } }

.feed-more { display: flex; justify-content: center; margin-top: var(--sp-6); }
.feed-more [aria-busy="true"] { opacity: .5; pointer-events: none; }

/* Filtrda juft maydonlar (dan/gacha, marka/model) telefonda ham yonma-yon. */
.feed-filters.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.feed-filters__wide { grid-column: 1 / -1; }
.feed-filters__switches { box-shadow: none; background: var(--fill-4); }
.feed-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: calc(-1 * var(--sp-2)); }

/* ── Forma: e'lon berish ────────────────────────────────────────────────── */
.narrow { max-width: 640px; margin-inline: auto; }
.narrow__foot { display: flex; justify-content: center; margin-top: var(--sp-5); }

.form-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.form-stack > .btn + .btn { margin-top: calc(-1 * var(--sp-3)); }

.form-grid { display: grid; gap: var(--sp-4); }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) {
    .form-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

.field--invalid :is(.input, .select, .textarea) { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

.price-input { display: flex; gap: var(--sp-2); }
.price-input .input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.price-input .select { flex: none; width: auto; }

.form-switches { margin-top: var(--sp-3); }

.form-error {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--red-soft);
    color: color-mix(in oklab, var(--red) 80%, var(--label));
    font: var(--text-subhead);
}

.list__chevron { flex: none; color: var(--label-3); }

.empty__icon--ok { background: var(--green-soft); color: var(--green); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-2); }

/* Rasm tanlash: oldindan ko'rish + qo'shish katagi (site.js → PhotoPicker).
   JS'siz ham ishlaydi — oddiy fayl tanlash, rasmlar serverda kichraytiriladi. */
.photo-picker { display: flex; flex-direction: column; gap: var(--sp-3); }
.photo-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }

.photo-picker__add,
.photo-picker__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    overflow: hidden;
}

.photo-picker__add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    border: 1.5px dashed var(--separator);
    background: var(--fill-4);
    color: var(--accent);
    font: var(--text-caption);
    text-align: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-in-out);
}
.photo-picker__add:hover { background: var(--fill-3); }
.photo-picker__add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-picker__add svg { width: 24px; height: 24px; }
.photo-picker__add[hidden] { display: none; }

.photo-picker__item { background: var(--fill-4); }
.photo-picker__item img { width: 100%; height: 100%; object-fit: cover; }
.photo-picker__item.is-busy img { opacity: .4; }

.photo-picker__cover {
    position: absolute;
    left: var(--sp-1);
    bottom: var(--sp-1);
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    font: var(--text-caption-2);
}

.photo-picker__remove {
    position: absolute;
    top: var(--sp-1);
    right: var(--sp-1);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    box-shadow: var(--shadow-1);
}
.photo-picker__remove svg { width: 14px; height: 14px; }
.photo-picker__add.is-busy { opacity: .5; pointer-events: none; }
.form-stack > .card + .group-note { margin-top: calc(-1 * var(--sp-4)); }

/* ── E'lon sahifasi ─────────────────────────────────────────────────────── */
.crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
    color: var(--accent);
    font: var(--text-subhead);
}
.crumb svg { width: 16px; height: 16px; }

.owner-note {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--orange-soft);
    font: var(--text-subhead);
}

.listing-detail {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "side" "about" "reach";
}
.listing-detail__media { grid-area: media; min-width: 0; }
.listing-detail__side { grid-area: side; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.listing-detail__about { grid-area: about; min-width: 0; }
.listing-detail__reach { grid-area: reach; min-width: 0; }

/* Keng ekranda: chapda rasm va tavsif, o'ngda narx/aloqa — aylantirganda ko'rinib turadi. */
@media (min-width: 900px) {
    .listing-detail {
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
        grid-template-areas: "media side" "about side" "reach side";
        align-items: start;
    }
    .listing-detail__side { position: sticky; top: calc(var(--bar-h) + var(--sp-4)); }
}

.listing-detail__summary { display: flex; flex-direction: column; gap: var(--sp-2); }
.listing-detail__title { font: var(--text-title-2); letter-spacing: -.012em; }
.listing-detail__price { font: var(--text-title-1); font-variant-numeric: tabular-nums; }
.listing-detail__contact { display: flex; flex-direction: column; gap: var(--sp-2); }
.listing-detail__date { font: var(--text-footnote); color: var(--label-2); }
.listing-detail__side .group-label { margin-top: var(--sp-4); }
.listing-detail__description { font: var(--text-body); overflow-wrap: anywhere; }

/* Galereya: telefonda barmoq bilan suriladi (scroll-snap), kompyuterda — tugmalar. */
.gallery {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-sunken);
}
.gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gallery__slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
}
/* "contain": tik (portret) rasm kesilib qolmasin. */
.gallery__slide img,
.gallery__slide video { width: 100%; height: 100%; object-fit: contain; }

.gallery__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    box-shadow: var(--shadow-2);
    transition: opacity var(--dur-fast) var(--ease-in-out);
}
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev { left: var(--sp-3); }
.gallery__nav--next { right: var(--sp-3); }
.gallery__nav[aria-disabled="true"] { opacity: 0; pointer-events: none; }
/* Sensorli ekranda barmoq bilan suriladi — tugma ortiqcha. */
@media (hover: none) and (pointer: coarse) { .gallery__nav { display: none; } }

.gallery__count {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    font: var(--text-caption);
    font-variant-numeric: tabular-nums;
}

.gallery--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--label-4); }
.gallery--empty svg { width: 64px; height: 64px; }

.phone-reveal { justify-content: space-between; }
.phone-reveal__mask { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.phone-reveal__cta {
    margin-left: auto;
    padding: 2px var(--sp-3);
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--accent-contrast) 22%, transparent);
    font: var(--text-subhead);
    font-weight: 600;
}


/* ── Xabarlar ───────────────────────────────────────────────────────────────
   O'qilmaganlar soni (menyu, ro'yxat) · suhbatlar ro'yxati · yozishma sahifasi. */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--red);
    color: var(--label-inverse);
    font: 600 .6875rem/1 var(--font);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.chat-thread { align-items: center; gap: var(--sp-3); }
.chat-thread__cover {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--fill-3);
}
.chat-thread__cover--empty { display: grid; place-items: center; color: var(--label-3); }
.chat-thread__cover--empty svg { width: 24px; height: 24px; }
.chat-thread__top, .chat-thread__bottom { display: flex; align-items: baseline; gap: var(--sp-2); }
.chat-thread__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-thread__when { flex: none; font: var(--text-footnote); color: var(--label-2); }
.chat-thread__peer .badge { margin-left: var(--sp-1); }
.chat-thread__bottom { align-items: center; margin-top: 2px; }
.chat-thread__last {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--text-subhead);
    font-weight: 400;
    color: var(--label-2);
}
.chat-thread--unread .chat-thread__last { color: var(--label); font-weight: 500; }
.chat-thread--unread .chat-thread__when { color: var(--accent); }

/* Yozishma: sarlavha yuqorida yopishgan, yozish maydoni pastda (telefonda tab bar ustida).
   Xabar kam bo'lsa ham maydon ekran tagida tursin — ``.chat`` ekran balandligini to'ldiradi. */
.page:has(.chat) { padding-bottom: 0; }
.chat {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - var(--sp-4));
    margin-inline: auto;
}
.chat-head {
    position: sticky;
    top: calc(var(--bar-h) + env(safe-area-inset-top));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: calc(var(--sp-2) * -1) calc(var(--sp-4) * -1) 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--separator);
}
.chat-head__back { flex: none; }
.chat-head__listing { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: inherit; text-decoration: none; }
.chat-head__listing .chat-thread__cover { width: 40px; height: 40px; border-radius: var(--r-sm); }
.chat-head__text { display: flex; flex-direction: column; min-width: 0; }
.chat-head__title { font: var(--text-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head__peer { font: var(--text-footnote); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-log { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) 0; }
.chat-log__empty { margin: auto; max-width: 34ch; padding: var(--sp-8) var(--sp-4); text-align: center; font: var(--text-subhead); font-weight: 400; color: var(--label-2); }
.chat-day { display: flex; justify-content: center; margin: var(--sp-3) 0 var(--sp-1); }
.chat-day span { padding: 2px var(--sp-3); border-radius: var(--r-pill); background: var(--fill-3); font: var(--text-caption); color: var(--label-2); }

.msg { display: flex; }
.msg--mine { justify-content: flex-end; }
.msg__bubble {
    max-width: min(78%, 480px);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-xs);
    background: var(--surface-raised);
    box-shadow: var(--shadow-1);
    overflow-wrap: anywhere;
}
.msg--mine .msg__bubble {
    border-radius: var(--r-xl) var(--r-xl) var(--r-xs) var(--r-xl);
    background: var(--accent);
    color: var(--accent-contrast);
}
.msg__text { margin: 0; font: var(--text-callout); }
.msg__media-link { display: block; }
.msg__media {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin: calc(var(--sp-1) * -1) calc(var(--sp-2) * -1) var(--sp-1);
    border-radius: var(--r-lg);
    background: var(--fill-3);
}
.msg__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 2px;
    font: var(--text-caption-2);
    color: var(--label-2);
}
.msg--mine .msg__meta { color: color-mix(in srgb, var(--accent-contrast) 75%, transparent); }
.msg__tick { display: inline-flex; }
.msg__tick svg { width: 15px; height: 15px; }
.msg__tick--read, .msg.is-read .msg__tick { display: none; }
.msg.is-read .msg__tick--read { display: inline-flex; }

.chat-compose, .chat-closed {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(var(--sp-4) * -1);
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--separator);
}
.chat-compose__row { display: flex; align-items: flex-end; gap: var(--sp-2); }
.chat-compose__attach { flex: none; cursor: pointer; color: var(--accent); }
.chat-compose__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    max-height: 160px;
    padding: 9px var(--sp-4);
    border: 1px solid var(--separator);
    border-radius: 20px;
    background: var(--surface-raised);
    color: var(--label);
    font: var(--text-callout);
    resize: none;
    overflow-y: hidden;   /* JS: 160 px dan oshgandagina aylantiriladi */
}
.chat-compose__input:focus { outline: none; border-color: var(--accent); }
.chat-compose__send {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
}
.chat-compose__send svg { width: 20px; height: 20px; stroke-width: 2.4; }
.chat-compose__send[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.chat-compose__preview { position: relative; width: 72px; margin-bottom: var(--sp-2); }
.chat-compose__preview img { display: block; width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; }
.chat-compose__preview .btn-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    min-width: 0;
    min-height: 0;
    background: var(--label);
    color: var(--surface-raised);
}
.chat-compose__preview .btn-icon svg { width: 14px; height: 14px; }
.chat-compose .field__error { margin-top: var(--sp-1); }
.chat-closed { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font: var(--text-footnote); color: var(--label-2); }
.chat-closed svg { width: 16px; height: 16px; }

@media (max-width: 767px) {
    /* Telefonda tab bar pastda turibdi — yozish maydoni uning ustida. */
    .site--tabbar .chat-compose, .site--tabbar .chat-closed {
        bottom: calc(var(--tabbar-space) + env(safe-area-inset-bottom));
        padding-bottom: var(--sp-2);
    }
    .site--tabbar .page:has(.chat) { padding-bottom: calc(var(--tabbar-space) + env(safe-area-inset-bottom)); }
    .site--tabbar .chat { min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - var(--sp-4) - var(--tabbar-space) - env(safe-area-inset-bottom)); }
}

/* Xabar amallari (pastdan chiquvchi varaqa) va tahrirlash rejimi. */
.msg { cursor: default; }
.msg__bubble { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.msg-actions .list__row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.msg-actions .list__row[hidden] { display: none; }
.msg-actions__danger { color: var(--red); }
.chat-compose__editing {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
}
.chat-compose__editing > svg { flex: none; width: 18px; height: 18px; }
.chat-compose__editing-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font: var(--text-footnote); }
.chat-compose__editing-text span { color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-compose__editing .btn-icon { flex: none; }

/* ── Joylar: avto/sana tanlash, joylar xaritasi, kalendar, bronlar ─────────── */
.booking { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 960px; margin-inline: auto; }
.booking .page__head { margin-bottom: 0; }
.booking-pick { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .booking-pick { grid-template-columns: 1fr 1fr; align-items: start; } }

.booking-cars { margin-top: 0; }
.booking-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.booking-presets .chip--active,
.booking-presets .chip--active:hover { background: var(--accent); color: var(--accent-contrast); }
.booking-dates { width: 100%; text-align: left; }

.booking-alert {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    color: var(--label);
}
.booking-alert--pending { background: var(--orange-soft); }
.booking-alert--debt { background: var(--red-soft); }
.booking-alert__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.booking-alert__title { font: var(--text-headline); }
.booking-alert__detail { font: var(--text-footnote); color: var(--label-2); }

/* Xarita: har qator — joylar to'ri; bo'sh joy — tugma (GET forma, JS'siz). */
.spot-map { display: flex; flex-direction: column; gap: var(--sp-4); }
.spot-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: 0 var(--sp-1); font: var(--text-footnote); color: var(--label-2); }
.spot-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.spot-legend .spot { width: 14px; height: 14px; border-radius: var(--r-xs); }

.spot-block { padding: var(--sp-4); }
.spot-block__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.spot-block__title { font: var(--text-title-3); }
.spot-block__meta { margin-top: 2px; font: var(--text-footnote); color: var(--label-2); }
.spot-block__price { flex: none; padding: 4px var(--sp-3); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font: var(--text-footnote); font-weight: 600; white-space: nowrap; }

.spot-row { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-2); align-items: start; padding: var(--sp-2) 0; }
.spot-row + .spot-row { border-top: 1px solid var(--separator); }
.spot-row__label { padding-top: 11px; font: var(--text-caption-2); color: var(--label-3); white-space: nowrap; }
.spot-row__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }

.spot {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    font: var(--text-footnote);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.spot--free { background: var(--green-soft); color: color-mix(in oklab, var(--green) 70%, var(--label)); cursor: pointer; }
.spot--busy { background: var(--fill-2); color: var(--label-3); }
.spot--mine { background: var(--accent); color: var(--accent-contrast); }
.spot--pending { background: var(--orange); color: #fff; }
button.spot:active { transform: scale(.94); }
@media (hover: hover) { .spot--free:hover { background: var(--green); color: #fff; } }
.spot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) {
    .spot-row { grid-template-columns: 1fr; gap: var(--sp-1); }
    .spot-row__label { padding-top: 0; }
}

/* Kalendar (oyna ichida): katakcha — kun, ostida bir kunlik narx. */
.cal__note { margin: 0 0 var(--sp-3); padding: 0; }
.cal { display: flex; flex-direction: column; gap: var(--sp-5); }
.cal__title { margin-bottom: var(--sp-2); font: var(--text-headline); }
.cal__title::first-letter { text-transform: uppercase; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__wd { padding-bottom: 2px; text-align: center; font: var(--text-caption-2); color: var(--label-3); }
.cal__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: var(--r-sm);
    background: var(--fill-1);
    cursor: pointer;
    user-select: none;
}
.cal__num { font: var(--text-callout); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal__price { font: var(--text-caption-2); color: var(--green); white-space: nowrap; }
.cal__day:has(input:checked) { background: var(--accent); color: var(--accent-contrast); }
.cal__day:has(input:checked) .cal__price { color: inherit; opacity: .85; }
.cal__day:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal__day.is-disabled { background: none; color: var(--label-4); cursor: default; }

/* Joy sahifasi va bronlar */
.booking-price--free { color: var(--green); }
.booking-price--none { color: var(--red); }
.booking-total .list__label,
.booking-total .list__value { font: var(--text-headline); color: var(--label); }
.booking-link { color: var(--accent); }
.booking-method input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }

.booking-status { align-self: flex-start; }
.booking-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.booking-row__sum { font: var(--text-footnote); color: var(--label-2); white-space: nowrap; }

.booking-pay { display: flex; flex-direction: column; gap: var(--sp-3); }
.booking-pay__title { font: var(--text-title-3); }
.booking-pay__text { font: var(--text-subhead); color: var(--label-2); }
.booking-pay__methods { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.booking-pay__more { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.booking-debt { display: flex; flex-direction: column; gap: var(--sp-3); }
.booking-debt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.booking-debt__title { font: var(--text-headline); }
.booking-debt__meta { margin-top: 2px; font: var(--text-footnote); color: var(--label-2); }
.booking-debt__sum { flex: none; font: var(--text-title-3); color: var(--red); white-space: nowrap; }

/* To'lov ilovalari ikonkasi (static/img/payment) — usul tanlashda va to'lash tugmalarida. */
.pay-logo { flex: none; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--separator); }
.pay-logo--sm { width: 20px; height: 20px; border-radius: 6px; }
.pay-logo--cash { display: grid; place-items: center; background: var(--green-soft); color: var(--green); box-shadow: none; }
.pay-logo--cash svg { width: 20px; height: 20px; }
.pay-value { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pay-list { box-shadow: none; background: var(--fill-1); }
.pay-list .list__row { width: 100%; text-align: left; }

/* ── Avtolarim ─────────────────────────────────────────────────────────── */
.cars-search .input { width: 100%; }
.car-row__icon--sold { background: var(--fill-2); color: var(--label-3); }
.car-status { align-self: flex-start; }
.car-muted { color: var(--label-2); }
.car-link { color: var(--accent); }
.car-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Radio tugmalar segment ko'rinishida (avto turi): katakcha ko'rinmaydi, yorliq tanlanadi. */
.seg--radio { display: flex; width: 100%; }
.seg--radio .seg__item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font: var(--text-callout); cursor: pointer; }
.seg--radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg--radio .seg__item:has(input:checked) { background: var(--surface-raised); box-shadow: var(--shadow-1); }
.seg--radio .seg__item:has(input:checked)::before,
.seg--radio .seg__item:has(input:checked) + .seg__item::before { opacity: 0; }
.seg--radio .seg__item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Kabinet: avatar (rasm / emoji / bosh harf) va tahrirlash ─────────────── */
.avatar:has(.avatar__img), .avatar:has(.avatar__emoji) { overflow: hidden; background: var(--fill-2); }
/* Tugma ichida ham (header) doirani to'liq to'ldirsin — padding'dan qat'i nazar. */
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar__emoji { font-size: 1.25em; line-height: 1; }
.avatar--xl { width: 72px; height: 72px; font: var(--text-title-1); }
.avatar--xl .avatar__emoji { font-size: 40px; }

.profile-card { display: flex; align-items: center; gap: var(--sp-4); }
.profile-card__text { flex: 1 1 auto; min-width: 0; }
.profile-card__name { font: var(--text-title-3); overflow-wrap: anywhere; }
.profile-card__phone { margin-top: 2px; font: var(--text-subhead); color: var(--label-2); white-space: nowrap; }
.profile-card .btn-icon { flex: none; align-self: flex-start; }
.profile-link { color: var(--accent); }
.profile-fixed { margin-top: var(--sp-3); }

.avatar-edit { display: flex; flex-direction: column; gap: var(--sp-3); }
.avatar-edit__current { display: flex; align-items: center; gap: var(--sp-4); }
.avatar-edit__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.avatar-edit__actions .btn { cursor: pointer; }
.avatar-edit__remove:has(input:checked) { background: var(--red-soft); color: var(--red); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--sp-2); }
.emoji-grid__item {
    display: grid;
    place-items: center;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--fill-1);
    font-size: 22px;
    cursor: pointer;
}
.emoji-grid__item.is-current { box-shadow: inset 0 0 0 2px var(--separator-opaque); }
.emoji-grid__item:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.emoji-grid__item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg__sender { display: block; margin-bottom: 2px; font: var(--text-caption); font-weight: 600; color: var(--accent); }

/* ── Xizmatlar ─────────────────────────────────────────────────────────── */
.services { display: flex; flex-direction: column; gap: var(--sp-4); }
.services .page__head { margin-bottom: 0; }
.services-chips { margin-top: 0; }
.services-chips .chip { flex: none; background: var(--surface-raised); box-shadow: var(--shadow-1); }
.services-chips .chip--active,
.services-chips .chip--active:hover { background: var(--accent); color: var(--accent-contrast); }
.count-badge--muted { background: var(--fill-3); color: var(--label); }

.service-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; }
.service-card__media { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--fill-1); color: var(--label-3); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__media .ic { width: 40px; height: 40px; }
.service-card__body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); }
/* Rasmsiz xizmat — ixcham: chapda belgi, o'ngda matn. */
.service-card--plain { flex-direction: row; align-items: center; }
.service-card--plain .service-card__media { flex: none; width: 56px; height: 56px; aspect-ratio: auto; margin-left: var(--sp-4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.service-card--plain .service-card__media .ic { width: 26px; height: 26px; }
.service-card--plain .service-card__body { flex: 1 1 auto; min-width: 0; }
.service-card__title { font: var(--text-headline); }
.service-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: var(--text-subhead);
    color: var(--label-2);
}
.service-card__price { margin-top: var(--sp-1); font: var(--text-headline); color: var(--accent); }

.service-hero { overflow: hidden; }
.service-hero__img { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.service-hero__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.service-hero__title { font: var(--text-title-1); }
.service-hero__price { font: var(--text-title-3); color: var(--accent); }
.service-hero__text { font: var(--text-body); color: var(--label-2); }

.service-status { align-self: flex-start; }
.service-link { color: var(--accent); }
.service-note { font: var(--text-body); white-space: normal; overflow-wrap: anywhere; }
.service-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.service-media img, .service-media video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--fill-1); display: block; }

.service-rate { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.service-rate__title { font: var(--text-headline); }
.service-rate__comment { font: var(--text-body); color: var(--label-2); }
.service-rate .textarea { width: 100%; }
/* Yulduzlar: radio teskari tartibda — tanlangan va undan chapdagilar to'ladi (CSS ~ bilan). */
.stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars__star { display: inline-grid; place-items: center; color: var(--label-4); cursor: pointer; }
.stars__star .ic { width: 34px; height: 34px; fill: currentColor; stroke-width: 1.2; }
.stars input:checked ~ .stars__star,
.stars__star:hover, .stars__star:hover ~ .stars__star { color: var(--yellow); }
.stars input:focus-visible + .stars__star { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.stars--static { flex-direction: row; }
.stars--static .stars__star { cursor: default; }
.stars--static .stars__star .ic { width: 24px; height: 24px; }
.stars--static .stars__star.is-on { color: var(--yellow); }

/* ── "Bosh ekranga qo'shish" taklifi (pastda, tab bar ustida) ───────────── */
.install {
    position: fixed;
    z-index: 70;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-xl);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-3);
    backdrop-filter: blur(var(--blur));
}
body:has(.tabbar) .install { bottom: calc(var(--tabbar-space) + var(--sp-3) + env(safe-area-inset-bottom)); }
.install__icon { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.install__text { flex: 1 1 auto; min-width: 0; }
.install__title { font: var(--text-subhead); font-weight: 600; }
.install__detail { margin-top: 2px; font: var(--text-footnote); color: var(--label-2); }
.install .btn-icon { flex: none; align-self: flex-start; }
.install .btn { flex: none; }
/* Taklif ochiq turganda suzuvchi "E'lon berish" uning ostida qolmasin — vaqtincha yashirin. */
body:has(.install:not([hidden])) .sell-fab { display: none; }
.owner-note--actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.owner-note__actions { display: flex; gap: var(--sp-2); }
/* Profil menyusidagi hujjat havolalari (kolontitul o'rniga). */
.pop-menu__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.pop-menu__links a { font: var(--text-caption); color: var(--label-2); text-decoration: none; }
.pop-menu__links a:hover { color: var(--accent); }

/* ── Huquqiy hujjatlar ─────────────────────────────────────────────────── */
.legal { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.legal__body { font: var(--text-body); line-height: 1.65; color: var(--label-2); }
.legal__body p { margin: 0 0 var(--sp-3); }
.legal__lead { font: var(--text-callout); color: var(--label); }
.legal__h { margin: var(--sp-6) 0 var(--sp-3); font: var(--text-title-3); color: var(--label); }
.legal__list { margin: 0 0 var(--sp-3); padding-left: 22px; }
.legal__list li { margin-bottom: var(--sp-2); }
.legal__dl { list-style: none; padding-left: 0; }
.legal__dl li { padding-left: var(--sp-3); border-left: 3px solid var(--separator); }
.legal__dl strong { color: var(--label); }
.legal__link { color: var(--accent); font-weight: 600; text-decoration: none; }
.legal__note { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--label); }

/* ── To'lovlarim / Do'konim ─────────────────────────────────────────────── */
.pay-month { display: flex; justify-content: space-between; }
.pay-month__sum { font-weight: 600; color: var(--label); }
.pay-row { gap: var(--sp-2); }
.pay-row__main { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.pay-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pay-row__sum { font: var(--text-headline); white-space: nowrap; }
.pay-row__sum--muted { color: var(--label-2); font-weight: 500; }
.pay-row__check { flex: none; color: var(--accent); }
.shop-debt { display: flex; flex-direction: column; gap: var(--sp-3); }
.shop-debt__title { font: var(--text-title-3); color: var(--red); }
.shop-debt__note { padding: 0; }
.shop-charge input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }

/* ── Saqlanganlar (yurakcha) ───────────────────────────────────────────── */
.fav { display: inline-flex; }
.fav__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease-in-out);
}
.fav__btn svg { width: 20px; height: 20px; }
.fav__btn:active { transform: scale(.9); }
.fav__btn[aria-pressed="true"] { color: var(--red); }
.fav__btn[aria-pressed="true"] svg { fill: currentColor; }
.fav__btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.vcard__fav { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
.fav--inline .fav__btn { background: var(--fill-4); }
.listing-detail__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.listing-detail__titlerow .listing-detail__title { min-width: 0; }

/* "E'lonlarim": holat yorlig'i va rad sababi */
.vcard__status {
    position: absolute;
    left: var(--sp-3);
    top: var(--sp-3);
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-overlay);
    color: var(--label);
    font: var(--text-caption);
    pointer-events: none;
}
.vcard__reject { margin-top: var(--sp-2); font: var(--text-caption); color: var(--red); }
.feed-section + .feed-section { margin-top: var(--sp-6); }
.list__icon--red { color: var(--red); background: var(--red-soft); }

/* E'lonni tahrirlash: mavjud rasmlar (o'chirilmaydi) */
.edit-photos { margin-bottom: var(--sp-3); }
.edit-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.edit-photos__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--fill-4); }