/* Cro Comparison Module
 * Block 17
 * ------------------------------------------------------------------------------------------------------------------ */

 /* Block-specific styles - Brand colors inherited from global.css */

/* =================================================================== */
/* ENHANCED COMPARISON SECTION V2 - CRO OPTIMIZED */
/* =================================================================== */
.cro-comparison {
padding: 3rem 1.5rem;
background: linear-gradient(180deg, white 0%, var(--gray-50) 100%);
position: relative;
overflow: hidden;
}

/* Live Comparison Counter */
.cro-comparison .live-comparison-counter {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.85rem;
color: var(--gray-700);
font-weight: 600;
}

.cro-comparison .counter-dot {
width: 8px;
height: 8px;
background: var(--success);
border-radius: 50%;
animation: pulse-dot-cro-09 2s ease-in-out infinite;
}

@keyframes pulse-dot-cro-09 {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.9); }
}

/* Urgency Ticker */
.cro-comparison .urgency-ticker-wrapper {
background: linear-gradient(135deg, var(--warning) 0%, #D97706 100%);
border-radius: 12px;
overflow: hidden;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
padding: 0.75rem 0;
margin: 0 auto 2rem;
max-width: 800px;
}

.cro-comparison .urgency-ticker {
overflow: hidden;
white-space: nowrap;
position: relative;
}

.cro-comparison .ticker-content {
display: inline-block;
animation: ticker-scroll-cro-09 30s linear infinite;
padding-left: 100%;
}

@keyframes ticker-scroll-cro-09 {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.cro-comparison .ticker-item {
display: inline-block;
color: var(--color-secondary-normal-bg);
font-weight: 700;
font-size: 0.85rem;
padding: 0 3rem;
white-space: nowrap;
}

/* Score Dashboard - Mobile 2x2 Grid */
.cro-comparison .score-dashboard {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-bottom: 2rem;
padding: 1.5rem 1rem;
background: white;
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 2px solid var(--gray-200);
transform: scale(1);
transition: transform 0.3s ease;
max-width: 100%;
}

.cro-comparison .score-dashboard.animated {
animation: dashboard-entry-cro-09 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dashboard-entry-cro-09 {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cro-comparison .score-card {
text-align: center;
padding: 1rem 0.5rem;
background: linear-gradient(135deg, #E8E8EA 0%, #F5F5F7 100%);
border-radius: 12px;
transition: all 0.3s ease;
border: 2px solid #D1D1D6;
}

.cro-comparison .score-card:active {
transform: scale(0.98);
}

.cro-comparison .score-winner {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%);
border: 2px solid rgba(16, 185, 129, 0.5);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.cro-comparison .score-card:nth-child(2) {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
border: 2px solid rgba(245, 158, 11, 0.4);
}

.cro-comparison .score-card:nth-child(3) {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.08) 100%);
border: 2px solid color-mix(in srgb, var(--color-primary-normal-bg) 60%, transparent);
}

.cro-comparison .score-label {
font-weight: 700;
font-size: 0.75rem;
color: var(--gray-700);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cro-comparison .score-winner .score-label {
color: var(--success);
}

.cro-comparison .score-circle {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto 0.75rem;
}

.cro-comparison .score-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}

.cro-comparison .score-ring-bg {
fill: none;
stroke: var(--gray-200);
stroke-width: 8;
}

.cro-comparison .score-ring-progress {
fill: none;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 339.292;
stroke-dashoffset: 339.292;
transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cro-comparison .cbcs-ring {
stroke: var(--success);
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}

.cro-comparison .competitor-ring {
stroke: var(--warning);
}

.cro-comparison .cheap-ring {
stroke: var(--color-primary-normal-bg);
}

.cro-comparison .score-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
font-weight: 800;
color: var(--color-secondary-normal-bg);
line-height: 1;
}

.cro-comparison .score-winner .score-number {
color: var(--success);
}

.cro-comparison .score-count {
font-size: 2rem;
}

.cro-comparison .score-total {
font-size: 1rem;
opacity: 0.6;
}

.cro-comparison .score-subtitle {
font-size: 0.7rem;
color: var(--gray-600);
font-weight: 600;
}

.cro-comparison .score-winner .score-subtitle {
color: var(--success);
}

/* Score Summary Card */
.cro-comparison .score-summary {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* background: linear-gradient(135deg, var(--color-primary-normal-bg) 0%, var(--color-primary-hover-bg) 100%); */
background: var(--color-primary-normal-bg);
color: white;
}

.cro-comparison .summary-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}

.cro-comparison .summary-text {
font-size: 0.8rem;
text-align: center;
line-height: 1.3;
}

/* Filter Tabs */
.cro-comparison .comparison-filters {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-bottom: 2rem;
}

.cro-comparison .filter-tab {
background: white;
border: 2px solid var(--gray-300);
padding: 0.875rem 1rem;
border-radius: 12px;
font-weight: 700;
font-size: 0.85rem;
color: var(--gray-600);
cursor: pointer;
transition: all 0.3s ease;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.375rem;
}

.cro-comparison .filter-tab.active {
background: var(--color-primary-normal-bg);
color: white;
border-color: var(--color-primary-normal-bg);
transform: translateY(-2px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-normal-bg) 70%, transparent);
}

.cro-comparison .filter-tab:active {
transform: scale(0.98);
}

.cro-comparison .filter-count {
font-size: 0.75rem;
opacity: 0.8;
font-weight: 600;
}

/* Feature Cards Container */
.cro-comparison .comparison-cards {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 800px;
margin: 0 auto 2rem;
}

.cro-comparison .feature-card {
background: white;
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 2px solid var(--gray-200);
overflow: hidden;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
}

.cro-comparison .feature-card.visible {
opacity: 1;
transform: translateY(0);
}

.cro-comparison .feature-card-header {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: white;
border: none;
cursor: pointer;
text-align: left;
transition: all 0.3s ease;
min-height: 72px;
touch-action: manipulation;
border-top: 5px solid var(--color-primary-normal-bg);
border-radius: 16px;
}

.cro-comparison .feature-card-header:active {
background: var(--gray-50);
}

.cro-comparison .feature-icon {
font-size: 2rem;
flex-shrink: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border-radius: 12px;
transition: transform 0.3s ease;
}

.cro-comparison .feature-card.active .feature-icon {
transform: scale(1.1);
}

.cro-comparison .feature-title-group {
flex: 1;
}

.cro-comparison .feature-title-group h3 {
font-size: 1rem;
font-weight: 800;
color: var(--color-secondary-normal-bg);
margin-bottom: 0.25rem;
line-height: 1.3;
}

.cro-comparison .feature-subtitle {
font-size: 0.8rem;
color: var(--gray-600);
margin: 0;
line-height: 1.4;
}

.cro-comparison .expand-icon {
font-size: 1.5rem;
color: var(--color-primary-normal-bg);
transition: transform 0.3s ease;
flex-shrink: 0;
width: 32px;
text-align: center;
}

.cro-comparison .feature-card.active .expand-icon {
transform: rotate(45deg);
}

/* Feature Card Content */
.cro-comparison .feature-card-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cro-comparison .feature-card.active .feature-card-content {
padding: 0 1.25rem 1.25rem;
}

/* Comparison Compact Layout - Mobile Horizontal */
.cro-comparison .comparison-compact {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}

.cro-comparison .comparison-row {
padding: 0.75rem 0.5rem;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 0.5rem;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
align-items: center;
text-align: center;
}

.cro-comparison .feature-card.active .comparison-row {
opacity: 1;
transform: translateY(0);
}

.cro-comparison .feature-card.active .comparison-row:nth-child(1) {
transition-delay: 0.1s;
}

.cro-comparison .feature-card.active .comparison-row:nth-child(2) {
transition-delay: 0.2s;
}

.cro-comparison .feature-card.active .comparison-row:nth-child(3) {
transition-delay: 0.3s;
}

.cro-comparison .cbcs-row {
background: rgba(16, 185, 129, 0.08);
border: 2px solid var(--success);
}

.cro-comparison .typical-row {
background: rgba(245, 158, 11, 0.05);
border: 2px solid var(--gray-300);
}

.cro-comparison .budget-row {
background: rgba(239, 68, 68, 0.05);
border: 2px solid var(--gray-300);
}

.cro-comparison .provider-badge {
display: inline-block;
padding: 0.375rem 0.5rem;
border-radius: 6px;
font-weight: 700;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 0.5rem;
align-self: center;
line-height: 1.2;
}

.cro-comparison .cbcs-badge {
background: var(--success);
color: white;
}

.cro-comparison .typical-badge {
background: var(--warning);
color: var(--color-secondary-normal-bg);
}

.cro-comparison .budget-badge {
background: var(--color-primary-normal-bg);
color: white;
}

/* Feature Pills - Compact Mobile */
.cro-comparison .feature-pills {
display: flex;
flex-direction: column;
gap: 0.375rem;
width: 100%;
}

.cro-comparison .pill-badge {
padding: 0.375rem 0.5rem;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
position: relative;
line-height: 1.2;
}

.cro-comparison .pill-badge.success {
background: var(--success-light);
color: var(--success);
border: 2px solid var(--success);
}

.cro-comparison .pill-badge.cert {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}

.cro-comparison .pill-badge.warning {
background: var(--warning-light);
color: #D97706;
border: 2px solid var(--warning);
}

.cro-comparison .pill-badge.danger {
background: rgba(239, 68, 68, 0.15);
color: var(--color-primary-normal-bg);
border: 2px solid var(--color-primary-normal-bg);
}

.cro-comparison .pill-badge.info {
background: var(--info-light);
color: #0369A1;
cursor: help;
}

.cro-comparison .pill-badge.info:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-secondary-normal-bg);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.7rem;
white-space: nowrap;
margin-bottom: 0.5rem;
box-shadow: var(--shadow-lg);
z-index: 10;
}

/* Comparison Summary Paragraph */
.cro-comparison .comparison-summary {
font-size: 0.875rem;
line-height: 1.6;
color: var(--gray-700);
background: linear-gradient(135deg, rgba(0, 31, 63, 0.04) 0%, rgba(196, 30, 58, 0.04) 100%);
padding: 1rem;
border-radius: 10px;
margin-bottom: 1rem;
border-left: 4px solid var(--color-primary-normal-bg);
font-weight: 500;
}

/* Tiny CTA at end of feature cards */
.cro-comparison .tiny-cta {
display: block;
text-align: center;
padding: 0.75rem 1rem;
background: var(--color-primary-normal-bg);
/* background: linear-gradient(135deg, var(--color-primary-normal-bg) 0%, var(--color-primary-hover-bg) 100%); */
color: white;
border-radius: 10px;
font-weight: 700;
font-size: 0.875rem;
text-decoration: none;
width: 75%;
margin: 1rem auto 0;
transition: all 0.3s ease;
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-normal-bg) 75%, transparent);
}

.cro-comparison .tiny-cta:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-normal-bg) 65%, transparent);
}

.cro-comparison .tiny-cta:active {
transform: translateY(0);
}

/* Progress Bar Compact */
.cro-comparison .progress-bar-compact {
margin: 1rem 0;
padding: 1rem;
background: var(--gray-50);
border-radius: 10px;
}

.cro-comparison .progress-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--gray-700);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cro-comparison .progress-track {
height: 8px;
background: var(--gray-200);
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
position: relative;
}

.cro-comparison .progress-track:last-child {
margin-bottom: 0;
}

.cro-comparison .progress-fill {
height: 100%;
border-radius: 4px;
width: 0%;
transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}

.cro-comparison .progress-fill::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
animation: shimmer-cro-09 2s infinite;
}

@keyframes shimmer-cro-09 {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

.cro-comparison .cbcs-fill {
background: var(--success);
}

.cro-comparison .typical-fill {
background: var(--warning);
}

.cro-comparison .budget-fill {
background: var(--color-primary-normal-bg);
}

/* Proof Box */
.cro-comparison .proof-box {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--info-light);
border-radius: 10px;
border-left: 4px solid var(--info);
}

.cro-comparison .proof-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-secondary-normal-bg) 0%, var(--color-secondary-hover-bg) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}

.cro-comparison .proof-quote {
font-size: 0.85rem;
color: var(--gray-700);
font-style: italic;
line-height: 1.5;
}

/* CTA Box */
.cro-comparison .comparison-cta-box-v2 {
text-align: center;
padding: 2.5rem 1.5rem;
background: linear-gradient(135deg, rgba(0, 31, 63, 0.05) 0%, rgba(196, 30, 58, 0.05) 100%);
border-radius: 20px;
border: 3px solid var(--color-primary-normal-bg);
box-shadow: var(--shadow-lg);
}

.cro-comparison .cta-badge {
display: inline-block;
background: var(--warning);
color: var(--color-secondary-normal-bg);
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.75rem;
margin-bottom: 1.25rem;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
border: 2px solid white;
}

.cro-comparison .comparison-cta-box-v2 h3 {
color: var(--color-secondary-normal-bg);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 1rem;
}

.cro-comparison .comparison-cta-box-v2 p {
color: var(--gray-700);
font-size: 1.05rem;
margin-bottom: 2rem;
line-height: 1.6;
}

.cro-comparison .btn-primary {
display: inline-flex;
flex-direction: column;
align-items: center;
/* background: linear-gradient(135deg, var(--color-primary-normal-bg) 0%, var(--color-primary-hover-bg) 100%); */
background: var(--color-primary-normal-bg);
color: white;
padding: 1rem 2rem;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
box-shadow: var(--shadow-primary);
margin-bottom: 1.5rem;
}

.cro-comparison .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary-normal-bg) 60%, transparent);
}

.cro-comparison .btn-main-text {
font-size: 1.1rem;
}

.cro-comparison .btn-sub-text {
font-size: 0.75rem;
opacity: 0.9;
margin-top: 0.25rem;
}

.cro-comparison .cta-trust-items {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--gray-700);
font-weight: 600;
}

/* Desktop Responsive */
@media (min-width: 768px) {
.cro-comparison {
    padding: 4rem 2rem;
}

.cro-comparison .comparison-filters {
    grid-template-columns: repeat(4, 1fr);
}

/* Score Dashboard - Desktop 4 Column Layout */
.cro-comparison .score-dashboard {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding: 1.25rem;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

.cro-comparison .score-card {
    padding: 1rem 0.625rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cro-comparison .score-label {
    font-size: 0.7rem;
}

.cro-comparison .score-circle {
    width: 75px;
    height: 75px;
    margin-bottom: 0.5rem;
}

.cro-comparison .score-count {
    font-size: 1.75rem;
}

.cro-comparison .score-total {
    font-size: 0.9rem;
}

.cro-comparison .score-subtitle {
    font-size: 0.65rem;
}

.cro-comparison .summary-icon {
    font-size: 1.75rem;
    margin-bottom: 0.375rem;
}

.cro-comparison .summary-text {
    font-size: 0.7rem;
}

/* Comparison Compact - Desktop Vertical Layout */
.cro-comparison .comparison-compact {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.cro-comparison .comparison-row {
    padding: 1rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.cro-comparison .provider-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.cro-comparison .feature-pills {
    flex-direction: row;
    flex-wrap: wrap;
}

.cro-comparison .comparison-cta-box-v2 h3 {
    font-size: 2.25rem;
}
}