/* ==========================================================================
   M חשמל — Wishlist + Compare (Stage 20). Design System v1.1 tokens only.
   Buttons (card / product page) keep their component styles; this file adds the active heart, the two pages,
   the comparison table, toasts and the small confirm dialog.
   ========================================================================== */

/* ---------- Buttons: active state ---------- */
[data-np-wishlist].is-active .np-icon, [data-np-compare].is-active .np-icon { color: var(--np-color-brand-primary); }
[data-np-wishlist].is-active .np-icon { fill: currentColor; }          /* heart outline → filled */
[data-np-wishlist].is-loading, [data-np-compare].is-loading { pointer-events: none; }
.np-product-actions__btn.is-active { --_fg: var(--np-color-brand-primary); }
@media (hover: hover) { [data-np-wishlist]:not(.is-active):hover .np-icon { transform: scale(1.08); } }
[data-np-wishlist] .np-icon { transition: transform var(--np-motion-fast) var(--np-ease); }

/* ---------- Pages ---------- */
.np-cw { padding-block: var(--np-space-6) var(--np-space-8); }
.np-cw__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--np-space-2) var(--np-space-4); margin-bottom: var(--np-space-4); }
.np-cw__title { margin: 0; font-size: var(--np-font-h1-size); font-weight: var(--np-font-h1-weight); line-height: var(--np-font-h1-lh); color: var(--np-color-neutral-900); }
.np-cw__count { margin: 0 0 var(--np-space-4); font-size: var(--np-font-body-small-size); color: var(--np-color-text-secondary); }
.np-cw__content[aria-busy="true"] { min-height: 120px; }
.np-cw__loading { margin: 0; padding: var(--np-space-6) 0; color: var(--np-color-text-muted); font-size: var(--np-font-body-small-size); }
.np-cw__empty, .np-cw__notice { margin-bottom: var(--np-space-5); }
.np-cw__empty-body { display: flex; flex-direction: column; gap: var(--np-space-3); align-items: flex-start; }
.np-cw__empty-title { margin: 0; font-size: var(--np-font-body-size); font-weight: 600; color: var(--np-color-neutral-900); }
.np-cw__grid { list-style: none; margin: 0; padding: 0; }
.np-cw__grid > .np-product-card { transition: opacity var(--np-motion-fast) var(--np-ease), transform var(--np-motion-fast) var(--np-ease); }
.np-cw__grid > .np-product-card.is-removing { opacity: 0; transform: scale(.97); }
@media (min-width: 1025px) { .np-cw--wishlist .np-grid.np-products { gap: var(--np-space-5); } }

/* ---------- Compare: toolbar ---------- */
.np-cw__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--np-space-2) var(--np-space-4); margin-bottom: var(--np-space-3); }
.np-cw__toolbar .np-cw__count { margin: 0; }
.np-cw__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--np-space-2) var(--np-space-4); }
.np-cw__tool { font-size: var(--np-font-body-small-size); }
.np-cw__scroll-hint[hidden] { display: none; }
.np-cw__scroll-hint { display: flex; align-items: center; gap: var(--np-space-1); margin: 0 0 var(--np-space-2); font-size: var(--np-font-caption-size); color: var(--np-color-text-muted); }
.np-cw__scroll-hint .np-icon { animation: np-cw-nudge 1.2s ease-in-out infinite; }
@keyframes np-cw-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }

/* ---------- Compare: table ---------- */
.np-compare { position: relative; }
.np-compare__scroll { overflow-x: auto; contain: paint; /* RTL + overflow-x:auto: Chrome still grows the document's scrollable area to the left without paint containment */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--np-color-border); border-radius: var(--np-radius-md); background: var(--np-color-bg-surface); }
.np-compare__scroll:focus-visible { outline: var(--np-focus-ring); outline-offset: 2px; }
.np-compare__table { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--np-font-body-small-size); line-height: var(--np-font-body-small-lh); }
.np-compare__col-label { width: 180px; }
.np-compare__table th, .np-compare__table td { padding: var(--np-space-3) var(--np-space-3); border-bottom: 1px solid var(--np-color-border); vertical-align: top; text-align: start; }
.np-compare__table tbody tr:last-child th, .np-compare__table tbody tr:last-child td { border-bottom: 0; }
.np-compare__label { font-weight: 600; color: var(--np-color-text-secondary); background: var(--np-color-bg-subtle); }
.np-compare__cell { color: var(--np-color-neutral-900); overflow-wrap: anywhere; }
.np-compare__cell.is-missing { color: var(--np-color-text-muted); }
.np-compare__cell .np-price__current { font-weight: 700; }
.np-compare__cell .np-price__old { margin-inline-start: var(--np-space-2); }
.np-compare__cell .np-price__prefix { display: block; font-size: var(--np-font-caption-size); font-weight: 400; color: var(--np-color-text-secondary); }
.np-compare__list { margin: 0; padding-inline-start: 1.1em; }
.np-compare__dims { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.np-compare__cell--cta .np-btn { width: 100%; }
.np-compare__row--stock .np-stock { display: inline-flex; }

/* product identity (thead) */
.np-compare__head th { vertical-align: bottom; background: var(--np-color-bg-surface); }
.np-compare__identity { position: relative; display: flex; flex-direction: column; gap: var(--np-space-1); padding-top: var(--np-space-2); }
.np-compare__remove { position: absolute; top: 0; inset-inline-end: 0; --_bg: var(--np-color-bg-surface); } /* 44px touch target (np-btn--icon) */
.np-compare__img-link { display: block; width: 100%; height: 200px; margin-bottom: var(--np-space-1); }
.np-compare__img-link img { width: 100%; height: 100%; object-fit: contain; display: block; }
.np-compare__name { font-size: var(--np-font-body-small-size); font-weight: 600; line-height: 1.35; color: var(--np-color-neutral-900); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.np-compare__name:hover { color: var(--np-color-brand-primary); text-decoration: underline; }
.np-compare__model .np-product-card__model-value { direction: ltr; unicode-bidi: isolate; }

/* sticky: label column (both axes) + product head under the site header (desktop) */
.np-compare__label { position: sticky; inset-inline-start: 0; z-index: 2; }
.np-compare.is-scrollable .np-compare__label { box-shadow: -1px 0 0 var(--np-color-border); }
@media (min-width: 1025px) {
  .np-compare__head th { position: sticky; top: var(--np-cw-sticky-top, 0px); z-index: 3; box-shadow: 0 1px 0 var(--np-color-border); }
  .np-compare__head .np-compare__label--head { z-index: 4; }
}
/* the scroll container clips sticky-top; on desktop the table rarely scrolls horizontally, so let it overflow visibly */
@media (min-width: 1025px) { .np-compare:not(.is-scrollable) .np-compare__scroll { overflow: visible; } }

/* differences */
.np-compare.is-highlight .np-compare__row[data-differs] .np-compare__cell { background: var(--np-color-brand-primary-soft); }
.np-compare.is-highlight .np-compare__row[data-differs] .np-compare__label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--np-color-brand-primary); margin-inline-end: var(--np-space-1); vertical-align: middle; }
.np-compare.is-only-diff .np-compare__row:not([data-differs]):not([data-static]) { display: none; }

/* scroll edge hint (RTL: more content lies to the left) */
.np-compare.is-scrollable::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28px; pointer-events: none; border-radius: var(--np-radius-md) 0 0 var(--np-radius-md); background: linear-gradient(to right, var(--np-color-bg-surface), transparent); transition: opacity var(--np-motion-fast) var(--np-ease); }
.np-compare.is-scrollable.is-at-end::after { opacity: 0; }

/* widths: 2–4 products share the row; on mobile each product column is 55vw → horizontal scroll */
@media (max-width: 1024px) {
  .np-compare__col-label { width: 128px; }
  .np-compare__col-product { width: 200px; }
  .np-compare__table { width: max-content; min-width: 100%; }
  .np-compare__table th, .np-compare__table td { padding: var(--np-space-2) var(--np-space-2); }
}
@media (max-width: 767px) {
  .np-compare__col-label { width: 104px; }
  .np-compare__col-product { width: 58vw; max-width: 240px; min-width: 176px; }
  .np-compare__label { font-size: var(--np-font-caption-size); }
  .np-compare__img-link { height: 120px; }
  .np-cw__tools { width: 100%; }
}

/* ---------- Toasts ---------- */
.np-toasts { position: fixed; inset-inline-start: 50%; transform: translateX(-50%); bottom: calc(var(--np-space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--np-z-toast); display: flex; flex-direction: column; gap: var(--np-space-2); align-items: center; width: min(92vw, 420px); pointer-events: none; }
[dir="rtl"] .np-toasts { inset-inline-start: auto; left: 50%; transform: translateX(-50%); }
.np-toast { pointer-events: auto; padding: var(--np-space-2) var(--np-space-4); border-radius: var(--np-radius-md); background: var(--np-color-neutral-900); color: var(--np-color-neutral-0); font-size: var(--np-font-body-small-size); line-height: var(--np-font-body-small-lh); box-shadow: var(--np-shadow-md); opacity: 0; transform: translateY(8px); transition: opacity var(--np-motion-fast) var(--np-ease), transform var(--np-motion-fast) var(--np-ease); }
.np-toast.is-in { opacity: 1; transform: none; }
.np-toast--error { background: var(--np-color-error); }

/* ---------- Dialog ---------- */
.np-cw-dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 440px); width: 100%; }
.np-cw-dialog::backdrop { background: rgb(0 0 0 / .45); }
.np-dialog__box { background: var(--np-color-bg-surface); border-radius: var(--np-radius-lg); box-shadow: var(--np-shadow-md); padding: var(--np-space-5); direction: rtl; text-align: start; }
.np-dialog__title { margin: 0 0 var(--np-space-2); font-size: var(--np-font-h4-size, 1.125rem); font-weight: 700; color: var(--np-color-neutral-900); }
.np-dialog__text { margin: 0 0 var(--np-space-4); font-size: var(--np-font-body-size); color: var(--np-color-text); }
.np-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--np-space-2); }

@media (prefers-reduced-motion: reduce) {
  .np-toast, .np-cw__grid > .np-product-card, [data-np-wishlist] .np-icon { transition: none; }
  .np-cw__scroll-hint .np-icon { animation: none; }
}