/* PrimeNest - everything Compare (Phase 6 Slice 6 + follow-up). One file
   for the /compare page itself AND the floating "compare tray" shared by
   /listings and the listing detail page — merged deliberately (owner
   request, 2026-09-01) to keep every Compare-related style in one place. */

/* ---------- /compare page ---------- */

/* Breadcrumb — same look as /listings' own (listings.css), duplicated here
   in full since this page doesn't otherwise load listings.css. */
.listings-breadcrumb {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1rem 2rem 0;
}

.listings-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.listings-breadcrumb li:not(:last-child)::after {
    content: "\203A";
    margin-left: 0.4rem;
    color: #c3ccd4;
}

.listings-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.listings-breadcrumb a:hover {
    color: var(--color-blue-primary);
}

.listings-breadcrumb li[aria-current="page"] {
    color: #1a1a1a;
    font-weight: 600;
}

.compare-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.25rem 2rem 3rem;
}

.compare-page__heading {
    margin-bottom: 1.25rem;
}

.compare-empty {
    padding: 4rem 1rem;
}

/* Wraps the scrollable grid with a visible scrollbar and Prev/Next arrow
   buttons (compare.js) — a mouse-hover-only scrollbar and swipe-to-scroll
   aren't discoverable on every device/tool, so this gives an unmistakable
   way to reach a listing that doesn't fit on screen. */
.compare-scroller {
    position: relative;
}

.compare-scroll-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #eef1f4;
    background: #fff;
    color: #1a1a1a;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.compare-scroll-btn--prev {
    left: -14px;
}

.compare-scroll-btn--next {
    right: -14px;
}

.compare-scroll-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* One CSS Grid for the whole comparison — a label column on the left, one
   column per listing, cards on the first row and spec values below,
   everything staying aligned column-to-column without a <table>. Snaps to
   one listing at a time while dragging/swiping, and the scrollbar is kept
   visible rather than relying on hover-to-reveal. */
.compare-grid-wrap {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: auto;
    scrollbar-color: var(--color-blue-primary) #eef1f4;
}

.compare-grid-wrap::-webkit-scrollbar {
    height: 10px;
}

.compare-grid-wrap::-webkit-scrollbar-track {
    background: #eef1f4;
    border-radius: 999px;
}

.compare-grid-wrap::-webkit-scrollbar-thumb {
    background: var(--color-blue-primary);
    border-radius: 999px;
}

.compare-grid {
    display: grid;
    /* Capped at 320px (not 1fr) so a single listing doesn't stretch to
       fill the whole page width — comparing one property still looks
       like a normal-sized card, not a blown-up one. width: fit-content
       stops the grid box itself from being forced to the wrap's full
       width just because display:grid defaults to that like a block
       would; max-width keeps it from overflowing on a narrow wrap. */
    grid-template-columns: 160px repeat(var(--compare-columns, 1), minmax(200px, 320px));
    width: fit-content;
    max-width: 100%;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    overflow: hidden;
}

.compare-grid__cell {
    /* Grid items default to min-width:auto, meaning a cell refuses to
       shrink below its own content's natural width (e.g. the "View
       Listing" + "Remove" buttons side by side) even when the track
       itself is set narrower — quietly making the real column wider than
       the layout intends, and throwing off the scroll-arrow math in
       compare.js (which reads the grid's actual rendered width). This
       overrides that so the column genuinely respects minmax()'s minimum. */
    min-width: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eef1f4;
    border-right: 1px solid #eef1f4;
}

.compare-grid__label {
    position: sticky;
    left: 0;
    background: #fbfcfd;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    z-index: 1;
}

.compare-grid__value {
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
}

.compare-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    scroll-snap-align: start;
}

.compare-card__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

.compare-card__title {
    font-size: 1.02rem;
    margin: 0.25rem 0 0;
}

.compare-card__locality {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.compare-card__price {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-navy-dark);
}

.compare-card__emi {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.compare-card__emi span {
    display: block;
    font-size: 0.75rem;
}

.compare-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.compare-card__unavailable {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .compare-page {
        padding: 1rem 1rem 2.5rem;
    }

    .listings-breadcrumb {
        padding: 1rem 1rem 0;
    }

    .compare-grid {
        grid-template-columns: 130px repeat(var(--compare-columns, 1), minmax(170px, 280px));
    }

    /* Below this width the grid is reliably wider than the screen, so the
       Prev/Next arrows (compare.js only shows/hides them further based on
       whether there's actually anything to scroll to) are worth the space. */
    .compare-scroll-btn {
        display: block;
    }
}

/* ---------- Phones only: stacked cards instead of the scrolling grid ----
   Owner call (2026-09-01): scrolling sideways to compare didn't work well
   even with the arrows/scrollbar above, so phones get a completely
   different, simpler layout instead — the same $rows data, rendered as
   one full card per listing, one below the other, each with its own spec
   table. Both blocks are always in the page; only one is ever visible at
   a time. Tablet (521-900px) keeps the grid + Prev/Next arrows from the
   @media (max-width: 900px) block above, unchanged — this only takes over
   below that, per the owner's explicit call to leave tablet as it was. */
.compare-stack {
    display: none;
}

@media (max-width: 520px) {
    .compare-grid-desktop {
        display: none;
    }

    .compare-stack {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
}

.compare-stack__card {
    border: 1px solid #eef1f4;
    border-radius: 10px;
    padding: 1.25rem;
}

.compare-stack__specs {
    margin-top: 0.75rem;
    max-width: none;
}

/* Same table look as the listing detail page's spec table — duplicated
   here since this page doesn't load listing-detail.css. */
.spec-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
}

.spec-table tr {
    border-bottom: 1px solid #eef1f4;
}

.spec-table tr:last-child {
    border-bottom: none;
}

.spec-table th,
.spec-table td {
    text-align: left;
    padding: 0.7rem 0;
    font-size: 0.88rem;
    font-weight: 400;
}

.spec-table th {
    color: var(--color-text-muted);
    font-weight: 500;
}

.spec-table td {
    color: #1a1a1a;
    font-weight: 600;
    text-align: right;
}

/* ---------- Floating "compare tray" (shared: /listings + listing detail) ---------- */

.compare-tray {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.compare-tray[hidden] {
    display: none;
}

.compare-tray__toggle {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--color-navy-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.compare-tray__toggle:hover {
    background: var(--color-blue-primary);
}

.compare-tray__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-red-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-tray__panel {
    width: 260px;
    max-width: calc(100vw - 2.5rem);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    padding: 1rem;
}

.compare-tray__panel[hidden] {
    display: none;
}

.compare-tray__heading {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
}

.compare-tray__items {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
}

.compare-tray__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.compare-tray__item img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.compare-tray__item-name {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-tray__item-remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #f2f4f6;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.compare-tray__item-remove:hover {
    background: #e6eaee;
    color: #1a1a1a;
}

.compare-tray__cta {
    display: block;
    text-align: center;
    width: 100%;
}

@media (max-width: 520px) {
    .compare-tray {
        right: 0.85rem;
        bottom: 0.85rem;
    }

    .compare-tray__panel {
        width: 240px;
    }
}