/* ==========================================================================
   compare.css — প্রোডাক্ট তুলনা (Compare) ফিচারের স্টাইল
   FrontPage.php, ProductSinglePage.php, compare.php — এই ফাইলগুলোতে লোড হয়।
   ========================================================================== */

/* ---------- প্রোডাক্ট কার্ডের চেকবক্স (FrontPage.php #fpGrid .fp-card) ---------- */
.hkl-compare-chk{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line, #e6e9e6);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft, #666d6a);
  cursor: pointer;
  user-select: none;
}
.hkl-compare-chk input.hkl-compare-cb{
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--brand, #0a8a3e);
  flex-shrink: 0;
}
.hkl-compare-chk:hover{ color: var(--ink, #1b1f22); }

/* ---------- ফ্লোটিং "তুলনা করুন (N)" বার ---------- */
.hkl-cmp-bar{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 120px);
  z-index: 999;
  background: #1b1f22;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  max-width: calc(100vw - 24px);
}
.hkl-cmp-bar.hkl-cmp-bar-visible{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.hkl-cmp-bar-text{
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.hkl-cmp-bar-btn{
  background: var(--brand, #0a8a3e);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.hkl-cmp-bar-btn:hover{ filter: brightness(1.08); }
.hkl-cmp-bar-clear{
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.hkl-cmp-bar-clear:hover{ background: rgba(255,255,255,.15); }

@media (max-width: 480px){
  .hkl-cmp-bar{ left: 12px; right: 12px; bottom: 12px; transform: translateY(120px); width: auto; }
  .hkl-cmp-bar.hkl-cmp-bar-visible{ transform: translateY(0); }
  .hkl-cmp-bar-text{ flex: 1; white-space: normal; }
}

/* ==========================================================================
   compare.php পেজ
   ========================================================================== */
.cmp-wrap{ max-width: 1200px; margin: 0 auto; padding: 22px 20px 60px; }
.cmp-title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.cmp-title-row h1{ font-family:'Baloo Da 2',sans-serif; font-size:22px; margin:0; }
.cmp-back{ font-size:13px; font-weight:600; color: var(--brand-dark, #087a35); text-decoration:none; }
.cmp-back:hover{ text-decoration:underline; }
.cmp-clear-all{ background:#fff; border:1px solid var(--line,#e6e9e6); color:#e0202e; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; }
.cmp-clear-all:hover{ background:#fff5f5; border-color:#e0202e; }

.cmp-empty{ text-align:center; color: var(--ink-soft, #666d6a); padding: 70px 16px; font-size:14px; }
.cmp-empty .icon{ font-size:48px; margin-bottom:12px; }
.cmp-hidden{ display:none !important; }

.cmp-table-scroll{ overflow-x: auto; background:#fff; border:1px solid var(--line,#e6e9e6); border-radius: 12px; }
table.cmp-table{ width:100%; border-collapse: collapse; min-width: 560px; }
table.cmp-table th, table.cmp-table td{
  border-bottom: 1px solid var(--line,#e6e9e6);
  padding: 12px 14px;
  text-align: left;
  font-size: 13.5px;
  vertical-align: top;
}
table.cmp-table td.cmp-label-col, table.cmp-table th.cmp-label-col{
  width: 140px;
  min-width: 120px;
  font-weight: 700;
  color: var(--ink-soft, #666d6a);
  background: #fafbfa;
  white-space: nowrap;
}
table.cmp-table th{ background:#fafbfa; }
.cmp-prod-col{ min-width: 190px; }
.cmp-prod-head{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.cmp-prod-img{ width:100%; aspect-ratio:1/1; max-width:150px; background:#fafbfa center/contain no-repeat; border:1px solid var(--line,#e6e9e6); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:28px; color:#c3ccc5; }
.cmp-prod-name{ font-size:13.5px; font-weight:700; color: var(--ink, #1b1f22); text-decoration:none; line-height:1.35; }
.cmp-prod-name:hover{ text-decoration:underline; }
.cmp-remove-btn{ background:#fff; border:1px solid var(--line,#e6e9e6); color:#e0202e; border-radius:7px; padding:5px 10px; font-size:12px; font-weight:700; cursor:pointer; }
.cmp-remove-btn:hover{ background:#fff5f5; border-color:#e0202e; }
.cmp-price{ font-family:'Baloo Da 2',sans-serif; font-weight:800; color: var(--brand-darker, #06612a); font-size:14.5px; }
.cmp-price-old{ text-decoration: line-through; color:#9aa39c; font-size:12px; margin-left:6px; }
.cmp-instock{ color:#0a8a3e; font-weight:700; }
.cmp-outstock{ color:#e0202e; font-weight:700; }
.cmp-atc-btn{ background: var(--brand, #0a8a3e); color:#fff; border:none; border-radius:7px; padding:8px 10px; font-size:12.5px; font-weight:700; cursor:pointer; width:100%; }
.cmp-atc-btn:hover{ filter:brightness(1.06); }
.cmp-atc-btn:disabled{ background:#c3ccc5; cursor:not-allowed; }