/* DentoCarousel — استایل فرانت‌اند
   همه چیز داخل .dcx محدود شده تا با تم قاطی نشه. */

.dcx{
  --dcx-ink:#1B1233;
  --dcx-accent:#F47B20;
  --dcx-line:#E4E0EC;
  --dcx-paper:#F4F2F7;
  --dcx-muted:#7C7590;
  --dcx-hvh:46;                          /* ارتفاع کارت بر حسب درصد صفحه */
  --dcx-hmax:430px;                      /* سقف ارتفاع */
  --dcx-h: clamp(220px, calc(var(--dcx-hvh) * 1vh), var(--dcx-hmax));
  --dcx-arw:4;                           /* نسبت تصویر */
  --dcx-arh:5;
  --dcx-peek:.92;                        /* عرض اسلاید نسبت به استیج */
  --dcx-gap:10px;

  direction:rtl;
  margin:26px 0;
  font-family:inherit;
  color:var(--dcx-ink);
  -webkit-tap-highlight-color:transparent;
}
.dcx *{box-sizing:border-box}

/* استیج: عرض از روی ارتفاع حساب می‌شه تا کل ویجت داخل صفحه جا بشه */
.dcx-stage{
  width:min(100%, calc(var(--dcx-h) * var(--dcx-arw) / var(--dcx-arh) / var(--dcx-peek)));
  margin-inline:auto;
}

.dcx-frame{
  position:relative;
  background:linear-gradient(180deg,#F8F6FB,#EFEBF6);
  border:1px solid var(--dcx-line);
  border-radius:16px;
  padding:10px;
}

.dcx-viewport{
  position:relative;
  overflow:hidden;
  border-radius:11px;
  touch-action:pan-y;
  cursor:zoom-in;
}
.dcx-viewport.is-drag{cursor:grabbing}

.dcx-track{
  display:flex;
  /* در حالت RTL جهت خطی از قبل راست‌به‌چپ است، پس row (نه row-reverse) درست می‌چیند.
     direction را صریح می‌گذاریم تا از قالب ارث نبرد. */
  direction:rtl;
  flex-direction:row;
  gap:var(--dcx-gap);
  transition:transform .42s cubic-bezier(.22,.75,.2,1);
  will-change:transform;
}
.dcx-track.is-still{transition:none}

.dcx-slide{
  flex:0 0 calc(var(--dcx-peek) * 100%);
  margin:0;
  position:relative;
  aspect-ratio:var(--dcx-arw)/var(--dcx-arh);
  border-radius:11px;
  overflow:hidden;
  background:#fff;
  transition:opacity .3s,filter .3s;
}
.dcx[data-dim="1"] .dcx-slide[data-on="0"]{opacity:.4;filter:saturate(.55)}

.dcx-slide img,
.dcx-slide .dcx-mock{
  width:100%;height:100%;display:block;
  object-fit:var(--dcx-fit,contain);
  background:#fff;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}

/* --- دکمه‌های ناوبری --- */
.dcx-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--dcx-ink);
  display:grid;place-items:center;cursor:pointer;z-index:4;padding:0;
  box-shadow:0 6px 18px -6px rgba(27,18,51,.55);
  transition:transform .18s,opacity .18s,background .18s;
}
.dcx-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.dcx-nav[disabled]{opacity:0;pointer-events:none}
.dcx-nav svg{width:17px;height:17px;pointer-events:none}
.dcx-prev{right:10px}
.dcx-next{left:10px}
.dcx[data-arrows="0"] .dcx-nav{display:none}
@media(max-width:600px){.dcx-nav{width:32px;height:32px}.dcx-nav svg{width:15px;height:15px}}

/* --- شمارنده و دکمه بزرگنمایی --- */
.dcx-count{
  position:absolute;top:12px;left:12px;z-index:4;
  background:rgba(27,18,51,.72);color:#fff;
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dcx[data-count="0"] .dcx-count{display:none}

.dcx-zoom{
  position:absolute;top:10px;right:10px;z-index:4;
  width:32px;height:32px;border:0;border-radius:9px;padding:0;
  background:rgba(27,18,51,.72);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s,transform .18s;
}
.dcx-zoom:hover{background:var(--dcx-accent);transform:scale(1.07)}
.dcx-zoom svg{width:16px;height:16px;pointer-events:none}

/* --- نوار پیشرفت --- */
.dcx-bar{height:3px;background:var(--dcx-line);border-radius:99px;margin:9px 3px 0;overflow:hidden}
.dcx-bar i{display:block;height:100%;background:var(--dcx-accent);border-radius:99px;transition:width .42s cubic-bezier(.22,.75,.2,1)}

/* --- نوار فهرست اسلایدها --- */
.dcx-strip{
  display:flex;gap:7px;overflow-x:auto;padding:11px 3px 4px;
  scrollbar-width:thin;scroll-behavior:smooth;
}
.dcx-strip::-webkit-scrollbar{height:4px}
.dcx-strip::-webkit-scrollbar-thumb{background:#D6D0E3;border-radius:99px}
.dcx[data-strip="0"] .dcx-strip{display:none}
.dcx-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--dcx-line);border-radius:11px;
  padding:5px 9px 5px 5px;cursor:pointer;transition:.18s;
  font:600 12px/1.6 inherit;color:var(--dcx-muted);max-width:180px;
}
.dcx-chip .n{
  width:23px;height:23px;border-radius:6px;flex:0 0 auto;
  display:grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--dcx-paper);color:var(--dcx-ink);
}
.dcx-chip .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcx-chip:hover{border-color:#C9C0E0}
.dcx-chip[aria-current="true"]{background:var(--dcx-ink);border-color:var(--dcx-ink);color:#fff}
.dcx-chip[aria-current="true"] .n{background:var(--dcx-accent);color:#1B1233}

/* --- کپشن --- */
.dcx-cap{
  margin:9px 3px 0;font-size:13.5px;line-height:1.85;color:var(--dcx-muted);
  min-height:1.85em;
}
.dcx[data-cap="0"] .dcx-cap{display:none}

/* --- راهنمای کشیدن --- */
.dcx-hint{
  position:absolute;inset:auto 0 14px 0;margin:auto;width:max-content;z-index:5;
  background:rgba(27,18,51,.82);color:#fff;font-size:12px;padding:5px 13px;border-radius:999px;
  display:flex;align-items:center;gap:7px;pointer-events:none;
  animation:dcx-nudge 2.2s ease-in-out 2, dcx-fade .4s ease 4.8s forwards;
}
@keyframes dcx-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(13px)}}
@keyframes dcx-fade{to{opacity:0;visibility:hidden}}

.dcx :focus-visible{outline:2px solid var(--dcx-accent);outline-offset:2px}
.dcx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= لایت‌باکس بزرگنمایی ================= */
.dcx-lb{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;
  direction:rtl;font-family:inherit;
}
.dcx-lb.is-open{display:flex}
.dcx-lb-bg{position:absolute;inset:0;background:rgba(14,9,26,.93);opacity:0;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dcx-lb .dcx-lb-inner{
  position:relative;z-index:2;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(12px,3vh) 12px;gap:10px;
}
.dcx-lb .dcx-stage{
  --dcx-h: min(74vh, calc((100vw - 24px) * var(--dcx-arh) / var(--dcx-arw)));
  will-change:transform;
}
.dcx-lb .dcx-frame{background:transparent;border:0;padding:0}
.dcx-lb .dcx-viewport{cursor:grab;border-radius:14px}
.dcx-lb .dcx-slide{border-radius:14px}
.dcx-lb .dcx-bar{background:rgba(255,255,255,.18)}
.dcx-lb .dcx-cap{color:#CFC8E2;text-align:center}
.dcx-lb .dcx-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#C9C2DD}
.dcx-lb .dcx-chip .n{background:rgba(255,255,255,.14);color:#fff}
.dcx-lb .dcx-chip[aria-current="true"]{background:#fff;border-color:#fff;color:var(--dcx-ink)}
.dcx-lb .dcx-chip[aria-current="true"] .n{background:var(--dcx-accent);color:#1B1233}
.dcx-lb .dcx-strip{justify-content:flex-start;max-width:min(100%,760px);margin-inline:auto}
.dcx-lb .dcx-zoom{display:none}
.dcx-lb-close{
  position:absolute;top:14px;left:14px;z-index:6;
  width:40px;height:40px;border:0;border-radius:12px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background .18s,transform .18s;
}
.dcx-lb-close:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.dcx-lb-close svg{width:18px;height:18px;pointer-events:none}
.dcx-lb-chrome{opacity:0;transition:opacity .28s ease .1s;width:100%}
.dcx-lb-close{opacity:0;transition:opacity .28s ease .1s,background .18s,transform .18s}
.dcx-lb.is-ready .dcx-lb-chrome,
.dcx-lb.is-ready .dcx-lb-close{opacity:1}

/* موبایل: کارت تا جای ممکن عرض صفحه را می‌گیرد، ولی از ۶۲٪ ارتفاع بیشتر نمی‌شود */
@media(max-width:600px){
  .dcx{--dcx-h: min(62vh, calc((100vw - 42px) * var(--dcx-arh) / var(--dcx-arw) * var(--dcx-peek)))}
  .dcx-lb .dcx-stage{--dcx-h: min(70vh, calc((100vw - 20px) * var(--dcx-arh) / var(--dcx-arw)))}
  .dcx-lb .dcx-lb-inner{padding:56px 10px 12px}
  .dcx-lb-close{top:10px;left:10px;width:36px;height:36px}
}

@media (prefers-reduced-motion:reduce){
  .dcx-track,.dcx-bar i{transition:none}
  .dcx-hint{animation:dcx-fade .1s forwards}
}