/* =============================================================
 * Product Showcase Widget for Elementor — frontend styles
 * Scoped entirely under .psw-root so it never leaks into the
 * host theme, and multiple instances on one page stay independent.
 * ============================================================= */

.psw-root{

  --void:#0a0d13;
  --void-2:#10141c;
  --void-3:#151b26;
  --glass: rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.09);
  --glass-solid: rgba(21,26,36,.82);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.20);
  --ink:#f4f6fb;
  --ink-dim:#98a2b5;
  --ink-faint:#5c6478;
  --accent:#E2793D;
  --accent-2:#f0a068;
  --accent-rgb:226,121,61;
  --danger:#e0577a;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-fast:.28s;
  --dur:.55s;
  --dur-slow:.9s;
  --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
  color-scheme: dark;
  font-family:'Vazirmatn', system-ui, sans-serif;
  direction: rtl;
  color: var(--ink);
  display:block;
}
.psw-root, .psw-root *{ box-sizing:border-box; }
.psw-root ::selection{ background: rgba(var(--accent-rgb),.35); }
.psw-root ::-webkit-scrollbar{ width:8px; height:8px; }
.psw-root ::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }
.psw-root ::-webkit-scrollbar-track{ background:transparent; }
.psw-root button{ font-family:inherit; }
.psw-root :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce){
  .psw-root *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ============================= OVERLAY SHELL ============================= */
.pw-overlay{
  position:fixed; inset:0; z-index:999990;
  display:flex; flex-direction:column;
  background: var(--void);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--dur) var(--ease);
}
.pw-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }

.pw-bgfx{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.pw-bgfx::before, .pw-bgfx::after{
  content:''; position:absolute; width:70vmax; height:70vmax; border-radius:50%;
  filter: blur(90px); opacity:.28;
  transition: background var(--dur-slow) var(--ease);
}
.pw-bgfx::before{ top:-30vmax; right:-24vmax; background: radial-gradient(circle, rgba(var(--accent-rgb),.9), transparent 60%); }
.pw-bgfx::after{ bottom:-32vmax; left:-22vmax; background: radial-gradient(circle, rgba(80,110,255,.55), transparent 60%); }
.pw-grid{ position:absolute; inset:0; z-index:0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 60% at 50% 38%, black, transparent 85%);
}

/* ============================= TOPBAR ============================= */
.pw-topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px 6px;
  gap:12px;
}
.pw-cat-switch{
  display:flex; align-items:center; gap:10px;
  background: var(--glass);
  border:1px solid var(--border);
  backdrop-filter: blur(18px);
  border-radius:999px;
  padding:6px;
  margin:0 auto;
}
.pw-cat-arrow{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass-strong);
  border:1px solid var(--border);
  color:var(--ink);
  cursor:pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pw-cat-arrow svg{ width:16px; height:16px; }
.pw-cat-arrow:hover{ background: rgba(var(--accent-rgb),.22); border-color: rgba(var(--accent-rgb),.55); transform: scale(1.08); box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb),.55); }
.pw-cat-arrow:active{ transform: scale(.94); }

.pw-cat-pill{
  display:flex; align-items:center; gap:9px;
  padding:8px 18px;
  border-radius:999px;
  min-width:190px;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.pw-cat-icon{ font-size:20px; filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb),.5)); transition: transform var(--dur) var(--ease); }
.pw-cat-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.pw-cat-name{ font-weight:800; font-size:14.5px; }
.pw-cat-index{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.05em; }
.pw-cat-anim-in{ animation: catIn .5s var(--ease); }
@keyframes catIn{ from{ opacity:0; transform: translateY(6px) scale(.9); filter: blur(6px);} to{ opacity:1; transform:none; filter:blur(0);} }

.pw-topbar-actions{ display:flex; gap:8px; }
.pw-icon-btn{
  width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass);
  border:1px solid var(--border);
  backdrop-filter: blur(18px);
  color:var(--ink);
  cursor:pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pw-icon-btn svg{ width:18px; height:18px; }
.pw-icon-btn:hover{ transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.pw-icon-btn:active{ transform: translateY(0) scale(.94); }

/* ============================= BODY / STAGE ============================= */
.pw-body{
  position:relative; z-index:2;
  flex:1;
  display:grid;
  grid-template-columns: 118px 1fr 118px;
  align-items:center;
  gap:6px;
  padding: 0 10px;
  min-height:0;
}
.pw-queue{ display:flex; flex-direction:column; gap:14px; align-items:center; justify-self:center; }
@media (max-width: 860px){
  .pw-body{ grid-template-columns: 1fr; }
  .pw-queue{ display:none; }
}
.pw-queue-card{
  width:78px; height:78px; border-radius:20px;
  background: var(--glass);
  border:1px solid var(--border);
  backdrop-filter: blur(14px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; overflow:hidden;
  opacity:.55; transform: scale(.82);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pw-queue-card:hover{ opacity:1; transform: scale(.95); border-color: rgba(var(--accent-rgb),.5); box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb),.5); }
.pw-queue-card:nth-child(1){ opacity:.85; transform: scale(.92); }
.pw-queue-card svg{ width:70%; height:70%; }
.pw-queue-card .pw-q-label{ position:absolute; bottom:3px; inset-inline:0; text-align:center; font-size:8px; color:var(--ink-faint); font-family:var(--mono); }
.pw-q-enter{ animation: qEnter var(--dur) var(--ease); }
@keyframes qEnter{ from{ opacity:0; transform: scale(.6) translateY(10px); } }

.pw-stage-wrap{
  position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column;
  min-height:0; height:100%;
  padding: 6px 0 0;
}
.pw-orbit{
  position:absolute; width:min(64vmin,440px); height:min(64vmin,440px);
  border-radius:50%;
  border:1px dashed rgba(var(--accent-rgb),.35);
  animation: spin 34s linear infinite;
  pointer-events:none;
}
.pw-orbit.r2{ width:min(74vmin,500px); height:min(74vmin,500px); border-color: rgba(255,255,255,.08); animation-duration:50s; animation-direction:reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.pw-stage-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; z-index:6; padding: 0 2px;}
.pw-prod-arrow{
  pointer-events:auto;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border:1px solid var(--border-strong);
  backdrop-filter: blur(20px);
  color:var(--ink);
  cursor:pointer;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.pw-prod-arrow svg{ width:20px; height:20px; }
.pw-prod-arrow:hover{ transform: scale(1.1); border-color: rgba(var(--accent-rgb),.6); box-shadow: 0 22px 46px -14px rgba(var(--accent-rgb),.5); }
.pw-prod-arrow:active{ transform: scale(.95); }

.pw-stage-card{
  width:min(58vmin,380px); height:min(58vmin,380px);
  border-radius:32px;
  position:relative;
  cursor:grab;
  perspective:1000px;
  touch-action:none;
}
.pw-stage-card:active{ cursor:grabbing; }
.pw-stage-inner{
  position:absolute; inset:0;
  border-radius:32px;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border:1px solid var(--border);
  backdrop-filter: blur(22px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  transform-style:preserve-3d;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pw-stage-inner.dragging{ transition:none; }
.pw-stage-art{ width:78%; height:78%; filter: drop-shadow(0 22px 30px rgba(0,0,0,.5)); transition: opacity .28s ease, transform .28s var(--ease); }
.pw-stage-art img{ width:100%; height:100%; object-fit:contain; }
.pw-stage-glare{
  position:absolute; inset:-2px; border-radius:32px; pointer-events:none;
  background: radial-gradient(320px 320px at var(--gx,50%) var(--gy,20%), rgba(255,255,255,.22), transparent 55%);
  mix-blend-mode:overlay; opacity:0; transition: opacity var(--dur-fast) ease;
}
.pw-stage-card:hover .pw-stage-glare, .pw-stage-card.touching .pw-stage-glare{ opacity:1; }
.pw-stage-rim{ position:absolute; inset:0; border-radius:32px; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -40px 60px -30px rgba(0,0,0,.5); }
.pw-stage-hint{
  position:absolute; bottom:10px; inset-inline:0; text-align:center;
  font-size:10.5px; color: var(--ink-faint); font-family:var(--mono);
  letter-spacing:.04em; display:flex; align-items:center; justify-content:center; gap:6px;
  opacity:.85; pointer-events:none;
}
.pw-stage-hint svg{ width:12px; height:12px; opacity:.7; }

.pw-stage-swap{ animation: swapIn .42s var(--ease); }
@keyframes swapIn{ from{ opacity:0; transform: scale(.85) rotateY(24deg); filter: blur(10px);} to{ opacity:1; transform:none; filter:blur(0);} }

.pw-float-actions{
  position:absolute; top:50%; inset-inline-end: calc(50% - min(29vmin,190px) - 78px);
  transform: translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:7;
}
@media (max-width:860px){ .pw-float-actions{ inset-inline-end:auto; top:auto; bottom:8px; left:50%; right:auto; transform:translateX(-50%); flex-direction:row; } }
.pw-fab{
  width:46px; height:46px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass); border:1px solid var(--border);
  backdrop-filter: blur(18px); color:var(--ink-dim); cursor:pointer; position:relative;
  transition: all var(--dur-fast) var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pw-fab svg{ width:19px; height:19px; }
.pw-fab:hover{ color:var(--ink); transform: translateX(-4px) scale(1.06); border-color: var(--border-strong); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
[dir="rtl"] .pw-fab:hover{ transform: translateX(4px) scale(1.06); }
.pw-fab.active{ color:#fff; border-color: rgba(var(--accent-rgb),.6); background: linear-gradient(160deg, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.22)); box-shadow: 0 14px 30px -10px rgba(var(--accent-rgb),.55); }
.pw-fab .pw-badge{
  position:absolute; top:-6px; inset-inline-start:-6px;
  min-width:17px; height:17px; padding:0 3px; border-radius:999px;
  background: var(--accent); color:#1a1006; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb),.6);
}
.pw-burst{ position:absolute; inset:0; pointer-events:none; }
.pw-burst span{ position:absolute; font-size:13px; left:50%; top:50%; opacity:1; animation: burstFly 900ms ease-out forwards; }
@keyframes burstFly{ to{ opacity:0; transform: translate(var(--bx), var(--by)) scale(1.5) rotate(var(--br)); } }

/* ============================= VARIANT + COLOR ROWS ============================= */
.pw-strip-wrap{ position:relative; z-index:3; padding: 6px 18px 0; }
.pw-variant-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pw-variant{
  width:64px; height:64px; border-radius:18px; cursor:pointer;
  background: var(--glass); border:1px solid var(--border);
  backdrop-filter: blur(14px); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pw-variant svg, .pw-variant img{ width:74%; height:74%; object-fit:contain; }
.pw-variant:hover{ transform: translateY(-3px); }
.pw-variant.active{ border-color: var(--accent); box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb),.6), inset 0 0 0 1px rgba(var(--accent-rgb),.4); }
.pw-variant.active::after{ content:''; position:absolute; inset:0; background: linear-gradient(160deg, rgba(var(--accent-rgb),.18), transparent); }

.pw-color-row{ display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.pw-color{
  width:26px; height:26px; border-radius:50%; cursor:pointer; position:relative;
  border:2px solid rgba(255,255,255,.25);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
}
.pw-color:hover{ transform: scale(1.15); }
.pw-color.active{ border-color:#fff; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.55), 0 8px 18px -6px rgba(0,0,0,.6); }
.pw-color .pw-tip{
  position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  background:#00000; background: rgba(10,13,19,.95); border:1px solid var(--border);
  padding:4px 9px; border-radius:8px; font-size:10.5px; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity var(--dur-fast);
}
.pw-color:hover .pw-tip{ opacity:1; }

/* ============================= INFO DRAWER ============================= */
.pw-drawer{
  position:relative; z-index:4;
  margin-top:14px;
  border-radius: 26px 26px 0 0;
  background: var(--glass-solid);
  border:1px solid var(--border);
  border-bottom:none;
  backdrop-filter: blur(24px);
  padding: 10px 22px 0;
  max-height:64px;
  overflow:hidden;
  transition: max-height .45s var(--ease);
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.8);
}
.pw-drawer.expanded{ max-height:420px; overflow-y:auto; }
.pw-drawer-handle{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 0 12px; cursor:pointer; color:var(--ink-dim); font-size:12px; font-family:var(--mono);
}
.pw-drawer-handle .bar{ width:38px; height:4px; border-radius:4px; background: var(--border-strong); position:absolute; top:8px; left:50%; transform:translateX(-50%); }
.pw-drawer-handle svg{ width:13px; height:13px; transition: transform var(--dur-fast) var(--ease); }
.pw-drawer.expanded .pw-drawer-handle svg{ transform: rotate(180deg); }

.pw-info-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:10px; }
.pw-title-wrap{ display:flex; flex-direction:column; gap:4px; }
.pw-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--accent-2); text-transform:uppercase; }
.pw-title{ font-size:20px; font-weight:800; margin:0; }
.pw-price{ font-family:var(--mono); font-size:15px; color:var(--ink); background: rgba(var(--accent-rgb),.16); border:1px solid rgba(var(--accent-rgb),.35); padding:6px 12px; border-radius:12px; white-space:nowrap; }
.pw-desc{ color:var(--ink-dim); font-size:13.5px; line-height:2; margin:0 0 16px; }

.pw-spec-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.pw-chip{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 12px; border-radius:12px;
  background: var(--glass); border:1px solid var(--border);
  min-width:92px;
}
.pw-chip .k{ font-family:var(--mono); font-size:9px; color:var(--ink-faint); letter-spacing:.06em; }
.pw-chip .v{ font-size:12px; font-weight:700; color:var(--ink); }

.pw-tips-title{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.pw-tips-title svg{ width:15px; height:15px; color:var(--accent-2); }
.pw-tips{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.pw-tips li{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ink-dim); line-height:1.9; }
.pw-tips li::before{ content:''; flex:none; width:6px; height:6px; margin-top:7px; border-radius:2px; background: var(--accent); transform:rotate(45deg); }

/* ============================= LIGHTBOX (ZOOM) ============================= */
.pw-lightbox{ position:fixed; inset:0; z-index:999995; background: rgba(4,5,8,.9); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition: opacity var(--dur-fast) ease; }
.pw-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.pw-lightbox-stage{ width:min(90vw,760px); height:min(80vh,760px); overflow:hidden; border-radius:24px; position:relative; cursor:grab; border:1px solid var(--border); background: var(--glass); }
.pw-lightbox-stage.grabbing{ cursor:grabbing; }
.pw-lightbox-art{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform-origin:center; }
.pw-lightbox-art svg, .pw-lightbox-art img{ width:70%; height:70%; object-fit:contain; pointer-events:none; }
.pw-lightbox-close{ position:absolute; top:18px; inset-inline-end:18px; }
.pw-lightbox-hint{ position:absolute; bottom:16px; inset-inline:0; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

/* ============================= TOASTS ============================= */
.pw-toast-host{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:999999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.pw-toast{
  padding:11px 20px; border-radius:999px; background: rgba(14,17,24,.92); border:1px solid var(--border-strong);
  backdrop-filter: blur(16px); font-size:13px; display:flex; align-items:center; gap:8px;
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.7); animation: toastIn .35s var(--ease), toastOut .35s var(--ease) 2.1s forwards;
}
.pw-toast svg{ width:15px; height:15px; color: var(--accent-2); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(14px) scale(.9); } }
@keyframes toastOut{ to{ opacity:0; transform: translateY(-10px) scale(.95); } }


/* ============================= TRIGGER (inline, in-page element) ============================= */
.psw-trigger{
  width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:44px 30px;
  border-radius:28px;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(var(--accent-rgb),.16), transparent 55%),
    var(--void);
  cursor:pointer;
  font-family:'Vazirmatn', system-ui, sans-serif;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.6);
}
.psw-trigger:hover{ transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 30px 70px -24px rgba(var(--accent-rgb),.35); }
.psw-trigger:active{ transform: translateY(-1px) scale(.995); }
.psw-trigger-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; }
.psw-trigger-heading{ font-size:clamp(20px,2.6vw,28px); font-weight:800; margin:0; line-height:1.4; }
.psw-trigger-text{ color:var(--ink-dim); max-width:520px; line-height:2; font-size:14px; }
.psw-trigger-btn{
  margin-top:6px;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.7);
  background: var(--accent);
  color:#160e05;
  font-weight:700; font-size:14.5px;
  box-shadow: 0 16px 34px -14px rgba(var(--accent-rgb),.6);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.psw-trigger:hover .psw-trigger-btn{ transform: scale(1.04); box-shadow: 0 22px 44px -12px rgba(var(--accent-rgb),.7); }
.psw-trigger-btn-icon{ font-size:13px; }

/* ============================= UTILITIES ============================= */
.pw-hidden{ display:none !important; }
.pw-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }