/*
 * pages.css — sahifaga xos uslublar.
 *
 * Bu yerda faqat bitta sahifada uchraydigan narsalar turadi.
 * Qayta ishlatiladigani — components.css da.
 */

/* ==========================================================================
   Sahifa karkasi
   ========================================================================== */

/*
 * Mini App telefon uchun, lekin oddiy brauzerda ham ochiladi (sinov, admin
 * havolasi). Kenglik cheklovi ro'yxatni katta ekranda cho'zib yubormaydi.
 */
.app {
    max-width: var(--page-w);
    margin: 0 auto;
    min-height: 100vh;
}

/* Pastda sticky panel bo'lgan sahifalar: oxirgi element panel ostida qolmasin */
.app--with-bar {
    padding-bottom: calc(var(--bar-h) + var(--sp-5));
}

.wrap {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
}

.page {
    padding: var(--sp-4);
}

.page__title {
    margin-bottom: var(--sp-4);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.section {
    margin-bottom: var(--sp-5);
}

.section__title {
    margin-bottom: var(--sp-3);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ==========================================================================
   Sticky header (docs/03 §7.4, docs/05 Task 7-9)
   ========================================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--header-h);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line);

    /* Fon --paper: Telegram header rangi bilan bir xil bo'lishi kerak (tg.js) */
    background: var(--paper);
}

.app-header__main {
    flex: 1 1 auto;
    min-width: 0;
}

.app-header__name {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.3;
}

.app-header__link {
    color: var(--ink);
    text-decoration: none;
}

/* ==========================================================================
   Yopiq oshxona banneri (docs/05 Task 8-B)
   ========================================================================== */

.closed-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--danger-wash);
    color: var(--danger);
    font-size: 14px;
    line-height: 1.45;
}

.closed-banner svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Savatdan olib tashlangan taomlar haqidagi xabar — menyu ro'yxatidan yuqorida */
.menu-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-3) var(--sp-4) 0;
}

.menu-notice svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--saffron);
}

/* ==========================================================================
   Menyu ro'yxati (docs/03 §7.4)
   ==========================================================================
   Kartalar orasida 1px chiziq. Soya YO'Q, karta ichida radius YO'Q. */

.menu-list {
    display: block;
}

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

.product__media {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--line);
}

.product__img {
    width: 88px;
    height: 88px;
    object-fit: cover;
}

/* Rasm yo'q bo'lsa: --line fonli kvadrat, markazda nomning birinchi harfi */
.product__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}

.product__body {
    flex: 1 1 auto;
    min-width: 0;
}

.product__name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.product__desc {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.35;

    /* 2 qatordan keyin kesiladi */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

.product__price {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--saffron);
    font-variant-numeric: tabular-nums;
}

/*
 * Tugagan taom: xira, tugmasiz (docs/03 §7.4).
 *
 * Xiralik kartaning O'ZIGA emas, ichidagilarga beriladi. Sabab: kartada
 * `.rise` animatsiyasi `animation-fill-mode: both` bilan ishlaydi va uning
 * oxirgi kadri `opacity: 1` ni animatsiya sifatida ushlab turadi — animatsiya
 * qiymati oddiy `opacity: .45` deklaratsiyasidan kuchliroq, shuning uchun
 * karta xiralashmasdan qolardi.
 */
.product.is-out .product__media,
.product.is-out .product__body {
    opacity: .45;
}

.product__out-label {
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 500;
}

/* ==========================================================================
   Savat paneli — menyu sahifasining pastki sticky qatori (docs/03 §7.4)
   ========================================================================== */

.cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: var(--r);
    background: var(--cobalt);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease);
}

.cart-bar:hover {
    background: var(--cobalt-ink);
}

.cart-bar__sum {
    font-variant-numeric: tabular-nums;
}

.cart-bar__action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ==========================================================================
   Savat sahifasi (docs/05 Task 9)
   ========================================================================== */

.cart-list {
    display: block;
    margin-bottom: var(--sp-5);
}

.cart-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
}

.cart-row__media {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--line);
}

.cart-row__img {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.cart-row__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}

.cart-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.cart-row__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Qator jami — ustunda tik tursin (docs/05 Task 9) */
.cart-row__sum {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.cart-row__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

/* Birlik narxi */
.cart-row__price {
    color: var(--ink-soft);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Minimal summa eslatmasi — hisob blokidan keyin */
.cart-notice {
    margin-top: var(--sp-4);
}

/*
 * Miqdor 0 ga tushdi — qator 200 ms da chiqib ketadi (docs/05 Task 9).
 *
 * `max-height` qatorning haqiqiy balandligidan (56px rasm + 2×12px padding =
 * 80px) sal kattaroq: `auto` ni animatsiya qilib bo'lmaydi. Qolgan bo'shliq
 * animatsiyaning boshida yig'iladi va 200 ms ichida ko'zga tashlanmaydi.
 *
 * `forwards`: animatsiya tugagach qator ko'rinmas holatda qoladi — JS uni
 * store'dan aynan shu paytda ('animationend') chiqaradi.
 */
.cart-row.is-leaving {
    animation: row-out var(--dur) var(--ease) forwards;
    pointer-events: none;
    overflow: hidden;
}

@keyframes row-out {
    from {
        opacity: 1;
        max-height: 96px;
        transform: none;
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: translateX(24px);
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-color: transparent;
    }
}

/* ==========================================================================
   Hisob bloki (savat va checkout)
   ========================================================================== */

.totals {
    display: grid;
    gap: var(--sp-2);
}

.totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.totals__label {
    color: var(--ink-soft);
}

.totals__value {
    font-variant-numeric: tabular-nums;
}

.totals__value--free {
    color: var(--turquoise);
    font-weight: 600;
}

.totals__value--free s {
    margin-right: var(--sp-2);
    color: var(--ink-soft);
    font-weight: 400;
}

.totals__row--grand .totals__label,
.totals__row--grand .totals__value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* Eslatma: minimal summaga yetmadi (docs/05 Task 9) */
.notice {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--saffron-wash);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

.notice--danger { background: var(--danger-wash); }
.notice--cobalt { background: var(--cobalt-wash); }

/* ==========================================================================
   Checkout (docs/05 Task 10)
   ========================================================================== */

/*
 * Bloklar orasida 1px chiziq — menyu ro'yxati bilan bir xil ritm.
 * Karta ham, soya ham yo'q: sahifa ketma-ket to'ldiriladigan forma bo'lib
 * ko'rinishi kerak, mustaqil kartochkalar to'plami emas.
 */
.co-block {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
}

/*
 * Forma mijoz ma'lumoti kelgunicha yashirin (sabab — `checkout.php` boshidagi
 * izoh). Bloklar `.co-form` ichida turadi, ya'ni `.co-block:first-child`
 * qoidasi ham o'z kuchida qoladi.
 */
.co-loading {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
}

/* Xarita bloki eng baland — kutish holati sahifa bo'yini oldindan egallaydi */
.co-loading__map {
    height: 200px;
    border-radius: var(--r);
}

.co-loading__error {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    justify-content: space-between;
    margin-top: var(--sp-4);
}

.co-block:first-child {
    padding-top: 0;
}

.co-block:last-child {
    border-bottom: 0;
}

/* Yig'ilgan blok: ikonka — qiymat — "O'zgartirish" */
.co-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
}

.co-summary__icon {
    display: flex;
    flex: 0 0 auto;
    color: var(--ink-soft);
}

.co-summary__text {
    flex: 1 1 auto;
    min-width: 0;
}

.co-summary__label {
    display: block;
    margin-bottom: 2px;
    color: var(--ink-soft);
    font-size: 12px;
}

.co-summary__value {
    display: block;
    font-size: 16px;
    font-weight: 500;

    /* Uzun ism qatorni yorib chiqmasin (360px ekran) */
    overflow-wrap: anywhere;
}

/* "Tayyor" tugmasi — blokning o'ng chetida */
.co-actions {
    display: flex;
    justify-content: flex-end;
}

/* "Telegram'dan olish" tugmasi va uning izohi */
.co-contact {
    margin-bottom: var(--sp-4);
}

.co-note {
    margin-top: var(--sp-2);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

/* Maskadagi raqam ajratgichlari bir-biriga yopishmasin */
.input.num {
    letter-spacing: .01em;
}

/* ==========================================================================
   Manzil xaritasi (docs/05 Task 10-B3)

   Barcha `.leaflet-*` qoidalari `.map` ichida yozilgan. Sabab: leaflet.css
   bundle tartibida shu fayldan KEYIN chiqadi va bir xil kuchdagi selektorda
   u yutib ketardi.
   ========================================================================== */

.map {
    position: relative;
    height: 280px;
    margin-bottom: var(--sp-3);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--line);

    /*
     * Balandlik O'ZGARISHI animatsiyasiz: Leaflet konteyner o'lchamini
     * `invalidateSize()` bilan bir marta o'qiydi, transition esa uni
     * oraliq qiymatda ushlab qolardi — xarita kesilgan bo'lib chiqardi.
     */
}

/* Yig'ilgan blokdagi ko'rinish — faqat rasm, surib bo'lmaydi */
.map--preview {
    height: 100px;
}

.map__canvas {
    position: absolute;
    inset: 0;
}

/* --------------------------------------------------------------- Marker */

/*
 * MARKER XARITA MARKAZIDA QOTIB TURADI.
 *
 * Leaflet `L.Marker` i emas: oddiy element, xarita ustida, `pointer-events`
 * siz. Barmoq undan "o'tib" xaritaga tegadi, marker esa hech qachon
 * qimirlamaydi — manzil har doim `map.getCenter()`.
 *
 * z-index: Leaflet panellari 400, boshqaruvlari (attribution) 1000.
 * Marker ikkalasining orasida turadi.
 */
.map__marker {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 500;
    pointer-events: none;
}

/* Tomchining UCHI aynan markazda: shuning uchun -100% */
.map__marker-pin {
    position: absolute;
    left: 50%;
    top: 0;
    display: block;

    /*
     * O'lcham ANIQ yozilgan. Absolyut joylashgan element kengligini o'z
     * kontentidan oladi, base.css dagi `svg { max-width: 100% }` esa o'sha
     * kenglikka tayanadi — halqa hosil bo'lib, tomchi 0px bo'lib qolardi.
     */
    width: 28px;
    height: 36px;

    transform: translate(-50%, -100%);

    /* 150ms — docs/05 Task 10-B3 aynan shu qiymatni beradi (token'lar
       orasida 120/200/300 bor, oraliq qiymat ataylab qo'lda yozilgan) */
    transition: transform 150ms var(--ease);
    filter: drop-shadow(0 2px 3px rgba(20, 32, 46, .25));
}

/*
 * Tomchining ranglari CSS'da: SVG prezentatsiya atributlari `var()` ni
 * qo'llab-quvvatlamaydi. Kobalt to'ldirish + 2px oq chegara (docs/05 B3).
 */
.map__marker-drop {
    fill: var(--cobalt);
    stroke: #fff;
    stroke-width: 2;
}

.map__marker-dot {
    fill: #fff;
}

/* Soya — markazning o'zida, tomchi ostida */
.map__marker-shadow {
    position: absolute;
    left: 50%;
    top: 0;
    width: 18px;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(20, 32, 46, .2);
    transition:
        transform 150ms var(--ease),
        opacity 150ms var(--ease);
}

/* Xarita surila boshladi — marker "ko'tariladi", soyasi kichrayadi */
.map__marker.is-lifted .map__marker-pin {
    transform: translate(-50%, calc(-100% - 4px));
}

.map__marker.is-lifted .map__marker-shadow {
    transform: translate(-50%, -50%) scale(.65);
    opacity: .6;
}

/* ------------------------------------------------ "Mening joylashuvim" */

.map__locate {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--cobalt);
    box-shadow: 0 2px 8px rgba(20, 32, 46, .25);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
}

.map__locate:active:not([disabled]) {
    transform: scale(.92);
}

.map__locate.is-busy {
    opacity: .6;
    cursor: default;
}

/* -------------------------------------------------- Leaflet ustidan */

/* Manba yozuvi MAJBURIY va ko'rinadigan joyda (chap pastda) */
.map .leaflet-control-attribution {
    padding: 2px 6px;
    background: rgba(255, 255, 255, .85);
    color: #14202E;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.4;
}

.map .leaflet-container {
    font-family: var(--font-body);
    background: var(--line);
}

/* Yig'ilgan ko'rinish: surish kursori chalg'itmasin */
.map__canvas.is-static .leaflet-grab {
    cursor: default;
}

/* Yakuniy blok: JAMI — display 26px (docs/05 Task 10-C) */
.totals__row--hero .totals__label,
.totals__row--hero .totals__value {
    font-size: 26px;
}

/*
 * Taomlar qatorining yorlig'i — "Osh × 2, Somsa × 3".
 * Uzun bo'lsa ikki qatorga tushadi, narxni siqib chiqarmaydi.
 */
.co-items {
    padding-right: var(--sp-3);
    line-height: 1.35;
}

.co-payment {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    color: var(--ink-soft);
    font-size: 14px;
}

.co-payment svg {
    flex: 0 0 auto;
}

/* Server xatosi: matn + ixtiyoriy amal tugmasi */
.co-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.co-error__action {
    align-self: flex-end;
}

/* Xarita ostidagi ko'rsatma va rad javobi */
.map__hint {
    margin-bottom: var(--sp-3);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

.map__hint--warn {
    color: var(--danger);
}

/* ==========================================================================
   Buyurtma qabul qilindi (docs/05 Task 12-B)
   ==========================================================================
   Sahifada harakat talab qilinmaydi — u faqat tasdiq beradi. Shuning uchun
   hamma narsa markazda va tik ustunda: belgi, ikki qator matn, chek, tugmalar. */

.success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
}

/* Kobalt doira ichida oq galochka (docs/05 Task 12-B) */
.success__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-top: var(--sp-5);
    border-radius: 50%;
    background: var(--cobalt);
    color: #fff;
    animation: mark-in var(--dur) var(--ease) backwards;
}

@keyframes mark-in {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.success__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.success__text {
    max-width: 30ch;
    color: var(--ink-soft);
}

/*
 * Chek uchun ajratilgan joy. U serverdan alohida so'rov bilan keladi
 * (sabab — `SiteController::$telegramAuthRequired` izohi), shuning uchun
 * quti oldindan turadi: chek tushganda tugmalar pastga siljib ketmasin.
 */
.success__ticket {
    width: 100%;
}

.success__skeleton {
    height: 180px;
    border-radius: var(--r);
}

/* Chek — matni chapga tekislangan, sahifaning qolgani markazda */
.success .ticket {
    width: 100%;
    margin-top: var(--sp-3);
    text-align: left;
}

.success__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: 100%;
    margin-top: var(--sp-4);
}

/* ==========================================================================
   Buyurtmalarim (docs/05 Task 12-C)
   ==========================================================================
   Cheklar orasidagi oraliq — perforatsiyani ko'rsatish uchun ham kerak:
   ular bir-biriga yopishib qolsa tishli qirralar bitta kulrang chiziqqa
   aylanib ketardi. */

.orders {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/*
 * Ro'yxatning o'zi serverdan tayyor HTML bo'lib keladi va shu qutiga tushadi
 * (sabab — `SiteController::$telegramAuthRequired` izohi). Quti `.orders`
 * ning bolasi bo'lgani uchun oraliqni O'ZI berishi kerak: aks holda cheklar
 * bir-biriga yopishib, tishli qirralar bitta kulrang chiziqqa aylanadi.
 */
.orders__list,
.orders__loading {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Kelayotgan chekning taxminiy bo'yi — ro'yxat tushganda sahifa sakramasin. */
.orders__skeleton {
    height: 92px;
    border-radius: var(--r);
}