/* ================== Compare Page (scoped) ================== */
:root{
  --cmpx-brand:#22C1E8;
  --cmpx-brand-600:#1ab4db;
  --cmpx-ink:#30455F;
  --cmpx-muted:#64748b;
  --cmpx-bg:#f8fafc;
  --cmpx-bd:#e5e7eb;
  --cmpx-chip:#eef6ff;
  --cmpx-danger:#ef4444;
  --cmpx-ok:#059669;
}

/* پایه */
.cmpx-wrap{direction:rtl; max-width:1200px; margin:1.25rem auto; padding:0 12px;}
.cmpx-title{font-size:1.25rem; font-weight:800; color:var(--cmpx-ink); margin:0;}
.ellipsis-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* دکمه‌ها */
.cmpx-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem;
  border-radius:12px; border:1px solid var(--cmpx-bd); background:#fff; color:#0f172a; font-weight:700; cursor:pointer;
  transition:box-shadow .2s ease, transform .12s ease, background .2s ease, border-color .2s ease}
.cmpx-btn:hover{box-shadow:0 6px 22px rgba(2,6,23,.06); transform:translateY(-1px)}
.cmpx-btn:active{transform:translateY(0)}
.cmpx-btn-primary{background:var(--cmpx-brand); border-color:var(--cmpx-brand); color:#fff}
.cmpx-btn-primary:hover{background:var(--cmpx-brand-600); border-color:var(--cmpx-brand-600)}
.cmpx-btn-secondary{background:#eaf7fd; border-color:var(--cmpx-brand); color:var(--cmpx-brand); font-weight:800}
.cmpx-btn-light{background:#fff;}

/* هدر */
.cmpx-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.9rem}
.cmpx-head-actions{display:flex; flex-wrap:wrap; gap:.5rem}

/* کارت‌ها (اسلات‌های بالای صفحه) */
.cmpx-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem}
@media (max-width:900px){ .cmpx-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cmpx-cards{grid-template-columns:1fr} }

.cmpx-card{position:relative; display:flex; flex-direction:column; gap:.5rem; background:#fff; border:1px solid var(--cmpx-bd);
  border-radius:16px; padding:.8rem; box-shadow:0 1px 0 rgba(2,6,23,.03); transition:box-shadow .2s ease, transform .12s ease}
.cmpx-card:hover{box-shadow:0 10px 30px rgba(2,6,23,.06); transform:translateY(-2px)}

.cmpx-remove{position:absolute; top:.5rem; left:.5rem; width:32px; height:32px; border-radius:10px; border:1px solid var(--cmpx-bd);
  background:#fff; color:#0f172a; font-size:20px; line-height:30px; text-align:center; cursor:pointer}
.cmpx-remove:hover{background:#fff5f5; border-color:#fecaca; color:var(--cmpx-danger)}

.cmpx-card-img{width:100%; height:180px; object-fit:contain; background:#fff; border:1px solid var(--cmpx-bd);
  border-radius:12px; padding:.5rem}
.cmpx-card-title{color:var(--cmpx-ink); font-weight:700; line-height:1.7}
.cmpx-card-price{color:var(--cmpx-ok); font-weight:800}
.cmpx-unit{opacity:.9; font-weight:600; font-size:.9em}
.cmpx-badge{display:inline-flex; align-items:center; justify-content:center; padding:.25rem .5rem; border-radius:10px;
  background:#eaf7fd; border:1px solid var(--cmpx-brand); color:var(--cmpx-brand); font-weight:800}

/* کارت خالی */
.cmpx-card-empty{flex:1; min-height:180px; border:1px dashed var(--cmpx-brand); border-radius:12px; background:#f0f9ff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem}
.cmpx-card-empty-ico{width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--cmpx-bd);
  display:grid; place-items:center; font-size:22px; color:var(--cmpx-brand); font-weight:700}
.cmpx-card-empty-text{color:var(--cmpx-ink); font-weight:700}

/* جدول مقایسه */
.cmpx-table{overflow:auto; border:1px solid var(--cmpx-bd); border-radius:16px; background:#fff}
.cmpx-row{display:grid; grid-template-columns:220px repeat(3,1fr); border-top:1px solid var(--cmpx-bd)}
.cmpx-row:first-child{border-top:none}
.cmpx-row-head{background:linear-gradient(90deg,#f0f9ff,#e0f7fa)}
.cmpx-col{padding:.85rem .8rem}
.cmpx-col-label{font-weight:800; color:#334155; border-left:1px solid var(--cmpx-bd)}
.cmpx-col-prod{color:#1f2937}
.cmpx-head-prod{display:flex; align-items:center; gap:.6rem}
.cmpx-head-prod img{width:56px; height:56px; object-fit:contain; border:1px solid var(--cmpx-bd); border-radius:10px; background:#fff}
.cmpx-head-title{font-weight:700; color:var(--cmpx-ink)}
.cmpx-head-empty{color:#94a3b8}

@media (max-width:1024px){
  .cmpx-row{grid-template-columns:160px repeat(3,1fr)}
}
@media (max-width:768px){
  .cmpx-row{grid-template-columns:140px repeat(3, 1fr)}
}
@media (max-width:640px){
  .cmpx-row{grid-template-columns:110px repeat(3, 1fr)}
  .cmpx-col{padding:.7rem .6rem}
}

/* ===== Modal (افزودن کالا) ===== */
.cmpx-modal{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.55); backdrop-filter:saturate(140%) blur(4px)}
.cmpx-modal[aria-hidden="false"]{display:flex}

.cmpx-dialog{width:min(920px, 92vw); max-height:86vh; background:#fff; border-radius:18px; border:1px solid var(--cmpx-bd);
  box-shadow:0 20px 60px rgba(2,6,23,.18); overflow:hidden; display:flex; flex-direction:column}

.cmpx-close{position:absolute; inset-inline-start:10px; inset-block-start:10px; width:36px; height:36px; border-radius:11px;
  border:1px solid var(--cmpx-bd); background:#fff; color:#0f172a; font-size:20px; line-height:34px; text-align:center; cursor:pointer}
.cmpx-close:hover{background:#f8fafc}

.cmpx-modal-head{position:sticky; top:0; background:#fff; z-index:1; padding:1rem; border-bottom:1px solid var(--cmpx-bd);
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.cmpx-modal-title{font-weight:800; color:var(--cmpx-ink); font-size:1.05rem}
.cmpx-search{flex:1 1 320px; border:1px solid var(--cmpx-bd); border-radius:12px; padding:.65rem .8rem; font-size:.95rem}
.cmpx-search:focus{outline:none; border-color:var(--cmpx-brand); box-shadow:0 0 0 3px rgba(34,193,232,.18)}

/* نتایج */
.cmpx-results{padding:.6rem; overflow:auto}
.cmpx-result-item{display:grid; grid-template-columns:64px 1fr auto; gap:.65rem; align-items:center; padding:.5rem .6rem;
  border:1px solid var(--cmpx-bd); background:#fff; border-radius:12px; margin:.4rem 0; transition:box-shadow .2s ease, transform .1s ease}
.cmpx-result-item:hover{box-shadow:0 10px 28px rgba(2,6,23,.06); transform:translateY(-1px)}
.cmpx-result-thumb{width:64px; height:64px; display:grid; place-items:center; border:1px solid var(--cmpx-bd); border-radius:10px; background:#fff}
.cmpx-result-thumb img{max-width:56px; max-height:56px; object-fit:contain}
.cmpx-result-meta{display:flex; flex-direction:column; gap:.25rem; min-width:0}
.cmpx-result-title{font-weight:700; color:var(--cmpx-ink)}
.cmpx-result-price{color:var(--cmpx-ok); font-weight:800}
.cmpx-result-add{display:inline-flex; align-items:center; justify-content:center; gap:.25rem; padding:.5rem .7rem; min-width:46px;
  border-radius:10px; border:1px solid var(--cmpx-brand); background:#eaf7fd; color:var(--cmpx-brand); font-weight:800; cursor:pointer}
.cmpx-result-add:hover{background:#dff2fb; border-color:var(--cmpx-brand-600)}

.cmpx-result-loading, .cmpx-result-error, .cmpx-result-empty{
  display:flex; align-items:center; gap:.6rem; padding:.8rem; background:#fff; border:1px dashed var(--cmpx-bd); border-radius:12px; margin:.5rem 0; color:#475569
}
.cmpx-spinner{width:18px; height:18px; border-radius:50%; border:2px solid #cbd5e1; border-top-color:var(--cmpx-brand); animation:cmpx-spin 1s linear infinite}
@keyframes cmpx-spin{to{transform:rotate(360deg)}}

/* empty state اولیه داخل نتایج */
.cmpx-empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; padding:1.25rem;
  border:1px dashed var(--cmpx-bd); border-radius:14px; background:#f8fafc; color:#475569}
.cmpx-empty-ico{width:52px; height:52px; border-radius:50%; border:1px solid var(--cmpx-bd); display:grid; place-items:center; font-weight:800; color:var(--cmpx-brand); background:#fff}
.cmpx-empty-txt{font-weight:800; color:var(--cmpx-ink)}
.cmpx-empty-sub{font-size:.92rem; color:#64748b}

/* اسکرول داخلی دیالوگ تا پایین (پایین محتوا) */
.cmpx-dialog{overflow:hidden}
.cmpx-results{max-height: calc(86vh - 74px);}

/* دسترسی پذیری و فوکوس */
.cmpx-btn:focus, .cmpx-result-add:focus, .cmpx-search:focus, .cmpx-remove:focus, .cmpx-close:focus{
  outline:none; box-shadow:0 0 0 3px rgba(34,193,232,.2)
}

/* حالت‌های کوچک‌تر برای موبایل */
@media (max-width:520px){
  .cmpx-modal-head{padding:.8rem}
  .cmpx-dialog{width:94vw}
  .cmpx-result-item{grid-template-columns:56px 1fr auto}
  .cmpx-result-thumb{width:56px; height:56px}
  .cmpx-result-thumb img{max-width:48px; max-height:48px}
}

/* کمک‌کلاس‌ها */
.cmpx-hide{display:none !important}
/* ======================= Compare (Search Modal) ======================= */
/* رنگ‌ها و سایزها */
.cmpx-modal,
.cmpx-wrap {
  --cmpx-brand: #17b6cc;        /* آبی برند */
  --cmpx-brand-2: #0f97ab;      /* سایه تیره‌تر */
  --cmpx-accent: #0ea5b5;
  --cmpx-danger: #e34d4d;
  --cmpx-ok: #18b26b;
  --cmpx-text: #222;
  --cmpx-muted: #6b7280;
  --cmpx-border: #e5e7eb;
  --cmpx-bg: #fff;
  --cmpx-row: #f8fafc;

  --cmpx-radius: 14px;
  --cmpx-pad: 16px;
  --cmpx-gap: 12px;

  direction: rtl; /* برای داخل مدال */
}

/* ---------- Modal shell ---------- */
.cmpx-modal{
  position: fixed;
  inset: 0;
  display: none;           /* با JS روی flex ست می‌شود */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5); /* شیشه‌ای ملایم */
  z-index: 9999;
  padding: 24px;
  backdrop-filter: saturate(120%) blur(2px);
}

.cmpx-dialog{
  width: min(920px, 96vw);
  background: var(--cmpx-bg);
  border-radius: var(--cmpx-radius);
  box-shadow: 0 20px 60px rgba(2,8,23,.18), 0 6px 18px rgba(2,8,23,.12);
  overflow: hidden;
  outline: 1px solid rgba(2,8,23,.03);
  transform: translateY(0);
}

/* Close (x) */
.cmpx-close{
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--cmpx-border);
  background: #fff;
  color: var(--cmpx-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s ease;
}
.cmpx-close:hover{ color:#000; border-color:#d1d5db; background:#f9fafb; }

/* Header */
.cmpx-modal-head{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--cmpx-gap);
  padding: 18px var(--cmpx-pad) 12px var(--cmpx-pad);
  align-items: center;
  position: relative;
}
.cmpx-modal-title{
  font-weight: 700;
  color: var(--cmpx-text);
  letter-spacing: -.2px;
}

/* Search input */
.cmpx-search{
  height: 42px;
  border-radius: 12px;
  border: 2px solid var(--cmpx-brand);
  padding: 0 14px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.cmpx-search:focus{
  box-shadow: 0 0 0 3px rgba(23,182,204,.18);
  border-color: var(--cmpx-brand-2);
}

/* ---------- Results area ---------- */
.cmpx-results{
  max-height: min(64vh, 520px);
  overflow: auto;
  padding: 8px var(--cmpx-pad) var(--cmpx-pad) var(--cmpx-pad);
  border-top: 1px solid var(--cmpx-border);
  background: #fff;
}

/* Empty */
.cmpx-empty-state{
  color: var(--cmpx-muted);
  text-align: center;
  padding: 42px 12px 50px;
  font-size: .95rem;
}

/* Spinner */
.cmpx-spinner{
  width: 28px; height: 28px;
  margin: 28px auto;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: var(--cmpx-brand);
  animation: cmpx-spin .8s linear infinite;
}
@keyframes cmpx-spin{ to{ transform: rotate(-360deg); } }

/* ---------- One search row ---------- */
.cmpx-result{
  display: grid;
  grid-template-columns: 44px 76px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--cmpx-border);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
  transition: border-color .15s ease, transform .05s ease, background .15s ease;
}
.cmpx-result:hover{
  border-color: #d1d5db;
  background: var(--cmpx-row);
}

/* + button */
.cmpx-result-add{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 2px solid var(--cmpx-brand);
  background: #fff;
  color: var(--cmpx-brand);
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .18s ease;
}
.cmpx-result-add:hover{
  background: var(--cmpx-brand);
  color: #fff;
}
.cmpx-result-add:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* image */
.cmpx-result-img{
  width: 76px; height: 76px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  border: 1px dashed #e5e7eb;
  padding: 6px;
}

/* meta */
.cmpx-result-meta{
  display: grid;
  gap: 6px;
}
.cmpx-result-title{
  color: var(--cmpx-text);
  line-height: 1.5;
}
.ellipsis-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* price */
.cmpx-result-price{
  color: var(--cmpx-text);
  font-weight: 700;
  letter-spacing: .1px;
}
.cmpx-unit{ font-weight: 600; opacity: .82; margin-right: 2px; }

/* badge */
.cmpx-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f0fdff;
  color: var(--cmpx-brand-2);
  border: 1px solid rgba(23,182,204,.25);
  font-weight: 600;
  font-size: .86rem;
}

/* ---------- Top cards & table (light polish to match results) ---------- */
.cmpx-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 14px 0 18px;
}
.cmpx-card{
  border: 1px solid var(--cmpx-border);
  border-radius: var(--cmpx-radius);
  padding: 14px;
  text-align: center;
  background: #fff;
  position: relative;
  min-height: 220px;
}
.cmpx-remove{
  position: absolute;
  top: 8px; left: 10px;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--cmpx-border);
  background: #fff;
  color: var(--cmpx-muted);
  cursor: pointer;
  transition: .15s ease;
}
.cmpx-remove:hover{ color:#000; border-color:#d1d5db; background:#f9fafb; }

.cmpx-card-img{ width: 120px; height: 120px; object-fit: contain; margin: 6px auto 10px; }
.cmpx-card-title{ margin-bottom: 6px; }
.cmpx-card-price{ font-weight: 700; }

/* Comparison table */
.cmpx-table{
  border: 1px solid var(--cmpx-border);
  border-radius: var(--cmpx-radius);
  overflow: hidden;
  background: #fff;
}
.cmpx-row{ display: grid; grid-template-columns: 220px repeat(3, 1fr); }
.cmpx-row:nth-child(odd){ background: var(--cmpx-row); }
.cmpx-row-head{
  background: linear-gradient(180deg, #f8feff, #fff);
  border-bottom: 1px solid var(--cmpx-border);
  font-weight: 700;
  color: var(--cmpx-text);
}
.cmpx-col{ padding: 12px 14px; min-height: 48px; display: flex; align-items: center; }
.cmpx-col-label{ border-left: 1px solid var(--cmpx-border); color:#0f172a; }
.cmpx-col-prod{ border-left: 1px solid var(--cmpx-border); }
.cmpx-col:last-child{ border-left: 0; }

/* Head prod inside table header */
.cmpx-head-prod{ display:flex; align-items:center; gap:10px; }
.cmpx-head-prod img{ width: 48px; height: 48px; object-fit: contain; border:1px solid #eef2f7; border-radius:10px; background:#fff; }

/* ---------- Buttons outside modal ---------- */
.cmpx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid transparent;
  background: var(--cmpx-brand); color:#fff; cursor:pointer; transition:.18s ease;
}
.cmpx-btn:hover{ background: var(--cmpx-brand-2); }
.cmpx-btn-secondary{ background:#fff; color:var(--cmpx-brand); border-color: var(--cmpx-brand); }
.cmpx-btn-secondary:hover{ background: var(--cmpx-brand); color:#fff; }
.cmpx-btn-light{ background:#fff; color:#0f172a; border-color: var(--cmpx-border); }
.cmpx-btn-light:hover{ border-color:#d1d5db; background:#f9fafb; }

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .cmpx-modal-head{ grid-template-columns: 1fr; gap: 10px; }
  .cmpx-results{ max-height: 60vh; }
  .cmpx-result{ grid-template-columns: 40px 64px 1fr; }
  .cmpx-result-img{ width:64px; height:64px; }
  .cmpx-row{ grid-template-columns: 160px repeat(3, 1fr); }
}
@media (max-width: 480px){
  .cmpx-dialog{ width: 98vw; }
  .cmpx-row{ grid-template-columns: 130px repeat(3, 1fr); }
}
/* =========================
   PATCH: Responsive polish
   ========================= */

/* کارت‌ها در موبایل: اسکرول افقی + snap */
@media (max-width: 768px){
  .cmpx-cards{
    display: flex;                 /* از grid به ردیف اسکرولی تبدیل میشه */
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .cmpx-cards > .cmpx-card{
    flex: 0 0 200px;
    scroll-snap-align: start;
    min-width: 200px;
  }
  .cmpx-card-img{ width: 100%; height: 120px; } /* کوچیک‌تر برای موبایل */
  .cmpx-card-title{ font-size: 13px; }
  .cmpx-card-price{ font-size: 13px; }
}

/* جدول: اسکرول افقی تمیز + ستون ویژگی چسبنده (RTL) */
.cmpx-table{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px){
  /* حداقل عرض تا مجبور به اسکرول افقی شیم */
  .cmpx-row{
    min-width: 640px;                      /* کل ردیف */
    grid-template-columns: 110px repeat(3, minmax(170px, 1fr));
  }
  /* ستون ویژگی sticky بماند هنگام اسکرول */
  .cmpx-col-label{
    position: sticky;
    right: 0;                              /* چون RTL است */
    z-index: 3;
    background: #fff;                      /* خوانایی */
    box-shadow: -1px 0 0 rgba(0,0,0,.04);  /* خط مرزی لطیف */
  }
  .cmpx-col{ padding: 10px 8px; }
  .cmpx-head-prod img{ width: 40px; height: 40px; }
  .cmpx-head-title{ font-size: 12px; line-height: 1.4; }
}

@media (max-width: 480px){
  .cmpx-row{
    min-width: 580px;
    grid-template-columns: 100px repeat(3, minmax(160px, 1fr));
  }
  .cmpx-wrap{ padding: 0 10px; }
}

/* هدر بالای صفحه در موبایل فشرده‌تر */
@media (max-width: 768px){
  .cmpx-head{
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }
  .cmpx-title{ font-size: 16px; }
  .cmpx-head-actions{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .cmpx-btn{ height: 38px; padding: 0 12px; }
}

/* مدال جستجو در موبایل */
@media (max-width: 720px){
  .cmpx-modal-head{ grid-template-columns: 1fr; gap: 10px; }
  .cmpx-dialog{ width: 96vw; max-height: 86vh; }
  .cmpx-results{ max-height: 60vh; }
  .cmpx-result{ grid-template-columns: 40px 64px 1fr; }
  .cmpx-result-img{ width: 64px; height: 64px; }
}
@media (max-width: 400px){
  .cmpx-dialog{ width: 98vw; }
  .cmpx-search{ height: 40px; }
}