/* ---------- Rimless live demo — popup (js/rimless-demo.js) ---------- */
/* Một kiểu giao diện cho mọi màn hình: card điện thoại giữa màn hình, khung
   hình trên, panel chọn đè lên mép dưới khung (giống assets/rimless/app.*).
   Kích thước (phải ổn định khi popup đang mở):
     --rd-pad  lề popup = padding card (12px; điện thoại < 600px: 0, toàn màn hình)
     --rd-h    chỗ dọc tối đa cho khung hình = 100svh − 4 × pad − 108 (panel ~140 − 36 đè, dư vài px)
     --rd-w    bề ngang khung = min(560, 100vw − 4 × pad, rd-h / 1.1)
     khung cao = min(1.3 × rộng, rd-h) — màn dọc được khung cao, màn thấp co về ~1.1
   Dùng svh (chiều cao nhỏ nhất) chứ không dvh: thanh địa chỉ điện thoại ẩn/hiện
   không làm khung đổi cỡ giữa chừng.
   Card không được co (flex-shrink: 0): co lại thì khung lúc mở khác lúc
   dựng xong, panel nhảy cỡ. */
.rd-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    --rd-pad: 12px;
    padding: var(--rd-pad);
}

.rd-modal[hidden] {
    display: none;
}

.rd-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
}

.rd-dialog {
    --rd-h: calc(100svh - 4 * var(--rd-pad) - 108px);
    --rd-w: min(560px, calc(100vw - 4 * var(--rd-pad)), calc(var(--rd-h) / 1.1));
    --rd-per-row: 5;
    position: relative;
    flex-shrink: 0;
    width: calc(var(--rd-w) + 2 * var(--rd-pad));
    padding: var(--rd-pad);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.rd-screen {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Khung cố định. Đổi bề ngang quá 40px thì JS dựng lại khung hình. */
.rd-stage {
    position: relative;
    width: 100%;
    height: min(calc(var(--rd-w) * 1.3), var(--rd-h));
    background: radial-gradient(120% 90% at 50% 35%, #F1F2F4 0%, #E4E6EA 100%);
    overflow: hidden;
    touch-action: none;
}

.rd-engine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
}

.rd-engine:active {
    cursor: grabbing;
}

/* Trên lớp overlay (14): lúc đang tải / mở camera vẫn bấm được 360 hoặc đóng */
.rd-topbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 60px;
    z-index: 16;
    display: flex;
    pointer-events: none;
}

.rd-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
    pointer-events: auto;
}

.rd-seg button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    transition: background-color .2s, color .2s;
}

.rd-seg button svg {
    width: 16px;
    height: 16px;
}

.rd-seg button:hover {
    color: #4F46E5;
}

.rd-seg button.is-active {
    background: #6D5BD0;
    color: #fff;
}

/* Nút đóng ở góc phải khung, chỗ nút "Fit" của design */
.rd-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.15);
}

.rd-close:hover {
    background: #fff;
    color: #111827;
}

.rd-close svg {
    width: 18px;
    height: 18px;
}

/* Hint + toast nằm trên phần panel đè (36px) */
.rd-hint,
.rd-toast {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    z-index: 10;
    max-width: calc(100% - 24px);
    padding: 6px 12px;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.7);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.rd-toast {
    z-index: 12;
    width: max-content;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.85);
}

/* z-index dưới panel (15): lớp loading/camera chỉ phủ khung hình, không phủ panel */
.rd-overlay {
    position: absolute;
    inset: 0;
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 24px 60px;
    text-align: center;
    /* phần đáy khung bị panel che 36px: đẩy nội dung lên giữa phần còn thấy */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    color: #4B5563;
    font-size: 14px;
}

.rd-overlay[hidden],
.rd-hint[hidden],
.rd-toast[hidden],
.rd-spinner[hidden],
.rd-retry[hidden] {
    display: none;
}

.rd-spinner {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 3px solid #E0E7FF;
    border-top-color: #6D5BD0;
    animation: rd-spin .8s linear infinite;
}

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

.rd-retry {
    padding: 8px 16px;
    border-radius: 9999px;
    background: #6D5BD0;
    color: #fff;
    font-weight: 600;
}

/* Panel đè lên mép dưới khung hình */
.rd-panel {
    position: relative;
    z-index: 15;
    margin-top: -36px;
    padding: 14px 12px 12px;
    border-radius: 1.25rem 1.25rem 0 0;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.06), 0 0 0 1px rgba(17, 24, 39, 0.04);
}

/* Laptop / desktop (chuột, màn đủ rộng): webcam quay ngang nên khung hình
   ngang 4:3 thay vì dọc — cùng chiều cao, rộng hơn nhiều.
     --rd-w = min(880, 100vw − 4 × pad, rd-h / 0.75), khung cao = min(0.75 × rộng, rd-h)
   Card rộng thì panel xếp 8 hình một hàng. Tên class .rd-dialog/.rd-stage giữ nguyên, JS không
   cần biết đang ở kiểu nào. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .rd-dialog {
        --rd-w: min(880px, calc(100vw - 4 * var(--rd-pad)), calc(var(--rd-h) / 0.75));
        --rd-per-row: 8;
    }

    .rd-stage {
        height: min(calc(var(--rd-w) * 0.75), var(--rd-h));
    }
}

.rd-chip {
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: #F5F5F7;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.rd-chip:hover {
    border-color: #D4CEF5;
}

.rd-chip[aria-pressed="true"] {
    border-color: #8B7CE0;
    background: #F1EEFD;
}

.rd-chip:focus-visible,
.rd-shapes:focus-visible,
.rd-seg button:focus-visible,
.rd-close:focus-visible,
.rd-cart:focus-visible,
.rd-fav:focus-visible {
    outline: 2px solid #6D5BD0;
    outline-offset: 2px;
}

.rd-slider {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rd-shapes {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 2px;
    padding: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.rd-shapes::-webkit-scrollbar {
    display: none;
}

/* --rd-per-row hình lọt một hàng (5; desktop 8), phần còn lại vuốt/cuộn.
   Cao cố định (không theo bề ngang) để panel cao như nhau ở mọi cỡ popup —
   công thức --rd-h ở .rd-dialog tính sẵn chiều cao panel */
.rd-shape {
    flex: 0 0 calc((100% - (var(--rd-per-row) - 1) * 8px) / var(--rd-per-row));
    height: 52px;
    padding: 6px;
    scroll-snap-align: start;
    color: #4B5563;
    background: #fff;
    border-color: #ECECF0;
}

/* Ô giữ chỗ khi danh sách hình chưa tải (xem renderShapeSkeleton) */
.rd-shape.rd-skel {
    background: linear-gradient(90deg, #F5F5F7, #ECECEF, #F5F5F7);
    border-color: transparent;
}

.rd-shape svg {
    width: 100%;
    height: 100%;
}

.rd-shape svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.rd-shape svg circle {
    fill: #fff;
    stroke: currentColor;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.rd-shape[aria-pressed="true"] {
    color: #374151;
}

.rd-shape[aria-pressed="true"] svg path {
    fill: rgba(109, 91, 208, 0.06);
}

/* Mũi tên nằm ngoài hai đầu slider (không đè hình), chỉ khi có chuột */
.rd-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.2);
}

.rd-arrow svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .rd-arrow {
        display: inline-flex;
    }
}

.rd-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.rd-cart {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 9999px;
    background: #6D5BD0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .15s;
}

.rd-cart:hover {
    background: #5B49C4;
}

.rd-cart svg {
    width: 20px;
    height: 20px;
}

.rd-fav {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #F0F0F2;
    color: #374151;
}

.rd-fav svg {
    width: 20px;
    height: 20px;
}

.rd-fav[aria-pressed="true"] {
    color: #E11D48;
}

.rd-fav[aria-pressed="true"] svg {
    fill: currentColor;
}

.sr-only-rd {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Điện thoại (< 600px): popup phủ kín màn hình — không lề, không viền card,
   không bo góc ngoài. Khung hình rộng hết màn, cao tới sát panel:
     khung cao = 100svh − 104 (panel ~140 − 36 đè)
   svh chứ không dvh để thanh địa chỉ ẩn/hiện không đổi cỡ khung.
   Phần dư khi thanh địa chỉ ẩn nằm dưới panel, cùng nền trắng.
   Đặt sau mọi luật .rd-* ở trên để thắng cascade. */
@media (max-width: 599px) {
    .rd-modal {
        --rd-pad: 0px;
        padding: 0;
    }

    .rd-dialog {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        /* phòng webview báo sai chiều cao màn hình: vẫn cuộn tới được Add to cart */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .rd-screen {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
    }

    .rd-stage {
        flex-shrink: 0;
        height: calc(100svh - 104px);
    }

    .rd-panel {
        flex: 1;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
    }

    .rd-topbar,
    .rd-close {
        top: calc(12px + env(safe-area-inset-top, 0px));
    }
}

/* Trình duyệt chưa có svh (iOS < 15.4, vài webview trong app): khai báo có svh
   thành không hợp lệ -> khung hình mất chiều cao. Dùng vh thay thế. */
@supports not (height: 100svh) {
    .rd-dialog {
        --rd-h: calc(100vh - 4 * var(--rd-pad) - 108px);
    }

    @media (max-width: 599px) {
        .rd-stage {
            height: calc(100vh - 104px);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-spinner {
        animation-duration: 2s;
    }
}

/* Trang riêng (rimless/tryon.html): không có trang phía sau nên bỏ nút đóng
   và lớp nền mờ */
.rd-modal[data-rd-standalone] .rd-close {
    display: none;
}

.rd-modal[data-rd-standalone] .rd-backdrop {
    background: #F3F4F6;
    backdrop-filter: none;
}