/**
 * SoleQuest — Comparison Page Styles
 *
 * @package SoleQuest
 */

/* Sticky header for comparison table on scroll */
.compare-table thead th {
    position: sticky;
    top: 72px;
    z-index: 10;
}

/* Highlight differences */
.compare-table__value--highlight {
    background: rgba(200, 255, 0, 0.1);
    font-weight: var(--weight-semibold);
}

/* Mobile: horizontal scroll hint */
@media (max-width: 767px) {
    .compare-table-wrap {
        position: relative;
    }

    .compare-table-wrap::after {
        content: 'Scroll →';
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
        font-size: var(--text-xs);
        color: var(--color-gray-400);
        background: var(--color-white);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        opacity: 0.8;
        pointer-events: none;
    }

    .compare-table thead th {
        top: 64px;
    }

    .compare-selector__slots {
        grid-template-columns: 1fr;
    }
}

/* Admin bar offset */
.admin-bar .compare-table thead th {
    top: 104px;
}

@media screen and (max-width: 782px) {
    .admin-bar .compare-table thead th {
        top: 110px;
    }
}