/* ===========================================================================
   fastkart — مقایسهٔ کالا، بخش‌های سراسری (دور ۵۱، docs/59)
   ===========================================================================

   سراسری چون روی هر صفحهٔ کالادار دیده می‌شوند — همان مرزِ docs/27 §۳.۵:
     * دکمهٔ «مقایسه» روی سه کارتِ قالب و در ستونِ خریدِ صفحهٔ محصول؛
     * نوارِ مقایسهٔ پایینِ صفحه (`layout/compare_tray.html`)؛
     * پنجرهٔ «این کالا از دستهٔ دیگری است».
   خودِ صفحهٔ مقایسه `pages/compare.css` است. رنگ‌ها از `--theme-*` با پشتوانهٔ ثابت.
   =========================================================================== */

:root {
    --cmpx-ink: var(--theme-ink, #0f172a);
    --cmpx-surface: var(--theme-surface, #ffffff);
    --cmpx-canvas: var(--theme-page, #f8fafc);
    --cmpx-muted: var(--theme-muted, #64748b);
    --cmpx-line: var(--theme-border, #e2e8f0);
    --cmpx-brand: var(--theme-accent, #0da487);
    --cmpx-brand-strong: color-mix(in srgb, var(--cmpx-brand) 55%, #0b1220);
    --cmpx-brand-soft: color-mix(in srgb, var(--cmpx-brand) 9%, var(--cmpx-surface));
    --cmpx-cta: var(--theme-cta, #ff7a1a);
    --cmpx-on-cta: var(--theme-on-cta, #ffffff);
    --cmpx-sale-ink: var(--theme-sale-ink, #b42318);
}
@supports (color: oklch(from red l c h)) {
    :root { --cmpx-brand-strong: oklch(from var(--cmpx-brand) min(l, 0.5) c h); }
}

/* ---------- دکمه‌ها ---------- */
.fk-cmp-opt {
    display: inline-grid; place-items: center; width: 100%; height: 100%; padding: 0;
    border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.fk-cmp-opt.is-active, .fk-cmp-opt.is-active i { color: var(--cmpx-brand-strong) !important; }
.fk-cmp-opt.is-busy { opacity: .5; cursor: progress; }

.plp-card { position: relative; }
.plp-card__compare {
    position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center;
    width: 36px; height: 36px; border: 1px solid var(--cmpx-line); border-radius: 50%;
    background: color-mix(in srgb, var(--cmpx-surface) 92%, transparent); color: var(--cmpx-muted);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12); cursor: pointer; opacity: 0;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}
.plp-card:hover .plp-card__compare, .plp-card:focus-within .plp-card__compare, .plp-card__compare.is-active { opacity: 1; }
.plp-card__compare:hover { color: var(--cmpx-brand-strong); border-color: var(--cmpx-brand-strong); }
.plp-card__compare.is-active { background: var(--cmpx-brand-strong); border-color: var(--cmpx-brand-strong); color: #fff; }
@media (hover: none) { .plp-card__compare { opacity: 1; } }

.pdp-compare {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
    margin-top: 12px; padding: 0 14px; border: 1px solid var(--cmpx-line); border-radius: 12px;
    background: var(--cmpx-surface); color: var(--cmpx-ink); font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pdp-compare:hover { border-color: var(--cmpx-brand-strong); color: var(--cmpx-brand-strong); }
.pdp-compare i { color: var(--cmpx-brand-strong); }
.pdp-compare.is-active { border-color: var(--cmpx-brand-strong); background: var(--cmpx-brand-soft); color: var(--cmpx-brand-strong); }
.pdp-compare.is-busy { opacity: .6; cursor: progress; }

/* ---------- نوارِ مقایسه ---------- */
.cmp-tray {
    position: fixed; bottom: 16px; left: 50%; z-index: 1040; display: flex; align-items: center; gap: 12px;
    max-width: calc(100vw - 24px); padding: 8px; transform: translateX(-50%);
    background: var(--cmpx-surface); color: var(--cmpx-ink); border: 1px solid var(--cmpx-line); border-radius: 18px;
    box-shadow: 0 18px 48px -18px rgba(15, 23, 42, .38);
    animation: cmp-tray-in .25s ease-out;
}
.cmp-tray[hidden] { display: none; }
@keyframes cmp-tray-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.cmp-tray__toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 12px; background: var(--cmpx-canvas); color: var(--cmpx-ink);
    font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.cmp-tray__toggle > .fa-code-compare { color: var(--cmpx-brand-strong); }
.cmp-tray__count {
    display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
    background: var(--cmpx-brand-strong); color: #fff; font-size: 12px;
}
.cmp-tray__chev { color: var(--cmpx-muted); transition: transform .2s ease; }
.cmp-tray.is-collapsed .cmp-tray__body { display: none; }
.cmp-tray.is-collapsed .cmp-tray__chev { transform: rotate(180deg); }
.cmp-tray__body { display: flex; align-items: center; gap: 12px; }
.cmp-tray__items { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cmp-tray__item { position: relative; }
.cmp-tray__item img, .cmp-tray__slot {
    display: block; width: 48px; height: 48px; border-radius: 10px;
}
.cmp-tray__item img { object-fit: contain; border: 1px solid var(--cmpx-line); background: var(--cmpx-surface); }
.cmp-tray__slot { border: 1.5px dashed var(--cmpx-line); }
.cmp-tray__remove {
    position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 22px; height: 22px;
    padding: 0; border: 1px solid var(--cmpx-line); border-radius: 50%; background: var(--cmpx-surface);
    color: var(--cmpx-muted); font-size: 11px; cursor: pointer;
}
.cmp-tray__remove::after { content: ''; position: absolute; inset: -8px; }
.cmp-tray__remove:hover { color: var(--cmpx-sale-ink); border-color: var(--cmpx-sale-ink); }
.cmp-tray__hint { max-width: 170px; margin: 0; color: var(--cmpx-muted); font-size: 12px; line-height: 1.6; }
.cmp-tray__hint[hidden] { display: none; }
.cmp-tray__actions { display: flex; align-items: center; gap: 8px; }
.cmp-tray__go {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px;
    background: var(--cmpx-cta); color: var(--cmpx-on-cta); font-size: 13.5px; font-weight: 800; white-space: nowrap; text-decoration: none;
}
.cmp-tray__go:hover { color: var(--cmpx-on-cta); filter: brightness(.95); }
.cmp-tray__go.is-disabled { background: var(--cmpx-canvas); color: var(--cmpx-muted); cursor: not-allowed; filter: none; }
.cmp-tray__clear {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cmpx-line);
    border-radius: 12px; background: var(--cmpx-surface); color: var(--cmpx-muted); cursor: pointer;
}
.cmp-tray__clear:hover { color: var(--cmpx-sale-ink); border-color: var(--cmpx-sale-ink); }

@media (max-width: 767.98px) {
    /* بالای نوارِ پایینیِ موبایلِ قالب (`layout/mobile_bar.html`) */
    .cmp-tray { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); gap: 8px; padding: 6px; width: calc(100vw - 16px); }
    .cmp-tray__body { flex: 1 1 auto; justify-content: space-between; gap: 8px; min-width: 0; }
    .cmp-tray__items { gap: 6px; overflow-x: auto; padding: 6px 4px 2px; }
    .cmp-tray__item img, .cmp-tray__slot { width: 40px; height: 40px; }
    .cmp-tray__hint { display: none; }
    .cmp-tray__toggle span { display: none; }
    .cmp-tray__go { padding: 0 12px; }
    .cmp-tray__clear { width: 40px; }
}

/* ---------- «دستهٔ دیگر» ---------- */
.cmp-confirm {
    width: min(440px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 18px;
    background: var(--cmpx-surface); color: var(--cmpx-ink); box-shadow: 0 24px 64px -28px rgba(15, 23, 42, .45);
}
.cmp-confirm::backdrop { background: rgba(15, 23, 42, .45); }
.cmp-confirm__box { padding: 26px 22px 20px; text-align: center; }
.cmp-confirm__icon {
    display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
    background: var(--cmpx-brand-soft); color: var(--cmpx-brand-strong); font-size: 22px;
}
.cmp-confirm h2 { margin: 0 0 8px; color: var(--cmpx-ink); font-size: 16.5px; font-weight: 800; }
.cmp-confirm p { margin: 0 0 18px; color: var(--cmpx-muted); font-size: 13.5px; line-height: 1.9; }
.cmp-confirm__actions { display: flex; flex-direction: column; gap: 8px; }
.cmp-confirm__yes, .cmp-confirm__no {
    min-height: 46px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cmp-confirm__yes { border: 0; background: var(--cmpx-brand-strong); color: #fff; }
.cmp-confirm__yes:hover { filter: brightness(1.08); }
.cmp-confirm__no { border: 1px solid var(--cmpx-line); background: var(--cmpx-surface); color: var(--cmpx-ink); }
.cmp-confirm__no:hover { border-color: var(--cmpx-brand-strong); }

@media (prefers-reduced-motion: reduce) {
    .cmp-tray { animation: none; }
    .cmp-tray__chev, .plp-card__compare, .pdp-compare { transition: none; }
}