/* ShopRadar.ai Custom Styles */

[x-cloak] {
    display: none !important;
}

/* Smooth transitions for progress bar */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Score card pulse animation on load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[x-show] {
    animation: fadeInUp 0.3s ease-out;
}

/* Details/summary arrow styling */
details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

/* Progress bar shimmer — scoped to progress bars only */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.progress-shimmer {
    background-image: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Blurred pricing card overlay */
.plan-blur-wrapper {
    position: relative;
    overflow: hidden;
}

.plan-blur-wrapper .plan-content {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.plan-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: 1rem;
}

/* Cookie consent bar */
.cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.35s ease;
}

.cookie-bar--visible {
    transform: translateY(0);
}

/* Legacy class kept for backward compat */
.cookie-bar.visible {
    transform: translateY(0);
}

.cookie-banner-shell {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    border-top: 1px solid #334155;
}

.cookie-banner-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-banner-settings {
    max-width: 640px;
}

.cookie-banner-text {
    margin: 0 0 0.25rem 0;
    flex: 1;
    min-width: 200px;
    line-height: 1.6;
}

.cookie-banner-link {
    color: #93c5fd;
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cookie-btn-accept {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.cookie-btn-accept:hover {
    background: #1d4ed8;
}

.cookie-btn-reject {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
}

.cookie-btn-reject:hover {
    background: #334155;
    color: #e2e8f0;
}

.cookie-btn-settings {
    background: transparent;
    color: #64748b;
    border: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: underline;
    white-space: nowrap;
}

.cookie-btn-settings:hover {
    color: #94a3b8;
}

/* Granular settings rows */
.cookie-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #334155;
}

.cookie-option:last-of-type {
    border-bottom: none;
}

.cookie-option-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cookie-option-label {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 0.875rem;
}

.cookie-option-desc {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

.cookie-toggle--on {
    font-size: 0.75rem;
    color: #4ade80;
    font-weight: 600;
    white-space: nowrap;
}

/* Toggle switch */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cookie-switch-slider {
    position: absolute;
    inset: 0;
    background: #475569;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
}

.cookie-switch-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.cookie-switch input:checked + .cookie-switch-slider {
    background: #2563eb;
}

.cookie-switch input:checked + .cookie-switch-slider::before {
    transform: translateX(18px);
}

.cookie-consent-active {
    padding-bottom: 100px;
}

.cookie-consent-active .min-h-screen {
    min-height: calc(100vh - 100px);
}

.cookie-consent-active .min-h-\[calc\(100vh-57px\)\] {
    min-height: calc(100vh - 57px - 100px);
}

/* Keep support assistant visible above cookie consent bar */
#sr-support-widget {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: auto;
    top: auto;
    z-index: 10001;
}

.cookie-consent-active #sr-support-widget {
    bottom: 96px;
}

@media (max-width: 640px) {
    #sr-support-widget {
        right: 0.75rem;
        bottom: 0.75rem;
        left: auto;
        top: auto;
    }

    .cookie-consent-active {
        padding-bottom: 132px;
    }

    .cookie-consent-active .min-h-screen {
        min-height: calc(100vh - 132px);
    }

    .cookie-consent-active .min-h-\[calc\(100vh-57px\)\] {
        min-height: calc(100vh - 57px - 132px);
    }

    .cookie-consent-active #sr-support-widget {
        bottom: 140px;
    }
}

/* Paywall blur for results page */
.paywall-section {
    position: relative;
    overflow: hidden;
}

.paywall-content {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.paywall-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1rem;
    z-index: 10;
    padding: 2rem;
    text-align: center;
}

/* Landing / pricing shared cards */
.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
}

/* Marketing section rhythm */
.sr-marketing-band {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.sr-marketing-band-compact {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.sr-section-head {
    margin-bottom: 2rem;
}

.sr-section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.sr-why-now-shell {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.sr-why-now-shell::before {
    content: none;
    position: absolute;
    right: -56px;
    top: -72px;
    width: 220px;
    height: 220px;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.12);
    pointer-events: none;
}

.sr-why-now-grid {
    position: relative;
    z-index: 1;
}

.sr-why-now-card {
    border-radius: 1rem;
    border: 1px solid #dbeafe;
    background: rgba(255, 255, 255, 0.9);
    padding: 1.1rem;
    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sr-why-now-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px -24px rgba(15, 23, 42, 0.6);
}

.sr-why-now-card-chatgpt {
    border-top: 3px solid #2563eb;
}

.sr-why-now-card-perplexity {
    border-top: 3px solid #0284c7;
}

.sr-why-now-card-google {
    border-top: 3px solid #7c3aed;
}

@media (min-width: 768px) {
    .sr-marketing-band {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .sr-marketing-band-compact {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sr-section-head {
        margin-bottom: 2.5rem;
    }

    .sr-section-eyebrow {
        margin-bottom: 1.125rem;
    }

    .sr-why-now-shell {
        padding: 0;
    }

    .sr-why-now-card {
        padding: 1.2rem;
    }
}

.stat-card {
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.pricing-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}

.pricing-card-popular {
    transform: translateY(-8px);
}

.pricing-card-popular:hover {
    transform: translateY(-12px);
}

/* Results visuals */
.score-ring {
    transform: rotate(-90deg);
}

.score-ring-origin {
    transform-origin: center;
}

.score-ring-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}

.score-ring-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-in-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-delay-100 {
    animation-delay: 0.1s;
    opacity: 0;
}

.animate-delay-200 {
    animation-delay: 0.2s;
    opacity: 0;
}

.animate-delay-300 {
    animation-delay: 0.3s;
    opacity: 0;
}

.animate-delay-400 {
    animation-delay: 0.4s;
    opacity: 0;
}

@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
    }
}

.cta-pulse {
    animation: ctaPulse 2s ease-in-out infinite;
}

.sr-clipboard-helper {
    position: fixed;
    top: -1000px;
    left: -1000px;
    opacity: 0;
}

/* Mobile table discoverability (dashboard audit history) */
.sr-table-scroll-hint {
    display: none;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.2rem;
}

.sr-mobile-table-fade {
    display: none;
}

.sr-minw-760 {
    min-width: 760px;
}

.sr-sticky-action-col {
    position: sticky;
    right: 0;
    background: #ffffff;
    box-shadow: -10px 0 14px -12px rgba(15, 23, 42, 0.45);
    z-index: 2;
}

@media (max-width: 767px) {
    .sr-table-scroll-hint {
        display: block;
    }

    .sr-mobile-table-fade {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 22px;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to left, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0));
        z-index: 1;
    }
}

/* CSP-safe dynamic sizing utilities */
.sr-w-0 { width: 0%; }
.sr-w-1 { width: 1%; }
.sr-w-2 { width: 2%; }
.sr-w-3 { width: 3%; }
.sr-w-4 { width: 4%; }
.sr-w-5 { width: 5%; }
.sr-w-6 { width: 6%; }
.sr-w-7 { width: 7%; }
.sr-w-8 { width: 8%; }
.sr-w-9 { width: 9%; }
.sr-w-10 { width: 10%; }
.sr-w-11 { width: 11%; }
.sr-w-12 { width: 12%; }
.sr-w-13 { width: 13%; }
.sr-w-14 { width: 14%; }
.sr-w-15 { width: 15%; }
.sr-w-16 { width: 16%; }
.sr-w-17 { width: 17%; }
.sr-w-18 { width: 18%; }
.sr-w-19 { width: 19%; }
.sr-w-20 { width: 20%; }
.sr-w-21 { width: 21%; }
.sr-w-22 { width: 22%; }
.sr-w-23 { width: 23%; }
.sr-w-24 { width: 24%; }
.sr-w-25 { width: 25%; }
.sr-w-26 { width: 26%; }
.sr-w-27 { width: 27%; }
.sr-w-28 { width: 28%; }
.sr-w-29 { width: 29%; }
.sr-w-30 { width: 30%; }
.sr-w-31 { width: 31%; }
.sr-w-32 { width: 32%; }
.sr-w-33 { width: 33%; }
.sr-w-34 { width: 34%; }
.sr-w-35 { width: 35%; }
.sr-w-36 { width: 36%; }
.sr-w-37 { width: 37%; }
.sr-w-38 { width: 38%; }
.sr-w-39 { width: 39%; }
.sr-w-40 { width: 40%; }
.sr-w-41 { width: 41%; }
.sr-w-42 { width: 42%; }
.sr-w-43 { width: 43%; }
.sr-w-44 { width: 44%; }
.sr-w-45 { width: 45%; }
.sr-w-46 { width: 46%; }
.sr-w-47 { width: 47%; }
.sr-w-48 { width: 48%; }
.sr-w-49 { width: 49%; }
.sr-w-50 { width: 50%; }
.sr-w-51 { width: 51%; }
.sr-w-52 { width: 52%; }
.sr-w-53 { width: 53%; }
.sr-w-54 { width: 54%; }
.sr-w-55 { width: 55%; }
.sr-w-56 { width: 56%; }
.sr-w-57 { width: 57%; }
.sr-w-58 { width: 58%; }
.sr-w-59 { width: 59%; }
.sr-w-60 { width: 60%; }
.sr-w-61 { width: 61%; }
.sr-w-62 { width: 62%; }
.sr-w-63 { width: 63%; }
.sr-w-64 { width: 64%; }
.sr-w-65 { width: 65%; }
.sr-w-66 { width: 66%; }
.sr-w-67 { width: 67%; }
.sr-w-68 { width: 68%; }
.sr-w-69 { width: 69%; }
.sr-w-70 { width: 70%; }
.sr-w-71 { width: 71%; }
.sr-w-72 { width: 72%; }
.sr-w-73 { width: 73%; }
.sr-w-74 { width: 74%; }
.sr-w-75 { width: 75%; }
.sr-w-76 { width: 76%; }
.sr-w-77 { width: 77%; }
.sr-w-78 { width: 78%; }
.sr-w-79 { width: 79%; }
.sr-w-80 { width: 80%; }
.sr-w-81 { width: 81%; }
.sr-w-82 { width: 82%; }
.sr-w-83 { width: 83%; }
.sr-w-84 { width: 84%; }
.sr-w-85 { width: 85%; }
.sr-w-86 { width: 86%; }
.sr-w-87 { width: 87%; }
.sr-w-88 { width: 88%; }
.sr-w-89 { width: 89%; }
.sr-w-90 { width: 90%; }
.sr-w-91 { width: 91%; }
.sr-w-92 { width: 92%; }
.sr-w-93 { width: 93%; }
.sr-w-94 { width: 94%; }
.sr-w-95 { width: 95%; }
.sr-w-96 { width: 96%; }
.sr-w-97 { width: 97%; }
.sr-w-98 { width: 98%; }
.sr-w-99 { width: 99%; }
.sr-w-100 { width: 100%; }
.sr-h-0 { height: 0px; }
.sr-h-1 { height: 1px; }
.sr-h-2 { height: 2px; }
.sr-h-3 { height: 3px; }
.sr-h-4 { height: 4px; }
.sr-h-5 { height: 5px; }
.sr-h-6 { height: 6px; }
.sr-h-7 { height: 7px; }
.sr-h-8 { height: 8px; }
.sr-h-9 { height: 9px; }
.sr-h-10 { height: 10px; }
.sr-h-11 { height: 11px; }
.sr-h-12 { height: 12px; }
.sr-h-13 { height: 13px; }
.sr-h-14 { height: 14px; }
.sr-h-15 { height: 15px; }
.sr-h-16 { height: 16px; }
.sr-h-17 { height: 17px; }
.sr-h-18 { height: 18px; }
.sr-h-19 { height: 19px; }
.sr-h-20 { height: 20px; }
.sr-h-21 { height: 21px; }
.sr-h-22 { height: 22px; }
.sr-h-23 { height: 23px; }
.sr-h-24 { height: 24px; }
.sr-h-25 { height: 25px; }
.sr-h-26 { height: 26px; }
.sr-h-27 { height: 27px; }
.sr-h-28 { height: 28px; }
.sr-h-29 { height: 29px; }
.sr-h-30 { height: 30px; }
.sr-h-31 { height: 31px; }
.sr-h-32 { height: 32px; }
.sr-h-33 { height: 33px; }
.sr-h-34 { height: 34px; }
.sr-h-35 { height: 35px; }
.sr-h-36 { height: 36px; }
.sr-h-37 { height: 37px; }
.sr-h-38 { height: 38px; }
.sr-h-39 { height: 39px; }
.sr-h-40 { height: 40px; }
.sr-h-41 { height: 41px; }
.sr-h-42 { height: 42px; }
.sr-h-43 { height: 43px; }
.sr-h-44 { height: 44px; }
.sr-h-45 { height: 45px; }
.sr-h-46 { height: 46px; }
.sr-h-47 { height: 47px; }
.sr-h-48 { height: 48px; }
.sr-h-49 { height: 49px; }
.sr-h-50 { height: 50px; }
.sr-h-51 { height: 51px; }
.sr-h-52 { height: 52px; }
.sr-h-53 { height: 53px; }
.sr-h-54 { height: 54px; }
.sr-h-55 { height: 55px; }
.sr-h-56 { height: 56px; }
.sr-h-57 { height: 57px; }
.sr-h-58 { height: 58px; }
.sr-h-59 { height: 59px; }
.sr-h-60 { height: 60px; }
.sr-h-61 { height: 61px; }
.sr-h-62 { height: 62px; }
.sr-h-63 { height: 63px; }
.sr-h-64 { height: 64px; }
.sr-h-65 { height: 65px; }
.sr-h-66 { height: 66px; }
.sr-h-67 { height: 67px; }
.sr-h-68 { height: 68px; }
.sr-h-69 { height: 69px; }
.sr-h-70 { height: 70px; }
.sr-h-71 { height: 71px; }
.sr-h-72 { height: 72px; }
.sr-h-73 { height: 73px; }
.sr-h-74 { height: 74px; }
.sr-h-75 { height: 75px; }
.sr-h-76 { height: 76px; }
.sr-h-77 { height: 77px; }
.sr-h-78 { height: 78px; }
.sr-h-79 { height: 79px; }
.sr-h-80 { height: 80px; }
.sr-h-81 { height: 81px; }
.sr-h-82 { height: 82px; }
.sr-h-83 { height: 83px; }
.sr-h-84 { height: 84px; }
.sr-h-85 { height: 85px; }
.sr-h-86 { height: 86px; }
.sr-h-87 { height: 87px; }
.sr-h-88 { height: 88px; }
.sr-h-89 { height: 89px; }
.sr-h-90 { height: 90px; }
.sr-h-91 { height: 91px; }
.sr-h-92 { height: 92px; }
.sr-h-93 { height: 93px; }
.sr-h-94 { height: 94px; }
.sr-h-95 { height: 95px; }
.sr-h-96 { height: 96px; }
.sr-h-97 { height: 97px; }
.sr-h-98 { height: 98px; }
.sr-h-99 { height: 99px; }
.sr-h-100 { height: 100px; }
.sr-h-101 { height: 101px; }
.sr-h-102 { height: 102px; }
.sr-h-103 { height: 103px; }
.sr-h-104 { height: 104px; }
.sr-h-105 { height: 105px; }
.sr-h-106 { height: 106px; }
.sr-h-107 { height: 107px; }
.sr-h-108 { height: 108px; }
.sr-h-109 { height: 109px; }
.sr-h-110 { height: 110px; }
.sr-h-111 { height: 111px; }
.sr-h-112 { height: 112px; }
.sr-h-113 { height: 113px; }
.sr-h-114 { height: 114px; }
.sr-h-115 { height: 115px; }
.sr-h-116 { height: 116px; }
.sr-h-117 { height: 117px; }
.sr-h-118 { height: 118px; }
.sr-h-119 { height: 119px; }
.sr-h-120 { height: 120px; }

/* ============================================
   Dark Mode — Complete Override System
   ============================================ */
.dark {
    color-scheme: dark;
}

/* ============================================
   Missing Tailwind Utilities (Project Safelist)
   ============================================ */
/* These helpers are used across static pages, but are missing from the current
   `tailwind.generated.css` build. Defining them here prevents layout breakage
   (mobile overflow, long-word clipping, tables expanding the viewport). */
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.table-fixed { table-layout: fixed; }
.overflow-x-hidden { overflow-x: hidden; }

/* ---- Base backgrounds ---- */
.dark body,
.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

.dark .bg-white,
.dark .bg-white\/80 {
    background-color: #1e293b !important;
}

.dark .bg-slate-100 {
    background-color: #334155 !important;
}

.dark .bg-slate-200 {
    background-color: #475569 !important;
}

/* ---- Misc ---- */
.dark .hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
}

/* ---- Text colors ---- */
.dark .text-slate-900,
.dark .text-slate-800 {
    color: #f1f5f9 !important;
}

.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

.dark .text-slate-600 {
    color: #a6b5cb !important;
}

.dark .text-slate-500 {
    color: #9fb0c8 !important;
}

.dark .text-slate-400 {
    color: #95a8c4 !important;
}

.dark .text-slate-300 {
    color: #cbd5e1 !important;
}

.dark .sr-table-scroll-hint {
    border-color: #475569;
    background: #1e293b;
    color: #cbd5e1;
}

.dark .sr-sticky-action-col {
    background: #1e293b !important;
    box-shadow: -10px 0 14px -12px rgba(2, 6, 23, 0.85);
}

.dark tr:hover .sr-sticky-action-col {
    background: #273449 !important;
}

.dark .sr-mobile-table-fade {
    background: linear-gradient(to left, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0));
}

/* ---- Landing: Why-now cards in dark mode ---- */
.dark .sr-why-now-shell .sr-section-eyebrow {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

.dark .sr-why-now-card {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: #334155 !important;
    box-shadow: 0 14px 28px -24px rgba(2, 6, 23, 0.95) !important;
}

.dark .sr-why-now-card:hover {
    box-shadow: 0 20px 32px -24px rgba(2, 6, 23, 1) !important;
}

.dark .sr-why-now-card .text-slate-600 {
    /* Increase contrast for the "Warum jetzt handeln?" cards in dark mode. */
    color: #d7e0ec !important;
}

/* ---- Colored text — keep readable on dark ---- */
.dark .text-blue-600 {
    color: #60a5fa !important;
}

.dark .text-blue-700 {
    color: #93bbfd !important;
}

.dark .text-blue-800 {
    color: #93c5fd !important;
}

.dark .text-red-500 {
    color: #f87171 !important;
}

.dark .text-red-600 {
    color: #f87171 !important;
}

.dark .text-red-700 {
    color: #fca5a5 !important;
}

.dark .text-red-800 {
    color: #fca5a5 !important;
}

.dark .text-green-500 {
    color: #4ade80 !important;
}

.dark .text-green-600 {
    color: #4ade80 !important;
}

.dark .text-green-700 {
    color: #86efac !important;
}

.dark .text-green-800 {
    color: #86efac !important;
}

.dark .text-amber-600 {
    color: #fbbf24 !important;
}

.dark .text-amber-700 {
    color: #fcd34d !important;
}

.dark .text-amber-800 {
    color: #fcd34d !important;
}

.dark .text-yellow-600 {
    color: #fbbf24 !important;
}

.dark .text-yellow-800 {
    color: #fde68a !important;
}

.dark .text-indigo-600 {
    color: #818cf8 !important;
}

.dark .text-purple-600 {
    color: #a78bfa !important;
}

/* ---- Colored backgrounds — desaturated/darkened ---- */
.dark .bg-blue-50 {
    background-color: #1e293b !important;
}

.dark .bg-blue-100 {
    background-color: #1e3a5f !important;
}

.dark .bg-blue-600 {
    background-color: #2563eb !important;
}

.dark .bg-red-50 {
    background-color: #2d1b1b !important;
}

.dark .bg-red-100 {
    background-color: #3b1c1c !important;
}

.dark .bg-green-50 {
    background-color: #1a2e1a !important;
}

.dark .bg-green-100 {
    background-color: #1c3b1c !important;
}

.dark .bg-yellow-50 {
    background-color: #2d2a1b !important;
}

.dark .bg-yellow-100 {
    background-color: #3b351c !important;
}

.dark .bg-amber-50 {
    background-color: #2d2a1b !important;
}

.dark .bg-amber-100 {
    background-color: #3b351c !important;
}

.dark .bg-purple-50 {
    background-color: #1e1b2e !important;
}

.dark .bg-purple-100 {
    background-color: #2e1f5e !important;
}

.dark .bg-orange-50 {
    background-color: #2d231b !important;
}

.dark .bg-orange-100 {
    background-color: #3b2c1c !important;
}

.dark .bg-sky-50 {
    background-color: #1b2d2d !important;
}

.dark .bg-sky-100 {
    background-color: #1c3b3b !important;
}

.dark .bg-rose-50 {
    background-color: #2d1b22 !important;
}

.dark .bg-rose-100 {
    background-color: #3b1c28 !important;
}

.dark .bg-emerald-50 {
    background-color: #1a2e22 !important;
}

.dark .bg-emerald-100 {
    background-color: #1c3b28 !important;
}

.dark .bg-violet-50 {
    background-color: #1e1b2e !important;
}

.dark .bg-violet-100 {
    background-color: #2e1f5e !important;
}

.dark .bg-indigo-50 {
    background-color: #1e1b4b !important;
}

.dark .bg-indigo-100 {
    background-color: #252262 !important;
}

.dark .bg-indigo-500 {
    background-color: #6366f1 !important;
}

/* ---- Borders ---- */
.dark .border-slate-50 {
    border-color: #1e293b !important;
}

.dark .border-slate-100,
.dark .border-slate-200 {
    border-color: #334155 !important;
}

.dark .border-slate-300 {
    border-color: #475569 !important;
}

.dark .border-b {
    border-color: #334155 !important;
}

.dark .border-blue-100,
.dark .border-blue-200 {
    border-color: #1e3a5f !important;
}

.dark .border-red-100,
.dark .border-red-200,
.dark .border-red-300 {
    border-color: #5b2c2c !important;
}

.dark .border-green-100,
.dark .border-green-200 {
    border-color: #2c5b2c !important;
}

.dark .border-amber-100,
.dark .border-amber-200 {
    border-color: #5b4f2c !important;
}

.dark .border-indigo-400 {
    border-color: #6366f1 !important;
}

/* ---- Inputs & form elements ---- */
.dark input,
.dark select,
.dark textarea {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #7f91ad !important;
}

/* ---- Shadows ---- */
.dark .shadow-lg,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}

/* ---- Hovers ---- */
.dark .hover\:bg-slate-50:hover {
    background-color: #334155 !important;
}

.dark .hover\:bg-slate-200:hover {
    background-color: #475569 !important;
}

.dark .hover\:text-slate-900:hover {
    color: #f1f5f9 !important;
}

.dark .hover\:text-red-500:hover {
    color: #f87171 !important;
}

.dark .hover\:text-slate-600:hover {
    color: #cbd5e1 !important;
}

.dark .hover\:text-blue-800:hover {
    color: #93c5fd !important;
}

/* ---- SVG / Score Ring ---- */
.dark svg circle[stroke="#e2e8f0"] {
    stroke: #334155 !important;
}

.dark .score-ring-bg {
    stroke: #334155 !important;
}

/* ---- Gradient text ---- */
.dark .gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Dividers ---- */
.dark .divide-slate-100 > * + * {
    border-color: #334155 !important;
}

/* ---- Specific components ---- */
.dark .paywall-overlay {
    background: rgba(15, 23, 42, 0.92) !important;
}

.dark .plan-blur-overlay {
    background: rgba(15, 23, 42, 0.7) !important;
}

.dark .cookie-bar {
    background-color: #1e293b !important;
}

/* ---- Backdrop ---- */
.dark .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
}

/* ---- Button overrides: keep CTA buttons bright ---- */
.dark .bg-blue-600:hover {
    background-color: #3b82f6 !important;
}

.dark .bg-red-600 {
    background-color: #dc2626 !important;
}

/* ---- Table rows ---- */
.dark tr {
    border-color: #334155 !important;
}

.dark tbody tr:hover {
    background-color: #1e293b !important;
}

/* ---- Details/Summary ---- */
.dark details {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark summary {
    color: #f1f5f9 !important;
}

/* ---- FAQ specifics ---- */
.dark details[open] {
    background-color: #1e293b !important;
}

/* ---- Misc ---- */
.dark .ring-1 {
    --tw-ring-color: #334155 !important;
}

.dark code,
.dark pre {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

.dark .bg-white\/50 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

/* ---- Conversion stats bar: prevent merging with dark body ---- */
.dark .bg-slate-900 {
    background-color: #1e293b !important;
    border: 1px solid #334155;
}

.dark .bg-slate-800 {
    background-color: #1e293b !important;
}

/* ---- Mobile Nav Dropdown dark mode ---- */
.dark .bg-white\/95 {
    background-color: rgba(15, 23, 42, 0.95) !important;
}

/* ---- Smooth dark mode transition (only when user toggles theme) ---- */
html.theme-transition body,
html.theme-transition nav,
html.theme-transition main,
html.theme-transition section,
html.theme-transition div,
html.theme-transition footer,
html.theme-transition header,
html.theme-transition p,
html.theme-transition h1,
html.theme-transition h2,
html.theme-transition h3,
html.theme-transition h4,
html.theme-transition span,
html.theme-transition a,
html.theme-transition button,
html.theme-transition input,
html.theme-transition textarea,
html.theme-transition select,
html.theme-transition table,
html.theme-transition tr,
html.theme-transition td,
html.theme-transition th {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}