/* Checkthevendor compare tray. */

/* CRITICAL: respect the hidden attribute (display rules below would otherwise override it). */
.ctv-tray[hidden], .ctv-modal[hidden]{ display:none !important; }

.ctv-compare{ max-width:1000px; margin:0 auto; }
.ctv-compare__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin:1rem 0; }
.ctv-card{ display:grid; grid-template-columns:auto auto 1fr; grid-template-areas:"check grade name" "check grade score" "check grade conf"; align-items:center; column-gap:14px; row-gap:1px; padding:16px 18px; border:1px solid #e7ebf3; border-radius:16px; cursor:pointer; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05); transition:transform .12s, box-shadow .12s, border-color .12s; }
.ctv-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(29,78,216,.14); border-color:#c7d2fe; }
.ctv-card:has(.ctv-card__check:checked){ border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25),0 12px 30px rgba(29,78,216,.16); }
.ctv-card__check{ grid-area:check; width:20px; height:20px; accent-color:#2563eb; }
.ctv-card__grade{ grid-area:grade; font-family:'Sora',sans-serif; font-weight:800; font-size:1.7rem; width:1.9em; height:1.9em; display:flex; align-items:center; justify-content:center; border-radius:12px; color:#fff; background:#64748b; }
.ctv-grade--a{ background:#15803d; } .ctv-grade--b{ background:#4d7c0f; }
.ctv-grade--c{ background:#b45309; } .ctv-grade--d{ background:#c2410c; }
.ctv-grade--f{ background:#b91c1c; }
.ctv-card__name{ grid-area:name; font-weight:700; color:#0b1220; }
.ctv-card__score{ grid-area:score; color:#475569; font-variant-numeric:tabular-nums; }
.ctv-card__conf{ grid-area:conf; font-size:.8rem; color:#64748b; }

.ctv-tray{ position:sticky; bottom:18px; display:flex; gap:14px; align-items:center; justify-content:center; padding:12px 20px; margin:18px auto 0; background:#0b1220; color:#fff; border-radius:999px; width:fit-content; box-shadow:0 12px 34px rgba(2,6,23,.4); }
.ctv-tray button{ border:0; border-radius:999px; padding:8px 18px; cursor:pointer; font-weight:700; }
.ctv-tray__open{ background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; }
.ctv-tray__clear{ background:transparent; color:#cbd5e1; }

.ctv-modal{ position:fixed; inset:0; background:rgba(2,6,23,.6); display:flex; align-items:center; justify-content:center; padding:18px; z-index:9999; backdrop-filter:blur(2px); }
.ctv-modal__inner{ background:#fff; border-radius:18px; padding:24px; max-width:920px; width:100%; max-height:86vh; overflow:auto; position:relative; box-shadow:0 30px 80px rgba(2,6,23,.5); }
.ctv-modal__close{ position:absolute; top:12px; right:16px; border:0; background:none; font-size:1.7rem; line-height:1; cursor:pointer; color:#64748b; }
.ctv-cmp{ width:100%; border-collapse:collapse; }
.ctv-cmp th,.ctv-cmp td{ border:1px solid #e7ebf3; padding:12px 14px; text-align:left; vertical-align:top; }
.ctv-cmp thead th{ background:#f8fafc; font-family:'Sora',sans-serif; }
.ctv-cmp tbody th[scope="row"]{ background:#fcfdff; font-weight:600; white-space:nowrap; color:#64748b; }