/* assets/css/compare.css */

/* ---------- Layout Shell ---------- */
.compareShell {
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  animation: fadeUp .5s ease both;
}

/* ---------- Top Bar ---------- */
.compareTopBar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff, #f2f2f2);
  border-bottom: 1px solid var(--border);
}

.compareTopBar .leftInfo b {
  font-weight: 1000;
  font-size: 15px;
}

.compareTopBar .leftInfo span {
  opacity: .7;
  font-size: 13px;
}

/* ---------- Buttons ---------- */
.compareBtnGhost,
.compareMiniBtn {
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  transition: all .25s ease;
}

.compareBtnGhost:hover,
.compareMiniBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.compareBtnGhost:active,
.compareMiniBtn:active {
  transform: scale(.95);
}

/* Danger button */
.compareBtnDanger,
.compareMiniDanger {
  border: 1px solid #ffd0d0;
  background: linear-gradient(180deg, #fff5f5, #ffecec);
  color: #c1121f;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 1000;
  transition: all .25s ease;
}

.compareBtnDanger:hover,
.compareMiniDanger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(193,18,31,.15);
}

/* ---------- Scroll Area ---------- */
.compareScroll {
  overflow: auto;
  padding-bottom: 10px;
}

/* ---------- Rows ---------- */
.compareRow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 270px;
  min-width: 270px;
  background: #fff;
}

.compareHead {
  background: #f4f6f8;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ---------- Cells ---------- */
.compareCell {
  border-right: 1px solid var(--border);
  padding: 14px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compareCell:last-child {
  border-right: none;
}

.compareLabel {
  font-weight: 1000;
  font-size: 14px;
}

/* ---------- Product Card ---------- */
.compareTitle {
  font-weight: 1000;
  font-size: 14px;
  line-height: 1.25;
}

.compareImg {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
  border-radius: 16px;
  border: 1px solid var(--border);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Image animation */
.compareImg:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ---------- Card Actions ---------- */
.compareCardActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Feature Rows ---------- */
.compareRow:not(.compareHead) {
  background: #fff;
}

.compareRow:not(.compareHead):nth-child(even) {
  background: #fafafa;
}

/* ---------- Empty State ---------- */
.compareEmpty {
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 26px;
  animation: fadeUp .4s ease both;
}

.compareEmpty h3 {
  margin: 0 0 6px;
  font-weight: 1000;
}

.compareEmpty p {
  margin: 0 0 16px;
  opacity: .8;
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .compareRow {
    grid-auto-columns: 230px;
  }
  .compareCell {
    min-width: 230px;
  }
}


.compareGrid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
}

.compareCard {
  min-width: 260px;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.compareCard img {
  width: 100%;
  height: 180px;
  object-fit: contain;
}


/* ================================
   COMPARE PAGE – PRODUCT CARD FIX
================================ */

/* Grid alignment */
.compareGrid {
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto;
  padding: 20px 0 40px;
}

/* Reuse homepage product card style */
.compareGrid .productCard {
  width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.compareGrid .productCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

/* Image alignment */
.compareGrid .productImage {
  padding: 30px;
  text-align: center;
}

.compareGrid .productImage img {
  max-width: 100%;
  height: 180px;
  object-fit: contain;
}

/* Title */
.compareGrid .productTitle {
  text-align: center;
  font-weight: 800;
  color: #c49a3a;
  margin: 0 20px 10px;
}

/* Price pill (match homepage) */
.compareGrid .priceTag {
  background: #000;
  color: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  text-align: center;
  margin: 0 20px 15px;
}

/* Meta info */
.compareGrid .productMeta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 20px 20px;
  text-align: center;
  font-size: 14px;
}

.compareGrid .productMeta span {
  color: #777;
  display: block;
}

.compareGrid .productMeta b {
  display: block;
  font-weight: 800;
}

/* Buttons alignment */
.compareGrid .productActions {
  display: flex;
  gap: 12px;
  padding: 0 20px 10px;
}

.compareGrid .productActions .btn {
  flex: 1;
}

/* Remove compare button */
.compareGrid .compareActions {
  padding: 10px 20px 20px;
  text-align: center;
}

.compareGrid .removeCompareBtn {
  background: transparent;
  border: 1px dashed #ccc;
  color: #777;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
}

.compareGrid .removeCompareBtn:hover {
  border-color: #e74c3c;
  color: #e74c3c;
}


/* ================================
   FIX IMAGE ALIGNMENT (COMPARE)
================================ */

/* Force image container to behave like homepage */
.compareGrid .productImage {
  height: 220px;                /* SAME visual height as homepage */
  display: flex;
  align-items: center;          /* vertical center */
  justify-content: center;      /* horizontal center */
  padding: 20px;
  box-sizing: border-box;
}

/* Prevent image from sticking to top */
.compareGrid .productImage img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}