/* ═══════════════════════════════════════════════════════
   AtlasConvert — Comparison Table Block (Frontend)
   v1.8.0
   ═══════════════════════════════════════════════════════ */

.ac-comparison-wrapper {
    margin: 1.5em 0;
    box-sizing: border-box;
}

.ac-comparison-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #1f2024;
    line-height: 1.3;
}
.ac-comparison-subtitle {
    margin: 0 0 16px;
    font-size: 13px;
    color: #5e5e69;
    font-style: italic;
    line-height: 1.5;
}

/* ─── Desktop table ─── */

.ac-comparison-table-desktop {
    /* When the table has many columns and exceeds viewport width, scroll horizontally */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle scroll-affordance shadow on the right edge so users know there's more to see */
    background-image:
        linear-gradient(to right, white 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.ac-comparison-table {
    display: grid;
    border: 1px solid #e5e7eb;
    /* Don't clip — let the wrapper handle overflow scrolling instead */
    /* overflow: hidden was causing the right border to vanish on overflow */
}

.ac-comparison-row {
    display: grid;
}

.ac-comparison-cell,
.ac-comparison-label,
.ac-comparison-col-header {
    padding: 12px;
    box-sizing: border-box;
}

.ac-comparison-col-header {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    border-left: 1px solid #e5e7eb;
    border-bottom: 2px solid #e5e7eb;
    /* Reserve space for Top Pick badge so all titles align even when one column has the badge */
    padding: 28px 12px 14px;
}
.ac-comparison-col-header:first-child {
    border-left: none;
}

.ac-comparison-col-subtitle {
    font-size: 11px;
    opacity: 0.85;
    font-style: italic;
    font-weight: 400;
    margin-top: 4px;
}

.ac-comparison-top-pick-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}

/* ─── Top Pick column highlighting ───────────────────
   The Top Pick column gets a colored frame around its
   ENTIRE column (header + all rows + CTA). We apply
   matching left+right borders to every cell in the column,
   plus a top border on the header and a bottom border on
   the CTA cell. The wrapping border ends up looking like
   one continuous frame around the whole column.
─────────────────────────────────────────────────────── */
.ac-comparison-cell.is-top-pick-column,
.ac-comparison-col-header.is-top-pick,
.ac-comparison-cta-cell.is-top-pick-column {
    /* Colored left + right border on every cell in the Top Pick column.
       Border color is set inline via the badge color (per cell). */
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-left-style: solid !important;
    border-right-style: solid !important;
}

/* Top of the column (header) — colored top border */
.ac-comparison-col-header.is-top-pick {
    border-top-width: 3px !important;
    border-top-style: solid !important;
}

/* Bottom of the column (CTA cell) — colored bottom border */
.ac-comparison-cta-cell.is-top-pick-column {
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
}

/* Subtle green tint inside the Top Pick column. NO !important here —
   that lets the JS sticky-positioning code override the background to
   fully opaque (white/row-bg) during horizontal scroll, so other columns
   don't show through the pinned column. Same approach as Compare Pin. */
.ac-comparison-cell.is-top-pick-column,
.ac-comparison-cta-cell.is-top-pick-column {
    background-color: rgba(22, 163, 74, 0.04);
}

/* Inside the Top Pick column we want NORMAL row separators — same gray
   1px lines as other columns. The cell's inline border-color is set to
   the GREEN badge color (so the frame's left+right are green), but that
   also affects the bottom border, which would render as green. Force
   the bottom and top borders to use the regular gray color. */
.ac-comparison-cell.is-top-pick-column {
    border-bottom: 1px solid #e5e7eb !important;
    border-top: none !important;
}

/* The CTA cell normally has a top border (the gray separator above CTAs).
   PHP set the cell's border-color to green (for the frame), which would
   make this top line green too. Force gray. */
.ac-comparison-cta-cell.is-top-pick-column {
    border-top: 2px solid #e5e7eb !important;
}

.ac-comparison-label {
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
}

/* ─── Sticky first column ────────────────────────────
   Pins the row labels (first column) in place while
   the rest of the table scrolls horizontally. Useful
   for tables with many columns.

   Key requirements:
   - position: sticky on first cell of every row
   - left: 0 anchor
   - opaque background (otherwise scrolling cells show through)
   - z-index above siblings
   - top-left corner of header also sticks (so it doesn't peel off)
─────────────────────────────────────────────────────── */
.ac-comparison-sticky-labels .ac-comparison-row > :first-child,
.ac-comparison-sticky-labels .ac-comparison-cta-row > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* Opaque background so the column behind doesn't bleed through.
       Inherit from row background — set inline by render. */
    background: inherit;
    /* Subtle right shadow indicating the column is pinned — only when scrolled */
    box-shadow: 1px 0 0 0 #e5e7eb;
}

/* Header's top-left corner needs higher z-index since it intersects with header row */
.ac-comparison-sticky-labels .ac-comparison-row-header > :first-child {
    z-index: 3;
}

/* Subtle shadow on the right of the sticky column when content is scrolled past it.
   Only applied to mid-rows so the corner doesn't get a double shadow. */
.ac-comparison-sticky-labels .ac-comparison-label {
    /* Inherit background needs explicit fallback for IE/older browsers — using transparent.
       The row's background-color is what fills here via "inherit". */
    background-color: inherit;
}

/* ─── Sticky Top Pick column ────────────────────────
   When sticky is enabled AND a column is marked Top Pick,
   that column also pins to the left during scroll. The
   pin position (`left: Npx`) is set inline by the render
   so it sits right after the labels column (or at 0 if
   labels are hidden).

   The Top Pick column already has its colored frame
   borders, so when it pins, the frame stays visible
   and the user always sees the recommended product
   while comparing alternatives.
─────────────────────────────────────────────────────── */
.ac-comparison-sticky-top-pick .is-sticky-top-pick-cell {
    position: sticky;
    z-index: 2;
    background: inherit;
    /* Background must be opaque to hide cells scrolling beneath */
    background-color: inherit;
}

/* Top Pick header sticks above its column cells (higher z-index) */
.ac-comparison-sticky-top-pick .ac-comparison-col-header.is-sticky-top-pick-cell {
    z-index: 3;
}

/* When BOTH labels and Top Pick are sticky, labels need higher z-index than Top Pick
   so labels don't disappear under the Top Pick column when scrolling */
.ac-comparison-sticky-labels.ac-comparison-sticky-top-pick .ac-comparison-row > :first-child,
.ac-comparison-sticky-labels.ac-comparison-sticky-top-pick .ac-comparison-cta-row > :first-child {
    z-index: 4;
}
.ac-comparison-sticky-labels.ac-comparison-sticky-top-pick .ac-comparison-row-header > :first-child {
    z-index: 5;
}

.ac-comparison-cell {
    font-size: 13px;
    text-align: center;
    border-left: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}

/* Cell type styling */
.ac-comparison-cell--check-yes { color: #16a34a; font-size: 20px; font-weight: 700; }
.ac-comparison-cell--check-no  { color: #dc2626; font-size: 20px; font-weight: 700; }
.ac-comparison-cell--rating .ac-rating { display: inline-flex; gap: 1px; line-height: 1; }
.ac-comparison-cell--rating .ac-rating-star {
    font-size: 22px;
    line-height: 1;
    display: inline-block;
}
.ac-comparison-cell--rating .ac-rating-star-filled { color: #f59e0b; }
.ac-comparison-cell--rating .ac-rating-star-empty  { color: #d1d5db; }

/* Half star: gray ★ as base, gold ★ overlaid and clipped to 50% */
.ac-comparison-cell--rating .ac-rating-star-half {
    position: relative;
    color: #d1d5db;
}
.ac-comparison-cell--rating .ac-rating-star-half-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: #f59e0b;
}
.ac-comparison-cell--price strong { font-size: 16px; }

/* CTA row */
.ac-comparison-cta-row {
    display: grid;
}
.ac-comparison-cta-cell {
    padding: 16px 10px;
    text-align: center;
    border-left: 1px solid #e5e7eb;
    /* Top separator now lives on each cell — so framed columns
       (Top Pick, Compare-Pin) can opt out and not break their frames. */
    border-top: 2px solid #e5e7eb;
}
.ac-comparison-cta-cell:first-child {
    border-left: none;
}

.ac-comparison-cta,
.ac-comparison-cta:link,
.ac-comparison-cta:visited,
.ac-comparison-cta:hover,
.ac-comparison-cta:active,
.ac-comparison-cta:focus {
    display: inline-block;
    background: #1a3a5c;
    color: #ffffff !important;             /* override theme link colors */
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;      /* override theme link underlines */
    letter-spacing: 0.02em;
    transition: background 0.15s, transform 0.15s;
    text-transform: uppercase;
    min-width: 90px;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
}
.ac-comparison-cta:hover,
.ac-comparison-cta:focus {
    background: #0f2744;
    color: #ffffff !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ─── Template variants ─── */

.ac-comparison-template-soft .ac-comparison-table {
    border-radius: 8px;
}
.ac-comparison-template-soft .ac-comparison-cta {
    border-radius: 4px;
}

.ac-comparison-template-compact .ac-comparison-cell,
.ac-comparison-template-compact .ac-comparison-label,
.ac-comparison-template-compact .ac-comparison-col-header {
    padding: 8px 10px;
    font-size: 12px;
}
.ac-comparison-template-compact .ac-comparison-col-header {
    font-size: 14px;
}

.ac-comparison-template-minimal .ac-comparison-table {
    border-width: 0;
    border-bottom: 2px solid #1f2024;
}
.ac-comparison-template-minimal .ac-comparison-col-header,
.ac-comparison-template-minimal .ac-comparison-cell,
.ac-comparison-template-minimal .ac-comparison-label {
    border-color: #e5e7eb !important;
}

/* ─── Mobile: stack as cards ─── */
@media (max-width: 700px) {
    .ac-comparison-mobile-stack .ac-comparison-table-desktop {
        display: none;
    }
    .ac-comparison-mobile-stack .ac-comparison-table-mobile {
        display: block;
    }

    .ac-comparison-mobile-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        margin-bottom: 14px;
        position: relative;
    }
    .ac-comparison-mobile-card.is-top-pick {
        border-color: currentColor;
        border-width: 2px;
    }
    .ac-comparison-mobile-card-header {
        padding: 14px 14px 12px;
        text-align: center;
        font-weight: 700;
        font-size: 17px;
        position: relative;
    }
    .ac-comparison-mobile-card.is-top-pick .ac-comparison-mobile-card-header {
        padding-top: 28px;
    }
    .ac-comparison-mobile-card-rows {
        padding: 4px 14px 14px;
    }
    .ac-comparison-mobile-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 13px;
        gap: 10px;
    }
    .ac-comparison-mobile-row:last-child { border-bottom: none; }
    .ac-comparison-mobile-row-label {
        color: #5e5e69;
        font-weight: 600;
        flex-shrink: 0;
    }
    .ac-comparison-mobile-row-value {
        color: #1f2024;
        text-align: right;
        flex: 1;
    }
    .ac-comparison-mobile-cta {
        padding: 14px;
        text-align: center;
        border-top: 1px solid #e5e7eb;
    }
    .ac-comparison-mobile-cta .ac-comparison-cta {
        display: block;
        width: 100%;
    }
}

/* ─── Mobile: horizontal scroll fallback ─── */
@media (max-width: 700px) {
    .ac-comparison-mobile-scroll .ac-comparison-table-desktop {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ac-comparison-mobile-scroll .ac-comparison-table-mobile {
        display: none;
    }
    .ac-comparison-mobile-scroll .ac-comparison-table {
        min-width: 600px;
    }
}

/* Hide mobile-only by default */
.ac-comparison-table-mobile { display: none; }

/* ─── Print ─── */
@media print {
    .ac-comparison-cta { display: none; }
    .ac-comparison-mobile-cta { display: none; }
}

/* ─── Compare-Pin Feature ─────────────────────────────
   When compare-mode is on, each non-Top-Pick column gets
   a "📌 Compare" button. Clicking it pins that column.

   Visual: gold frame (border-only) around the whole column.
   No background tint — cells keep their original colors.
   No header-background change — header keeps its style.

   Gold #eab308 — distinct from Top Pick green so the two
   can coexist visually without competing.
─────────────────────────────────────────────────────── */
.ac-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: inherit !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: none;
}
.ac-compare-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.ac-compare-btn.is-pinned {
    background: #eab308 !important;
    border-color: #eab308 !important;
    color: #1f2024 !important;
}
.ac-compare-btn.is-pinned:hover {
    background: #ca8a04 !important;
    border-color: #ca8a04 !important;
    color: #1f2024 !important;
}
.ac-compare-btn-icon {
    font-size: 11px;
}

/* Pinned column frame — gold borders on every cell, plus gold top
   border on the header and gold bottom border on the CTA cell.
   Cells keep their original backgrounds so they stay opaque
   when sticky-positioned (no bleed-through during scroll). */
.is-compare-pinned-cell {
    border-left: 3px solid #eab308 !important;
    border-right: 3px solid #eab308 !important;
}
/* Top of column (header) — gold top border */
.ac-comparison-col-header.is-compare-pinned-cell {
    border-top: 3px solid #eab308 !important;
}
/* Bottom of column (CTA cell) — gold bottom border */
.ac-comparison-cta-cell.is-compare-pinned-cell {
    border-bottom: 3px solid #eab308 !important;
}

/* Subtle gold tint inside the Compare Pin column. NO !important here —
   that lets the JS sticky-positioning code override the background to
   fully opaque (white/row-bg) during horizontal scroll, so other columns
   don't show through the pinned column. */
.ac-comparison-cell.is-compare-pinned-cell,
.ac-comparison-cta-cell.is-compare-pinned-cell {
    background-color: rgba(234, 179, 8, 0.06);
}

/* Inside the Compare Pin column we want NORMAL row separators —
   same as Top Pick. The cell's inline border-color is gold (for the
   frame), but the row separator should be the regular gray. */
.ac-comparison-cell.is-compare-pinned-cell {
    border-bottom: 1px solid #e5e7eb !important;
    border-top: none !important;
}

/* CTA cell's top-separator should be gray, not gold (the inline
   border-color of the cell is gold — for the frame's left+right —
   but the top edge is the row separator above CTA buttons). */
.ac-comparison-cta-cell.is-compare-pinned-cell {
    border-top: 2px solid #e5e7eb !important;
}