/* --- Brand Offers Feed v2.2.1 --- */
/* v2.2.1: Sticky header fix: compact single-row stuck state, no more clipping */
/* v2.2.0: Revenue-safe code masking, single CTA per card, focus_link support */
/* v2.1.0: Hero dramatic visual, Code/Sale differentiation, Typography hierarchy, Live timestamps */
/* Color intent: Green = money/savings ONLY. Navy = trust. Amber = urgency/time. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Primary: Green — ONLY for discount values and primary CTA */
    --bof-accent:        #00C896;
    --bof-accent-dark:   #00A67D;
    --bof-accent-light:  #E6FBF5;
    --bof-accent-glow:   rgba(0,200,150,0.15);

    /* Hero: Dark charcoal — premium, trust */
    --bof-hero-bg:       #1a2332;
    --bof-hero-bg-grad:  linear-gradient(145deg, #1e2a3a 0%, #141c28 100%);
    --bof-hero-text:     #ffffff;
    --bof-hero-text-sec: #b0bec5;
    --bof-hero-border:   rgba(0,200,150,0.4);
    --bof-hero-glow:     0 8px 32px rgba(0,200,150,0.15), 0 4px 16px rgba(0,0,0,0.2);

    /* Secondary: Navy/Charcoal — trust, status, navigation */
    --bof-trust:         #2d3a4a;
    --bof-trust-light:   #eef1f5;
    --bof-trust-dark:    #1e2a38;
    --bof-trust-mid:     #4a5b6e;

    /* Tertiary: Amber — urgency, time-sensitivity */
    --bof-urgency:       #f59e0b;
    --bof-urgency-light: #fef3c7;
    --bof-urgency-dark:  #d97706;

    /* Sale card accent: muted green — same hue family as primary, but subtler */
    --bof-sale-accent:     #64748b;
    --bof-sale-accent-dark:#475569;
    --bof-sale-accent-light:#f1f5f9;

    /* Neutrals */
    --bof-card-bg:       #ffffff;
    --bof-border:        #e0e7ee;
    --bof-border-code:   #c8d5e0;
    --bof-border-sale:   #e2e8f0;
    --bof-text:          #1a2332;
    --bof-text-sec:      #5c6a7f;
    --bof-text-muted:    #8b97a8;
    --bof-code-color:    #00A67D;
    --bof-code-bg:       #f5f8fa;
    --bof-expired-text:  #5c6a7f;
    --bof-expired-bg:    #fafbfc;
    --bof-expired-opacity: 0.6;
    --bof-shadow:        0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
    --bof-shadow-hover:  0 4px 16px rgba(0,0,0,0.10);
    --bof-radius:        16px;
    --bof-tr:            0.2s ease;
}

/* =====================================================================
   WRAPPER
   ===================================================================== */
.bof-wrapper {
    margin: 24px auto;
    max-width: 640px;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color: var(--bof-text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* =====================================================================
   STICKY CONTROLS (pills + sort)

   Architecture:
   - Normal: two-row layout (pills row + sort row), sticky with transparent bg
   - Stuck: compact SINGLE-row (~44px), pills shrink, sort shows icon-only,
            frosted glass bg + shadow. Transforms via .bof-controls-stuck class.
   - The sentinel + IntersectionObserver pattern detects scroll position.
   - IMPORTANT: padding is set here with !important to prevent mobile overrides.
   ===================================================================== */
.bof-controls-sentinel {
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

.bof-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 1rem !important;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.25s ease, padding 0.25s ease, gap 0.25s ease;
}

/* --- Stuck state: compact single-row with shadow --- */
.bof-controls-stuck {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 1rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

/* WordPress admin bar offset: 32px desktop, 46px mobile */
.admin-bar .bof-controls {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .bof-controls {
        top: 46px;
    }
}

/* =====================================================================
   FILTER PILLS
   ===================================================================== */
.bof-filter-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    transition: gap 0.25s ease;
}
.bof-filter-pills::-webkit-scrollbar { display: none; }

.bof-sort-target {
    flex-shrink: 0;
}

.bof-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1.5px solid var(--bof-border);
    background: var(--bof-card-bg);
    color: #6b7280;
    font-size: 0.825rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                padding 0.25s ease, font-size 0.25s ease, min-height 0.25s ease;
    white-space: nowrap;
    min-height: 38px;
    line-height: 1.4;
}

.bof-pill:hover {
    border-color: var(--bof-accent);
    color: var(--bof-accent-dark);
    background: var(--bof-accent-light);
}

.bof-pill.active {
    background: var(--bof-accent);
    color: #fff;
    border-color: var(--bof-accent);
    font-weight: 600;
}

.bof-pill.active:hover {
    background: var(--bof-accent-dark);
    border-color: var(--bof-accent-dark);
    color: #fff;
}

.bof-pill-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.bof-pill-count {
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.bof-pill.active .bof-pill-count {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.bof-pill:not(.active) .bof-pill-count {
    background: #eef2f6;
    color: #8b97a8;
}

/* --- Stuck state: compact pills --- */
.bof-controls-stuck .bof-pill {
    padding: 5px 12px;
    font-size: 0.75rem;
    min-height: 32px;
    gap: 4px;
}

.bof-controls-stuck .bof-pill-count {
    padding: 1px 5px;
    font-size: 0.6rem;
}

.bof-controls-stuck .bof-filter-pills {
    gap: 6px;
}

/* --- Stuck state: compact sort pill (card-sort-shared) --- */
.bof-controls-stuck .cs-sort-pill {
    padding: 5px 10px;
    font-size: 0.75rem;
}

/* In stuck state, hide sort label text (show icon + caret only) */
.bof-controls-stuck .cs-pill-label {
    display: none;
}

/* Ensure sort panel still opens properly when stuck */
.bof-controls-stuck .cs-sort-wrapper {
    position: relative;
}

/* Sort panel must overflow above the compact bar */
.bof-controls-stuck {
    overflow: visible !important;
}

/* =====================================================================
   CARDS CONTAINER
   ===================================================================== */
.bof-active-container,
.bof-expired-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

/* =====================================================================
   CODE CARD — dashed "coupon cut-out" border (the coupon metaphor)
   ===================================================================== */
.bof-card.bof-type-code {
    background: var(--bof-card-bg);
    border: 1.5px dashed var(--bof-border-code);
    border-radius: var(--bof-radius);
    box-shadow: var(--bof-shadow);
    padding: 16px;
    transition: transform var(--bof-tr), box-shadow var(--bof-tr);
}

.bof-card.bof-type-code.active:hover {
    transform: translateY(-2px);
    box-shadow: var(--bof-shadow-hover);
}

/* =====================================================================
   SALE CARD — clean solid border, NO dashed border, distinct from codes
   ===================================================================== */
.bof-card.bof-type-sale {
    background: var(--bof-card-bg);
    border: 1px solid var(--bof-border-sale);
    border-left: 3px solid #94a3b8;
    border-radius: var(--bof-radius);
    box-shadow: var(--bof-shadow);
    padding: 20px 24px;
    transition: transform var(--bof-tr), box-shadow var(--bof-tr);
    position: relative;
    overflow: hidden;
}

.bof-card.bof-type-sale.active:hover {
    transform: translateY(-3px);
    box-shadow: var(--bof-shadow-hover);
}

/* =====================================================================
   HERO TIER — DRAMATIC: dark charcoal background, large, premium
   The hero MUST stop the scroll. It's a completely different visual universe.
   ===================================================================== */
.bof-card.bof-tier-hero {
    background: var(--bof-hero-bg-grad) !important;
    border: 2px solid var(--bof-hero-border) !important;
    border-left: 5px solid var(--bof-accent) !important;
    box-shadow: var(--bof-hero-glow) !important;
    padding: 32px !important;
    border-radius: 20px !important;
    position: relative;
}

/* Override text colors for dark hero background */
.bof-tier-hero .bof-source,
.bof-tier-hero .bof-verified {
    color: var(--bof-hero-text-sec) !important;
}

.bof-tier-hero .bof-tagline,
.bof-tier-hero .bof-headline {
    color: var(--bof-hero-text) !important;
}

.bof-tier-hero .bof-expiry {
    color: var(--bof-hero-text-sec) !important;
}

.bof-tier-hero .bof-type-icon {
    color: var(--bof-hero-text-sec) !important;
}

.bof-tier-hero .bof-card-footer {
    border-top-color: rgba(255,255,255,0.1) !important;
}

.bof-tier-hero .bof-cta-row {
    border-top-color: rgba(255,255,255,0.1) !important;
}

.bof-tier-hero .bof-toggle-info {
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--bof-hero-text-sec) !important;
}

.bof-tier-hero .bof-toggle-info:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: var(--bof-hero-text) !important;
}

.bof-tier-hero .bof-vote-btn {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--bof-hero-text-sec) !important;
}

.bof-tier-hero .bof-vote-btn:hover:not(:disabled):not(.voted) {
    background: rgba(255,255,255,0.12) !important;
}

/* Hero discount text: HUGE, glowing green on dark */
.bof-tier-hero .bof-discount-hero {
    font-size: clamp(2.25rem, 10vw, 3.5rem) !important;
    color: var(--bof-accent) !important;
    text-shadow: 0 0 30px rgba(0,200,150,0.3);
    margin: 8px 0 16px 0 !important;
}

/* Hero extra info */
.bof-tier-hero .bof-extra-info {
    background: rgba(255,255,255,0.05) !important;
    border-top-color: rgba(255,255,255,0.08) !important;
    color: var(--bof-hero-text-sec) !important;
    margin: 16px -32px -32px -32px !important;
    padding: 18px 28px !important;
    border-radius: 0 0 18px 18px !important;
}

/* Hero success rate pill */
.bof-tier-hero .bof-success-rate {
    background: rgba(0,200,150,0.12) !important;
    border-color: rgba(0,200,150,0.25) !important;
    color: var(--bof-accent) !important;
}

/* Hero BHI chips */
.bof-tier-hero .bhi-chip {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--bof-hero-text-sec) !important;
}

/* =====================================================================
   EXPIRED STATE (both types)
   ===================================================================== */
.bof-card.expired {
    border-color: var(--bof-border) !important;
    border-left-color: var(--bof-border) !important;
    opacity: var(--bof-expired-opacity);
    background: var(--bof-expired-bg) !important;
}

.bof-card.bof-type-code.expired {
    border-style: dashed;
}

.bof-card.bof-type-sale.expired {
    border-left-width: 1px;
}

.bof-card.expired:hover {
    transform: none;
    box-shadow: var(--bof-shadow);
}

.bof-card.expired .bof-source,
.bof-card.expired .bof-tagline,
.bof-card.expired .bof-expiry,
.bof-card.expired .bof-headline,
.bof-card.expired .bof-toggle-info {
    color: var(--bof-expired-text);
}

.bof-card.expired .bof-discount-hero {
    color: var(--bof-expired-text);
    opacity: 0.5;
}

.bof-card.expired .bof-activate-offer {
    background: linear-gradient(135deg, #a8b3c0 0%, #8b97a8 100%) !important;
    box-shadow: none !important;
}

.bof-card.expired .bof-activate-offer:hover {
    transform: none;
}

.bof-card.expired .bof-verified,
.bof-card.expired .bof-success-rate {
    display: none;
}

/* =====================================================================
   SHARED CARD ELEMENTS
   ===================================================================== */

/* --- Card Header (source + verified + badge) --- */
.bof-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.bof-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bof-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Source label --- */
.bof-source {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bof-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.bof-source.source-web::before { content: '\1F310 '; font-size: 0.65rem; }
.bof-source.source-user::before { content: '\1F464 '; font-size: 0.65rem; }

/* --- Verified label (populated by JS) --- */
.bof-verified {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

.bof-verified::before {
    content: '\00B7';
    margin: 0 6px;
    color: #9ca3af;
    font-weight: 600;
}

/* When verified label is alone (no source text), skip the dot separator */
.bof-verified.bof-verified-solo::before {
    content: none;
    margin: 0;
}

/* --- Updated/Live status indicator (replaces [2026] dates) --- */
.bof-live-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bof-accent-dark);
    white-space: nowrap;
}

.bof-live-dot {
    width: 6px;
    height: 6px;
    background: var(--bof-accent);
    border-radius: 50%;
    display: inline-block;
    animation: bof-pulse-dot 2s ease-in-out infinite;
}

@keyframes bof-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Success rate pill --- */
.bof-success-rate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0fdf9;
    border: 1px solid rgba(0,200,150,0.2);
    color: #059669;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
    line-height: 1.3;
}

.bof-success-rate .bof-icon {
    color: #059669;
}

/* --- Badges --- */
.bof-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.bof-popular-badge {
    background: var(--bof-trust-light);
    color: var(--bof-trust-mid);
    border: 1px solid rgba(45,58,74,0.15);
}

.bof-expired-badge {
    background: #f5f5f5;
    color: var(--bof-expired-text);
    border: 1px solid #e0e0e0;
}

.bof-urgency-badge {
    background: var(--bof-urgency-light);
    color: var(--bof-urgency-dark);
    border: 1px solid rgba(245,158,11,0.3);
    font-weight: 700;
}

.bof-sale-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(45,55,72,0.2);
}

/* Hero badge: gold/amber gradient — premium feel */
.bof-hero-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 5px 14px;
    box-shadow: 0 2px 8px rgba(245,158,11,0.35);
    letter-spacing: 0.5px;
}

/* =====================================================================
   DISCOUNT HERO — THE dominant visual element
   Must be 3x the body text size. This is the star of every card.
   ===================================================================== */
.bof-discount-hero {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 900;
    color: var(--bof-accent);
    margin: 4px 0 8px 0;
    line-height: 1.0;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   TYPE ICON (scissors / external link SVG)
   ===================================================================== */
.bof-type-icon {
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    margin-right: 8px;
    flex-shrink: 0;
}

.bof-icon {
    vertical-align: middle;
    flex-shrink: 0;
}

.bof-cta-icon-external {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

/* =====================================================================
   CODE REVEAL BUTTON STATES
   The code CTA is a <button> that starts with masked code (e.g. PAD8***).
   On click: reveals full code, copies to clipboard, optionally redirects.
   This prevents revenue leak (user can't see code without clicking).
   ===================================================================== */

/* Revealed state: button shows full code after click */
.bof-reveal-code.bof-code-revealed {
    background: var(--bof-accent-light) !important;
    color: #047857 !important;
    box-shadow: inset 0 0 0 2px var(--bof-accent), 0 2px 8px rgba(0,200,150,0.15) !important;
}

.bof-tier-hero .bof-reveal-code.bof-code-revealed {
    background: rgba(0,200,150,0.15) !important;
    color: var(--bof-accent) !important;
    box-shadow: 0 2px 8px rgba(0,200,150,0.3) !important;
}

/* Revealed code text — monospace, prominent */
.bof-cta-revealed-code {
    font-family: 'SF Mono','Fira Code','Consolas',monospace;
    letter-spacing: 1.5px;
    font-weight: 800;
    font-size: 1.05rem;
}

.bof-cta-copied-label {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 600;
}

/* Copy pulse animation on reveal */
.bof-copy-pulse {
    animation: bof-copy-pulse 0.4s ease;
}

@keyframes bof-copy-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* =====================================================================
   SALE CONTENT
   ===================================================================== */
.bof-sale-content {
    margin-bottom: 12px;
}

.bof-headline {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bof-text);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.bof-tagline {
    font-size: 0.85rem;
    color: var(--bof-text-sec);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

/* =====================================================================
   CARD FOOTER (source + expiry as small metadata)
   ===================================================================== */
.bof-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #eef2f6;
}

.bof-footer-left { display: flex; align-items: center; gap: 8px; }
.bof-footer-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bof-expiry {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--bof-text-muted);
}

/* Expiry urgency: offers expiring within 72 hours */
.bof-expiry-urgent .bof-expiry {
    color: var(--bof-urgency-dark);
    font-weight: 600;
}
.bof-expiry-urgent .bof-expiry::before {
    content: "\26A0\FE0F ";
    font-size: 0.8em;
}

/* =====================================================================
   VOTE BUTTONS
   ===================================================================== */
.bof-vote-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.bof-vote-btn {
    background: #f5f7f9;
    border: 1px solid #e2e6eb;
    color: var(--bof-text-muted);
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--bof-tr);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: inherit;
}

.bof-vote-btn .vote-count { font-weight: 600; font-size: 0.7rem; }
.bof-vote-btn:hover:not(:disabled):not(.voted) { background: #eef1f4; }
.bof-vote-btn.vote-up:hover:not(:disabled):not(.voted) { color: var(--bof-accent); border-color: var(--bof-accent); }
.bof-vote-btn.vote-down:hover:not(:disabled):not(.voted) { color: #ff6b6b; border-color: #ff6b6b; }
.bof-vote-btn:disabled, .bof-vote-btn.voted { opacity: 0.5; cursor: default; }
.bof-vote-buttons.disabled-voting .bof-vote-btn { opacity: 0.4; cursor: default; }
.bof-vote-buttons.loading .bof-vote-btn { cursor: wait; opacity: 0.3; }

/* =====================================================================
   MORE INFO TOGGLE
   ===================================================================== */
.bof-toggle-info {
    background: none;
    border: 1px solid #e2e6eb;
    color: var(--bof-text-sec);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    transition: all var(--bof-tr);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.bof-toggle-info:hover {
    color: var(--bof-accent);
    border-color: var(--bof-accent);
    background: var(--bof-accent-light);
}

.bof-toggle-info .toggle-arrow {
    font-size: 0.6rem;
    transition: transform var(--bof-tr);
}

.bof-toggle-info[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

/* =====================================================================
   EXTRA INFO / DESCRIPTION
   ===================================================================== */
.bof-extra-info {
    background: #f8fafb;
    padding: 14px 16px;
    margin: 10px -16px -16px -16px;
    border-radius: 0 0 14px 14px;
    border-top: 1px dashed #e0e7ee;
    font-size: 0.85rem;
    color: var(--bof-text-sec);
    line-height: 1.6;
}

.bof-type-sale .bof-extra-info {
    margin: 12px -24px -20px -24px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8fafb 0%, #f3f6f8 100%);
}

.bof-extra-info p:last-child { margin-bottom: 0; }

.bof-no-info {
    font-style: italic;
    opacity: 0.7;
    text-align: center;
    margin: 0;
    color: var(--bof-text-muted);
}

/* =====================================================================
   CTA BUTTON HIERARCHY (single-color system: green only)
   - Hero: Solid filled green (the ONLY filled button)
   - Standard Code: Ghost green — bold 700, ✂ icon, thick inset border
   - Standard Sale: Outlined neutral — bold 700, → icon
   WCAG: text color #047857 on white = 4.8:1 contrast (passes AA)
   IMPORTANT: Uses inset box-shadow instead of CSS border to prevent
   the button-bottom-fade rendering bug (border + border-radius clips
   the bottom in some browsers). Proven fix from CLO plugin v2.0.8.
   ===================================================================== */
.bof-cta-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f6;
}

.bof-activate-offer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 10px;
    border: none !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all var(--bof-tr);
    min-height: 48px;
    cursor: pointer;
    font-family: inherit;
}

/* --- Standard Code CTA: ghost green, BOLD + icon for punch --- */
.bof-activate-offer.bof-cta-code {
    background: #fff;
    color: #047857 !important;
    /* inset box-shadow fakes a 2px green border — prevents bottom-fade bug */
    box-shadow: inset 0 0 0 2px var(--bof-accent), 0 1px 3px rgba(0,200,150,0.08);
}

.bof-activate-offer.bof-cta-code:hover {
    background: var(--bof-accent-light);
    color: #047857 !important;
    box-shadow: inset 0 0 0 2px #047857, 0 3px 10px rgba(0,200,150,0.18);
    transform: translateY(-1px);
}

/* --- Standard Sale CTA: outlined neutral, bold text, still clickable --- */
.bof-activate-offer.bof-cta-sale {
    background: #fff;
    color: #047857 !important;
    /* inset box-shadow fakes a 2px neutral border — prevents bottom-fade bug */
    box-shadow: inset 0 0 0 2px #d0d8e0, 0 1px 2px rgba(0,0,0,0.04);
}

.bof-activate-offer.bof-cta-sale:hover {
    background: var(--bof-accent-light);
    color: #047857 !important;
    box-shadow: inset 0 0 0 2px var(--bof-accent), 0 3px 8px rgba(0,200,150,0.12);
    transform: translateY(-1px);
}

/* --- HERO CTA: the ONLY solid filled green button --- */
.bof-tier-hero .bof-activate-offer {
    padding: 14px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--bof-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,200,150,0.3) !important;
}

.bof-tier-hero .bof-activate-offer:hover {
    background: #047857 !important;
    box-shadow: 0 4px 12px rgba(0,200,150,0.4) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.bof-cta-text {
    font-weight: inherit;
}

/* Icon inside CTA buttons — adds visual weight to ghost buttons */
.bof-activate-offer .bof-icon {
    flex-shrink: 0;
}

.bof-cta-arrow {
    font-size: 0.9rem;
    transition: transform var(--bof-tr);
}

.bof-activate-offer:hover .bof-cta-arrow {
    transform: translateX(3px);
}

/* --- Masked code preview in CTA --- */
.bof-cta-masked {
    font-family: 'SF Mono','Fira Code','Consolas',monospace;
    letter-spacing: 1px;
    font-weight: 700;
    opacity: 0.8;
    margin-right: 8px;
}

/* =====================================================================
   COPIED TOAST (global floating notification)
   ===================================================================== */
.bof-copied-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bof-trust);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.bof-copied-toast.bof-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =====================================================================
   EXPIRED TOGGLE
   ===================================================================== */
.bof-expired-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bof-border);
}

.bof-toggle-expired {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 24px auto;
    background: var(--bof-trust);
    color: #fff;
    padding: 12px 24px;
    border-radius: 28px;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(45,58,74,0.2);
    transition: all var(--bof-tr);
}

.bof-toggle-expired:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45,58,74,0.3);
    background: var(--bof-trust-dark);
}

.bof-toggle-expired .toggle-text-hide,
.bof-toggle-expired[aria-expanded="true"] .toggle-text-show {
    display: none;
}

.bof-toggle-expired[aria-expanded="true"] .toggle-text-hide {
    display: inline;
}

.bof-toggle-expired .toggle-arrow {
    display: inline-block;
    transition: transform var(--bof-tr);
    margin-left: 8px;
    font-size: 0.75rem;
}

.bof-toggle-expired[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

/* =====================================================================
   NO ACTIVE / EMPTY STATE
   ===================================================================== */
.bof-no-active {
    background: #f8f9fa;
    border: 1px dashed #d0d5dc;
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--bof-text-muted);
    font-style: italic;
}

.bof-empty-state {
    background: linear-gradient(145deg, #f0fdf9 0%, #e6f7f2 100%);
    border: 1px solid rgba(0,200,150,0.2);
    border-left: 4px solid var(--bof-accent);
    border-radius: var(--bof-radius);
    padding: 28px 20px;
    text-align: center;
}

.bof-empty-state h3 {
    font-size: 1.25rem;
    color: var(--bof-text);
    margin: 0 0 10px 0;
    font-weight: 700;
}

.bof-empty-text {
    font-size: 0.9rem;
    color: var(--bof-text-sec);
    margin-bottom: 24px;
    line-height: 1.6;
}

.bof-cta-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.bof-cta-card {
    background: #fff;
    border: 1px solid var(--bof-border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    transition: all var(--bof-tr);
}

.bof-cta-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.bof-cta-card h4 { font-size: 1rem; color: var(--bof-text); margin: 0 0 6px 0; font-weight: 600; }
.bof-cta-card p { font-size: 0.85rem; color: var(--bof-text-sec); margin-bottom: 14px; line-height: 1.5; }

.bof-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 24px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--bof-tr);
}

.bof-cta-codes {
    background: linear-gradient(135deg, var(--bof-accent) 0%, var(--bof-accent-dark) 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,200,150,0.25);
}

.bof-cta-fb {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(45,55,72,0.2);
}

.bof-cta-button:hover {
    transform: translateY(-1px);
    color: #fff !important;
}

/* =====================================================================
   BHI URGENCY BANNER DISTINCTION
   ===================================================================== */
.bhi-urgency-wrapper + .bof-wrapper {
    margin-top: 8px;
}

.bhi-urgency-wrapper {
    margin-bottom: 16px;
}

.bof-wrapper ~ .bhi-urgency-wrapper .bhi-urgency-alert,
.bhi-urgency-wrapper .bhi-urgency-alert {
    border-left-width: 4px;
    border-left-style: solid;
}

/* =====================================================================
   LINK RESET
   ===================================================================== */
.bof-wrapper a,
.bof-wrapper a:link,
.bof-wrapper a:visited,
.bof-wrapper a:hover,
.bof-wrapper a:active {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* --- Mobile (<768px) --- */
@media (max-width: 767px) {
    .bof-filter-pills {
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    /* When stuck on mobile, remove fade mask (compact row doesn't need it) */
    .bof-controls-stuck .bof-filter-pills {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .bof-card.bof-type-sale { padding: 16px 18px; }

    .bof-card.bof-tier-hero { padding: 24px !important; }
    .bof-tier-hero .bof-extra-info { margin: 12px -24px -24px -24px !important; padding: 14px 20px !important; }

    .bof-headline { font-size: 1rem; }

    .bof-card-footer { flex-wrap: wrap; gap: 10px; }

    .bof-toggle-expired { max-width: 100%; padding: 12px 20px; font-size: 0.85rem; }

    .bof-type-sale .bof-extra-info { margin: 12px -18px -16px -18px; padding: 14px 18px; }

    /* NOTE: .bof-controls padding is now set with !important in the base rule.
       Do NOT override it here. The old `padding: 0 1rem` was the PRIMARY cause
       of clipping — it removed all vertical padding on mobile. */

    .bof-header-left { flex-wrap: wrap; gap: 0; }

    .bof-cta-masked { font-size: 0.85rem; }
    .bof-cta-revealed-code { font-size: 0.95rem; }
}

/* --- Tablet (480px+) --- */
@media (min-width: 480px) {
    .bof-card.bof-type-code { padding: 20px; }
    .bof-cta-cards { flex-direction: row; }
    .bof-cta-card { flex: 1; }
    .bof-type-code .bof-extra-info { margin: 12px -20px -20px -20px; padding: 14px 20px; }

    .bof-card.bof-tier-hero { padding: 30px !important; }
    .bof-tier-hero .bof-extra-info { margin: 16px -30px -30px -30px !important; padding: 16px 26px !important; }
}

/* --- Desktop (768px+) --- */
@media (min-width: 768px) {
    /* NOTE: .bof-controls padding is managed by base + stuck rules with !important.
       Desktop doesn't need extra horizontal padding since wrapper has max-width. */
    .bof-filter-pills { overflow-x: visible; }
    .bof-wrapper { margin: 30px auto; }
    .bof-card-footer { flex-wrap: nowrap; }

    .bof-card.bof-tier-hero { padding: 36px !important; }
    /* clamp() handles responsive sizing — no static overrides needed */
    .bof-tier-hero .bof-extra-info { margin: 16px -36px -36px -36px !important; padding: 18px 32px !important; }
}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .bof-card,
    .bof-pill,
    .bof-activate-offer,
    .bof-toggle-info,
    .bof-toggle-expired,
    .bof-cta-arrow,
    .bof-cta-button,
    .bof-cta-card,
    .bof-vote-btn,
    .bof-toggle-info .toggle-arrow,
    .bof-toggle-expired .toggle-arrow,
    .bof-controls,
    .bof-live-dot {
        transition: none !important;
        animation: none !important;
    }
}

.bof-pill:focus-visible,
.bof-activate-offer:focus-visible,
.bof-toggle-info:focus-visible,
.bof-toggle-expired:focus-visible,
.bof-vote-btn:focus-visible,
.bof-cta-button:focus-visible {
    outline: 2px solid var(--bof-accent);
    outline-offset: 2px;
}

/* =====================================================================
   DARK MODE
   ===================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bof-card-bg:       #1e2a38;
        --bof-border:        #2d3a4a;
        --bof-border-code:   #3a4a5e;
        --bof-border-sale:   #2d3a4a;
        --bof-text:          #e8ecf0;
        --bof-text-sec:      #9ca8b8;
        --bof-text-muted:    #6b7a8e;
        --bof-code-bg:       #1a2332;
        --bof-expired-text:  #6b7a8e;
        --bof-expired-bg:    #151e28;
        --bof-shadow:        0 1px 3px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15);
        --bof-shadow-hover:  0 4px 16px rgba(0,0,0,0.3);
        --bof-hero-bg:       #0f1620;
        --bof-hero-bg-grad:  linear-gradient(145deg, #141c28 0%, #0f1620 100%);
        --bof-hero-glow:     0 8px 32px rgba(0,200,150,0.1), 0 4px 16px rgba(0,0,0,0.3);
        --bof-sale-accent:   #94a3b8;
        --bof-sale-accent-dark: #64748b;
    }

    .bof-controls {
        background: rgba(30,42,56,0.97);
    }

    .bof-controls-stuck {
        box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
    }

    .bof-pill {
        background: var(--bof-card-bg);
        border-color: var(--bof-border);
        color: var(--bof-text-muted);
    }

    .bof-pill:not(.active) .bof-pill-count {
        background: #2d3a4a;
        color: #6b7a8e;
    }

    .bof-success-rate {
        background: rgba(0,200,150,0.1);
        border-color: rgba(0,200,150,0.2);
    }

    .bof-extra-info {
        background: #151e28;
        border-top-color: #2d3a4a;
    }

    .bof-type-sale .bof-extra-info {
        background: linear-gradient(135deg, #151e28 0%, #1a2332 100%);
    }

    .bof-card-footer {
        border-top-color: #2d3a4a;
    }

    .bof-cta-row {
        border-top-color: #2d3a4a;
    }

    .bof-no-active {
        background: #1a2332;
        border-color: #2d3a4a;
    }

    .bof-empty-state {
        background: linear-gradient(145deg, #162028 0%, #1a2332 100%);
        border-color: rgba(0,200,150,0.2);
    }

    .bof-cta-card {
        background: var(--bof-card-bg);
        border-color: var(--bof-border);
    }

    .bof-vote-btn {
        background: #1a2332;
        border-color: #2d3a4a;
        color: var(--bof-text-muted);
    }

    .bof-toggle-info {
        border-color: #2d3a4a;
        color: var(--bof-text-sec);
    }

    .bof-expired-badge {
        background: #1a2332;
        color: var(--bof-expired-text);
        border-color: #2d3a4a;
    }

    .bof-popular-badge {
        background: #1a2332;
        color: var(--bof-text-sec);
        border-color: #2d3a4a;
    }

    .bof-card.bof-type-sale {
        border-left-color: #64748b;
    }

    .bof-live-status {
        color: var(--bof-accent);
    }

    /* Dark mode: ghost buttons — transparent bg, inset box-shadow borders */
    .bof-activate-offer.bof-cta-code {
        background: transparent;
        color: var(--bof-accent) !important;
        box-shadow: inset 0 0 0 2px var(--bof-accent);
    }

    .bof-activate-offer.bof-cta-code:hover {
        background: rgba(0,200,150,0.1);
        box-shadow: inset 0 0 0 2px var(--bof-accent), 0 2px 8px rgba(0,200,150,0.15);
    }

    .bof-activate-offer.bof-cta-sale {
        background: transparent;
        color: #6ee7b7 !important;
        box-shadow: inset 0 0 0 2px #3a4a5e;
    }

    .bof-activate-offer.bof-cta-sale:hover {
        background: rgba(0,200,150,0.08);
        color: var(--bof-accent) !important;
        box-shadow: inset 0 0 0 2px var(--bof-accent), 0 2px 6px rgba(0,200,150,0.1);
    }

    /* Dark mode: revealed code button */
    .bof-reveal-code.bof-code-revealed {
        background: rgba(0,200,150,0.1) !important;
        color: var(--bof-accent) !important;
        box-shadow: inset 0 0 0 2px var(--bof-accent) !important;
    }
}