/*
 * offer-engine.css — Offer Grid (shared + desktop ≥1200px only)
 * Shared: CSS vars, wrapper, logo img rules, platform +N (all viewports).
 * Desktop card: @media (min-width: 1200px) only — must match GIN_OE_DESKTOP_GRID_BREAKPOINT_PX (no overlap with mobile ≤1199).
 * Mobile: offer-engine.mobile.css (enqueue max-width 1199 from gin_oe_mobile_layout_max_px()).
 */

/*
 * QUICK REFERENCE — common values to change:
 *
 * Card border radius ............. 12px   (.campaign-compact-table__offer)
 * Card spacing between rows ...... 20px   (margin-bottom on .offer)
 * CTA button colour .............. #27a85a
 * CTA button hover colour ........ #1e8f4a
 * Active filter pill colour ...... #014C6B
 * Star colour (filled) ........... #f59e0b
 * Checkmark icon colour .......... %2327ae60  (URL-encoded #27ae60 in SVG)
 * Featured card border colour .... #ffb100
 * Position badge colour .......... #2d6a5a
 *
 * COLUMN WIDTHS (desktop grid — must add up to 100%):
 *   Logo 23% | Rating 38% | Highlights 24% | CTA 15%
 *   Edit grid-template-columns on .campaign-compact-table__offer (desktop base).
 *
 * BREAKPOINTS:
 *   ≥ 1200px  Desktop card (this file @media) — no overlap with default mobile max 1199
 *   ≤ 1199px  Mobile (offer-engine.mobile.css)
 *   ≤ 480px   Small phone (inside mobile file)
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

.campaign-compact-table__wrapper {
    --color-cta:            #27a85a;
    --color-cta-hover:      #1e8f4a;
    --color-featured:       #ffb100;
    --color-badge:          #2d6a5a;
    --color-star-filled:    #f59e0b;
    --color-star-empty:     #d1d5db;
    --color-text-primary:   #1a202c;
    --color-text-secondary: #4a5568;
    --color-text-muted:     #718096;
    --color-border:         #e2e8f0;
    --color-border-light:   #f0f4f8;
    --color-bg-card:        #ffffff;
    --color-bg-features:    #fcfdfe;
    --color-bg-compliance:  #f9fafb;
    --radius-card:          12px;
    --border-width-card:    1px;
    --shadow-card:          0 2px 4px rgba(0, 0, 0, 0.05);
    /* CTA 3D depth — overridden in head from Customizer (Button size scale). */
    --oe-cta-scale-pct: 100;
    --oe-cta-depth:     1.5px;
    --oe-cta-inset:     1px;
}

/* ==========================================================================
   WRAPPER
   Width, max-width, margin-top, margin-bottom come from Customizer (style#gin-oe-table-styles).
   Do not set them here or they will override the saved Customizer values after Publish.
   ========================================================================== */

.campaign-compact-table__wrapper {
    margin-left: auto;
    margin-right: auto;
    /* Align with article copy: no extra horizontal padding (parent .entry-content already pads). */
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 100%;
}

/* ==========================================================================
   PER-OFFER LISTED LOGO CROP (desktop + mobile)
   Each offer card can set CSS vars for logo crop/zoom:
   --oe-logo-fit-desktop/--oe-logo-x-desktop/--oe-logo-y-desktop/--oe-logo-scale-desktop
   --oe-logo-fit-mobile/ --oe-logo-x-mobile/ --oe-logo-y-mobile/ --oe-logo-scale-mobile
   ========================================================================== */

.campaign-compact-table__offer {
    /* Default fill: stretch bitmap to the Customizer slot ratio; per-offer can use contain/cover. */
    --oe-logo-fit-desktop: fill;
    --oe-logo-x-desktop: 0%;
    --oe-logo-y-desktop: 50%;
    --oe-logo-scale-desktop: 1;
    --oe-logo-fit-mobile: fill;
    --oe-logo-x-mobile: 50%;
    --oe-logo-y-mobile: 50%;
    --oe-logo-scale-mobile: 1;
}

.campaign-compact-table__offer .campaign-compact-table__logo-wrap img,
.campaign-compact-table__offer .campaign-compact-table__offer-logo img {
    object-fit: var(--oe-logo-fit, fill);
    object-position: var(--oe-logo-x, 50%) var(--oe-logo-y, 50%);
    transform: translate(var(--oe-logo-tx, 0px), var(--oe-logo-ty, 0px)) scale(var(--oe-logo-scale, 1));
    transform-origin: center center;
}

/* ==========================================================================
   PLATFORM OVERFLOW (+N) — ALL VIEWPORTS
   Must stay outside the desktop @media: mobile only loads rules from this file
   that are global + offer-engine.mobile.css; hidden icons were not hiding on mobile.
   ========================================================================== */

.campaign-compact-table__platform-logo-wrap.is-hidden-overflow {
    display: none !important;
}

/* +N pill — circular chip matching platform tiles (must stay visible vs flat logo background) */
.campaign-compact-table__platform-logo--overflow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 45%, #cbd5e1 100%) !important;
    border: 1.5px solid #64748b !important;
    border-radius: 50% !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 11px;
    line-height: 1;
    letter-spacing: -0.03em;
    padding: 0 !important;
    width: 2.25em;
    height: 2.25em;
    min-width: 2.25em;
    min-height: 2.25em;
    max-width: none;
    max-height: none;
    aspect-ratio: 1;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.18),
        0 2px 5px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(15, 23, 42, 0.12);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.campaign-compact-table__platform-overflow:hover .campaign-compact-table__platform-logo--overflow {
    border-color: #64748b;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.16),
        0 4px 8px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.campaign-compact-table__platform-overflow-count {
    display: block;
    padding: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.campaign-compact-table__platform-overflow {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

/* Closed: hidden. When open, JS uses position:fixed to the right of +N (avoids clipping + layout shift). */
.campaign-compact-table__platform-overflow-popover {
    position: absolute;
    left: -9999px;
    top: 0;
    right: auto;
    bottom: auto;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 30;
    max-width: min(480px, 92vw);
    overflow: visible;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}

.campaign-compact-table__platform-overflow.is-expanded .campaign-compact-table__platform-overflow-popover {
    display: inline-flex;
}

/* While +N popover is open: let nothing in the card clip it (backup if fixed positioning fails). */
.campaign-compact-table__wrapper.oe-platform-popover-open {
    overflow: visible !important;
}
.campaign-compact-table__offer.oe-platform-popover-open {
    overflow: visible !important;
    position: relative;
    z-index: 200;
}
.campaign-compact-table__rating-row.oe-platform-popover-open {
    overflow: visible !important;
    position: relative;
    z-index: 201;
}
.campaign-compact-table__offer-platforms-column.oe-platform-popover-open {
    overflow: visible !important;
    position: relative;
    z-index: 201;
}
.campaign-compact-table__platform-overflow.is-expanded {
    position: relative;
    z-index: 202;
}

/* Cloned platforms in +N popover: same structure as main row (hover label + link). */
.campaign-compact-table__platform-overflow-item {
    margin: 0 !important;
    position: relative;
    flex-shrink: 0;
}

.campaign-compact-table__platform-overflow > .campaign-compact-table__platform-logo-label {
    display: none !important;
}

.campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-wrap {
    position: relative;
}

.campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-label {
    z-index: 25;
}

.campaign-compact-table__platform-overflow-popover a.campaign-compact-table__platform-logo-wrap {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   DESKTOP ONLY (≥ 1200px) — card grid, layout, and component styles.
   ========================================================================== */
@media (min-width: 1200px) {

    /* Let the grid shrink inside the content column; platform +N JS handles overflow. Horizontal scroll here
     * made cards feel “stuck” wide and hid +N/column shrink until the mobile breakpoint. */
    .campaign-compact-table__wrapper {
        max-width: 100%;
        min-width: 0;
        overflow-x: visible;
        box-sizing: border-box;
    }

/* Activate desktop logo crop vars */
.campaign-compact-table__offer {
    --oe-logo-fit: var(--oe-logo-fit-desktop);
    --oe-logo-x: var(--oe-logo-x-desktop);
    --oe-logo-y: var(--oe-logo-y-desktop);
    --oe-logo-scale: var(--oe-logo-scale-desktop);
}

/* ==========================================================================
   CARD — CSS GRID (desktop)
   ========================================================================== */

.campaign-compact-table__offer {
    position: relative;
    display: grid;
    /* Allow the whole card to shrink inside narrow content columns (flex parents, sidebars) without overlap. */
    min-width: 0;
    /* Desktop: 5 columns — rating | platforms | highlights | CTA (Customizer COL2 split into rating + platforms for +N). */
    grid-template-columns:
        minmax(152px, 18%)   /* logo — theme #gin-oe-table-styles uses gin_oe_desktop_logo_grid_min_px() */
        minmax(124px, 21%)   /* score + stars — floor matches gin_oe_dv_col2_track_min_px() */
        minmax(0, 29%)       /* platforms strip — shrinks; extras → +N */
        minmax(120px, 20%)   /* highlights — default floor matches gin_oe_desktop_highlights_col_floor_px */
        minmax(152px, 12%);  /* CTA — % from Customizer col5 (fallback 12%) */
    /* Rows 1+2 fixed to card height so Logo Column Width % only affects width, not height */
    grid-template-rows: calc(var(--oe-desktop-logo-min-height, 100px) / 2) calc(var(--oe-desktop-logo-min-height, 100px) / 2) auto;
    grid-template-areas:
        "logo rating platforms features cta"
        "logo rating platforms features cta"
        "compliance compliance compliance compliance compliance";
    /* Hard gutter between tracks (rating ↔ platforms needs air when stars overflow COL2). */
    column-gap: 14px;
    align-items: stretch;
    background: var(--color-bg-card);
    border: var(--border-width-card, 1px) solid var(--color-border);
    border-radius: var(--radius-card);
    margin-bottom: 20px;
    overflow: visible; /* Badge sits outside card edge */
    box-shadow: var(--shadow-card, 0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Default padding for all direct child columns.
 * min-width: 0 so grid columns can shrink below content size and never overflow the card
 * (avoids CTA/logo pushing out at narrow desktop widths before mobile breakpoint). */
.campaign-compact-table__offer > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 15px;
    box-sizing: border-box;
    min-width: 0;
}

/* Featured card: keep base drop shadow + accent glow (do not raise z-index — it paints over the card above). */
.campaign-compact-table__offer.is-featured {
    border: 3px solid var(--color-featured) !important;
    box-shadow: var(--shadow-card, 0 2px 4px rgba(0, 0, 0, 0.05)), 0 4px 20px rgba(255, 177, 0, 0.25) !important;
    border-radius: var(--radius-card);
}

/* ==========================================================================
   GRID AREAS — desktop
   ========================================================================== */

.campaign-compact-table__offer-logo        { grid-area: logo; }
.campaign-compact-table__offer-description { grid-area: description; }
.campaign-compact-table__offer-key-features{ grid-area: features; }
.campaign-compact-table__offer-rating      { grid-area: rating; }
.campaign-compact-table__offer-cta-button  { grid-area: cta; }
.campaign-compact-table__offer-compliance  { grid-area: compliance; }

/* Desktop-specific tweaks: rating (COL2) and platforms (COL3) are separate grid cells */
    .campaign-compact-table__rating-row {
        grid-area: rating;
        padding-left: var(--lc-desktop-logo-rating-pad, 6px) !important;
        padding-right: 8px !important;
    }
    .campaign-compact-table__offer-platforms-column {
        grid-area: platforms;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        max-width: 100%;
        position: relative;
        /* Above highlights (2) so +N isn’t painted under COL4; below rating-row (4) so stars still win overlap */
        z-index: 3;
        /* visible: flex-end strip + +N chip sit on the track’s right edge; clip hid the badge past the column box */
        overflow-x: visible;
        overflow-y: visible;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box;
    }
    .campaign-compact-table__offer-platforms-column .campaign-compact-table__rating-col--platforms {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        justify-content: flex-start;
    }
    /* Fill grid column so .offer-platforms clientWidth tracks column shrink (required for +N on resize). */
    .campaign-compact-table__offer-platforms-column .campaign-compact-table__offer-platforms {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
    }
    /* Card spacing: overridable via Customizer (Listed Cards → Desktop) */
    .campaign-compact-table__wrapper {
        --lc-desktop-rating-margin-top: 0px;
        --lc-desktop-score-stars-gap: 3px;
        --lc-desktop-platforms-margin-top: 5px;
        --lc-desktop-logo-rating-pad: 6px;
    }

    /* Make the whole card a bit more compact vertically */
    .campaign-compact-table__offer > div {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Spacing from column 1 border — pad driven by Listed Cards → Desktop → Logo ↔ rating (px) */
    .campaign-compact-table__offer-logo {
        padding-right: var(--lc-desktop-logo-rating-pad, 6px) !important;
    }
    .campaign-compact-table__offer-description {
        padding-left: var(--lc-desktop-logo-rating-pad, 6px) !important;
    }

    /* Logo column: wide rectangular logo (image + name) at top of cell; keeps long card shape. */
    .campaign-compact-table__offer-logo {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        text-align: left;
        padding: 8px 12px 8px 8px;
        position: relative;
        min-width: 0;
        overflow: hidden;
        border-top-left-radius: var(--radius-card);
        border-bottom-left-radius: var(--radius-card);
        box-sizing: border-box;
    }

    /* Default desktop logo: natural aspect (contain) — wide assets stay wide; no width+height 100% square box. */
    .campaign-compact-table__offer:not(.oe-desktop-logo-cover) .campaign-compact-table__offer-logo > a {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
        align-items: stretch;
        justify-content: flex-start;
    }
    .campaign-compact-table__offer:not(.oe-desktop-logo-cover) .campaign-compact-table__logo-wrap {
        width: 100%;
        margin: 0;
        max-width: 100%;
        min-height: 0;
        height: auto;
        max-height: 100%;
        flex: 0 1 auto;
        align-self: flex-start;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: visible;
    }
    .campaign-compact-table__offer:not(.oe-desktop-logo-cover) .campaign-compact-table__logo-wrap img,
    .campaign-compact-table__offer:not(.oe-desktop-logo-cover) .campaign-compact-table__offer-logo img {
        width: 100%;
        height: auto;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: auto !important;
        object-fit: var(--oe-logo-fit, fill);
        object-position: var(--oe-logo-x, 50%) var(--oe-logo-y, 50%);
        transform: translate(var(--oe-logo-tx, 0px), var(--oe-logo-ty, 0px)) scale(var(--oe-logo-scale, 1));
        transform-origin: center center;
        border-radius: 0;
    }

    /* SVG <img> can mis-report intrinsic width vs rasters; let width:100% define the column box */
    .campaign-compact-table__offer:not(.oe-desktop-logo-cover) .campaign-compact-table__logo-wrap img.gin-oe-logo-is-svg,
    .campaign-compact-table__offer:not(.oe-desktop-logo-cover) .campaign-compact-table__offer-logo img.gin-oe-logo-is-svg {
        max-width: none;
    }

    /* Per-offer "cover" (Listed Logo) — fill COL1 cell. */
    .campaign-compact-table__offer.oe-desktop-logo-cover .campaign-compact-table__offer-logo > a {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
        align-items: stretch;
        justify-content: flex-start;
    }
    .campaign-compact-table__offer.oe-desktop-logo-cover .campaign-compact-table__logo-wrap {
        width: 100%;
        margin: 0;
        max-width: 100%;
        min-height: 0;
        height: 100%;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }
    .campaign-compact-table__offer.oe-desktop-logo-cover .campaign-compact-table__logo-wrap img,
    .campaign-compact-table__offer.oe-desktop-logo-cover .campaign-compact-table__offer-logo img {
        height: 100%;
        width: 100%;
        max-width: none;
        margin-left: 0 !important;
        margin-right: auto !important;
        object-fit: var(--oe-logo-fit, fill);
        object-position: var(--oe-logo-x, 50%) var(--oe-logo-y, 50%);
        transform: translate(var(--oe-logo-tx, 0px), var(--oe-logo-ty, 0px)) scale(var(--oe-logo-scale, 1));
        transform-origin: center center;
        border-radius: 0;
    }

    /* Logo hover: show offer title */
    .campaign-compact-table__offer-logo .campaign-compact-table__offer-brand-name {
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%) translateY(6px);
        opacity: 0;
        pointer-events: none;
        z-index: 3;

        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.55);
        color: #ffffff !important;
        text-decoration: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 22px);

        transition: opacity 0.2s ease, transform 0.2s ease;
        font-weight: 700;
        font-size: 12px;
        line-height: 1.2;
    }
    .campaign-compact-table__offer-logo:hover .campaign-compact-table__offer-brand-name {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* Rating row (top of column 2) — spacing from Customizer vars */
    .campaign-compact-table__offer-rating {
        align-items: center;
        text-align: left;
        padding-bottom: 0;
        margin-top: var(--lc-desktop-rating-margin-top, 0px);
    }

    /* Column 2: score + stars (platforms are COL3). */
    .campaign-compact-table__rating-row {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: visible;
        overflow-y: visible;
        position: relative;
        /* Above platforms col (3) so stars win COL2→COL3 bleed; below featured card chrome if any */
        z-index: 4;
    }

    .campaign-compact-table__rating-score-stars {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--lc-desktop-score-stars-gap, 6px) !important;
        flex: 0 0 auto;
        min-width: 0;
    }
    .campaign-compact-table__rating-col--score {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
    }
    .campaign-compact-table__rating-col--stars {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* Force stars left (overrides Customizer) */
    .campaign-compact-table__offer .campaign-compact-table__rating-row .campaign-compact-table__rating-col--stars .campaign-compact-table__offer-rating {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    .campaign-compact-table__offer .campaign-compact-table__rating-row .campaign-compact-table__rating-col--stars .star-rating-system {
        text-align: left !important;
    }
    .campaign-compact-table__rating-col--platforms {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    .campaign-compact-table__offer-rating-text {
        display: flex;
        align-items: center;
        margin: 0 !important;
    }
    .campaign-compact-table__offer-rating-text span {
        margin: 0 !important;
        line-height: 1;
        display: inline-block;
    }
    .campaign-compact-table__rating-row .campaign-compact-table__offer-rating {
        margin: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;   /* stars right after score; gap comes from column-gap */
        line-height: 1;
        display: flex;
        align-items: center;
    }
    .star-rating-system {
        line-height: 1;
    }

    /* Platforms row (bottom of column 2) — keep tight left padding to logo */
    .campaign-compact-table__offer-description {
        align-items: flex-start;
        padding-top: 4px;
        padding-left: 6px !important;
    }

    .campaign-compact-table__offer-platforms {
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        max-height: none;
        /* visible: hover labels sit below icons (absolute); extras hidden via JS +N, not clipping */
        overflow: visible;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 4px 0;
    }

    /* Desktop: platform icons fixed to Customizer size (inherit --lc-platform-logo-size on wrapper). Do not vw-shrink — slivers break +N math; JS hides overflow as +N. */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo-wrap:not(.campaign-compact-table__platform-overflow) {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: var(--lc-platform-logo-size, 32px);
        height: var(--lc-platform-logo-size, 32px);
        min-width: var(--lc-platform-logo-size, 32px);
        min-height: var(--lc-platform-logo-size, 32px);
        max-width: var(--lc-platform-logo-size, 32px);
        max-height: var(--lc-platform-logo-size, 32px);
    }
    /* Exclude +N chip — it uses .platform-logo--overflow circle styles (generic rule was flattening it). */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo:not(.campaign-compact-table__platform-logo--overflow) {
        width: 100% !important;
        height: 100% !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box;
    }
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* +N badge: fixed circle same pixel size as platform icons (readable “+3” inside). */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo-wrap.campaign-compact-table__platform-overflow {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--lc-platform-logo-size, 32px);
        height: var(--lc-platform-logo-size, 32px);
        min-width: var(--lc-platform-logo-size, 32px);
        min-height: var(--lc-platform-logo-size, 32px);
        max-width: var(--lc-platform-logo-size, 32px);
        max-height: var(--lc-platform-logo-size, 32px);
        /* COL3/COL4 edge: chip extends toward highlights; .offer-key-features is z-index 2, platforms shell is 1 — without this the list paints over +N */
        position: relative;
        z-index: 5;
    }
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-overflow .campaign-compact-table__platform-logo.campaign-compact-table__platform-logo--overflow {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        font-size: clamp(9px, calc(var(--lc-platform-logo-size, 32px) * 0.36), 12px) !important;
        padding: 0 !important;
    }

    /* Highlights (col4) — extra inset from platforms/+N; column-gap also separates tracks. */
    .campaign-compact-table__offer-key-features {
        align-items: flex-start;
        padding-left: 12px !important;
        padding-right: 10px !important;
        overflow: hidden;
        min-width: 0;
        position: relative;
        z-index: 2;
        /* Fluid highlight font-size (clamp + cqw) uses this column as the query container. */
        container-type: inline-size;
    }

    .campaign-compact-table__offer-key-features li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
        overflow-wrap: normal;
    }

    /* CTA (column 5): center the control in its track (Customizer offsets still apply on the wrapper). */
    .campaign-compact-table__offer-cta-button {
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-width: 0;
        overflow: hidden;
    }

    .campaign-compact-table__offer-cta-button a {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        min-width: 0;
        box-sizing: border-box;
    }

/* ==========================================================================
   COLUMN ALIGNMENT
   ========================================================================== */

.campaign-compact-table__offer-logo {
    align-items: center;
    text-align: center;
    position: relative; /* Required for absolute-positioned badge */
}

.campaign-compact-table__offer-description {
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
}

/* Platform logos — desktop: single row (see rules above); JS +N; nowrap required. overflow visible for hover labels. */
.campaign-compact-table__offer-platforms {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.campaign-compact-table__platform-logo-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    cursor: default;
}

.campaign-compact-table__platform-logo {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-features, #f6f7f7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Default size so PNG/JPG respect container; overridden by Customizer → Platform */
    width: 40px;
    height: 40px;
}

/*
 * Platform hover: +N badge is .platform-logo-wrap.platform-overflow inside .offer-platforms.
 * Main strip: only direct children of .offer-platforms (exclude +N wrap) — use descendant .label so DOM stays flexible.
 * Popover clones: .platform-overflow-popover … wrap:hover > .label (per icon only).
 */
.campaign-compact-table__rating-col--platforms .campaign-compact-table__offer-platforms > .campaign-compact-table__platform-logo-wrap:not(.campaign-compact-table__platform-overflow):hover > .campaign-compact-table__platform-logo {
    transform: scale(1.08);
}

.campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-wrap:hover > .campaign-compact-table__platform-logo {
    transform: scale(1.08);
}

.campaign-compact-table__platform-logo img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

/* Platform name — appears on hover with fade + slide */
.campaign-compact-table__platform-logo-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 12px; /* default; overridden by Customizer → Platforms → Hover */
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #1a202c;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.campaign-compact-table__rating-col--platforms .campaign-compact-table__offer-platforms > .campaign-compact-table__platform-logo-wrap:not(.campaign-compact-table__platform-overflow):hover .campaign-compact-table__platform-logo-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-wrap:hover > .campaign-compact-table__platform-logo-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.campaign-compact-table__offer-key-features {
    align-items: flex-start;
    background: var(--color-bg-features);
}

.campaign-compact-table__offer-rating {
    align-items: center;
    text-align: center;
}

.campaign-compact-table__offer-cta-button {
    align-items: center;
    text-align: center;
    flex-shrink: 1; /* Allow column to shrink without overflowing */
}

/* ==========================================================================
   LOGO & BRAND — base (desktop: logo fills column via rules above; no fixed size here)
   ========================================================================== */

/* Placeholder shown when no logo is set */
.campaign-compact-table__logo-placeholder {
    width: 100%;
    max-width: 130px;
    height: auto;
    aspect-ratio: 130 / 63;
    background: #27ae60;
    color: #ffffff;
    font-size: clamp(10px, 1vw, 11px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible;
    flex-shrink: 0;
    line-height: 1.3;
    padding: 4px 8px;
    word-break: break-word;
    position: relative;
}

/* Brand name below logo */
.campaign-compact-table__offer-brand-name {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* Numbered position badge — top-left of logo column */
.campaign-compact-table__position-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 28px;
    height: 28px;
    background: var(--color-badge);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    line-height: 1;
    pointer-events: none;
}

/* ==========================================================================
   OFFER CONTENT — DESCRIPTION
   ========================================================================== */

.campaign-compact-table__offer-description p {
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--color-text-primary);
}

/* ==========================================================================
   FEATURES
   ========================================================================== */

.campaign-compact-table__offer-key-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.campaign-compact-table__offer-key-features li {
    font-size: clamp(11px, 1vw, 12px);
    color: var(--color-text-secondary);
    position: relative;
    padding-left: 22px;
    margin-bottom: 6px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/*
 * Checkmark SVG icon — colour: #27ae60 → encoded as %2327ae60
 * Size scales per breakpoint (see RESPONSIVE section)
 */
.campaign-compact-table__offer-key-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;  /* Desktop: 14px */
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ==========================================================================
   RATING
   ========================================================================== */

.campaign-compact-table__offer-rating-text span {
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    color: var(--color-text-primary);
}

/*
 * Star rating — two stacked layers.
 * The filled layer is clipped to a % width set inline by PHP.
 */
.star-rating-system {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 1;
}

.star-rating-empty {
    color: var(--color-star-empty);
}

.star-rating-filled {
    color: var(--color-star-filled);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* ==========================================================================
   CTA BUTTON
   ========================================================================== */

.campaign-compact-table__offer-cta-button {
    display: flex;
    justify-content: center;
}

.campaign-compact-table__offer-cta-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: 100%;
    background: var(--color-cta) !important;
    color: #ffffff !important;
    /* Vertical + horizontal padding set in head (Customizer) with !important. */
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none !important;
    /* Base size; Customizer overrides font-size with !important. */
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.2;
    /* One line on desktop: wrapping in a narrow track + min-height looks like a square block */
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    min-height: 2.35em;
    height: auto;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 0 var(--oe-cta-inset, 1px) 0 rgba(255, 255, 255, 0.28),
        0 var(--oe-cta-depth, 2px) 0 rgba(0, 0, 0, 0.16),
        0 calc(var(--oe-cta-depth, 2px) + 4px) 14px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease,
        background 0.2s ease;
}

.campaign-compact-table__offer-cta-button a:hover {
    background: var(--color-cta-hover) !important;
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        inset 0 var(--oe-cta-inset, 1px) 0 rgba(255, 255, 255, 0.38),
        0 calc(var(--oe-cta-depth, 2px) + 2px) 0 rgba(0, 0, 0, 0.12),
        0 calc(var(--oe-cta-depth, 2px) + 10px) 22px rgba(0, 0, 0, 0.14);
}

.campaign-compact-table__offer-cta-button a:active {
    transform: translateY(0);
    filter: brightness(0.97);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(0, 0, 0, 0.1);
}

.campaign-compact-table__offer-cta-button a:focus-visible {
    outline: 2px solid var(--color-cta-hover, #1e8f4a);
    outline-offset: 2px;
}

/* ==========================================================================
   COMPLIANCE BAR
   ========================================================================== */

.campaign-compact-table__offer-compliance {
    background: var(--color-bg-compliance);
    border-top: 1px solid #edf2f7;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    padding: 10px 20px !important;
    font-size: clamp(10px, 0.9vw, 11px);
    color: var(--color-text-muted);
    text-align: center;
}

/* ==========================================================================
   FILTER PILLS
   ========================================================================== */

.campaign-shortcode-table_filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0 0 25px 0;
    list-style: none;
    justify-content: flex-start;
}

.campaign-shortcode-table_filter-list-item {
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    margin: 0;
    padding: 7px 15px;
    cursor: pointer;
    color: #1c2642;
    border: 1px solid #E8E8E8;
    border-radius: 35px;
    background: #ffffff;
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}

.campaign-shortcode-table_filter-list-item:hover {
    border-color: #014C6B;
    color: #014C6B;
}

.campaign-shortcode-table_filter-list-item.active_brand_filter {
    color: #ffffff !important;
    background-color: #014C6B !important;
    border-color: #014C6B;
}

} /* end @media (min-width: 1200px) — desktop only */