/* ==========================================================================
   frame-viewer.css — «نمای سه‌بعدی» (js/frame-viewer.js).
   تمام‌صفحه، روی همه‌چیز. رنگ‌ها از متغیرهای base.css.
   ========================================================================== */

html.fv-lock, html.fv-lock body{overflow:hidden}

.fv{position:fixed;inset:0;z-index:400;background:#0A0908;color:var(--bone);
  display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:opacity .25s var(--ease);
  font-family:var(--body);-webkit-user-select:none;user-select:none}
.fv.is-open{opacity:1}
.fv[hidden]{display:none}

/* ── صحنه ─────────────────────────────────────────────────────────── */
.fv-stage{position:absolute;inset:0;touch-action:none;cursor:grab;overflow:hidden;background:#F4F3F0}
.fv.is-dark .fv-stage{background:#151311}
.fv-stage:active{cursor:grabbing}
.fv.is-pov .fv-stage{cursor:move;background:#000}
.fv-cv{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block;max-width:none}
.fv-pov{opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.fv-pov.is-on{opacity:1}

.fv-status{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;
  color:#3A342C;font-size:.9rem;text-align:center;padding:2rem;pointer-events:none}
.fv.is-dark .fv-status{color:var(--bone-dim)}
.fv-status[hidden]{display:none}
.fv-spin{inline-size:26px;block-size:26px;border-radius:50%;border:2px solid rgba(200,145,89,.25);
  border-top-color:var(--bronze);animation:fv-spin .9s linear infinite;display:none}
.fv-status.is-busy .fv-spin{display:block}
@keyframes fv-spin{to{transform:rotate(360deg)}}

.fv-hint{position:absolute;inset-inline:0;bottom:calc(9.5rem + var(--safe-b));margin:0 auto;inline-size:max-content;
  max-inline-size:calc(100% - 2rem);text-align:center;font-size:.8rem;line-height:1.6;
  color:#F4EFE6;background:rgba(14,12,10,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:.45em 1em;border-radius:999px;opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.fv-hint.is-on{opacity:1;transform:none}

/* ── خطِ مقایسه ─────────────────────────────────────────────────────── */
.fv-split{--x:50%;position:absolute;inset:0;pointer-events:none}
.fv-split[hidden]{display:none}
.fv-split-bar{position:absolute;inset-block:0;left:var(--x);inline-size:2px;margin-left:-1px;
  background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 18px rgba(0,0,0,.35)}
.fv-split-knob{position:absolute;top:50%;left:var(--x);inline-size:44px;block-size:44px;margin:-22px 0 0 -22px;
  border-radius:50%;border:2px solid #fff;background:rgba(20,17,14,.55);color:#fff;font-size:1.1rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:ew-resize;pointer-events:auto;touch-action:none}
.fv-split-knob:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.fv-tag{position:absolute;top:calc(4.6rem + var(--safe-t));font-weight:600;font-size:.74rem;letter-spacing:.02em;
  color:#fff;background:rgba(14,12,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.35em .8em;border-radius:999px;white-space:nowrap}
.fv-tag-a{left:calc(var(--x) + 12px)}
.fv-tag-b{right:calc(100% - var(--x) + 12px)}

/* ── نوارِ بالا ─────────────────────────────────────────────────────── */
.fv-top{position:relative;z-index:2;display:flex;align-items:center;gap:1rem;
  padding:calc(.8rem + var(--safe-t)) clamp(.8rem,3vw,1.6rem) .8rem;
  background:linear-gradient(rgba(10,9,8,.78),rgba(10,9,8,0));pointer-events:none}
.fv-top > *{pointer-events:auto}
.fv-title{display:grid;gap:.1rem;min-inline-size:0;flex:1}
.fv-title b{font-family:var(--display);font-size:clamp(.92rem,2vw,1.08rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-title span{font-size:.72rem;color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-tabs{display:flex;padding:3px;border-radius:999px;background:rgba(20,18,16,.72);
  border:1px solid rgba(200,145,89,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fv-tabs button{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;color:var(--bone-dim);
  font:inherit;font-size:.8rem;padding:.5em 1em;border-radius:999px;cursor:pointer;white-space:nowrap}
.fv-tabs button[aria-selected=true]{background:var(--bronze);color:#1A1209;font-weight:600}
.fv-tabs svg,.fv-ico svg,.fv-go svg,.fv-lbl svg{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fv-close{inline-size:42px;block-size:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(20,18,16,.72);color:var(--bone);display:grid;place-items:center;cursor:pointer}
.fv-close svg{inline-size:20px;block-size:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.fv-close:hover{border-color:var(--bronze)}
.fv button:focus-visible,.fv select:focus-visible,.fv input:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* ── پنلِ پایین ─────────────────────────────────────────────────────── */
.fv-panel{position:relative;z-index:2;grid-row:3;justify-self:center;display:grid;gap:.55rem;
  inline-size:min(100% - 1.6rem, 62rem);margin:0 auto calc(.9rem + var(--safe-b));padding:.75rem .9rem;
  background:rgba(16,14,12,.80);border:1px solid rgba(200,145,89,.22);border-radius:16px;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.fv-panel[hidden]{display:none}
.fv-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem}
.fv-sep{inline-size:1px;block-size:24px;background:rgba(255,255,255,.12);margin-inline:.1rem}
.fv-seg{display:inline-flex;flex-wrap:wrap;border-radius:10px;padding:2px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)}
.fv-seg button{border:0;background:none;color:var(--bone-dim);font:inherit;font-size:.78rem;
  padding:.5em .85em;border-radius:8px;cursor:pointer;min-block-size:36px;white-space:nowrap}
.fv-seg button:hover{color:var(--bone)}
.fv-seg button[aria-pressed=true]{background:var(--bone);color:#16130F;font-weight:600}
.fv-lens button[aria-pressed=true]{background:var(--bronze);color:#1A1209}
.fv-ico{display:inline-grid;place-items:center;grid-auto-flow:column;gap:.35rem;min-inline-size:38px;block-size:38px;
  padding:0 .5rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  color:var(--bone-dim);cursor:pointer;font:inherit;font-size:.78rem}
.fv-ico[aria-pressed=true]{color:var(--bronze);border-color:rgba(200,145,89,.55);background:rgba(200,145,89,.12)}
.fv-ico:hover{color:var(--bone)}
.fv-chip{border:1px dashed rgba(200,145,89,.55);background:none;color:var(--bronze);font:inherit;font-size:.74rem;
  padding:.45em .8em;border-radius:999px;cursor:pointer;min-block-size:34px}
.fv-chip[aria-pressed=true]{border-style:solid;background:rgba(200,145,89,.14)}
.fv-side{font-size:.72rem;color:var(--bone-dim);min-inline-size:4.6rem}
.fv-lbl{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--bone-dim)}
.fv-lbl select{font:inherit;font-size:.78rem;color:var(--bone);background:#1C1916;border:1px solid rgba(255,255,255,.14);
  border-radius:8px;padding:.4em .6em;min-block-size:36px}
.fv-range input{inline-size:clamp(6rem,14vw,10rem);accent-color:var(--bronze)}
.fv-go{display:inline-flex;align-items:center;gap:.45rem;margin-inline-start:auto;padding:.6em 1.1em;border-radius:999px;
  font-size:.82rem}
.fv-explain{margin:.1rem 0 0;font-size:.78rem;line-height:1.9;color:var(--bone)}
.fv-explain .dim{color:var(--bone-dim)}
.fv.is-fly .fv-panel{opacity:.0;pointer-events:none;transition:opacity .3s}

@media (max-width:760px){
  .fv-top{flex-wrap:wrap;gap:.6rem}
  .fv-title{order:1;flex-basis:calc(100% - 56px)}
  .fv-close{order:2}
  .fv-tabs{order:3;margin-inline:auto}
  .fv-tabs button{font-size:.76rem;padding:.5em .8em}
  .fv-panel{inline-size:calc(100% - 1rem);margin-bottom:calc(.5rem + var(--safe-b));padding:.6rem;border-radius:14px;
    max-block-size:46vh;overflow:auto}
  .fv-seg button{padding:.5em .65em;font-size:.74rem}
  .fv-go{margin-inline-start:0;inline-size:100%;justify-content:center}
  .fv-sep{display:none}
  .fv-hint{bottom:calc(12rem + var(--safe-b))}
  .fv-tag{top:calc(7.6rem + var(--safe-t))}
  .fv-range input{inline-size:7rem}
}
@media (prefers-reduced-motion:reduce){.fv,.fv-pov,.fv-hint{transition:none}}

/* ── دکمه‌ها در صفحه‌ی محصول ───────────────────────────────────────── */
.p3d{display:inline-flex;align-items:center;gap:.6rem;margin-block-end:.8rem;padding:.75em 1.15em;
  border:1px solid rgba(200,145,89,.55);border-radius:999px;background:rgba(200,145,89,.08);color:var(--bone);
  font:inherit;font-size:.9rem;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.p3d:hover{background:rgba(200,145,89,.16);border-color:var(--bronze)}
.p3d:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.p3d svg{inline-size:22px;block-size:22px;fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.p3d small{display:block;font-size:.7rem;color:var(--bone-dim);margin-top:.1rem}
.p3d span{display:grid;text-align:start;line-height:1.35}
.pshot{position:relative}
.pgal3d{position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  padding:.45em .85em;border-radius:999px;border:1px solid rgba(200,145,89,.6);background:rgba(11,9,6,.72);color:var(--bone);
  font:inherit;font-size:.74rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pgal3d:hover{border-color:var(--bronze);color:var(--bronze-lit)}
.pgal3d svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pempty .pgal3d{position:static;margin-block-start:1rem}
.fv-sun{display:contents}
.fv-sun[hidden]{display:none}

/* روی گوشی پنلِ «از پشتِ عدسی» جمع است: فقط عدسی‌ها و مقایسه؛ منظره،
   خورشید، کج‌کردنِ سر و توضیح پشتِ «بیشتر». */
.fv-more{display:none}
@media (max-width:760px){
  .fv-more{display:inline-grid}
  .fv-panel-pov:not(.is-more) > .fv-row:not(.fv-lensrow),
  .fv-panel-pov:not(.is-more) > .fv-explain{display:none}
  .fv-panel-pov .fv-lensrow .fv-chip{display:none}
  .fv-panel-pov.is-more .fv-lensrow .fv-chip{display:inline-block}
  .fv-side{min-inline-size:auto}
}

/* ── «در حال آماده‌سازی»: دکمه‌ای که کارش شروع شده، کلیکِ دوم نمی‌گیرد ── */
.p3d[aria-busy=true],.pgal3d[aria-busy=true],.fv-go[aria-busy=true],
.fv-tabs button[aria-busy=true],.fv-seg button[aria-busy=true]{cursor:progress;pointer-events:none}
.p3d[aria-busy=true] svg,.pgal3d[aria-busy=true] svg,.fv-go[aria-busy=true] svg{
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;stroke:none;
  animation:fv-spin .9s linear infinite}
.p3d[aria-busy=true] svg path,.pgal3d[aria-busy=true] svg path,.fv-go[aria-busy=true] svg *{display:none}
.p3d[aria-busy=true]{opacity:.85}
.fv-seg button[aria-busy=true]{opacity:.6}
.fv-go:disabled,.fv-tabs button:disabled{opacity:.45;cursor:not-allowed}