/* ============================================================
   public/css/listing-sheet.css
   ------------------------------------------------------------
   Bosh sahifadan (mobil, ≤768px) e'lon kartasiga bosilganda to'liq
   sahifaga o'tmasdan pastdan chiqadigan panel (bottom sheet) ichida
   detail sahifasini (iframe, ?embed=1) ko'rsatadi.
   Markup: resources/views/partials/listing-sheet.blade.php
   Logika: public/js/listing-sheet.js

   Z-index: 1190 — mobil pastki tabbar (250) va uning AI varag'i
   .mai-overlay (1200) orasida — ListingSheet ochiq paytda AI varag'i
   ustidan chiqishi kerak bo'lsa (nazariy holat) baribir ko'rinadi.
   ============================================================ */

.lsh {
    position: fixed;
    inset: 0;
    z-index: 1190;
    pointer-events: none;
    visibility: hidden;
    /* Yopilganda visibility darhol emas, backdrop/panel animatsiyasi (.32s)
       tugagach yashirinadi — aks holda fade-out ko'rinmaydi. */
    transition: visibility 0s linear .36s;
}

.lsh.lsh--open {
    pointer-events: auto;
    visibility: visible;
    transition: none;
}

.lsh__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 74, 87, .45);
    opacity: 0;
    transition: opacity .28s ease;
}

.lsh--open .lsh__backdrop {
    opacity: 1;
}

.lsh__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh; /* dvh qo'llab-quvvatlansa — mobil brauzer manzil panelini hisobga oladi */
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

/* Drag paytida JS transition'ni "none" qilib qo'yadi (inline style) —
   qo'yib yuborilganda shu CSS transition qaytadan ishga tushadi. */
.lsh--half .lsh__panel { transform: translateY(38%); }
.lsh--full .lsh__panel { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .lsh__panel { transition-duration: .12s; }
    .lsh__backdrop { transition-duration: .12s; }
}

.lsh__grip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    cursor: grab;
    touch-action: none; /* faqat shu elementda pointer eventlar sahifa scroll'iga aylanmasin */
}

.lsh__bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d5dadf;
}

.lsh__loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #e5e9eb;
    border-top-color: #04a5b5;
    border-radius: 50%;
    animation: lshSpin .8s linear infinite;
}

.lsh--loading .lsh__loader {
    display: block;
}

.lsh--loading .lsh__frame {
    opacity: 0;
}

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

.lsh__frame {
    /* flex-grow 0 — balandlikni JS (updateFrameHeight) aniq px'da beradi;
       1 bo'lsa flex uni butun panelga cho'zib yuborar va half holatda
       iframe'ning pastki qismi ekran tashqarisida kesilib qolardi. */
    flex: 0 0 auto;
    height: 0;
    width: 100%;
    border: 0;
    background: #fff;
    transition: opacity .15s ease;
}

@media (min-width: 769px) {
    /* Desktopda hech qachon ochilmaydi (listing-sheet.js faqat ≤768px'da
       ishga tushiriladi), lekin DOM'da bo'lishi zararsiz — ehtiyot uchun
       butunlay yashiramiz. */
    .lsh { display: none; }
}