/* ============================================================
   SaharParts — Compare products page
   ============================================================ */

.compare-page { direction: rtl; }

.compare-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.compare-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sp-ink, #0F172A);
}
.compare-title i { color: var(--sp-navy-600, #16497D); }

.compare-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--sp-red-600, #DC2626);
    background: #fff;
    color: var(--sp-red-600, #DC2626);
    font: inherit;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.compare-clear-btn:hover { background: var(--sp-red-600, #DC2626); color: #fff; }

/* ── Table ───────────────────────────────────────────────── */
.compare-scroll {
    overflow-x: auto;
    border-radius: var(--sp-r, 14px);
}
.compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--sp-card, #fff);
    border: 1px solid var(--sp-line, #E2E8F0);
    border-radius: var(--sp-r, 14px);
    overflow: hidden;
}
.compare-table th,
.compare-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-line-2, #EDF1F6);
    vertical-align: middle;
}
.compare-table thead th {
    background: var(--sp-navy-50, #F2F7FC);
    border-bottom: 1px solid var(--sp-line, #E2E8F0);
}
.compare-table tbody tr:last-child td { border-bottom: 0; }

.compare-label-col { width: 150px; min-width: 130px; }
.compare-product-col { min-width: 200px; text-align: center; }

.compare-row-label {
    text-align: right;
    font-weight: 700;
    color: var(--sp-text, #1E293B);
    background: var(--sp-subtle, #F1F5F9);
    white-space: nowrap;
}
.compare-row-value { text-align: center; color: var(--sp-text, #1E293B); }

/* ── Product header cell ─────────────────────────────────── */
.compare-product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.compare-product__remove {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    margin: 0;
    z-index: 2;
}
.compare-product__remove button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: var(--sp-red-600, #DC2626);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sp-sh-xs, 0 1px 2px rgba(15,23,42,.05));
}
.compare-product__media {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: var(--sp-subtle, #F1F5F9);
    overflow: hidden;
}
.compare-product__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.compare-product__name {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sp-ink, #0F172A);
    text-decoration: none;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.compare-product__name:hover { color: var(--sp-navy-600, #16497D); }

/* ── Values ──────────────────────────────────────────────── */
.compare-price { font-weight: 800; font-size: 1rem; }
.compare-price del {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--sp-faint, #94A3B8);
}
.compare-price--sale { color: var(--sp-red-600, #DC2626); }
.compare-price--normal { color: var(--sp-navy-700, #113A63); }

.compare-rating { color: var(--sp-amber-600, #D97706); font-weight: 700; }

.compare-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--sp-navy-700, #113A63);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s;
}
.compare-view-btn:hover { background: var(--sp-navy-800, #0D2B4E); color: #fff; }

/* ── Empty state ─────────────────────────────────────────── */
.compare-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--sp-card, #fff);
    border: 1px dashed var(--sp-line, #E2E8F0);
    border-radius: var(--sp-r, 14px);
}
.compare-empty__icon { font-size: 3.5rem; color: var(--sp-faint, #94A3B8); margin-bottom: 12px; }
.compare-empty h5 { margin: 0 0 6px; color: var(--sp-text, #1E293B); }
.compare-empty p { margin: 0 0 16px; color: var(--sp-muted, #64748B); }
.compare-empty__btn {
    display: inline-flex;
    padding: 11px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sp-navy-700, #113A63), var(--sp-navy-800, #0D2B4E));
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.compare-empty__btn:hover { color: #fff; }

@media (max-width: 576px) {
    .compare-table th,
    .compare-table td { padding: 10px 12px; }
    .compare-product__media { width: 92px; height: 92px; }
    .compare-title { font-size: 1.25rem; }
}