/* GPT Offer Search v3 - Card Layout (mirrors giftcard/cashback design) */

/* External-link icon next to outbound CTAs. Mirrors the bank-switch
   pattern (themes/scrimpr/css/bank-switch.css) so the same .bs-cta-external-icon
   class works on the main search table without depending on bank-switch.css. */
.bs-cta-external-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    --gptv3-navy-dark: #1e3a5f;
    --gptv3-navy: #2C5282;
    --gptv3-navy-light: #e8f0f7;
    --gptv3-gray-50: #f8fafc;
    --gptv3-gray-100: #f1f5f9;
    --gptv3-gray-200: #e2e8f0;
    --gptv3-gray-300: #d1d5db;
    --gptv3-gray-500: #64748b;
    --gptv3-gray-700: #374151;
    --gptv3-success: #27ae60;
    --gptv3-success-dark: #229954;
    --gptv3-radius-md: 10px;
    --gptv3-radius-lg: 12px;
    /* Legacy tokens used by detail pages */
    --primary-blue: #007cba;
    --primary-blue-dark: #005a87;
    --success-green: #27ae60;
    --success-green-dark: #229954;
    --text-dark: #2c3e50;
    --text-muted: #666;
    --text-light: #999;
    --border-color: #ddd;
    --background-light: #f8f9fa;
    --background-gray: #f9f9f9;
    --table-header: #34495e;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.gptv3-container {
    max-width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gptv3-gray-700);
}

@media (max-width: 768px) {
    .gptv3-container {
        padding-bottom: 70px;
    }
}

.gptv3-hidden {
    display: none !important;
}

/* ==========================================================================
   DESKTOP HERO HEADER (hidden - template provides its own hero)
   ========================================================================== */

.gptv3-hero {
    display: none;
    background: linear-gradient(135deg, #1e3a5f 0%, #2C5282 100%);
    border-radius: var(--gptv3-radius-lg);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 24px;
    color: #fff;
}

.gptv3-hero-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #fff;
}

.gptv3-hero-count {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 4px;
    color: #fff;
}

.gptv3-hero-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    margin-bottom: 16px;
}

.gptv3-hero-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gptv3-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gptv3-hero-pill:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .gptv3-hero {
        display: none;
    }
}

/* ==========================================================================
   MOBILE STICKY HEADER
   ========================================================================== */

.gptv3-mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #1e3a5f 0%, #2C5282 100%);
    /* 8px horizontal matches the search-panel gutter — keeps content
       edges aligned between the sticky header and the cards below.
       Bottom padding intentionally tight so the filter pills sit close
       to the recommended-sites row that follows. */
    padding: 12px 8px 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    /* Full-bleed breakout: extend gradient edge-to-edge regardless of
       parent padding. Overshoot 1px each side; html { overflow-x: clip }
       absorbs the excess. Matches .gptmc-mobile-header pattern. */
    width: calc(100vw + 2px);
    margin-left: calc(50% - 50vw - 1px);
    margin-right: calc(50% - 50vw - 1px);
    box-sizing: border-box;
}

.admin-bar .gptv3-mobile-header {
    top: 46px;
}

.gptv3-mobile-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* Title now sits as a direct flex child of .gptv3-mobile-header-top
   alongside the action buttons — flex-grow + min-width:0 (was on the
   removed .gptv3-mobile-header-info wrapper) so the title can shrink
   to fit instead of pushing the buttons off-row on narrow screens. */
.gptv3-mobile-header-title {
    flex: 1;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.gptv3-mobile-header-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    /* Bottom margin spaces the subtitle from the search input. The
       subtitle is now a sibling of .gptv3-mobile-header-top (full width
       second row), not a child of an info wrapper above. */
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.gptv3-mobile-header-count {
    font-weight: 700;
    color: #fff;
}

.gptv3-mobile-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 10px;
}

.gptv3-mobile-about-btn,
.gptv3-mobile-filter-btn,
.gptv3-mobile-region-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.gptv3-mobile-about-btn svg,
.gptv3-mobile-filter-btn svg,
.gptv3-mobile-region-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.gptv3-filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Mobile search input. NOTE: bottom margin moved to the parent
   .gptv3-search-wrap-mobile (see below). When the margin lived on
   the input itself, the wrap's height included it — and since the
   .gptv3-search-clear button is `top: 50%` of the wrap, the button
   ended up vertically offset (centered on wrap+margin, not on the
   input). Putting the margin on the wrap keeps wrap height = input
   height, so the X button centers correctly. */
.gptv3-mobile-search {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    -webkit-appearance: none;
    outline: none;
}

.gptv3-search-wrap-mobile {
    margin-bottom: 10px;
}

.gptv3-mobile-search::placeholder {
    color: rgba(255,255,255,0.6);
}

.gptv3-mobile-search:focus {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.2);
}

/* Quick filter pills */
.gptv3-quick-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.gptv3-quick-filters::-webkit-scrollbar {
    display: none;
}

.gptv3-quick-filters-categories {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.gptv3-quick-filters button {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    background: transparent;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.gptv3-quick-filters button.active {
    background: rgba(255,255,255,0.95);
    color: var(--gptv3-navy);
    border-color: transparent;
    font-weight: 600;
}


@media (min-width: 769px) {
    .gptv3-mobile-header {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .gptv3-mobile-header {
        display: block;
    }
}

/* ==========================================================================
   BONUSES SECTION (Recommended Sites)
   ========================================================================== */

.gptv3-bonuses {
    background: var(--gptv3-gray-50);
    border: 1px solid var(--gptv3-gray-200);
    border-radius: var(--gptv3-radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

/* Hide bonuses on desktop early to prevent flash (sidebar has them) */
@media (min-width: 901px) {
    .gptv3-bonuses {
        display: none;
    }
}

.gptv3-bonuses-header {
    text-align: center;
    margin-bottom: 12px;
}

.gptv3-bonuses-badge {
    display: inline-block;
    background: #10b981;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gptv3-bonuses-subtitle {
    font-size: 13px;
    color: var(--gptv3-gray-500);
    margin: 8px 0 0 0;
}

.gptv3-bonuses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.gptv3-bonus-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--gptv3-gray-300);
    border-radius: 6px;
    padding: 8px;
    text-decoration: none !important;
    transition: all 0.2s;
    color: inherit;
}

.gptv3-bonus-card:hover {
    transform: translateY(-2px);
    border-color: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.2) !important;
    text-decoration: none !important;
    color: inherit;
}

.gptv3-bonus-card img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: contain;
    flex-shrink: 0;
}

.gptv3-bonus-card-info {
    min-width: 0;
    line-height: 1.3;
}

.gptv3-bonus-card-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gptv3-navy);
}

.gptv3-bonus-card-desc {
    display: block;
    font-size: 10px;
    color: var(--gptv3-gray-500);
}

.gptv3-bonus-card-offer {
    display: block;
    font-size: 11px;
    color: #059669;
    font-weight: 500;
}

/* Bonus extras - hidden on mobile until toggle is clicked */
.gptv3-bonus-extra {
    display: flex;
}

/* Toggle button - hidden on desktop, shown on mobile */
.gptv3-bonus-toggle {
    display: none;
}

/* ==========================================================================
   SEARCH & FILTER SECTION
   ========================================================================== */

.gptv3-search-heading {
    display: none;
}

.gptv3-card-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px 0;
}

/* Comparison heading — sits at the top of the card section just under
   the bonuses (mirrors cashback tool layout). Subtitle directly below.
   Search/filter UI then sits underneath, framed as filtering this set.
   Sizing/weights matched to gptmc-card-list-heading on cashback tool.
   The mobile sticky header h1 wears the same .gptv3-card-list-heading
   class for the JS-sync hook, but should keep its own white-on-navy
   styling — the :not() guard scopes these rules away from it. */
.gptv3-card-list-heading:not(.gptv3-mobile-header-title) {
    font-size: 16px;
    font-weight: 600;
    color: var(--gptv3-gray-700);
    margin: 0 0 4px 0;
}

.gptv3-card-list-subtitle:not(.gptv3-mobile-header-sub) {
    font-size: 12px;
    color: var(--gptv3-gray-500);
    font-weight: 400;
    margin: 0 0 12px 0;
}

@media (max-width: 768px) {
    /* On mobile the comparison heading + subtitle live in the sticky
       header (h1 + p there carry .gptv3-card-list-heading +
       .gptv3-card-list-subtitle so updateHeading() still reaches them).
       The duplicate desktop in-section pair is hidden so the framing
       isn't shown twice — but only those instances, not the sticky
       header copies (the :not() guard keeps the sticky ones visible). */
    .gptv3-card-list-heading:not(.gptv3-mobile-header-title),
    .gptv3-card-list-subtitle:not(.gptv3-mobile-header-sub) {
        display: none;
    }
}

/* How it works modal — opened via the "see how this works" link in the
   help bar. Centered overlay, 4-step grid on desktop, stacked on mobile. */
.gptv3-howit-modal[hidden] {
    display: none;
}
.gptv3-howit-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.gptv3-howit-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}
.gptv3-howit-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 880px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
}
.gptv3-howit-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--gptv3-gray-500, #64748b);
    cursor: pointer;
    padding: 4px 8px;
}
.gptv3-howit-modal-close:hover {
    color: var(--gptv3-gray-700, #334155);
}
.gptv3-howit-modal-heading {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--gptv3-gray-700, #334155);
}
.gptv3-howit-modal-sub {
    margin: 0 0 20px 0;
    font-size: 13px;
    color: var(--gptv3-gray-500, #64748b);
}
.gptv3-howit-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.gptv3-howit-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.gptv3-howit-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2C5282;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.gptv3-howit-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gptv3-gray-700, #334155);
    margin-bottom: 4px;
}
.gptv3-howit-text p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--gptv3-gray-500, #64748b);
}
@media (max-width: 768px) {
    .gptv3-howit-modal-panel {
        padding: 20px 16px;
    }
    .gptv3-howit-modal-heading { font-size: 18px; }
    .gptv3-howit-steps {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .gptv3-howit-step {
        flex-direction: row;
        align-items: flex-start;
        padding: 12px;
    }
}

/* Affiliate disclosure under the bonuses card (Recommended Sites).
   Same role/styling as gptmc-bonuses-disclosure in the cashback tool —
   small muted footnote explaining the commercial relationship. */
.gptv3-bonuses-disclosure {
    margin: 6px 0 0 0;
    padding: 0;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
}

.gptv3-search-section {
    margin-bottom: 8px;
}

/* Search input + × clear button wrapper. Clear button is absolutely
   positioned inside the input on the right; only visible when the
   input has content. Right-padding on the input reserves space for it
   so typed text never sits underneath the button. */
.gptv3-search-wrap {
    position: relative;
}

.gptv3-search-wrap .gptv3-search-input,
.gptv3-search-wrap .gptv3-mobile-search {
    padding-right: 36px;
}

.gptv3-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.08);
    color: var(--gptv3-gray-700, #334155);
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s, color 0.15s;
}

/* Use a child SVG (cleaner than the `×` glyph which has wonky
   baseline placement and never quite centers vertically). */
.gptv3-search-clear svg {
    display: block;
}

.gptv3-search-clear.gptv3-visible {
    display: inline-flex;
}

.gptv3-search-clear:hover,
.gptv3-search-clear:focus-visible {
    background: rgba(0, 0, 0, 0.18);
    outline: none;
}

/* Mobile sticky-header search has white-on-navy styling — adjust the
   clear button colors so the × stays readable against the dark band. */
.gptv3-search-wrap-mobile .gptv3-search-clear {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.gptv3-search-wrap-mobile .gptv3-search-clear:hover,
.gptv3-search-wrap-mobile .gptv3-search-clear:focus-visible {
    background: rgba(255, 255, 255, 0.35);
}

.gptv3-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gptv3-gray-300);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    background: #fff;
    -webkit-appearance: none;
}

.gptv3-search-input:focus {
    outline: none;
    border-color: var(--gptv3-navy);
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

/* Active filter state - highlight when filter is not default */
select.gptv3-filter-active,
.gptv3-search-input.gptv3-filter-active {
    border-color: var(--gptv3-navy);
    background-color: #d4e6f5;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.25);
    font-weight: 600;
}

/* Filter modal - hidden by default, shown as bottom sheet on mobile */
.gptv3-filter-modal {
    margin-bottom: 12px;
}

/* Hide filter modal on desktop early (sidebar has filters) */
@media (min-width: 901px) {
    .gptv3-filter-modal {
        display: none;
    }
}

.gptv3-filter-modal-backdrop {
    display: none;
}

.gptv3-filter-header {
    display: none;
}

/* Desktop: always-visible compact filter row */
@media (min-width: 769px) {
    .gptv3-filter-modal-backdrop {
        display: none;
    }

    .gptv3-filter-body {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: end;
    }

    .gptv3-filter-field {
        flex: 1 1 120px;
        max-width: 160px;
    }

    .gptv3-filter-field select {
        padding: 8px 10px;
        font-size: 13px;
    }

    .gptv3-filter-field label {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .gptv3-filter-reset {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Filter close button - hidden by default, shown on mobile */
.gptv3-filter-close {
    display: none;
}

.gptv3-filter-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gptv3-gray-700);
    margin-bottom: 4px;
}

/* Subtle divider in the filter modal — separates the Sort dropdown
   (above) from the filter dropdowns (below). Thin top border +
   small uppercase "Filters" subhead. Lets users group the controls
   mentally without splitting the modal. */
.gptv3-filter-divider {
    margin: 14px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--gptv3-gray-200, #e2e8f0);
}

.gptv3-filter-divider span {
    font-size: 11px;
    font-weight: 600;
    color: var(--gptv3-gray-500, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gptv3-filter-field select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--gptv3-gray-300);
    border-radius: 8px;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.gptv3-filter-field select:focus {
    outline: none;
    border-color: var(--gptv3-navy);
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

.gptv3-filter-reset {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--gptv3-gray-300);
    border-radius: 8px;
    background: #fff;
    color: var(--gptv3-gray-500);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.gptv3-filter-reset:hover {
    background: var(--gptv3-gray-50);
    color: var(--gptv3-gray-700);
    border-color: var(--gptv3-gray-700);
}

/* Filter modal action row — Reset on the left, Apply stretches to fill
   the right. Apply is the primary blue button users tap when they're done. */
.gptv3-filter-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 4px;
    width: 100%;
}

.gptv3-filter-actions .gptv3-filter-reset {
    flex: 0 0 auto;
}

.gptv3-filter-apply {
    flex: 1 1 auto;
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
    background: var(--gptv3-navy, #2C5282);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    -webkit-appearance: none;
}

.gptv3-filter-apply:hover,
.gptv3-filter-apply:focus-visible {
    background: #1e3a5f;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.25);
}

/* Region picker pill row — sits at the top of the filter modal so users
   discover that there are US and Global versions of this tool. UK is
   the active state (current page); US/Global are real anchor links. */
.gptv3-region-pill-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gptv3-region-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--gptv3-gray-300, #d1d5db);
    border-radius: 999px;
    background: #fff;
    color: var(--gptv3-gray-700, #334155);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.gptv3-region-mini-pill img {
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.gptv3-region-mini-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.gptv3-region-mini-pill:hover,
.gptv3-region-mini-pill:focus-visible {
    background: var(--gptv3-gray-50, #f8fafc);
    border-color: var(--gptv3-navy, #2C5282);
    color: var(--gptv3-navy, #2C5282);
    outline: none;
    text-decoration: none;
}

.gptv3-region-mini-pill.active {
    background: var(--gptv3-navy, #2C5282);
    border-color: var(--gptv3-navy, #2C5282);
    color: #fff;
    cursor: default;
}

.gptv3-region-mini-pill.active:hover {
    background: var(--gptv3-navy, #2C5282);
    color: #fff;
}

/* Country selector button on the mobile sticky header — flag image
   sits square inside the existing button slot. The previous globe SVG
   wasn't communicating "this is your current country" — the flag does. */
.gptv3-mobile-region-flag {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
}

/* Active filter pills */
.gptv3-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.gptv3-active-filters:empty {
    display: none;
}

.gptv3-filter-pill,
.gptv3-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--gptv3-navy-light);
    border: 1px solid var(--gptv3-navy);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gptv3-navy);
    cursor: pointer;
}

.gptv3-active-filter svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.gptv3-filter-pill-remove {
    background: none;
    border: none;
    color: var(--gptv3-navy);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}

/* ==========================================================================
   MOBILE FILTER SECTION
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide desktop search + heading on mobile (mobile header has its own) */
    .gptv3-search-heading,
    .gptv3-search-section {
        display: none;
    }

    /* Bottom sheet modal - exact same pattern as region modal */
    .gptv3-filter-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100000;
        margin: 0;
    }

    .gptv3-filter-modal.gptv3-filter-visible {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .gptv3-filter-modal-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .gptv3-filter-content {
        position: relative;
        background: #fff;
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-width: 480px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .gptv3-filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        font-size: 16px;
        font-weight: 700;
        color: var(--gptv3-gray-700);
        border-bottom: 1px solid var(--gptv3-gray-200);
    }

    .gptv3-filter-close {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--gptv3-gray-500);
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
    }

    .gptv3-filter-body {
        padding: 8px 12px 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .gptv3-filter-field select {
        padding: 12px;
        font-size: 16px;
    }

    .gptv3-filter-reset,
    .gptv3-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .gptv3-filter-body .gptv3-filter-field,
    .gptv3-filter-body .gptv3-filter-reset,
    .gptv3-filter-body .gptv3-filter-actions {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   CARD LIST
   ========================================================================== */

#gptv3-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.gptv3-card {
    border: 1px solid var(--gptv3-gray-300);
    border-radius: var(--gptv3-radius-md);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    background: #fff;
}

.gptv3-card:hover {
    border-color: var(--gptv3-navy);
    box-shadow: 0 2px 8px rgba(44,82,130,0.1);
}

.gptv3-card.expanded {
    border-color: var(--gptv3-navy);
    box-shadow: 0 4px 16px rgba(44,82,130,0.12);
}

.gptv3-card-main {
    display: grid;
    /* 4th column is FIXED at 220px (not auto) so all action columns
       across every card line up — auto-sized columns were each
       sizing to their own button content, making rows stagger. The
       button inside fills 100% of that 220px and uses ellipsis on
       the source name if a particularly long name (e.g. CashInStyle
       with a £735.47 payout) would otherwise push it wider. */
    grid-template-columns: 1fr auto auto 220px;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}

/* Card offer section (left) */
.gptv3-card-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.gptv3-card-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--gptv3-gray-100);
}

.gptv3-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gptv3-card-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--gptv3-gray-700);
    line-height: 1.3;
}

.gptv3-card-meta {
    font-size: 12px;
    color: var(--gptv3-gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.gptv3-card-source {
    font-weight: 500;
}

/* Country flags row on offer cards (Global region only — only rendered
   when has_country_filter is true). Sits as its own line under .gptv3-card-meta
   so it doesn't crowd the source/device row. Capped at 10 flags then a
   "+N" overflow badge — see gptos_render_country_flags() / gptosRenderCountryFlags(). */
.gptv3-card-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1;
}
.gptos-country-flag {
    display: inline-block;
    /* Title attribute carries the 2-letter code so hover gives extra
       context (browsers' native flag emojis can be small/ambiguous). */
    cursor: default;
}
.gptos-country-more {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--gptv3-gray-500);
    background: var(--gptv3-gray-100, #f3f4f6);
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 2px;
}

.gptv3-card-expand-hint {
    font-size: 11px;
    color: var(--gptv3-navy);
    font-weight: 500;
}

/* Badges in card */
.gptv3-rec-badge,
.gptv3-boosted-badge,
.gptv3-ath-badge,
.gptv3-money-badge,
.gptv3-lightning-badge,
.gptv3-new-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

.gptv3-rec-badge {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff;
}

.gptv3-boosted-badge {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
}

.gptv3-ath-badge {
    background: linear-gradient(135deg, #f1c40f, #d4ac0d);
    color: #333;
}

.gptv3-money-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.gptv3-lightning-badge {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
}

.gptv3-new-badge {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    animation: gptv3-pulse 2s ease-in-out infinite;
}

/* Scrimpr Recommended card styling */
.gptv3-card-recommended {
    /* Removed the left green accent border — was visually heavy.
       Keeping the soft green-to-white gradient as the spotlight cue. */
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.gptv3-card-recommended-label {
    font-size: 10px;
    font-weight: 700;
    color: #27ae60;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* line-height: 1 strips the inherited ~1.5 leading that was
       making this 10px label render as a ~15-18px tall row.
       Top padding bumped from 4px → 8px to compensate — without the
       line-height buffer, the text was sitting too close to the
       card's top edge. Bottom stays 0 (the card-main handles the
       gap below). */
    line-height: 1;
    padding: 8px 16px 0;
}

/* When the card is a spotlight, the recommended-label banner sits
   directly above .gptv3-card-main. Reduce card-main's TOP padding
   so the banner + card body read as a single tight block (the gap
   between them was the dominant source of extra height, not the
   banner itself). Default top padding stays unaffected on
   non-spotlight cards. */
.gptv3-card-recommended .gptv3-card-main {
    padding-top: 6px;
}

.gptv3-card-install-pays {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 4px;
    padding: 2px 8px;
    display: inline-block;
    margin-top: 2px;
}

@keyframes gptv3-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* Badge key trigger + modal */
.gptv3-badge-key-wrap {
    position: relative;
}

.gptv3-badge-key-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--gptv3-gray-300);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--gptv3-gray-500);
    cursor: pointer;
    transition: all 0.2s;
}

.gptv3-badge-key-trigger:hover {
    border-color: var(--gptv3-navy);
    color: var(--gptv3-navy);
}

.gptv3-badge-key-modal {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    margin-top: 6px;
}

.gptv3-badge-key-modal.gptv3-badge-key-open {
    display: block;
}

.gptv3-badge-key-modal-content {
    background: #fff;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 280px;
}

.gptv3-badge-key-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gptv3-gray-200);
    font-size: 14px;
    font-weight: 600;
    color: var(--gptv3-navy);
}

.gptv3-badge-key-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--gptv3-gray-500);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}

.gptv3-badge-key-modal-close:hover {
    color: var(--gptv3-navy);
}

.gptv3-badge-key-modal-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gptv3-badge-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gptv3-gray-600);
}

/* Card payout section (centre) */
.gptv3-card-payout {
    text-align: center;
    flex-shrink: 0;
    min-width: 70px;
}

.gptv3-card-amount {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--gptv3-success);
    line-height: 1.2;
}

.gptv3-card-payout-label {
    font-size: 11px;
    color: var(--gptv3-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gptv3-card-rec-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gptv3-navy);
    background: #e8f0f7;
    padding: 1px 6px;
    border-radius: 3px;
}

.gptv3-card-hp-label {
    color: var(--gptv3-success-dark);
    background: #e6f9ee;
}

.gptv3-card-mobile-link {
    display: none;
}

.gptv3-card-site-payout {
    font-size: 12px;
    font-weight: 600;
    color: var(--gptv3-gray-700);
}

.gptv3-card-bonus-hint {
    font-size: 10px;
    color: #27AE60;
    font-weight: 600;
    position: relative;
}

.gptv3-card-bonus-hint.gptv3-hint-warn {
    color: #E67E22;
}

.gptv3-info-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: inherit;
    vertical-align: middle;
    margin-left: 2px;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.gptv3-info-trigger:hover {
    opacity: 1;
}

.gptv3-info-popup {
    position: fixed;
    width: 240px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-size: 12px;
    font-weight: 400;
    color: var(--gptv3-gray-700);
    line-height: 1.5;
    white-space: normal;
    z-index: 10000;
}

.gptv3-info-popup::after,
.gptv3-info-popup::before {
    display: none;
}

/* Card site section (recommended site info) */
.gptv3-card-site {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Card action section (CTA button). min-width: 200px keeps all
   buttons aligned to the same minimum width regardless of site
   name length (e.g. "Earnlab" vs "CashInStyle"). Any extra content
   makes the button grow rather than letting it bunch up. Mirrors
   the cashback tool's gptmc-card-action min-width pattern, but
   200px instead of 170px because GPT button content is wider
   (£-amounts vs short %-rates). */
.gptv3-card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 170px;
}

.gptv3-card-best-site {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--gptv3-gray-700);
    font-weight: 500;
    text-align: center;
}

.gptv3-card-best-site span[class$="_image"] {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    border-radius: 3px;
}

.gptv3-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--gptv3-success), #2ecc71);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(39,174,96,0.2);
}

.gptv3-card-btn:hover {
    background: linear-gradient(135deg, var(--gptv3-success-dark), var(--gptv3-success));
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(39,174,96,0.3);
    color: #fff !important;
    text-decoration: none !important;
}

/* Cashback-style CTA button — site icon + site name on the left,
   payout amount + arrow on the right. Mirrors the gptmc-card-btn
   pattern from the cashback tool. */
.gptv3-card-action .gptv3-card-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 170px;
    padding: 10px 14px;
}

.gptv3-btn-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    /* Cap the info side so a long source name (e.g. "CashInStyle")
       can ellipsis instead of pushing the button wider than its
       neighbours. Min-width is small so it can shrink under tight
       widths. flex-shrink:1 lets the source name be the part that
       compresses (icon and arrow stay full-size). */
    min-width: 0;
    flex-shrink: 1;
}

.gptv3-btn-source {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gptv3-btn-info span[class$="_image"] {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    border-radius: 3px;
}

.gptv3-btn-source {
    line-height: 1;
    font-weight: 700;
}

.gptv3-btn-payout {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    font-weight: 700;
}

/* Inside flex CTA buttons the parent gap handles spacing — drop the
   default margin-left so the icon doesn't get pushed away from the text. */
.gptv3-card-btn .bs-cta-external-icon,
.gptv3-btn-payout .bs-cta-external-icon {
    margin-left: 0;
    vertical-align: baseline;
}

/* Rate column — the "up to £5.50 payout" centered display. Replaces
   the older .gptv3-card-payout column (which still has rules left for
   any legacy use, but no longer rendered by the card markup). */
.gptv3-card-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    min-width: 80px;
    line-height: 1.2;
}

.gptv3-card-rate-prefix {
    font-size: 11px;
    color: var(--gptv3-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gptv3-card-rate .gptv3-card-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--gptv3-success);
    line-height: 1.1;
}

.gptv3-card-rate-label {
    font-size: 10px;
    color: var(--gptv3-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "via" separator between the rate column and the CTA button. Desktop
   shows it inline (small gray text); mobile hides the inline version
   and uses the in-action "Best payout via:" label instead. */
.gptv3-card-via {
    align-self: center;
    color: var(--gptv3-gray-500);
    font-size: 12px;
    flex-shrink: 0;
}

.gptv3-card-via-mobile {
    display: none;
    font-size: 11px;
    color: var(--gptv3-gray-500);
    margin-bottom: 4px;
    text-align: center;
}

@media (max-width: 768px) {
    .gptv3-card-via-desktop {
        display: none;
    }
    .gptv3-card-via-mobile {
        display: block;
    }
}

/* Expand-hint sits directly under the CTA button inside
   .gptv3-card-action (which is flex-direction: column). Subtle gray
   text so it doesn't compete with the green button above. */
.gptv3-card-action .gptv3-card-expand-hint {
    font-size: 11px;
    color: var(--gptv3-gray-500, #64748b);
    font-weight: 500;
    margin-top: 2px;
    text-align: center;
    /* Span needs to be a block (or self-stretched flex item) for
       text-align to actually centre it within the action column on
       mobile, where align-items is stretch. */
    display: block;
    width: 100%;
}

/* ==========================================================================
   CARD DETAILS (expanded)
   ========================================================================== */

.gptv3-card-details {
    border-top: 1px solid var(--gptv3-gray-200);
    padding: 16px;
    background: var(--gptv3-gray-50);
}

.gptv3-detail-section {
    margin-bottom: 14px;
}

.gptv3-detail-section:last-child {
    margin-bottom: 0;
}

.gptv3-detail-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--gptv3-gray-700);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gptv3-detail-section p {
    font-size: 14px;
    color: var(--gptv3-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* Completions info */
.gptv3-detail-completions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.gptv3-detail-completions .completions-label {
    font-weight: 600;
    color: var(--gptv3-gray-700);
}

/* Goals/tasks list */
.gptv3-detail-tasks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gptv3-detail-tasks li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--gptv3-gray-200);
    font-size: 13px;
}

.gptv3-detail-tasks li:last-child {
    border-bottom: none;
}

.gptv3-task-name {
    color: var(--gptv3-gray-700);
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}

.gptv3-task-payout {
    font-weight: 700;
    color: var(--gptv3-success);
    white-space: nowrap;
}

.gptv3-task-diff {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    white-space: nowrap;
}
.gptv3-task-diff--easy { background: #dcfce7; color: #166534; }
.gptv3-task-diff--moderate { background: #fef3c7; color: #92400e; }
.gptv3-task-diff--hard { background: #fee2e2; color: #991b1b; }
.gptv3-task-diff--unlikely { background: #ede9fe; color: #5b21b6; }

/* Site comparison in details */
.gptv3-detail-sites {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.gptv3-detail-site-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.gptv3-detail-site-row:hover {
    border-color: var(--gptv3-success);
    text-decoration: none;
    color: inherit;
}

.gptv3-detail-site-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gptv3-detail-site-info [class*="_image"] {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.gptv3-detail-site-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gptv3-gray-700);
}

.gptv3-detail-site-rank {
    font-size: 11px;
    color: var(--gptv3-gray-500);
    margin-left: 6px;
}

.gptv3-detail-site-payout {
    font-weight: 700;
    font-size: 14px;
    color: var(--gptv3-success);
}

/* Money maker details in card */
.gptv3-detail-money-maker {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 12px;
}

.gptv3-detail-money-maker h4 {
    color: #166534;
}

.gptv3-mm-task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.gptv3-mm-task-name {
    color: #1e293b;
    flex: 1;
    min-width: 100px;
}

.gptv3-mm-calc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.gptv3-mm-cost { color: #dc2626; }
.gptv3-mm-arrow { color: #94a3b8; }
.gptv3-mm-reward { color: #059669; }
.gptv3-mm-profit {
    color: #fff;
    background: #059669;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
}

/* View full details link */
.gptv3-detail-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--gptv3-navy) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.2s;
}

.gptv3-detail-link:hover {
    color: var(--gptv3-navy-dark) !important;
    text-decoration: underline !important;
}

/* Payout history info (in card details) */
.mobile-payout-history-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}

.mobile-payout-history-info .payout-status {
    font-weight: bold;
    font-size: 14px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.mobile-payout-history-info .payout-status.payout-up {
    color: #27ae60;
    background: #e8f5e9;
}

.mobile-payout-history-info .payout-status.payout-down {
    color: #e74c3c;
    background: #ffebee;
}

.mobile-payout-history-info .payout-status.payout-stable {
    color: #666;
    background: #f5f5f5;
}

.mobile-payout-history-info .payout-label {
    font-weight: 600;
    color: #333;
}

.mobile-payout-history-info .payout-current {
    font-weight: 700;
    color: var(--gptv3-navy);
}

.mobile-payout-history-info .payout-max {
    font-size: 11px;
    color: #888;
}

.mobile-payout-history-info .payout-change {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.mobile-payout-history-info .payout-change.change-positive {
    color: #27ae60;
    background: #e8f5e9;
}

.mobile-payout-history-info .payout-change.change-negative {
    color: #e74c3c;
    background: #ffebee;
}

.mobile-payout-history-info .payout-history-count {
    font-size: 11px;
    color: #888;
    margin-left: auto;
}

/* ==========================================================================
   COLLAPSED CARD: SOURCE CHIPS, DEVICE ICONS, CATEGORY, COMPLETIONS
   ========================================================================== */

/* Colored source chip */
.gptv3-card-source-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* Device icons */
.gptv3-device-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 6px;
}

.gptv3-device-icon svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Category in meta line */
.gptv3-card-category {
    font-size: 11px;
    color: var(--gptv3-gray-500);
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Completions row on collapsed card */
.gptv3-card-completions {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--gptv3-gray-500);
    margin-top: 2px;
}

.gptv3-heat-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.gptv3-heat-very-hot {
    background: #e53935;
}

.gptv3-heat-hot {
    background: #f39c12;
}

/* ==========================================================================
   EXPANDED CARD: VOTING, GOAL VOTES, SHARE
   ========================================================================== */

/* Offer voting section */
.gptv3-card-voting {
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--gptv3-gray-200);
}

.gptv3-vote-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gptv3-gray-700);
    margin-bottom: 8px;
}

.gptv3-vote-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.gptv3-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--gptv3-gray-200);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--gptv3-gray-700);
    transition: all 0.2s ease;
}

.gptv3-vote-btn:hover:not(:disabled) {
    border-color: var(--gptv3-gray-300);
    background: var(--gptv3-gray-50);
}

.gptv3-vote-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gptv3-vote-btn svg {
    flex-shrink: 0;
}

.gptv3-vote-up.active {
    background: #e8f5e9;
    border-color: #4CAF50;
    color: #2E7D32;
}

.gptv3-vote-down.active {
    background: #ffebee;
    border-color: #E53935;
    color: #C62828;
}

.gptv3-vote-count {
    font-size: 12px;
    color: var(--gptv3-gray-500);
}

.gptv3-completion-rate {
    margin-top: 8px;
}

.gptv3-rate-bar {
    height: 6px;
    background: var(--gptv3-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.gptv3-rate-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.gptv3-rate-text {
    font-size: 12px;
    color: var(--gptv3-gray-500);
}

a.gptv3-vote-login {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--gptv3-navy);
    text-decoration: none;
    font-weight: 500;
    margin-top: 6px;
}

a.gptv3-vote-login:hover {
    text-decoration: underline;
}

a.gptv3-vote-login svg {
    flex-shrink: 0;
}

/* Per-goal voting widgets */
.gptv3-goal-vote {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 6px;
    white-space: nowrap;
}

.gptv3-gv-btn {
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border: none;
    background: none;
    border-radius: 3px;
    transition: background 0.15s;
    user-select: none;
    color: var(--gptv3-gray-500);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.gptv3-gv-btn:hover:not(:disabled) {
    background: var(--gptv3-gray-100, #f1f5f9);
}

.gptv3-gv-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gptv3-gv-btn.active-up {
    color: #4CAF50;
}

.gptv3-gv-btn.active-down {
    color: #E53935;
}

.gptv3-gv-total {
    font-size: 11px;
    font-weight: 600;
    color: var(--gptv3-gray-500);
    min-width: 14px;
    text-align: center;
}

.gptv3-gv-rate {
    font-size: 10px;
    font-weight: 600;
}

/* Share button */
.gptv3-detail-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--gptv3-gray-200);
}

.gptv3-detail-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--gptv3-navy);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.15s;
    flex: 1;
    text-align: center;
}

.gptv3-detail-link-btn:hover {
    background: var(--gptv3-navy-dark, #1a365d);
    transform: translateY(-1px);
    color: #fff !important;
}

.gptv3-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: var(--gptv3-gray-50);
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gptv3-navy);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.gptv3-share-btn:hover {
    background: #e8f0f7;
    border-color: var(--gptv3-navy);
}

/* Mobile adjustments for voting */
@media (max-width: 768px) {
    .gptv3-vote-btns {
        flex-direction: row;
    }

    .gptv3-vote-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
    }

    .gptv3-card-completions {
        font-size: 10px;
    }
}

/* ==========================================================================
   RESULTS INFO & PAGINATION
   ========================================================================== */

.gptv3-results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    font-size: 13px;
    color: var(--gptv3-gray-500);
}

.gptv3-last-updated {
    font-size: 12px;
    color: var(--gptv3-gray-500);
}

.gptv3-pagination-bottom {
    padding: 8px 0 16px;
}

.gptv3-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.gptv3-pagination button {
    padding: 8px 14px;
    border: 1px solid var(--gptv3-gray-200);
    background: #fff;
    color: var(--gptv3-navy);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gptv3-pagination button:hover:not(.current):not(:disabled) {
    background: var(--gptv3-navy-light);
    border-color: var(--gptv3-navy);
}

.gptv3-pagination button.current {
    background: var(--gptv3-navy);
    color: #fff;
    border-color: var(--gptv3-navy);
}

.gptv3-pagination button:disabled {
    color: var(--gptv3-gray-300);
    cursor: not-allowed;
}

/* Header actions (region pills + badge key) */
.gptv3-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Region pills */
.gptv3-region-pills {
    display: flex;
    gap: 4px;
}

.gptv3-region-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 14px;
    color: var(--gptv3-gray-500);
    background: #fff;
    transition: all 0.2s;
}

.gptv3-region-pill:hover {
    border-color: var(--gptv3-navy);
    color: var(--gptv3-navy);
    text-decoration: none;
}

.gptv3-region-pill.active {
    background: var(--gptv3-navy);
    border-color: var(--gptv3-navy);
    color: #fff;
    cursor: default;
}

/* Region picker modal (mobile) */
.gptv3-region-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
}

.gptv3-region-modal.open {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gptv3-region-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
}

.gptv3-region-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.gptv3-region-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gptv3-gray-700);
    border-bottom: 1px solid var(--gptv3-gray-200);
}

.gptv3-region-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gptv3-gray-500);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.gptv3-region-modal-body {
    padding: 8px 12px 16px;
}

.gptv3-region-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s;
}

.gptv3-region-option:hover {
    background: var(--gptv3-gray-50);
    text-decoration: none;
}

.gptv3-region-option.active {
    background: var(--gptv3-navy-light);
}

.gptv3-region-option-flag {
    width: 36px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.gptv3-region-option-globe {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--gptv3-gray-500);
}

.gptv3-region-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gptv3-region-option-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gptv3-gray-700);
}

.gptv3-region-option-desc {
    font-size: 12px;
    color: var(--gptv3-gray-500);
}

/* ==========================================================================
   ABOUT PANEL (mobile only)
   ========================================================================== */

/* About modal — full-screen on mobile (about content is long enough that
   a bottom-sheet feels cramped). Hidden on desktop. */
.gptv3-about-modal {
    display: none;
}

.gptv3-about-close {
    display: none;
}

@media (min-width: 769px) {
    .gptv3-about-modal {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .gptv3-about-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100000;
        background: #fff;
    }

    .gptv3-about-modal.gptv3-about-visible {
        display: flex;
        flex-direction: column;
    }

    /* Backdrop irrelevant in full-screen mode but kept for the JS structure */
    .gptv3-about-modal-backdrop {
        display: none;
    }

    .gptv3-about-modal .gptv3-about-content {
        position: relative;
        background: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .gptv3-about-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        font-size: 17px;
        font-weight: 700;
        color: var(--gptv3-gray-700);
        border-bottom: 1px solid var(--gptv3-gray-200);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    .gptv3-about-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--gptv3-gray-50);
        border: none;
        border-radius: 50%;
        font-size: 22px;
        color: var(--gptv3-gray-700);
        cursor: pointer;
        padding: 0;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }

    .gptv3-about-body {
        padding: 16px 20px 32px;
        overflow-y: auto;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }
}

.gptv3-about-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gptv3-navy-dark, #1a365d);
    margin: 20px 0 8px;
}

.gptv3-about-content h3:first-child {
    margin-top: 0;
}

.gptv3-about-content p {
    font-size: 14px;
    color: var(--gptv3-gray-500);
    line-height: 1.6;
    margin: 0 0 12px;
}

.gptv3-about-steps {
    padding-left: 20px;
    margin: 0 0 16px;
}

.gptv3-about-steps li {
    font-size: 14px;
    color: var(--gptv3-gray-500);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Intro paragraph inherits the standard .gptv3-about-content p style
   (14px, gray-500, 1.6 line-height) so it reads as a continuous
   piece with the rest of the modal copy, not a separate visual
   block. */

/* Trust bullets — "Why use Scrimpr" list. No bullet markers, each
   item gets a green check-mark via ::before so they read as
   reassurance points (not a generic list). The strong text inside
   each item is the headline; the regular text the supporting line. */
.gptv3-about-trust {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.gptv3-about-trust li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 14px;
    color: var(--gptv3-gray-500);
    line-height: 1.5;
    border-bottom: 1px solid var(--gptv3-gray-100, #f1f5f9);
}

.gptv3-about-trust li:last-child {
    border-bottom: 0;
}

.gptv3-about-trust li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #059669;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.gptv3-about-trust li strong {
    color: var(--gptv3-gray-700, #334155);
    font-weight: 700;
}

.gptv3-about-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.gptv3-about-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gptv3-gray-700);
}

.gptv3-about-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.gptv3-about-link {
    display: inline-flex;
    padding: 8px 16px;
    background: var(--gptv3-gray-100);
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gptv3-navy);
    text-decoration: none;
    transition: all 0.2s ease;
}

.gptv3-about-link:hover {
    background: var(--gptv3-navy-light);
    border-color: var(--gptv3-navy);
    text-decoration: none;
}

/* ==========================================================================
   MOBILE BOTTOM NAV
   ========================================================================== */

.gptv3-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid var(--gptv3-gray-200);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .gptv3-mobile-nav {
        display: flex;
        justify-content: space-around;
    }
}

.gptv3-mobile-nav a,
.gptv3-mobile-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--gptv3-gray-500);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gptv3-mobile-nav a svg,
.gptv3-mobile-nav button svg {
    width: 22px;
    height: 22px;
}

.gptv3-mobile-nav .active {
    color: var(--gptv3-navy) !important;
    font-weight: 700;
    position: relative;
}

.gptv3-mobile-nav .active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--gptv3-navy);
    border-radius: 0 0 2px 2px;
}

.gptv3-mobile-nav .active svg {
    stroke-width: 2.5;
}

/* ==========================================================================
   LOADING INDICATOR
   ========================================================================== */

.gptv3-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--gptv3-gray-500);
}

.gptv3-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gptv3-gray-200);
    border-top-color: var(--gptv3-navy);
    border-radius: 50%;
    animation: gptv3-spin 0.6s linear infinite;
    margin: 0 auto 12px;
}

@keyframes gptv3-spin {
    to { transform: rotate(360deg); }
}

/* No results */
.gptv3-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--gptv3-gray-500);
    font-size: 15px;
}

/* ==========================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    /* Mobile compact mode — matches the cashback tool's mobile bonuses
       pattern: transparent outer wrapper, hide the subtitle (it doubles
       up with the sticky header subtitle), cards flex-grow to fill the
       row instead of fixed 110px. Saves ~30-40px vertical real estate. */
    .gptv3-bonuses {
        margin: 0 0 12px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: hidden;
    }

    .gptv3-bonuses-badge {
        display: none;
    }

    /* Hide subtitle on mobile — sticky header already frames the page;
       this line was just adding a redundant text row. */
    .gptv3-bonuses-subtitle {
        display: none;
    }

    /* Hide the all-RAF disclosure footnote on mobile — saves ~28px of
       vertical real estate, and the funded modal (linked from the
       help bar's "see how this works" + the independence note) covers
       the same ground for users who want it. */
    .gptv3-bonuses-disclosure {
        display: none;
    }

    .gptv3-bonuses-header {
        padding: 0;
        margin: 0;
    }

    /* Hide badge key + region pills on mobile */
    .gptv3-header-actions {
        display: none;
    }

    .gptv3-badge-key-wrap {
        display: none;
    }

    .gptv3-bonuses-grid {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gptv3-bonuses-grid::-webkit-scrollbar {
        display: none;
    }

    .gptv3-bonus-card {
        flex: 1 0 110px;
        flex-direction: column;
        text-align: center;
        padding: 6px;
        gap: 2px;
    }

    .gptv3-bonus-card img {
        width: 28px;
        height: 28px;
    }

    .gptv3-bonus-card-name {
        font-size: 11px;
    }

    .gptv3-bonus-card-desc {
        display: none;
    }

    .gptv3-bonus-card-offer {
        font-size: 9px;
    }

    .gptv3-bonus-extra {
        display: flex;
    }

    .gptv3-bonus-toggle {
        display: none;
    }

    /* Tight gutter on mobile — 8px each side. Children no longer
       need their own 12px horizontal overrides (those have been
       removed). Top padding intentionally small so the recommended-
       sites card sits close to the sticky header's filter pills above. */
    .gptv3-search-panel {
        padding: 6px 8px 16px;
    }

    .gptv3-card-main {
        /* Same fixed-action-column trick as desktop — keep all CTAs
           aligned to the same width regardless of site name length. */
        grid-template-columns: 1fr 170px;
        gap: 10px;
        padding: 12px;
    }

    /* Spotlight cards: tighten top padding so the banner sits close
       to the card body (same fix as desktop, scaled for mobile). */
    .gptv3-card-recommended .gptv3-card-main {
        padding-top: 4px;
    }

    /* Mobile layout: hide the centered rate column + the legacy site
       column. The CTA button (.gptv3-card-action) is the rightmost
       column and contains the payout amount inside the button itself,
       so the standalone rate column is redundant on a tight screen. */
    .gptv3-card-site,
    .gptv3-card-rate,
    .gptv3-card-payout {
        display: none;
    }

    .gptv3-card-action {
        /* Stack: "Best payout via:" label + button + expand hint */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 0;
    }

    .gptv3-card-action .gptv3-card-btn {
        min-width: 0;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Mobile-link is no longer needed — the full button replaces it.
       Hidden so it doesn't double up with the button. */
    .gptv3-card-mobile-link {
        display: none;
    }

    .gptv3-card-mobile-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .gptv3-card-amount {
        font-size: 17px;
    }

    .gptv3-card-logo {
        width: 40px;
        height: 40px;
    }

    .gptv3-card-name {
        font-size: 14px;
    }

    .gptv3-card-details {
        padding: 12px;
    }

    /* Inline status badges hidden on mobile — they sat next to the
       offer name and added visual noise on tight cards. The full
       "Scrimpr Recommended" banner (.gptv3-card-recommended-label, a
       block element above the card body) is unaffected and still
       shows. The featured pill row in the sticky header is the
       discovery surface for these states on mobile. */
    .gptv3-card-name .gptv3-boosted-badge,
    .gptv3-card-name .gptv3-ath-badge,
    .gptv3-card-name .gptv3-money-badge,
    .gptv3-card-name .gptv3-new-badge,
    .gptv3-card-name .gptv3-lightning-badge {
        display: none;
    }

    /* Hide the install-pays info chip on mobile — its own line on a
       narrow card was wasted space. The same data still shows in the
       expanded card details. */
    .gptv3-card-install-pays {
        display: none;
    }
}

@media (max-width: 480px) {
    .gptv3-card-logo {
        width: 36px;
        height: 36px;
    }

    .gptv3-card-name {
        font-size: 13px;
    }

    .gptv3-card-amount {
        font-size: 16px;
    }
}

/* ==========================================================================
   PRESERVED: LEGACY BADGE STYLES (used by detail pages + card JS rendering)
   ========================================================================== */

.gpt_badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.gpt_badge a {
    display: inline-flex;
    align-items: center;
    color: var(--primary-blue) !important;
    text-decoration: underline !important;
}

.gpt_badge a:hover {
    color: var(--primary-blue-dark) !important;
}

.gpt_badge span[class*="_image"] {
    text-decoration: none !important;
}

.offerwall-badge {
    display: inline-block;
    font-size: 11px;
    color: var(--gptv3-gray-500);
    font-weight: 500;
}

/* RECOMMENDED badge (legacy, used in JS) */
.gpt-rec-badge {
    display: inline-block;
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.gpt-boosted-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.gpt-ath-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f1c40f, #d4ac0d);
    color: #333;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    text-transform: uppercase;
    vertical-align: middle;
}

.gpt-money-maker-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

.gpt-money-maker-repeatable {
    background: linear-gradient(135deg, #059669, #047857);
    animation: pulse-profit 2s ease-in-out infinite;
}

@keyframes pulse-profit {
    0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4); }
}

.new-offer-badge {
    display: inline-block;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ==========================================================================
   PRESERVED: PLATFORM ICONS
   ========================================================================== */

.platform-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.platform-ios {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="512" width="512"><rect width="512" height="512" fill="%23555" rx="15%25"/><path fill="%23f2f2f2" d="M410 334s-10 29-30 59c-5 9-29 43-58 43-21 0-35-15-62-15-33 0-46 15-67 15-11 1-22-5-34-16-77-73-81-181-52-225 18-29 48-47 81-48 26 0 54 17 65 17 8 0 50-20 74-18 33 3 56 15 73 38-49 24-66 117 10 150zM329 56c8 32-27 93-79 90-3-43 34-87 79-90z"/></svg>');
}

.platform-android {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="512" width="512"><rect width="512" height="512" rx="15%25" fill="%23a4c639"/><g stroke="%23fff" stroke-linecap="round"><path stroke-width="58" d="M107 212v106m299-106v106m-107 66v56m-85-56v56"/><path stroke-width="8" d="M203 88l-17-32m123 32l18-32"/></g><path fill="%23fff" d="M257 76c-76 0-115 60-115 105h229c0-47-42-104-114-105zM142 191v164c0 16 13 29 28 29h172c16 0 29-13 29-29V191z"/><g fill="%23a4c639"><circle cx="204" cy="130" r="9"/><circle cx="309" cy="130" r="9"/></g></svg>');
}

.platform-desktop {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="512" width="512"><rect width="512" height="512" rx="15%25" fill="%23666"/><rect x="64" y="96" width="384" height="256" rx="16" fill="%23fff"/><rect x="80" y="112" width="352" height="200" fill="%23333"/><rect x="208" y="368" width="96" height="16" rx="8" fill="%23fff"/><rect x="160" y="384" width="192" height="48" rx="24" fill="%23fff"/></svg>');
}

/* Heat Indicator */
.heat-indicator {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    margin-right: 6px;
    padding: 2px;
}

.heat-bar {
    width: 4px;
    background: #ddd;
    border-radius: 1px;
}

.heat-bar.active {
    background: currentColor;
}

.heat-very-hot { color: #e74c3c; }
.heat-hot { color: #f39c12; }
.heat-steady { color: #27ae60; }
.heat-cold { color: #95a5a6; }

/* Completions */
.completions-24h { font-weight: 600; color: #555; }
.completions-divider { color: #aaa; }
.completions-7d { font-weight: 500; color: #888; }
.completions-period { font-size: 11px; color: #888; }

/* ==========================================================================
   PRESERVED: DETAIL PAGE STYLES (gptos_offer_display_shortcode)
   Everything below is used by the individual offer detail pages and must
   remain intact for /gpt-search-engine/?offer_slug=xxx pages.
   ========================================================================== */

/* Container */
.gpt-offer-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Card */
.offer-hero-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    margin-bottom: 24px;
}

.header-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.header-section .offer-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Top sites section (detail page) */
.top-sites-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
}

.top-sites-label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

.top-sites-list {
    display: flex;
    gap: 12px;
    align-items: center;
}

.top-site-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.top-site-link:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.top-site-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    color: #fff !important;
}

.top-site-rank-1 { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.top-site-rank-2 { background: linear-gradient(135deg, #2980b9, #3498db); }
.top-site-rank-3 { background: linear-gradient(135deg, #8e44ad, #9b59b6); }

.top-site-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    color: #fff !important;
    text-decoration: none !important;
}

/* Detail cards */
.offer-details-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.detail-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: var(--text-dark);
    min-width: 120px;
    font-size: 14px;
}

.detail-value {
    color: #555;
    font-size: 14px;
    flex: 1;
}

/* Task payouts section (detail page) */
.task-payouts-section {
    margin: 30px 0;
}

.task-payouts-section h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 24px;
    border-bottom: 2px solid var(--success-green);
    padding-bottom: 8px;
}

.task-payouts-table {
    margin-top: 0;
}

.task-payouts-table h4 {
    color: var(--text-dark);
    margin-bottom: 6px;
    font-size: 18px;
}

.payouts-grid {
    display: grid;
    gap: 1px;
    background-color: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    font-size: 16px;
}

.payouts-header {
    display: contents;
}

.task-payouts-table .payouts-grid .task-header,
.task-payouts-table .payouts-grid .site-header {
    background: var(--table-header) !important;
    color: white !important;
    padding: 12px 6px !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
}

.task-payouts-table .payouts-grid .task-header {
    text-align: left !important;
    justify-content: flex-start !important;
}

.payout-row {
    display: contents;
}

.task-name, .task-payout {
    background: white;
    padding: 6px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}

.task-name {
    text-align: left;
    font-size: 14px;
    line-height: 1.3;
}

.task-payout {
    text-align: center;
    font-weight: bold;
    color: var(--success-green);
    font-size: 15px;
}

.payout-row:nth-child(even) .task-name,
.payout-row:nth-child(even) .task-payout {
    background-color: var(--background-light);
}

.site-header-name {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.task-payouts-table .payouts-grid [class*="_image"],
.task-payouts-table .payouts-grid .site-header [class*="_image"] {
    width: 32px !important;
    height: 32px !important;
    margin: 0 6px 0 0 !important;
    display: block !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Site buttons row */
.site-buttons-row { display: contents; }

.task-button-spacer {
    background: #f8f9fa !important;
    padding: 6px !important;
    border-bottom: 1px solid #eee !important;
}

.site-button-cell {
    background: #f8f9fa !important;
    padding: 6px 4px !important;
    text-align: center !important;
    border-bottom: 1px solid #eee !important;
}

.desktop-site-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid #27ae60 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.desktop-site-btn:hover {
    background: linear-gradient(135deg, #229954, #27ae60) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.desktop-site-btn [class*="_image"] {
    width: 20px !important;
    height: 20px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Sites overview */
.sites-overview {
    margin: 30px 0;
}

.sites-overview h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 24px;
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: 8px;
}

.sites-grid {
    display: grid;
    gap: 1px;
    background: var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.sites-grid-header, .sites-grid-row {
    display: contents;
}

/* Single site display */
.single-site-info {
    margin: 30px 0;
}

.single-site-info h4 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Compact sites table */
.compact-sites-table { margin-top: 0; }

/* Payout chart */
.payout-chart-section {
    margin: 30px 0;
}

.payout-chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.payout-chart-info {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 12px;
}

/* Country flags */
.country-flag {
    font-size: 16px;
    margin-right: 2px;
}

.more-countries {
    font-size: 12px;
    color: var(--text-muted);
}

/* Content section */
.content-section {
    margin: 20px 0;
}

/* Site link styles (used in detail pages) */
.site-link {
    color: var(--primary-blue) !important;
    text-decoration: underline !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.site-link:hover {
    color: var(--primary-blue-dark) !important;
}

/* Signup buttons (detail pages) */
.signup-btn {
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #27ae60 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.signup-btn:hover {
    background: linear-gradient(135deg, #229954, #27ae60) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Load more sites link */
.load-more-sites {
    text-align: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
}

.load-more-btn {
    color: var(--primary-blue) !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid var(--primary-blue);
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-block;
}

.load-more-btn:hover {
    background: var(--primary-blue);
    color: white !important;
}

/* Money maker details */
.money-maker-details {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}

.money-maker-details h4 {
    color: #166534;
    font-size: 16px;
    margin: 0 0 8px 0;
}

.money-maker-intro {
    color: #166534;
    font-size: 13px;
    margin: 0 0 12px 0;
    opacity: 0.85;
}

.money-maker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.money-maker-task {
    background: white;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
}

.mm-task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mm-task-name {
    font-size: 13px;
    color: #1e293b;
    flex: 1;
    min-width: 120px;
}

.mm-task-calc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.mm-cost { color: #dc2626; }
.mm-arrow { color: #94a3b8; }
.mm-reward { color: #059669; }
.mm-equals { color: #94a3b8; }
.mm-profit {
    color: white;
    background: #059669;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.mm-task-repeatable {
    border-color: #34d399;
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
}

.mm-repeat-info {
    font-size: 12px;
    color: #047857;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #bbf7d0;
}

/* ==========================================================================
   PRESERVED: USER FEEDBACK SECTION (Voting & Comments)
   ========================================================================== */

.offer-feedback-section {
    margin-top: 30px;
}

.feedback-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.feedback-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 14px;
}

.vote-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

.vote-btn:hover:not(:disabled) {
    border-color: #bbb;
    background: #f8f9fa;
}

.vote-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.vote-btn.vote-up.active {
    background: #e8f5e9;
    border-color: var(--success-green);
    color: var(--success-green);
}

.vote-btn.vote-down.active {
    background: #ffebee;
    border-color: #e53935;
    color: #e53935;
}

.vote-icon { font-size: 18px; }
.vote-count { font-size: 13px; color: var(--text-muted); }

.completion-rate { margin-top: 12px; }

.rate-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.rate-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-green), #2ecc71);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.rate-text {
    font-size: 13px;
    color: var(--text-muted);
}

.login-prompt {
    font-size: 14px;
    color: var(--text-muted);
    margin: 12px 0 0 0;
}

.login-prompt a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.comments-list { margin-bottom: 20px; }

.no-comments {
    color: var(--text-muted);
    font-style: italic;
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
}

.comment-item {
    padding: 14px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.comment-author { font-weight: 600; color: var(--text-dark); font-size: 14px; }
.comment-time { font-size: 12px; color: var(--text-light); }
.comment-text { font-size: 14px; color: var(--text-dark); line-height: 1.5; }

.comment-form { margin-top: 16px; }

.comment-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.comment-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.char-count { font-size: 12px; color: var(--text-light); }

.comment-submit-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary-blue), #0091ea);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-blue-dark), var(--primary-blue));
    transform: translateY(-1px);
}

.comment-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .feedback-card { padding: 16px; }
    .vote-buttons { flex-direction: column; }
    .vote-btn { width: 100%; justify-content: center; }
    .comment-form-footer { flex-direction: column; gap: 10px; align-items: stretch; }
    .char-count { text-align: right; }
    .comment-submit-btn { width: 100%; }

    /* Detail page mobile */
    .top-sites-section {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .task-payouts-section h3,
    .sites-overview h3 {
        font-size: 20px;
    }

    .mm-task-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .money-maker-details { padding: 12px; }
}

/* ==========================================================================
   PRESERVED: FULL PAGE PAYOUTS GRID
   ========================================================================== */

.full-payouts-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
    border-radius: 8px;
    background: white;
}

.payouts-grid-full {
    display: grid;
    gap: 1px;
    background-color: var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    font-size: 16px;
    min-width: 800px;
}

.payouts-grid-full .payouts-header { display: contents; }

.payouts-grid-full .task-header,
.payouts-grid-full .site-header {
    background: var(--table-header) !important;
    color: white !important;
    padding: 15px 8px !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
}

.payouts-grid-full .task-header {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 15px !important;
}

.payouts-grid-full .payout-row { display: contents; }

.payouts-grid-full .task-name,
.payouts-grid-full .task-payout {
    background: white;
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.payouts-grid-full .task-name {
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
    padding-left: 15px;
}

.payouts-grid-full .task-payout {
    text-align: center;
    font-weight: bold;
    color: var(--success-green);
    justify-content: center;
}

.payouts-grid-full .payout-row:nth-child(even) .task-name,
.payouts-grid-full .payout-row:nth-child(even) .task-payout {
    background-color: var(--background-light);
}

.payouts-grid-full .site-buttons-row { display: contents; }

.payouts-grid-full .task-button-spacer {
    background: #e9ecef !important;
    padding: 10px !important;
    border-top: 2px solid var(--border-color) !important;
}

.payouts-grid-full .site-button-cell {
    background: #e9ecef !important;
    padding: 10px 8px !important;
    text-align: center !important;
    border-top: 2px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.payouts-grid-full [class*="_image"] {
    width: 24px !important;
    height: 24px !important;
    margin-right: 6px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Sites table (detail page) */
.sites-table-full {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sites-table-full th {
    background: var(--table-header);
    color: white;
    padding: 15px 12px;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

.sites-table-full td {
    padding: 15px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    font-size: 14px;
}

.sites-table-full tr:nth-child(even) { background-color: var(--background-light); }
.sites-table-full tr:hover { background-color: #e3f2fd; }

/* Ranking styles */
.rank-cell { font-weight: bold; text-align: center; font-size: 16px; }
.rank-gold { color: #ffd700; }
.rank-silver { color: #c0c0c0; }
.rank-bronze { color: #cd7f32; }
.site-cell { min-width: 150px; }
.payout-cell { text-align: center; font-weight: bold; color: var(--success-green); font-size: 16px; }
.join-cell { text-align: center; min-width: 120px; }

/* Offer meta info */
.offer-meta-info {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background: var(--background-light);
    border-radius: 8px;
    border-left: 4px solid var(--primary-blue);
}

.meta-item { display: flex; align-items: center; gap: 8px; }
.meta-label { font-weight: 600; color: var(--text-dark); font-size: 14px; }
.meta-value { display: flex; align-items: center; gap: 4px; }

@media (max-width: 768px) {
    .payouts-grid-full {
        font-size: 12px;
        min-width: 600px;
    }
    .payouts-grid-full .task-header,
    .payouts-grid-full .site-header {
        padding: 8px 4px !important;
        font-size: 11px !important;
        min-height: 40px !important;
    }
    .payouts-grid-full .task-name,
    .payouts-grid-full .task-payout {
        padding: 8px 4px;
        font-size: 12px;
    }
    .sites-table-full th,
    .sites-table-full td {
        padding: 8px 6px;
    }
    .offer-meta-info {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* Help Bar */
.gptv3-help-bar {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    color: #334155;
    margin-bottom: 12px;
}

.gptv3-help-bar a {
    color: #2C5282;
    font-weight: 600;
    text-decoration: none;
}

.gptv3-help-bar a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   DESKTOP SIDEBAR LAYOUT
   ========================================================================== */

/* Sidebar hidden by default (mobile) */
.gptv3-sidebar {
    display: none;
}

@media (min-width: 901px) {
    /* No max-width / padding here — defer to whatever wrapper the
       plugin is dropped into. The dedicated tool template
       (template-offer-search-tool.php) already provides a 1280px
       container with 32px padding, so re-capping here was leaving the
       layout ~80px narrower than the cashback tool's equivalent and
       wasting horizontal space on desktop. Mirrors gptmc-layout. */
    .gptv3-layout {
        display: flex;
        gap: 32px;
        align-items: flex-start;
    }

    .gptv3-search-panel {
        flex: 1;
        min-width: 0;
    }

    .gptv3-sidebar {
        display: block;
        width: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 32px;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .gptv3-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .gptv3-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .gptv3-sidebar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    .gptv3-sidebar::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Hide inline bonuses on desktop - they're in the sidebar */
    .gptv3-bonuses {
        display: none;
    }

    /* Hide the filter modal trigger and modal on desktop - filters are in sidebar */
    .gptv3-filter-modal {
        display: none;
    }
}

/* Sidebar filter fields */
.gptv3-sidebar-filter-field {
    margin-bottom: 12px;
}

.gptv3-sidebar-filter-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gptv3-gray-500);
    margin-bottom: 4px;
}

.gptv3-sidebar-filter-field select {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 6px;
    background: #fff;
    color: var(--gptv3-gray-700);
    cursor: pointer;
}

.gptv3-sidebar-filter-field select:focus {
    outline: none;
    border-color: var(--gptv3-navy);
}

.gptv3-sidebar-reset {
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 6px;
    background: var(--gptv3-gray-50);
    color: var(--gptv3-gray-600);
    cursor: pointer;
}

.gptv3-sidebar-reset:hover {
    background: var(--gptv3-gray-100);
}

/* Sidebar sections */
.gptv3-sidebar-section {
    background: #fff;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.gptv3-sidebar-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gptv3-gray-500);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gptv3-gray-200);
}

/* Sidebar recommended sites */
.gptv3-sidebar-site {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 1px solid var(--gptv3-gray-100);
    transition: background 0.15s;
}

.gptv3-sidebar-site:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.gptv3-sidebar-site:first-of-type {
    padding-top: 0;
}

.gptv3-sidebar-site img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: contain;
}

.gptv3-sidebar-site-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gptv3-sidebar-site-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gptv3-gray-700);
}

.gptv3-sidebar-site-bonus {
    font-size: 11px;
    color: var(--gptv3-success);
    font-weight: 500;
}

/* Sidebar Gemsloot offers */
.gptv3-sidebar-offer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 1px solid var(--gptv3-gray-100);
}

.gptv3-sidebar-offer:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.gptv3-sidebar-offer:first-of-type {
    padding-top: 0;
}

.gptv3-sidebar-offer img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

.gptv3-sidebar-offer-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.gptv3-sidebar-offer-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gptv3-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gptv3-sidebar-offer-device {
    font-size: 10px;
    color: var(--gptv3-gray-500);
}

.gptv3-sidebar-offer-payout {
    font-size: 13px;
    font-weight: 700;
    color: var(--gptv3-success);
    white-space: nowrap;
}

.gptv3-sidebar-more {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gptv3-navy);
    text-decoration: none;
}

.gptv3-sidebar-more:hover {
    text-decoration: underline;
}

/* Sidebar quick links */
.gptv3-sidebar-link {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--gptv3-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gptv3-gray-100);
}

.gptv3-sidebar-link:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gptv3-sidebar-link:first-child {
    padding-top: 0;
}

.gptv3-sidebar-link:hover {
    color: var(--gptv3-navy-dark);
}

/* ==========================================================================
   FULLSCREEN MODE
   ========================================================================== */

/* Fullscreen button - styled as region pill */
.gptv3-fullscreen-btn {
    cursor: pointer;
    gap: 4px;
}

/* Hide on mobile */
@media (max-width: 768px) {
    .gptv3-fullscreen-btn {
        display: none !important;
    }
}

/* Show expand icon/text, hide collapse icon/text by default */
.gptv3-fs-collapse {
    display: none;
}

/* Fullscreen active state */
body.gptv3-fullscreen {
    overflow: hidden;
}

body.gptv3-fullscreen .site-header,
body.gptv3-fullscreen .scrimpr-sticky-nav,
body.gptv3-fullscreen #wpadminbar {
    display: none !important;
}

body.gptv3-fullscreen .gptv3-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #fff;
    overflow-y: auto;
    padding: 16px 32px;
}

/* Fullscreen header bar */
.gptv3-fs-header {
    display: none;
}

body.gptv3-fullscreen .gptv3-fs-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gptv3-gray-200);
}

.gptv3-fs-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.gptv3-fs-logo img {
    height: 28px;
    width: auto;
}

.gptv3-fs-header-pills {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.gptv3-fs-pill {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--gptv3-gray-500);
    border: 1px solid var(--gptv3-gray-200);
    transition: all 0.15s;
}

.gptv3-fs-pill:hover {
    color: var(--gptv3-gray-700);
    border-color: var(--gptv3-gray-300);
    text-decoration: none;
}

.gptv3-fs-pill.active {
    background: #2C5282;
    color: #fff;
    border-color: #2C5282;
}

/* Exit fullscreen button */
.gptv3-exit-fullscreen {
    display: none;
}

body.gptv3-fullscreen .gptv3-exit-fullscreen {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: none;
    border: 1px solid var(--gptv3-gray-200);
    border-radius: 20px;
    color: var(--gptv3-gray-500);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

body.gptv3-fullscreen .gptv3-exit-fullscreen:hover {
    color: var(--gptv3-gray-700);
    border-color: var(--gptv3-gray-300);
}

body.gptv3-fullscreen .gptv3-exit-fullscreen:hover {
    background: #1a365d;
}

/* Bigger search input in fullscreen */
body.gptv3-fullscreen .gptv3-search-input {
    font-size: 16px;
    padding: 14px 16px;
}

/* Swap icons in fullscreen */
body.gptv3-fullscreen .gptv3-fs-expand {
    display: none;
}

body.gptv3-fullscreen .gptv3-fs-collapse {
    display: inline;
}

/* Results-summary row — wraps the count + secondary "Filters/Sort"
   button so they share a line. On desktop the button is hidden (the
   sidebar carries filters); on mobile the button is right-aligned
   and opens the same filter modal as the sticky-header funnel icon. */
.gptv3-results-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px 0;
}

/* Secondary Filters/Sort button — pill with funnel icon + text +
   active-count badge. Mobile only. Mirrors the existing badge state
   (.gptv3-filter-badge updates from the same updateMobileFilterBadge
   function). */
.gptv3-results-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--gptv3-gray-300, #d1d5db);
    border-radius: 999px;
    background: #fff;
    color: var(--gptv3-gray-700, #334155);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
    margin-left: auto;
}

.gptv3-results-filter-btn:hover,
.gptv3-results-filter-btn:focus-visible {
    background: var(--gptv3-gray-50, #f8fafc);
    border-color: var(--gptv3-navy, #2C5282);
    color: var(--gptv3-navy, #2C5282);
    outline: none;
}

.gptv3-results-filter-btn .gptv3-filter-badge {
    position: static;
    margin-left: 2px;
}

@media (max-width: 768px) {
    .gptv3-results-filter-btn {
        display: inline-flex;
    }
}

/* Results summary — sits as the LEFT flex child of .gptv3-results-row
   on mobile (button on the right). On desktop the button is hidden
   so the summary takes the full row. Reframes the visible cards as
   a slice of the directory ("All 2,842 cashback offers" / "14 of
   2,842 cashback offers match 'royal match'") — mirrors the
   cashback tool's gptmc-results-summary. */
.gptv3-results-summary {
    font-size: 16px;
    font-weight: 600;
    color: var(--gptv3-gray-700, #334155);
    line-height: 1.3;
    margin: 0;
    padding: 0 4px;
    /* Allow shrinking when the actions row is wide; ellipsis if it gets
       too long for the available width. */
    min-width: 0;
    flex: 1 1 auto;
}
@media (max-width: 768px) {
    .gptv3-results-summary {
        font-size: 15px;
        /* No horizontal override — search-panel parent provides the
           8px gutter; the desktop 4px padding still applies for tiny
           visual breathing room. */
    }
}

/* Disclosure note above the card list — small italic gray line, always
   visible regardless of search/filter state. Carries the inline
   "How this tool is funded" link at the end of the sentence. Mirrors
   the cashback tool's gptmc-independence-note pattern. */
.gptv3-independence-note {
    font-size: 11px;
    color: var(--gptv3-gray-500, #64748b);
    line-height: 1.4;
    margin: 0 0 12px 0;
    padding: 0 4px;
    font-style: italic;
}
@media (max-width: 768px) {
    /* Drop the 12px horizontal margin override — search-panel parent
       now gives 8px gutter, and the desktop 4px padding still applies. */
    .gptv3-independence-note { margin: 0 0 10px 0; }
}

/* Inline funded link — plain underlined text, NOT a button-with-?-icon.
   The global scrimpr-disclosure-button class adds a "?" via ::after and
   a block-style display; we override with !important. */
.gptv3-independence-note .gptv3-independence-funded {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    font-style: italic !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer;
    width: auto !important;
    min-width: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.gptv3-independence-note .gptv3-independence-funded::before,
.gptv3-independence-note .gptv3-independence-funded::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
}
.gptv3-independence-note .gptv3-independence-funded:hover,
.gptv3-independence-note .gptv3-independence-funded:active,
.gptv3-independence-note .gptv3-independence-funded:focus {
    color: var(--gptv3-gray-700, #334155) !important;
}