/* دکمه‌ی راه‌انداز موزه، درست زیر دکمه‌ی «کل‌کل کاربرها» */
.fpp-museum-launcher-wrap{margin-top:10px;display:flex;justify-content:center;}
.fpp-museum-launcher{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 20px;border-radius:999px;border:none;cursor:pointer;
    background:linear-gradient(135deg,#F2A93B,#C9860D);
    color:#fff;font-weight:700;font-size:13.5px;font-family:inherit;
    box-shadow:0 8px 20px rgba(201,134,13,.35);
    transition:transform .15s,box-shadow .15s;
}
.fpp-museum-launcher:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(201,134,13,.45);}
.fpp-museum-launcher:active{transform:translateY(0);}
.fpp-museum-launcher-icon{font-size:17px;line-height:1;}
.fpp-museum-launcher-icon-img{width:20px;height:20px;object-fit:contain;}

/* پاپ‌آپ موزه */
.fpp-museum-popup{
    position:fixed;inset:0;z-index:999998;background:rgba(20,14,4,.6);
    display:flex;align-items:center;justify-content:center;padding:16px;
    /* همان راهکار پاپ‌آپ چت: بدون isolate، در برخی مرورگرهای دسکتاپ به‌خاطر
       بافت چیدمان (stacking context) هدر/بقیه‌ی سایت که backdrop-filter دارند،
       ممکن است المان‌هایی با z-index پایین‌تر اشتباهاً روی این پاپ‌آپ رندر شوند. */
    isolation:isolate;
}
.fpp-museum-popup[hidden]{display:none;}
body.fpp-museum-open .fpp-bottom-nav{display:none !important;}
.fpp-museum-panel{
    position:relative;isolation:isolate;
    width:100%;max-width:640px;max-height:82vh;display:flex;flex-direction:column;
    background:var(--fpp-modal-bg,#fff);border-radius:18px;
    /* overflow:hidden اینجا نیست چون قاب فعال هنگام بلندشدن/زوم دیگر داخل
       این باکس نیست (به position:fixed منتقل می‌شود)؛ پس نیازی به overflow
       که باعث بریده‌شدن قاب از بالای پاپ‌آپ می‌شد، نیست. */
}
.fpp-museum-panel::before{
    content:'';position:absolute;inset:0;border-radius:18px;
    background:var(--fpp-modal-bg,#fff);box-shadow:0 20px 60px rgba(0,0,0,.45);
    z-index:-1;
}
.fpp-museum-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;background:linear-gradient(135deg,#3b2a12,#1c1408);color:#FFE9AE;
    border-radius:18px 18px 0 0;
}
.fpp-museum-header-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;}
.fpp-museum-close{width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#FFE9AE;font-size:14px;cursor:pointer;}
.fpp-museum-description{padding:14px 16px 4px;margin:0;color:var(--fpp-text-muted,#777);font-size:13px;text-align:center;}
.fpp-museum-empty{padding:24px;text-align:center;color:var(--fpp-text-muted,#888);}

/* قفسه: حکم‌ها کنار هم، با یک لبه‌ی چوبی تیره زیرشان */
.fpp-museum-shelf{
    flex:1;overflow-y:auto;overflow-x:hidden;border-radius:0 0 18px 18px;
    padding:34px 18px 40px;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:30px;
    background:
        linear-gradient(180deg, transparent 0%, transparent calc(100% - 14px), rgba(0,0,0,.18) calc(100% - 14px)),
        repeating-linear-gradient(180deg, rgba(0,0,0,.02) 0 40px, rgba(0,0,0,.05) 40px 42px);
}

/* --- هر حکم: مدل واقعی سه‌بعدی (GLB) به‌جای شبیه‌سازی CSS ---
   اندازه روی خودِ قاب تعریف می‌شود (نه روی قفسه) تا وقتی قاب فعال با
   جاوااسکریپت به استیج جدا منتقل می‌شود، اندازه‌اش را از دست ندهد. */
.fpp-museum-frame{
    --fpp-frame-s:120px;
    position:relative;width:var(--fpp-frame-s);cursor:pointer;
}
.fpp-museum-mv{
    width:100%;aspect-ratio:1 / 1.3;height:auto;
    display:block;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
    transition:filter .35s;
    --poster-color:transparent;
}
.fpp-museum-frame:hover .fpp-museum-mv{filter:drop-shadow(0 14px 20px rgba(0,0,0,.45));}
.fpp-museum-frame-title{margin-top:10px;text-align:center;font-size:11.5px;color:#FFE9AE;font-weight:600;}

/* --- حالت پشتیبان (fallback): وقتی هیچ‌کدام از CDNهای model-viewer لود
   نشوند، به‌جای باکس خالی، عکس ساده‌ی هر حکم با یک قاب طلاییِ CSS ساده
   نشان داده می‌شود؛ قفسه هیچ‌وقت کاملاً خالی به‌نظر نمی‌رسد. */
.fpp-museum-fallback-img{
    width:100%;aspect-ratio:1 / 1.3;object-fit:cover;display:block;
    border:6px solid;
    border-image:linear-gradient(155deg,#FFE9AE 0%,#D9A03D 22%,#8A5A12 48%,#F2CB7A 62%,#B4791E 82%,#FFE9AE 100%) 1;
    box-shadow:0 0 0 4px #F6F1E4 inset, 0 10px 14px rgba(0,0,0,.35);
    border-radius:2px;
}
.fpp-museum-hero .fpp-museum-fallback-img{border-width:10px;box-shadow:0 0 0 8px #F6F1E4 inset, 0 40px 50px rgba(0,0,0,.6);}

/* --- نمایش بزرگ‌شده (لایت‌باکس): یک model-viewer ثابت که همیشه در DOM
   هست؛ فقط با یک کلاس نمایش/مخفی می‌شود. برخلاف روش قبلی، هرگز جابه‌جا
   نمی‌شود، پس مشکل گوست‌شدن/دوتاشدن تصویر موقع جابه‌جایی canvas بین
   قفسه و استیج در سافاری iOS از اساس رخ نمی‌دهد. */
.fpp-museum-lightbox-backdrop{
    position:fixed;inset:0;z-index:1000000;background:rgba(8,5,2,.72);
    opacity:0;pointer-events:none;transition:opacity .3s;
}
.fpp-museum-lightbox-backdrop.is-visible{opacity:1;pointer-events:auto;}

.fpp-museum-lightbox-stage{
    position:fixed;inset:0;z-index:1000001;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
    opacity:0;visibility:hidden;
    transition:opacity .3s;
}
.fpp-museum-lightbox-stage.is-visible{
    opacity:1;visibility:visible;pointer-events:auto;
    animation:fpp-museum-pop-in .3s cubic-bezier(.2,.8,.3,1.2);
}
.fpp-museum-hero{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    /* عرض بر اساس ویوپورت، ارتفاع با aspect-ratio خودِ قاب (نسبت واقعی
       مدل GLB: 1 به 1.3) هماهنگ می‌شود؛ به همین دلیل هیچ‌وقت لبه‌های
       قاب برش نمی‌خورد یا کِش نمی‌آید. */
    width:min(80vw,380px);
}
.fpp-museum-hero-mv{
    width:100%;aspect-ratio:1 / 1.3;height:auto;
    filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));
    --poster-color:transparent;
}
.fpp-museum-hero .fpp-museum-frame-title{color:#FFE9AE;font-size:13px;font-weight:600;min-height:1em;}
@keyframes fpp-museum-pop-in{
    0%{opacity:0;transform:scale(.85);}
    100%{opacity:1;transform:scale(1);}
}

@media (max-width:600px){
    .fpp-museum-shelf{gap:20px;padding:26px 12px 32px;}
    .fpp-museum-frame{--fpp-frame-s:96px;}
}