/* MoonLight_X — wc-modules.css
   Styles for all 8 WC feature modules.
   Loaded on WC pages + sitewide (compare bar, wishlist in header). */

/* ═══════════════════════════════════════════════════════════════════
   VARIATION SWATCHES (already partially in woocommerce-ui.css —
   these extend for single product page context)
══════════════════════════════════════════════════════════════════ */
.mlx-swatches { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; }
.mlx-swatch--color {
  width:32px; height:32px; border-radius:50%;
  background-color:var(--sw-color,var(--sw,#ddd));
  border:2px solid transparent;
  outline:2px solid transparent;
  cursor:pointer;
  transition:outline-color .2s, transform .15s;
  position:relative;
}
.mlx-swatch--color:hover { transform:scale(1.1); }
.mlx-swatch--color.is-active { outline-color:var(--mlx-sw-active-border,#0a0a0a); outline-offset:3px; }
.mlx-swatch--color.is-active::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l4 4 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-radius:50%; }
.mlx-swatch--label { min-width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0 10px; border:1.5px solid var(--mlx-sw-border,#ddd); border-radius:6px; font-size:.8125rem; font-weight:500; cursor:pointer; transition:border-color .2s, background .2s, color .2s; white-space:nowrap; color:var(--mlx-sw-text,#444); background:var(--mlx-sw-bg,#fff); }
.mlx-swatch--label:hover { border-color:var(--mlx-sw-hover-border,#0a0a0a); color:var(--mlx-sw-hover-text,#0a0a0a); }
.mlx-swatch--label.is-active { background:var(--mlx-sw-active-bg,#0a0a0a); border-color:var(--mlx-sw-active-border,#0a0a0a); color:var(--mlx-sw-active-text,#fff); }
.mlx-swatch.is-disabled { opacity:.35; cursor:not-allowed; }

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST
══════════════════════════════════════════════════════════════════ */
.mlx-wishlist-page .mlx-wishlist-empty { text-align:center; padding:3rem; color:#888; }
.mlx-wishlist-share { margin-top:1.5rem; font-size:.875rem; color:#888; }
.mlx-wishlist-share-url { width:100%; max-width:480px; margin-top:.5rem; font-size:.8125rem; background:#f5f5f5; border:1px solid #ddd; border-radius:4px; padding:.5rem .75rem; cursor:text; }
.mlx-wishlist-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; background:var(--mlx-color-accent,#e84545); color:#fff; font-size:11px; font-weight:700; border-radius:9999px; }

/* ═══════════════════════════════════════════════════════════════════
   COMPARE
══════════════════════════════════════════════════════════════════ */

/* Floating comparison bar */
.mlx-compare-bar {
  position:fixed; top:0; left:0; right:0; z-index:600;
  background:var(--mlx-color-primary,#0a0a0a);
  color:#fff;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:.75rem 1.5rem;
  transform:translateY(-100%);
  transition:transform .35s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.mlx-compare-bar.is-visible { transform:translateY(0); }

/* Clear button — white on dark background */
.mlx-compare-bar .mlx-btn--ghost {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.25);
  padding-inline: .75rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: .375rem .75rem;
  font-size: .8125rem;
}
.mlx-compare-bar .mlx-btn--ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
}
.mlx-compare-bar__count { font-size:.9375rem; }
.mlx-compare-bar__count strong { font-size:1.25rem; margin-right:.25rem; }

/* Compare modal */
.mlx-compare-modal { position:fixed; inset:0; z-index:800; pointer-events:none; }
.mlx-compare-modal.is-open { pointer-events:auto; }
.mlx-compare-modal__bg { position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .3s; }
.mlx-compare-modal.is-open .mlx-compare-modal__bg { opacity:1; }
.mlx-compare-modal__wrap { position:absolute; inset:5vh 2vw; background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transform:scale(.96) translateY(12px); opacity:0; transition:transform .3s, opacity .25s; }
.mlx-compare-modal.is-open .mlx-compare-modal__wrap { transform:scale(1) translateY(0); opacity:1; }
.mlx-compare-modal__head { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid #eee; flex-shrink:0; }
.mlx-compare-modal__head h3 { font-size:1.125rem; font-weight:700; }
.mlx-compare-modal__close { background:#f5f5f5; border:none; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mlx-compare-modal__body { flex:1; overflow:auto; padding:1.5rem; }

/* Compare table */
.mlx-compare-table-wrap { overflow-x:auto; }
.mlx-compare-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.mlx-compare-table th, .mlx-compare-table td { padding:.875rem 1rem; border-bottom:1px solid #eee; vertical-align:top; text-align:left; }
.mlx-compare-table th.mlx-compare-table__label, .mlx-compare-table td.mlx-compare-table__label { font-weight:600; background:#f9f9f9; width:140px; min-width:140px; color:#555; font-size:.8125rem; }
.mlx-compare-table__product { position:relative; text-align:center; min-width:180px; }
.mlx-compare-table__product img { width:100%; max-width:140px; height:auto; margin:0 auto .5rem; border-radius:6px; }
.mlx-compare-table__name { display:block; font-weight:600; font-size:.9375rem; margin-top:.5rem; }
.mlx-compare-remove { position:absolute; top:4px; right:4px; background:none; border:none; cursor:pointer; color:#ccc; padding:4px; border-radius:4px; }
.mlx-compare-remove:hover { color:var(--mlx-color-accent,#e84545); }
.mlx-compare-table .is-in-stock { color:#22c55e; }
.mlx-compare-table .is-out-of-stock { color:#ef4444; }
.mlx-compare-na { color:#bbb; }

/* ═══════════════════════════════════════════════════════════════════
   QUICK BUY
══════════════════════════════════════════════════════════════════ */
.mlx-quick-buy-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.75rem; width:100%;
}
.mlx-quick-buy-btn svg { width:16px; height:16px; }

/* ═══════════════════════════════════════════════════════════════════
   SIZE GUIDE
══════════════════════════════════════════════════════════════════ */
.mlx-size-guide-trigger { margin:.75rem 0; }
.mlx-size-guide-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.875rem; font-weight:500; color:var(--mlx-color-accent,#e84545);
  background:none; border:none; cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:3px;
}
.mlx-size-guide-btn:hover { color:var(--mlx-color-primary,#0a0a0a); }

/* Size guide modal */
.mlx-sg-modal { position:fixed; inset:0; z-index:800; pointer-events:none; }
.mlx-sg-modal.is-open { pointer-events:auto; }
.mlx-sg-modal__bg { position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .3s; }
.mlx-sg-modal.is-open .mlx-sg-modal__bg { opacity:1; }
.mlx-sg-modal__wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.95); width:min(780px,94vw); max-height:88vh; background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; opacity:0; transition:transform .3s, opacity .25s; }
.mlx-sg-modal.is-open .mlx-sg-modal__wrap { opacity:1; transform:translate(-50%,-50%) scale(1); }
.mlx-sg-modal__close { position:absolute; top:14px; right:14px; background:rgba(0,0,0,.07); border:none; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1; }
.mlx-sg-modal__body { flex:1; overflow-y:auto; padding:2.5rem; }
.mlx-size-guide__title { font-size:1.375rem; font-weight:700; margin-bottom:1.25rem; }
.mlx-size-guide__content table { width:100%; border-collapse:collapse; font-size:.9375rem; }
.mlx-size-guide__content table th, .mlx-size-guide__content table td { padding:.625rem .875rem; border:1px solid #eee; text-align:center; }
.mlx-size-guide__content table th { background:#f5f5f5; font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════
   WAITLIST
══════════════════════════════════════════════════════════════════ */
.mlx-waitlist { margin:1rem 0; padding:1.25rem; background:#fafafa; border:1px solid #eee; border-radius:10px; }
.mlx-waitlist__label { display:flex; align-items:center; gap:.5rem; font-size:.9375rem; font-weight:500; margin-bottom:.875rem; color:var(--mlx-color-primary,#0a0a0a); }
.mlx-waitlist__label svg { color:var(--mlx-color-accent,#e84545); flex-shrink:0; }
.mlx-waitlist__form { display:flex; gap:.5rem; flex-wrap:wrap; }
.mlx-waitlist__email { flex:1; min-width:200px; padding:.65rem 1rem; border:1px solid #ddd; border-radius:6px; font-size:.875rem; }
.mlx-waitlist__email:focus { outline:none; border-color:var(--mlx-color-accent,#e84545); box-shadow:0 0 0 3px rgba(232,69,69,.1); }
.mlx-waitlist__message { font-size:.8125rem; margin-top:.5rem; min-height:1.2rem; }
.mlx-waitlist__message:not(:empty) { color:var(--mlx-color-accent,#e84545); }
.mlx-waitlist__message.is-success { color:#22c55e; }

/* ═══════════════════════════════════════════════════════════════════
   SOLD COUNTER
══════════════════════════════════════════════════════════════════ */
.mlx-sold-counter {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.875rem; font-weight:500;
  color:#555;
  margin:.5rem 0;
  padding:.4rem .75rem;
  background:#fff8f0;
  border:1px solid #ffe4c4;
  border-radius:9999px;
}
.mlx-sold-counter svg { color:#f97316; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════════
   REVIEWS — ENHANCED
══════════════════════════════════════════════════════════════════ */

/* Rating summary */
.mlx-rating-summary { display:flex; gap:2rem; align-items:flex-start; padding:1.5rem; background:#fafafa; border-radius:12px; margin-bottom:1.5rem; flex-wrap:wrap; }
.mlx-rating-summary__score { display:flex; flex-direction:column; align-items:center; gap:.25rem; min-width:80px; }
.mlx-rating-summary__avg { font-size:3rem; font-weight:700; line-height:1; }
.mlx-rating-summary__count { font-size:.8125rem; color:#888; text-align:center; }
.mlx-rating-summary__bars { flex:1; display:flex; flex-direction:column; gap:.5rem; min-width:200px; }
.mlx-rating-bar { display:flex; align-items:center; gap:.75rem; font-size:.8125rem; }
.mlx-rating-bar__label { min-width:32px; color:#888; white-space:nowrap; }
.mlx-rating-bar__track { flex:1; height:8px; background:#eee; border-radius:4px; overflow:hidden; }
.mlx-rating-bar__fill { height:100%; background:#f5a623; border-radius:4px; transition:width .3s; }
.mlx-rating-bar__count { min-width:20px; text-align:right; color:#888; }

/* Verified badge */
.mlx-review-verified { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:500; color:#22c55e; background:#f0fdf4; padding:2px 8px; border-radius:9999px; margin-bottom:.5rem; }

/* Criteria ratings on review */
.mlx-review-criteria-display { display:flex; flex-wrap:wrap; gap:.75rem; margin:.5rem 0; font-size:.8125rem; }
.mlx-review-criteria-item { display:flex; align-items:center; gap:.3rem; color:#555; }
.mlx-criteria-stars-display { color:#f5a623; letter-spacing:.1em; }

/* Pros / Cons */
.mlx-review-pros-cons { margin:.5rem 0; font-size:.875rem; display:flex; flex-direction:column; gap:.3rem; }
.mlx-review-pros { color:#16a34a; }
.mlx-review-cons { color:#ef4444; }

/* Helpful voting */
.mlx-review-helpful { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; font-size:.8125rem; color:#888; padding-top:.75rem; border-top:1px solid #f0f0f0; }
.mlx-helpful-btn { display:inline-flex; align-items:center; gap:.3rem; background:none; border:1px solid #ddd; border-radius:4px; padding:.25rem .6rem; cursor:pointer; font-size:.8125rem; color:#666; transition:border-color .2s, color .2s; }
.mlx-helpful-btn:hover { border-color:var(--mlx-color-primary,#0a0a0a); color:var(--mlx-color-primary,#0a0a0a); }
.mlx-helpful-btn.is-voted { border-color:var(--mlx-color-accent,#e84545); color:var(--mlx-color-accent,#e84545); }

/* Review criteria form */
.mlx-review-extras { margin-top:1rem; }
.mlx-review-criteria { margin-bottom:1rem; }
.mlx-review-criteria__label { font-size:.875rem; font-weight:600; margin-bottom:.5rem; }
.mlx-review-criteria__row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; font-size:.875rem; }
.mlx-criteria-stars { display:flex; flex-direction:row-reverse; }
.mlx-criteria-stars input { display:none; }
.mlx-criteria-stars label { font-size:1.25rem; color:#ddd; cursor:pointer; padding:0 2px; transition:color .15s; }
.mlx-criteria-stars input:checked ~ label,
.mlx-criteria-stars label:hover,
.mlx-criteria-stars label:hover ~ label { color:#f5a623; }
/* ── Compare dedicated page (shortcode) ─────────────────────── */
.mlx-compare-page { margin: 2rem 0; }

.mlx-compare-page__empty {
  text-align: center;
  padding: 4rem 2rem;
  background: #f9fafb;
  border-radius: 12px;
}
.mlx-compare-page__empty svg { margin: 0 auto 1rem; display: block; color: #ccc; }
.mlx-compare-page__empty h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.mlx-compare-page__empty p  { color: #888; margin: 0 0 1.25rem; }

.mlx-compare-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.mlx-compare-page__count { font-size: .9375rem; font-weight: 600; }
.mlx-compare-page__clear { font-size: .8125rem !important; padding: .5rem 1rem !important; }

/* Full-width table on the dedicated page */
.mlx-compare-page .mlx-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mlx-compare-page .mlx-compare-table { min-width: 600px; }
.mlx-compare-page .mlx-compare-table th,
.mlx-compare-page .mlx-compare-table td { min-width: 180px; }
body.mlx-compare-open { overflow: hidden; }

/* When compare bar visible — push page content down so nothing is hidden */
body.mlx-compare-active {
  padding-top: 25px;
  transition: padding-top .35s ease;
}
@media (max-width: 767px) {
  .mlx-compare-bar {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .625rem 1rem;
  }
  body.mlx-compare-active { padding-top: 72px; }
}

/* ── Invoices — Thank You page ──────────────────────────────────────────── */
.mlx-invoice-thankyou{margin:2rem 0;padding:1.5rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px}
.mlx-invoice-thankyou h2{font-size:1rem;font-weight:600;margin-bottom:.75rem}
.mlx-btn-invoice{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:#1a1a1a;color:#fff!important;border-radius:6px;font-size:.9rem;font-weight:500;text-decoration:none;transition:background .15s}
.mlx-btn-invoice:hover{background:#333}