/* ===== Cart Modal — Polished UI with hovers, focus, motion ===== */
:root{
  --ls-bg:#fff;
  --ls-text:#111;
  --ls-muted:#666;
  --ls-line:#e9edf2;
  --ls-soft:#f5f7fa;
  --ls-brand:#111;
  --ls-ok:#10b981;
  --ls-danger:#ef4444;
  --ring:#2563eb;
}

/* Overlay */
.ls-no-scroll{ overflow: hidden; }

#ls-cart-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: block;              /* همیشه در DOM باشد */
  opacity: 0;                  /* پیش‌فرض نامرئی */
  pointer-events: none;        /* کلیک‌ناپذیر وقتی بسته است */
  transition: opacity .45s ease;/* فید نرم کل لایه */
}
#ls-cart-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
/* روان‌تر شدن انیمیشن باکس */
.ls-cart-dialog{
  will-change: transform, opacity;
}
.ls-cart-backdrop{
  will-change: opacity;
}
#ls-cart-modal.is-open{ display:block; }

/* Backdrop (with fade) */
.ls-cart-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  opacity: 0; transition: opacity .45s ease;
}
#ls-cart-modal.is-open .ls-cart-backdrop{ opacity: 1; }

/* Dialog (pop-in) */
.ls-cart-dialog{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.98);
  width: 560px; max-width: 92vw; max-height: 82vh;
  background:var(--ls-bg); border-radius:16px; overflow:hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  display:flex; flex-direction: column;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
#ls-cart-modal.is-open .ls-cart-dialog{
  opacity: 1; transform: translate(-50%,-50%) scale(1);
}

/* Close button */
.ls-cart-close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:10px; border:0;
  background:var(--ls-soft); cursor:pointer; font-size:20px; line-height:36px;
  color: var(--ls-text);
  transition: background .2s ease, transform .08s ease;
}
.ls-cart-close:hover{ background:#e9eef5; }
.ls-cart-close:active{ transform: scale(.96); }
.ls-cart-close:focus-visible{
  outline: 2px solid var(--ring); outline-offset: 2px;
}

/* Header */
.ls-cart-head{
  padding:16px 18px; border-bottom:1px solid var(--ls-line);
}
.ls-cart-title{
  display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ls-text);
}
.ls-cart-title svg{ color: var(--ls-ok); }

/* Body */
.ls-cart-body{ padding: 12px 18px; overflow:auto; }
.ls-cart-loading,.ls-cart-empty{ padding:24px; text-align:center; color:var(--ls-muted); }

/* Nice scrollbar (webkit) */
.ls-cart-body::-webkit-scrollbar{ width:10px; }
.ls-cart-body::-webkit-scrollbar-thumb{
  background:#d9e0e8; border-radius:10px; border:3px solid transparent; background-clip: content-box;
}

/* Lines */
.ls-cart-lines{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ls-line{
  display:grid; grid-template-columns: 84px 1fr 28px; gap:12px; align-items: center;
  border:1px solid var(--ls-line); border-radius:12px; padding:10px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
  background:#fff;
}
.ls-line:hover{
  border-color:#dbe3ec;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.ls-line.removing{ opacity:.55; }

/* Thumb */
.ls-thumb img{
  width:84px; height:84px; object-fit:cover; border-radius:8px; display:block;
}

/* Info */
.ls-info{ min-width:0; }
.ls-name{
  display:inline-block; font-weight:600; color:var(--ls-text);
  margin:0 0 6px; text-decoration:none; font-size:13px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.ls-name:hover{ text-decoration:underline; }
.ls-name:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; border-radius:6px; }

.ls-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ls-price{ font-weight:800; color:var(--ls-text); }

/* Qty controls */
.ls-qty{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; }
.ls-qty-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid #d7dde5;
  background:#fafbfd; cursor:pointer; font-size:18px; line-height:26px;
  padding:0; text-align:center; color:#334155;
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .2s ease;
}
.ls-qty-btn:hover{ background:#f0f4f9; border-color:#c7d1dd; }
.ls-qty-btn:active{ transform: scale(.95); }
.ls-qty-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

.ls-qty-input{
  width:56px; height:32px; border:1px solid #d7dde5; border-radius:8px; text-align:center;
  font: inherit; background:#fff; color:var(--ls-text);
  transition: border-color .15s ease, box-shadow .2s ease;
}
.ls-qty-input:focus{
  border-color:#c0cce0; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline: none;
}

/* Remove */
.ls-remove{
  width:28px; height:28px; border-radius:8px; border:0;
  background:#f6f7f9; cursor:pointer; font-size:18px; color:#475569;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.ls-remove:hover{ background:#fee2e2; color:var(--ls-danger); }
.ls-remove:active{ transform: scale(.95); }
.ls-remove:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* “more…” */
.ls-more{ margin:8px 2px 0; color:var(--ls-muted); font-size:14px; }

/* Total */
.ls-total{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px dashed var(--ls-line); margin-top:12px; padding-top:12px;
  font-size:15px; color:var(--ls-text);
}
.ls-total strong{ font-size:16px; }

/* Footer CTAs */
.ls-cart-foot{
  display:flex; gap:10px; padding: 12px 18px 16px; border-top:1px solid var(--ls-line);
}
.ls-btn{
  flex:1 1 auto; height:44px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; text-decoration:none; letter-spacing:.2px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
  will-change: transform;
}
.ls-btn--ghost{
  background:var(--ls-soft); color:var(--ls-text); box-shadow: inset 0 -2px 0 rgba(0,0,0,.03);
}
.ls-btn--ghost:hover{ background:#e9eef5; }
.ls-btn--ghost:active{ transform: translateY(1px); }

.ls-btn--primary{
  background: var(--ls-brand); color:#fff; box-shadow: 0 6px 16px rgba(17,17,17,.25);
}
.ls-btn--primary:hover{ filter: brightness(1.05); box-shadow: 0 8px 20px rgba(17,17,17,.28);background: #063b1e; }
.ls-btn--primary:active{ transform: translateY(1px) scale(.99); }

.ls-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* Busy state */
.ls-cart-body.is-busy{ opacity:.55; pointer-events:none; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .ls-cart-backdrop,
  .ls-cart-dialog,
  .ls-line,
  .ls-btn,
  .ls-qty-btn{ transition: none !important; }
}

/* Small screens: a bit tighter */
@media (max-width:480px){
  .ls-cart-dialog{ max-height: 86vh; }
  .ls-qty-input{ width:50px; }
}