/* Quick view: a listing opened in an overlay on top of the list.
 *
 * The overlay (`.qv`) lives in the list page; the listing itself is the
 * normal detail page loaded in an iframe with `?embed=1`, which strips the
 * site chrome (header, footer, tab bar, cookie banner) — see base.html.
 */

/* ---- The list page while the overlay is open --------------------------- */

/* Scroll lock: the page keeps its height and position (the top offset is
   set from JS so nothing jumps), only the overlay scrolls. */
html.qv-open,
html.qv-open body {
    overflow: hidden;
}
html.qv-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.qv {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(11, 15, 25, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: qv-fade 180ms ease-out both;
}

.qv__box {
    position: relative;
    width: min(1180px, 94vw);
    height: min(92vh, 92dvh);
    background: var(--bg-primary, #fff);
    border-radius: 22px;
    box-shadow: 0 24px 64px -16px rgba(11, 15, 25, 0.45), 0 2px 8px rgba(11, 15, 25, 0.12);
    overflow: hidden;
    animation: qv-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.qv__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-primary, #fff);
}

.qv__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #E6E8EE;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0B0F19);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(11, 15, 25, 0.06);
    transition: background 120ms ease, transform 120ms ease;
}
[dir="rtl"] .qv__close {
    right: auto;
    left: 12px;
}
.qv__close:hover { background: #F5F6F8; }
.qv__close:active { transform: scale(0.96); }
.qv__close:focus-visible {
    outline: 2px solid var(--brand-niban, #007AFF);
    outline-offset: 2px;
}
.qv__close svg { width: 18px; height: 18px; display: block; }

/* Thin loading bar along the top of the box until the listing is in. */
.qv__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 3;
    overflow: hidden;
    background: rgba(0, 122, 255, 0.12);
}
.qv__loading::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: var(--brand-niban, #007AFF);
    border-radius: 2px;
    animation: qv-slide 1s ease-in-out infinite;
}
.qv--loaded .qv__loading { display: none; }

@keyframes qv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qv-pop {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes qv-slide {
    from { left: -40%; }
    to   { left: 100%; }
}

@media (max-width: 640px) {
    .qv__box {
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }
    .qv__close {
        top: calc(10px + env(safe-area-inset-top, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .qv,
    .qv__box { animation: none; }
    .qv__loading::after { animation-duration: 2s; }
    .qv__close { transition: none; }
}

/* ---- The listing page inside the iframe (`<body class="is-embedded">`) -- */

/* No fixed header any more: the content starts near the top, leaving room
   for the overlay's close button; no tab bar either, so no bottom padding. */
body.is-embedded .main-content {
    min-height: 0;
    padding-top: 60px; /* clears the overlay's ✕ (12px + 40px) */
    padding-bottom: 32px;
    animation: none;
}
@media (max-width: 767px) {
    body.is-embedded .main-content { padding-bottom: 32px; }
}