/* ====== Sale page (sidebar + grid) ====== */
:root{
  --c-cyan:#22c6dd;        /* رنگ اصلی، نزدیک لوگو */
  --c-cyan-2:#0ea5b8;
  --c-navy:#0f2740;        /* متن تیره */
  --c-red:#ef4444;
  --c-green:#16a34a;
  --c-muted:#64748b;
  --c-br:#e5e7eb;

  --r:14px; --r-lg:22px;
  --shadow:0 10px 26px rgba(15,39,64,.10);
  --shadow-lg:0 16px 40px rgba(15,39,64,.14);

  --container: 1100px;     /* عرض کانتینر */
  --sidebar: 280px;        /* عرض سایدبار */
  --gap: 20px;
}

.sale-container{
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px;
}

/* ---------- Hero ---------- */
.sale-hero{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border-radius:var(--r-lg);
  background:
    radial-gradient(900px 360px at 85% -10%, rgba(34,198,221,.25), transparent 60%),
    linear-gradient(135deg, rgba(34,198,221,.14), rgba(14,165,184,.08));
  border:1px solid rgba(34,198,221,.22);
  box-shadow:var(--shadow);
  margin-bottom: 18px;
}
.sale-hero .hero-head h1{
  margin:6px 0 2px; color:var(--c-navy); font-weight:900; font-size: clamp(18px, 2.6vw, 24px);
}
.sale-hero .hero-head p{ color:#334155; font-size:14px }
.sale-hero .pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg, var(--c-cyan), var(--c-cyan-2));
  color:#fff; padding:.4rem .7rem; border-radius:999px; font-weight:700;
  box-shadow:0 10px 24px rgba(34,198,221,.32);
}
.hero-timer{
  display:flex; gap:.45rem; align-items:center; background:rgba(255,255,255,.8);
  border:1px solid rgba(34,198,221,.25); padding:.5rem .7rem; border-radius:12px;
  font-variant-numeric: tabular-nums; color:#083344; font-weight:700;
}
.hero-timer b{
  background:#fff; border:1px solid rgba(34,198,221,.25); padding:.28rem .5rem; border-radius:10px;
  min-width:2.35rem; text-align:center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

/* ---------- Layout (Sidebar + Content) ---------- */
.sale-layout{
  display:grid; grid-template-columns: var(--sidebar) 1fr; gap: var(--gap);
}
@media (max-width: 980px){
  .sale-layout{ grid-template-columns: 1fr; }
}

/* ---------- Sidebar ---------- */
.sale-sidebar{ position:relative; }
.sale-filters{
  position:sticky; top:12px; background:#fff; border:1px solid var(--c-br);
  border-radius: 16px; box-shadow: var(--shadow); padding: 14px;
}
.sale-filters .filter-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.sale-filters .filter-head span{ font-weight:800; color:var(--c-navy) }
.sale-filters .filter-head .reset{ color:#0f172a; font-size:12px; border:1px solid var(--c-br);
  padding:.25rem .5rem; border-radius:8px; background:#fff; text-decoration:none }
.sale-filters .filter-head .reset:hover{ background:#f8fafc }

.f-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
.f-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-label{ color:#334155; font-size:13px }
.f-input{
  border:1px solid var(--c-br); outline: none; border-radius:10px;
  padding:.5rem .6rem; font-size:14px; background:#fff; width:100%;
}
.btn-apply{
  width:100%; margin-top:8px; cursor:pointer; border:none;
  background: linear-gradient(135deg, var(--c-cyan), var(--c-cyan-2));
  color:#fff; font-weight:800; padding:.55rem .8rem; border-radius:10px;
  box-shadow:0 12px 24px rgba(34,198,221,.28); transition:.18s;
}
.btn-apply:hover{ filter: saturate(1.06) brightness(1.02) }

/* ---------- Content Head ---------- */
.sale-content{ min-width:0 }
.content-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.content-head .count{ color:#0f172a; font-weight:700 }
.inline-sort{ display:flex; align-items:center; gap:8px }
.inline-sort select{
  border:1px solid var(--c-br); border-radius:10px; padding:.35rem .5rem;
}

/* ---------- Grid ---------- */
.sale-grid{
  display:grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px){ .sale-grid{ gap:14px; grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 1024px){ .sale-grid{ gap:16px; grid-template-columns: repeat(4, 1fr) } }

/* ---------- Cards ---------- */
.sale-card{
  display:block; background:#fff; border:1px solid var(--c-br); border-radius:18px; overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: var(--shadow);
}
.sale-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(34,198,221,.35) }

.card-thumb{
  position:relative; background: linear-gradient(180deg,#fff,#f6fbfc); aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center;
}
.card-thumb img{ max-width:100%; max-height:100%; object-fit:contain; padding:12px }

.badge-off{
  position:absolute; top:.5rem; right:.5rem; color:#fff; font-weight:800;
  background:linear-gradient(135deg,#ef4444,#dc2626); padding:.22rem .48rem; border-radius:999px;
  box-shadow:0 12px 26px rgba(239,68,68,.35);
}
.badge-free{
  position:absolute; bottom:.5rem; right:.5rem; color:#fff; font-size:12px; font-weight:700;
  background:linear-gradient(135deg,#16a34a,#15803d); padding:.2rem .45rem; border-radius:8px;
  box-shadow:0 10px 22px rgba(22,163,74,.25);
}
.badge-low{
  position:absolute; bottom:.5rem; left:.5rem; color:#1e293b; font-size:12px;
  background:#f59e0b; padding:.2rem .45rem; border-radius:8px;
}

.card-body{ padding:10px 12px 12px }
.card-title{
  color:#0f172a; font-size: .95rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px;
}
.card-price{ margin-top: 6px }
.card-price .old{ color:#64748b; text-decoration: line-through; font-size: .85rem; text-align:left }
.card-price .now{ color: var(--c-green); font-weight: 900; font-size: 1rem; text-align:left }
.card-price .now span{ font-weight:600 }

/* ---------- Empty & Pagination ---------- */
.sale-empty{
  background:#fff7ed; border:1px solid #fde68a; color:#92400e; padding: 14px; border-radius:14px;
}
.sale-paginate{ display:flex; justify-content:center; margin-top: 14px }

/* Small fixes */
select, input{ font-family: inherit }
/* ===== Drawer / FAB (mobile filters) ===== */
.filter-fab{
  position: sticky; top: 10px; margin-bottom: 10px; z-index: 35;
  display: none;
  background: linear-gradient(135deg, var(--c-cyan), var(--c-cyan-2));
  color:#fff; border:none; border-radius: 999px; padding:.5rem .9rem; font-weight:800; box-shadow: var(--shadow);
}
@media (max-width:980px){ .filter-fab{ display:inline-flex } }

.drawer-backdrop{
  position: fixed; inset: 0; background: rgba(15,23,42,.35);
  opacity: 0; pointer-events: none; transition: .2s; z-index: 70;
}
.drawer-backdrop.show{ opacity:1; pointer-events:auto }

.sale-filters.drawer{
  z-index: 80;
}
@media (max-width:980px){
  .sale-sidebar{ position: static }
  .sale-filters.drawer{
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(88vw, 360px);
    transform: translateX(-102%); transition: transform .22s ease;
    border-radius: 0; overflow-y: auto;
  }
  .sale-filters.drawer.open{ transform: none }
  .sale-filters .head-actions .close{ display:inline-flex }
}
.sale-filters .head-actions .close{
  display:none; align-items:center; justify-content:center;
  width:32px; height:32px; background:#fff; border:1px solid var(--c-br);
  border-radius:8px; font-size:18px; line-height:1; cursor:pointer;
}

/* ===== Range slider ===== */
.price-range{
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 6px;
}
.price-range input[type="range"]{
  appearance: none; height: 8px; background: #e2e8f0; border-radius: 999px; outline: none;
}
.price-range input[type="range"]::-webkit-slider-thumb{
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-cyan); border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(34,198,221,.25);
}
.sale-pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap}
.sale-pagination .pg-btn,
.sale-pagination .pg-num{
  min-width:36px;height:36px;display:inline-flex;justify-content:center;align-items:center;
  padding:0 .6rem;border:1px solid var(--c-br,#e5e7eb);border-radius:10px;background:#fff;color:#0f172a;
  font-weight:700;font-size:.9rem;box-shadow:var(--shadow,0 2px 8px rgba(0,0,0,.05));transition:.15s
}
.sale-pagination .pg-num.active{background:linear-gradient(135deg,var(--c-cyan,#22c7dd),var(--c-cyan-2,#0ea5b3));color:#fff;border-color:transparent}
.sale-pagination .pg-btn.disabled{opacity:.4;pointer-events:none}
.sale-pagination .pg-gap{padding:0 .3rem;color:#94a3b8}
/* ========== Container & layout ========== */
.sale-container{
  max-width: 1240px;
  margin-inline:auto;
  padding: 12px;
}

/* در موبایل: لایه یک‌ستونه؛ دراور از صفحه جدا می‌شود */
.sale-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* سایدبار به‌صورت off-canvas (تمام‌قد) در موبایل */
.sale-sidebar{ position: relative; }
.sale-sidebar .drawer{
  position: fixed;
  inset: 0 auto 0 0;         /* راست‌چین: از سمت راست وارد شود */
  right: -100%;
  width: min(92vw, 420px);
  max-width: 420px;
  height: 100dvh;
  background:#fff;
  box-shadow: -16px 0 40px rgba(2,6,23,.24);
  transition: right .25s ease;
  z-index: 60;
  overflow:auto;
}
.sale-sidebar .drawer.open{ right: 0; }
.sale-sidebar .drawer-backdrop{
  position: fixed; inset:0;
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(2px);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  z-index: 50;
}
.sale-sidebar .drawer-backdrop.show{ opacity: 1; pointer-events:auto; }

/* دکمه شناور فیلتر در موبایل */
.filter-fab{
  position: sticky; bottom: 12px; inset-inline-start: auto;
  margin-inline-start:auto;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem .9rem;
  background:linear-gradient(135deg,#22c7dd,#0ea5b3);
  color:#fff; border:0; border-radius:14px; font-weight:800;
  box-shadow:0 8px 30px rgba(3,105,161,.2);
  z-index: 40;
}

/* گرید کارت‌ها: ستون‌های واکنش‌گرا و قابل‌جایگیری */
.sale-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(1, minmax(0,1fr)); /* گوشی‌های خیلی کوچک */
}

/* ≥390px: دو ستونه */
@media (min-width: 390px){
  .sale-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ≥640px: سه ستونه */
@media (min-width: 640px){
  .sale-layout{
    grid-template-columns: 270px 1fr; /* سایدبار کنار کانتنت روی تبلت */
    align-items:start;
    gap: 20px;
  }
  .sale-sidebar .drawer,
  .sale-sidebar .drawer-backdrop{ position: static; right:auto; height:auto; width:auto; box-shadow:none; }
  .sale-sidebar .drawer{ overflow:visible; background:transparent; }
  .sale-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  .filter-fab{ display:none; }
}

/* ≥1024px: چهار ستونه */
@media (min-width: 1024px){
  .sale-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
  .sale-container{ padding: 16px 20px; }
}

/* کارت‌ها: اطمینان از تناسب تصویر و لمس‌پذیری */
.sale-card{ border-radius:16px; }
.sale-card .card-thumb{ aspect-ratio: 1/1; }
.sale-card img{ width:100%; height:100%; object-fit:contain; }

/* هدر محتوا در گوشی: بشکند و فشرده شود */
.content-head{
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  flex-wrap: wrap;
}
.content-head .inline-sort select{
  min-width: 150px; height: 38px; border-radius: 10px;
}

/* پگینیشن: فاصله مناسب در موبایل */
.sale-pagination{ margin-top: 14px; }
@media (min-width: 640px){ .sale-pagination{ margin-top: 22px; } }

/* جلوگیری از ریزشدن فیلدها داخل دراور در گوشی */
.sale-filters .f-input, .sale-filters .f-group, .sale-filters .f-row{ width:100%; }

/* وقتی دراور باز است، بدنه اسکرول نشود (با کلاس کمکی) */
.body-nosroll { overflow:hidden; }