/* ===================================================================
   ZapSpy Design System — POLISH & RHYTHM
   Higher-priority overrides applied AFTER funnel-bridge.css.
   Focus: spacing, breathing room, redesign of the comparison block,
   refinement of repeating patterns across cta-unified / dashboard.

   Load order:
     <link href="/shared/css/zapspy.css">
     <link href="/shared/css/funnel-bridge.css">
     <link href="/shared/css/funnel-polish.css">  ← this file
   =================================================================== */

/* =============================================================
   1. VERTICAL RHYTHM — bigger breathing room
   ============================================================= */

/* More room around the major price-tier cards stack on the sales page */
.tier-cards,
.tiers,
.pricing-grid {
    display: grid;
    gap: 28px !important;          /* was tight on dark */
    margin: 32px 0 40px !important;
}

/* Each tier card itself gets a touch more padding */
.tier,
.tier-card,
.pricing-card {
    padding: 28px 22px !important;
    border-radius: 22px !important;
}

/* Section blocks (hero, features, pricing, FAQ, etc.) */
section,
.section,
.features-section,
.bonus-section,
.faq-section,
.guarantee-section,
.testimonials-section {
    padding-top: clamp(36px, 6vw, 64px) !important;
    padding-bottom: clamp(36px, 6vw, 64px) !important;
}

/* Default "card" containers — give them generous insides */
.card,
.feature-card,
.bonus-card,
.testimonial-card,
.guarantee-card {
    padding: 24px !important;
    border-radius: 20px !important;
}

/* Headlines — more space below to separate from body */
h1, .headline, .hero-title { margin-bottom: 20px !important; }
h2, .section-title       { margin-bottom: 16px !important; margin-top: 0 !important; }
h3, .card-title          { margin-bottom: 12px !important; }

/* Body containers */
.container,
.wrapper,
main {
    padding-left: clamp(16px, 4vw, 28px) !important;
    padding-right: clamp(16px, 4vw, 28px) !important;
}

/* =============================================================
   2. COMPARISON TABLE — full redesign
   "What changes after you have the truth" → modern split cards
   ============================================================= */

.comparison-table {
    background: linear-gradient(180deg,
        rgba(0, 168, 132, 0.04),
        var(--surface)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    margin: 40px 0 !important;
    box-shadow: var(--shadow-md) !important;
}
/* Tighter cells so 2-3 word phrases don't word-break inside the
   narrow mobile-first parent container (max ~440px usable). */
.comparison-table .col-without,
.comparison-table .col-with {
    padding: 14px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}
.comparison-table .comp-row { gap: 10px !important; }

.comparison-table h3 {
    font-family: var(--font-display) !important;
    font-size: clamp(20px, 4vw, 26px) !important;
    color: var(--text-1) !important;
    text-align: center !important;
    margin-bottom: 28px !important;
    letter-spacing: var(--tracking-tight) !important;
    line-height: 1.2 !important;
}

/* Header row — pill-style column titles */
.comp-row.head {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    padding: 0 0 16px !important;
    border-bottom: none !important;
}
.comp-row.head > div {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
}
.comp-row.head > div:first-child {
    background: rgba(220, 53, 69, 0.10) !important;
    color: var(--color-danger) !important;
    border: 1px solid rgba(220, 53, 69, 0.25) !important;
}
.comp-row.head > div:last-child {
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary-ring) !important;
}

/* Body rows */
.comparison-table .comp-row:not(.head) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    padding: 16px 0 !important;
    border-bottom: 1px dashed var(--border) !important;
    align-items: stretch !important;
    font-size: clamp(14px, 2.6vw, 16px) !important;
    line-height: 1.5 !important;
}
.comparison-table .comp-row:not(.head):last-child {
    border-bottom: none !important;
}

/* Each cell becomes a soft, bordered box */
.comp-row .col-without,
.comp-row .col-with {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    transition: transform var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
}
.comp-row .col-without {
    background: rgba(220, 53, 69, 0.06) !important;
    color: #c25e6a !important;
}
.comp-row .col-with {
    background: rgba(0, 168, 132, 0.07) !important;
    color: var(--text-1) !important;
    font-weight: 500 !important;
}
.comp-row:not(.head):hover .col-with {
    background: var(--brand-primary-soft) !important;
    transform: translateX(2px);
}

/* Dark theme refinements */
.theme-dark .comparison-table {
    background: linear-gradient(180deg,
        rgba(0, 168, 132, 0.05),
        var(--surface)) !important;
}
.theme-dark .comp-row .col-without {
    background: rgba(220, 53, 69, 0.10) !important;
    color: #ff8b94 !important;
}
.theme-dark .comp-row .col-with {
    color: var(--text-1) !important;
}

/* Mobile fallback — stack rows when too narrow */
@media (max-width: 540px) {
    .comparison-table { padding: 22px 16px !important; }
    .comp-row.head > div { font-size: 10px !important; padding: 8px 10px !important; }
    .comparison-table .comp-row:not(.head) { gap: 10px !important; padding: 12px 0 !important; }
    .comp-row .col-without, .comp-row .col-with { padding: 12px !important; font-size: 13px !important; }
}

/* =============================================================
   3. PRICING TIER POLISH
   ============================================================= */

/* "Most chosen" / featured tier — emphatic glow + lift */
.tier.featured,
.tier-card.featured,
.tier.most-chosen,
.tier-most-popular,
.tier-card[data-featured="true"] {
    position: relative;
    transform: scale(1.02);
    box-shadow:
        0 0 0 1px var(--brand-primary),
        0 20px 50px rgba(0, 168, 132, 0.18),
        var(--shadow-lg) !important;
}
@media (max-width: 768px) {
    .tier.featured, .tier-card.featured { transform: none; }
}

/* Save / discount pills more refined */
.save-badge, .discount-badge, .price-save {
    background: var(--brand-primary-soft) !important;
    color: var(--brand-primary-strong) !important;
    border: 1px solid var(--brand-primary-ring) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}
.theme-dark .save-badge,
.theme-dark .discount-badge,
.theme-dark .price-save {
    color: var(--brand-primary) !important;
}

/* CTA inside tier — bigger, hero-style */
.tier .cta,
.tier-card .cta,
.tier-cta,
.tier-button,
.pricing-cta {
    margin-top: 20px !important;
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* =============================================================
   4. URGENCY / TOP BAR — subtle premium feel
   ============================================================= */

.zs-urgency-bar,
.urgency-bar,
.top-urgency,
.sticky-bar {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Live viewers / activity pill */
.live-viewers,
.viewers-bar,
.activity-bar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--text-2) !important;
    text-align: center;
}
.theme-dark .live-viewers,
.theme-dark .viewers-bar,
.theme-dark .activity-bar {
    background: var(--surface) !important;
}

/* =============================================================
   5. FAQ ACCORDION — readability
   ============================================================= */

.faq-item,
.faq details,
details.faq {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin-bottom: 12px !important;
    transition: border-color var(--dur-base) var(--ease-out);
}
.faq-item:hover, details.faq:hover, .faq details:hover {
    border-color: var(--brand-primary-ring) !important;
}
.faq-item summary,
.faq summary,
details.faq summary {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--text-1) !important;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { display: none; }

/* =============================================================
   6. TESTIMONIALS
   ============================================================= */

.testimonial,
.testimonial-card,
.review-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-sm) !important;
    line-height: 1.6 !important;
}

/* =============================================================
   7. GUARANTEE / TRUST BLOCK
   ============================================================= */

.guarantee,
.guarantee-card,
.trust-block,
.money-back {
    background: linear-gradient(180deg, var(--brand-primary-soft), var(--surface)) !important;
    border: 1.5px solid var(--brand-primary-ring) !important;
    border-radius: 22px !important;
    padding: 28px !important;
    text-align: center;
}

/* =============================================================
   8. EMPTY-CTA SECTION — final call
   ============================================================= */
.final-cta,
.last-cta,
.bottom-cta {
    margin-top: 48px !important;
    padding: 36px 24px !important;
    background: var(--surface) !important;
    border-radius: 24px !important;
    text-align: center;
}

/* =============================================================
   12. CTA TEXT — always white on green primary
   Fixes inconsistency where some primary CTAs render with
   dark text (e.g. quiz "Begin Access Verification") because
   the legacy stylesheet sets a literal `color:#000` on .btn /
   .cta. Force white text + icon on every primary action.
   ============================================================= */

.btn-primary, .button-primary, .cta-primary, .primary-cta,
button.cta:not(.cta-secondary), a.cta:not(.cta-secondary),
.tier-cta, .pricing-cta, .start-btn, .begin-btn,
.quiz-cta, .reveal-btn, .verify-btn, .access-btn,
.btn-main, .main-btn, .btn-cta, .cta-btn,
.btn-main *, .btn-main-text, .btn-main-arrow,
[class*="cta-"]:not([class*="cta-secondary"]):not([class*="cta-ghost"]) {
    color: #FFFFFF !important;
}
.btn-primary svg, .button-primary svg, .cta-primary svg,
.primary-cta svg, .tier-cta svg, .pricing-cta svg,
.btn-main svg, .btn-cta svg,
button.cta:not(.cta-secondary) svg, a.cta:not(.cta-secondary) svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}
/* Covers the very common ad-hoc pattern: large green button with
   inline `style="background: var(--whatsapp-green)"` */
button[style*="green"], a[style*="green"],
button[style*="--whatsapp"], a[style*="--whatsapp"],
button[style*="#00A884"], a[style*="#00A884"],
button[style*="#008069"], a[style*="#008069"] {
    color: #FFFFFF !important;
}

/* Inline pills/badges sitting on green should also stay readable */
.badge-active, .badge-success, .pill-success,
.status-active, [class*="badge"][class*="success"] {
    color: #FFFFFF !important;
}

/* =============================================================
   13. LEGAL PAGES (privacy / terms / refund) — premium card
   The legacy templates were just floating text on a near-black
   background. Wrap the .container in a soft surface card so it
   feels part of the same design language as the rest of the funnel.
   ============================================================= */

body:has(h1:is(:first-of-type)) > .container:has(h2 + p) {
    /* no-op selector for safety; real rules below */
}

/* Apply to the legal templates which always have body > .container > h1 + .last-updated */
body.theme-dark .container:has(> h1) ,
body.theme-light .container:has(> h1) {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    padding: clamp(28px, 5vw, 48px) !important;
    margin: clamp(24px, 5vw, 56px) auto !important;
    max-width: 820px;
}
/* Headline & section titles */
.container > h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(28px, 5vw, 38px) !important;
    color: var(--text-1) !important;
    letter-spacing: var(--tracking-tight) !important;
    margin-bottom: 8px !important;
}
.container > .last-updated {
    color: var(--text-2) !important;
    font-size: 13px !important;
    margin-bottom: 32px !important;
}
.container > h2 {
    color: var(--brand-primary) !important;
    font-size: clamp(18px, 3.4vw, 22px) !important;
    margin-top: 32px !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.01em;
}
.container > p, .container li {
    color: var(--text-2) !important;
    line-height: 1.7 !important;
}
.container ul { margin-left: 22px !important; margin-bottom: 18px !important; }
.container li { margin-bottom: 10px !important; }
.container .footer {
    margin-top: 48px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-3, var(--text-2)) !important;
}
.container .back-link {
    color: var(--brand-primary) !important;
    font-weight: 600;
    transition: gap var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.container .back-link:hover {
    color: var(--brand-primary-strong) !important;
    gap: 12px !important;
}

/* =============================================================
   14. MICRO-INTERACTIONS — premium "feel" without JS
   ============================================================= */

/* 14.1 Press feedback on all primary actions */
button, .btn, [role="button"], a.cta, a.button {
    transition: transform var(--dur-fast, 120ms) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
}
button:active, .btn:active, [role="button"]:active,
a.cta:active, a.button:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.96);
}

/* 14.2 Soft "pulse" on the dominant CTA — once, on load */
@keyframes zs-cta-pulse-once {
    0%   { box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.35); }
    70%  { box-shadow: 0 0 0 18px rgba(0, 168, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 168, 132, 0); }
}
.btn-primary, .primary-cta, .cta-primary,
.tier.featured .tier-cta, .reveal-btn, .quiz-cta, .verify-btn {
    animation: zs-cta-pulse-once 2.4s var(--ease-out, ease-out) 0.6s 2;
}

/* 14.3 Continuous subtle breathing for the SINGLE main hero CTA only */
@keyframes zs-cta-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
.hero-cta, .main-cta, [data-main-cta="true"] {
    animation: zs-cta-breathe 2.8s var(--ease-out, ease-in-out) infinite;
}

/* 14.4 Card hover lift — across the board */
.card, .feature-card, .bonus-card, .testimonial-card,
.tier, .tier-card, .pricing-card,
.faq-item, details.faq {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
    will-change: transform;
}
@media (hover: hover) {
    .card:hover, .feature-card:hover, .bonus-card:hover,
    .testimonial-card:hover,
    .tier:hover, .tier-card:hover, .pricing-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg) !important;
    }
}

/* 14.5 Anchor links — animated underline.
   Restricted to plain text links: any element that looks like a styled
   CTA / button is excluded so we don't accidentally wipe out its
   `background:` shorthand (which sets background-image on the element).
   IMPORTANT: keep all :not() chained without whitespace between them. */
a:not(.btn):not(.cta):not(.tier-cta):not(.back-link):not([role="button"]):not([class*="cta-"]):not([class*="-cta"]):not([class*="btn-"]):not(.start-btn):not(.begin-btn):not(.reveal-btn):not(.verify-btn):not(.access-btn):not(.spy-btn):not(.quiz-cta):not(.opt) {
    background-image: linear-gradient(var(--brand-primary), var(--brand-primary));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur-base) var(--ease-out);
    text-decoration: none;
}
a:not(.btn):not(.cta):not(.tier-cta):not(.back-link):not([role="button"]):not([class*="cta-"]):not([class*="-cta"]):not([class*="btn-"]):not(.start-btn):not(.begin-btn):not(.reveal-btn):not(.verify-btn):not(.access-btn):not(.spy-btn):not(.quiz-cta):not(.opt):hover {
    background-size: 100% 1.5px;
}

/* 14.6 Inputs — smooth focus ring, no harsh blue outline */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.18) !important;
    transition: box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out) !important;
}

/* 14.7 First-paint section reveal (CSS-only, no JS).
   Sections that haven't been "seen" yet still render — we just
   add a soft slide-up on initial load to make the page feel alive. */
@keyframes zs-section-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
section, .section,
.features-section, .bonus-section,
.guarantee-section, .testimonials-section,
.faq-section, .pricing-section,
.tiers, .tier-cards, .comparison-table,
.hero, .hero-section {
    animation: zs-section-rise 0.55s var(--ease-out, ease-out) both;
}
section:nth-of-type(2)  { animation-delay: 0.06s; }
section:nth-of-type(3)  { animation-delay: 0.12s; }
section:nth-of-type(4)  { animation-delay: 0.18s; }
section:nth-of-type(5)  { animation-delay: 0.24s; }
section:nth-of-type(n+6){ animation-delay: 0.30s; }

/* 14.8 Skeleton shimmer for loading states */
.skeleton, [data-loading="true"] {
    background: linear-gradient(90deg,
        var(--surface) 25%,
        rgba(255, 255, 255, 0.06) 37%,
        var(--surface) 63%);
    background-size: 400% 100%;
    animation: zs-shimmer 1.4s infinite;
    border-radius: 8px;
    color: transparent !important;
}
@keyframes zs-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* 14.9 Trust pills — perfect alignment + subtle hover */
.trust-pills, .trust-row, .badges, .badge-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    justify-content: center;
    margin: 16px 0 !important;
}
.trust-pill, .trust-badge, .pill, .badge:not(.badge-active) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    font-size: 12.5px !important;
    color: var(--text-2) !important;
    font-weight: 500;
    transition: border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.trust-pill:hover, .trust-badge:hover, .pill:hover {
    border-color: var(--brand-primary-ring) !important;
    color: var(--text-1) !important;
}

/* 14.10 Selection color — branded */
::selection {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-strong);
}

/* =============================================================
   16. CRO FIXES v4 — Tier Basic visibility, exit-intent downsell,
       defensive personalization, redundant-timer hide on checkout
   ============================================================= */

/* 16.1 Tier "Basic" CTA needed visible color (was rgba(255,255,255,0.06) = invisible).
   Keep it sober (outline + brand text) so Complete still wins, but Basic is clickable. */
.tier-card[data-tier="basic"] .tier-cta,
.tier-card:not(.recommended):not([data-tier="forensic"]) .tier-cta {
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1.5px solid rgba(34, 197, 94, 0.55) !important;
    color: #ffffff !important;
}
.tier-card[data-tier="basic"] .tier-cta:hover,
.tier-card:not(.recommended):not([data-tier="forensic"]) .tier-cta:hover {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: rgba(34, 197, 94, 0.85) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.20) !important;
}
/* Light theme: same idea, slightly different palette */
body.theme-light .tier-card[data-tier="basic"] .tier-cta,
body.theme-light .tier-card:not(.recommended):not([data-tier="forensic"]) .tier-cta {
    background: rgba(34, 197, 94, 0.10) !important;
    border: 1.5px solid rgba(22, 163, 74, 0.45) !important;
    color: #166534 !important;
}
body.theme-light .tier-card[data-tier="basic"] .tier-cta:hover,
body.theme-light .tier-card:not(.recommended):not([data-tier="forensic"]) .tier-cta:hover {
    background: rgba(34, 197, 94, 0.20) !important;
    border-color: rgba(22, 163, 74, 0.75) !important;
    color: #14532d !important;
}

/* 16.2 Hide the global urgency-bar on the checkout page (cta-unified)
   when the page itself already shows a re-encryption / countdown card.
   Triggered via body[data-no-urgency-bar="true"]. */
body[data-no-urgency-bar="true"] .urgency-bar {
    display: none !important;
}
body[data-no-urgency-bar="true"] {
    padding-top: 0 !important;
}

/* 16.3 Exit-intent downsell – more attractive look-and-feel for the
   discounted Basic offer. */
.exit-popup .exit-downsell-tag {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.exit-popup .exit-price-row {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 14px;
}
.exit-popup .exit-price-old {
    font-size: 16px;
    color: #9ca3af;
    text-decoration: line-through;
}
.exit-popup .exit-price-new {
    font-size: 28px;
    font-weight: 900;
    color: #22c55e;
}

/* =============================================================
   15. ACCESSIBILITY — respect users who don't want motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-cta, .main-cta, [data-main-cta="true"] { animation: none !important; }
}