/**
 * Norwegian-Style Skin (Red, White & Blue)
 * Clean light theme with Norwegian flag color accents
 * Red (#EF2B2D) accent, blue (#002868) dark sections
 */

[data-theme="cherry-style"] {
    /* Core Colors - Clean Light Theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;          /* Neutral gray, not pink */
    --bg-card: #ffffff;
    
    /* Accent Colors - Refined Cherry Red */
    --accent-orange: #EF2B2D;          /* Rose-600: more vibrant, less harsh */
    --accent-orange-rgb: 239, 43, 45;
    --accent-orange-dark: #C8102E;     /* Rose-700 */
    --accent-gradient: linear-gradient(135deg, #EF2B2D 0%, #C8102E 100%);
    
    /* Buttons */
    --btn-primary: #EF2B2D;
    --btn-primary-hover: #C8102E;
    
    /* Text Colors - Neutral, readable */
    --text-heading: #111827;           /* Gray-900 */
    --text-body: #374151;              /* Gray-700 */
    --text-muted: #6b7280;             /* Gray-500 */
    --text-primary: #111827;
    --text-secondary: #374151;
    
    /* Borders - Neutral gray, not red */
    --border-color: #e5e7eb;           /* Gray-200 */
    
    /* Shadows - Neutral, professional */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Dark Section Backgrounds - Sophisticated slate with red accent */
    --bg-dark: #002868;                /* Slate-800: elegant, not blood red */
    --bg-darker: #001A4D;              /* Slate-900 */
    --bg-dark-start: #002868;
    --bg-dark-end: #003580;            /* Slate-700 */
    --bg-dark-alt-start: #001A4D;
    --bg-dark-alt-end: #002868;
    
    /* Status Colors */
    --accent-green: #22c55e;
    --accent-red: #EF2B2D;
}

/* ==================== CHERRY-STYLE COMPONENT OVERRIDES ==================== */

/* Hero Section - Clean white to subtle gray */
[data-theme="cherry-style"] .hero {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}

[data-theme="cherry-style"] .hero::before {
    background: radial-gradient(circle, rgba(239, 43, 45, 0.06) 0%, transparent 70%);
}

/* Top Bar - Slate dark for elegance */
[data-theme="cherry-style"] .top-bar {
    background: linear-gradient(90deg, #001A4D 0%, #002868 100%);
}

[data-theme="cherry-style"] .top-bar-link:hover {
    color: #FF6B6B;                    /* Rose-400: softer hover */
}

/* Mobile Quick Links */
[data-theme="cherry-style"] .mobile-quick-links {
    background: #002868;
}

/* Mega Highlight - Subtle rose tint only here */
[data-theme="cherry-style"] .mega-highlight {
    background: linear-gradient(135deg, rgba(239, 43, 45, 0.04) 0%, rgba(239, 43, 45, 0.08) 100%);
}

/* Sports Showcase - Neutral gradient */
[data-theme="cherry-style"] .sports-showcase {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

/* Section Alt - Neutral gray */
[data-theme="cherry-style"] .section-alt {
    background: #f9fafb;
}

/* Dropdown Hover - Subtle */
[data-theme="cherry-style"] .dropdown-menu li a:hover {
    background: #f3f4f6;
    color: #EF2B2D;
}

/* Pricing Cards - Red accent only on featured */
[data-theme="cherry-style"] .pricing-card {
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

[data-theme="cherry-style"] .pricing-card.featured {
    border: 2px solid #EF2B2D;
    box-shadow: 0 8px 30px rgba(239, 43, 45, 0.12);
}

[data-theme="cherry-style"] .pricing-card.featured::before {
    background: linear-gradient(135deg, #EF2B2D 0%, #C8102E 100%);
}

/* Plan Button Active */
[data-theme="cherry-style"] .plan-btn.active {
    background: #EF2B2D;
    box-shadow: 0 8px 24px rgba(239, 43, 45, 0.25);
}

/* Feature Cards - Clean white with subtle hover */
[data-theme="cherry-style"] .feature-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

[data-theme="cherry-style"] .feature-card:hover {
    border-color: rgba(239, 43, 45, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Feature Icon - Subtle rose background */
[data-theme="cherry-style"] .feature-icon {
    background: linear-gradient(135deg, rgba(239, 43, 45, 0.08) 0%, rgba(239, 43, 45, 0.12) 100%);
}

[data-theme="cherry-style"] .feature-icon svg,
[data-theme="cherry-style"] .feature-icon .ph {
    color: #EF2B2D;
}

/* ==========================================================================
   PHOSPHOR ICON COLOR OVERRIDES
   Note: Most icons inherit from var(--accent-orange) defined in main.css
   Only override specific cases where the accent color needs adjustment
   ========================================================================== */

/* Icons that need explicit cherry red (already handled by --accent-orange variable) */
/* No additional overrides needed - CSS variables handle this automatically */

/* Testimonials - Clean */
[data-theme="cherry-style"] .testimonial-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

[data-theme="cherry-style"] .testimonial-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* FAQ - Clean styling */
[data-theme="cherry-style"] .faq-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

[data-theme="cherry-style"] .faq-item.active {
    border-color: rgba(239, 43, 45, 0.3);
}

[data-theme="cherry-style"] .faq-question:hover {
    color: #EF2B2D;
}

/* Footer - Elegant slate with proper light text for contrast */
[data-theme="cherry-style"] .footer {
    background: linear-gradient(180deg, #002868 0%, #001A4D 100%);
}

/* Footer text must be light on dark background */
[data-theme="cherry-style"] .footer-brand > p,
[data-theme="cherry-style"] .footer-column a,
[data-theme="cherry-style"] .footer-bottom p {
    color: #94a3b8;                    /* Slate-400 */
}

[data-theme="cherry-style"] .footer-column h4,
[data-theme="cherry-style"] .footer-brand .logo-text {
    color: #f1f5f9;                    /* Slate-100 */
}

[data-theme="cherry-style"] .footer-column a:hover {
    color: #FF6B6B;                    /* Rose-400 */
}

[data-theme="cherry-style"] .footer-social a {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="cherry-style"] .footer-social a:hover {
    background: #EF2B2D;
    color: #ffffff;
}

[data-theme="cherry-style"] .footer-trust-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

[data-theme="cherry-style"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Live Sports Section - Slate with red accents */
[data-theme="cherry-style"] .live-sports-section {
    background: linear-gradient(135deg, #001A4D 0%, #002868 100%);
}

[data-theme="cherry-style"] .live-badge {
    background: rgba(239, 43, 45, 0.15);
    border-color: rgba(239, 43, 45, 0.4);
    color: #FF6B6B;
}

[data-theme="cherry-style"] .live-dot {
    background: #EF2B2D;
}

/* CTA Section - Slate background */
[data-theme="cherry-style"] .cta-section {
    background: linear-gradient(135deg, #002868 0%, #001A4D 100%);
}

/* Sport Category Tags */
[data-theme="cherry-style"] .sport-category-tag:hover {
    background: rgba(239, 43, 45, 0.15);
    border-color: #EF2B2D;
}

/* Hero Badge - Subtle */
[data-theme="cherry-style"] .hero-badge {
    background: linear-gradient(135deg, rgba(239, 43, 45, 0.06) 0%, rgba(239, 43, 45, 0.1) 100%);
    border-color: rgba(239, 43, 45, 0.2);
    color: #C8102E;
}

/* Navigation Active State */
[data-theme="cherry-style"] .nav-links > li > a:hover,
[data-theme="cherry-style"] .nav-links > li > a.active {
    color: #EF2B2D;
    background: rgba(239, 43, 45, 0.06);
}

/* Buttons - Refined hover states */
[data-theme="cherry-style"] .btn-primary:hover {
    background: #C8102E;
    box-shadow: 0 4px 15px rgba(239, 43, 45, 0.3);
}

[data-theme="cherry-style"] .btn-secondary {
    border-color: #EF2B2D;
    color: #EF2B2D;
}

[data-theme="cherry-style"] .btn-secondary:hover {
    background: #EF2B2D;
    color: #ffffff;
}

/* Outline buttons - same styling as secondary for light theme */
[data-theme="cherry-style"] .btn-outline {
    border-color: #EF2B2D;
    color: #EF2B2D;
}

[data-theme="cherry-style"] .btn-outline:hover {
    background: #EF2B2D;
    color: #ffffff;
}

/* Page hero outline buttons on light background */
[data-theme="cherry-style"] .page-hero-cta .btn-outline {
    border-color: #EF2B2D;
    color: #EF2B2D;
}

[data-theme="cherry-style"] .page-hero-cta .btn-outline:hover {
    background: #EF2B2D;
    color: #ffffff;
}

/* Scrollbar - Subtle */
[data-theme="cherry-style"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

[data-theme="cherry-style"] ::-webkit-scrollbar-thumb:hover {
    background: #EF2B2D;
}

/* Selection Color */
[data-theme="cherry-style"] ::selection {
    background: rgba(239, 43, 45, 0.2);
    color: #111827;
}

/* Focus States - Accessibility */
[data-theme="cherry-style"] *:focus-visible {
    outline: 2px solid #EF2B2D;
    outline-offset: 2px;
}

/* ==========================================================================
   PAGES.CSS OVERRIDES - Fix hardcoded white borders for light theme
   The base pages.css uses rgba(255,255,255,0.05) borders which are invisible
   on light backgrounds. Override with proper border colors.
   ========================================================================== */

/* Category Cards */
[data-theme="cherry-style"] .category-card,
[data-theme="cherry-style"] .country-card,
[data-theme="cherry-style"] .league-card,
[data-theme="cherry-style"] .quality-card,
[data-theme="cherry-style"] .benefit-card,
[data-theme="cherry-style"] .tier-card,
[data-theme="cherry-style"] .visual-item {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .category-card:hover,
[data-theme="cherry-style"] .country-card:hover,
[data-theme="cherry-style"] .benefit-card:hover,
[data-theme="cherry-style"] .tier-card:hover,
[data-theme="cherry-style"] .visual-item:hover {
    border-color: #EF2B2D;
}

/* Channel Stats Bar */
[data-theme="cherry-style"] .channel-stats-bar {
    background: #f9fafb;
    border-color: #e5e7eb;
}

/* Country Search */
[data-theme="cherry-style"] .country-search {
    border-color: #e5e7eb;
}

/* Tier Cards - Popular highlight */
[data-theme="cherry-style"] .tier-popular {
    border-color: #EF2B2D;
}

[data-theme="cherry-style"] .tier-margin {
    background: #f9fafb;
}

/* Blog Cards */
[data-theme="cherry-style"] .post-card,
[data-theme="cherry-style"] .featured-post-card {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .post-card:hover,
[data-theme="cherry-style"] .featured-post-card:hover {
    border-color: #EF2B2D;
}

/* Blog Section Title */
[data-theme="cherry-style"] .blog-section-title {
    border-bottom-color: #e5e7eb;
}

/* Post Thumbnail Placeholder */
[data-theme="cherry-style"] .post-thumbnail-placeholder {
    background: #f9fafb;
}

/* Pagination */
[data-theme="cherry-style"] .blog-pagination a,
[data-theme="cherry-style"] .blog-pagination span {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .blog-pagination a:hover {
    border-color: #EF2B2D;
}

/* Post Tags */
[data-theme="cherry-style"] .post-tags {
    border-top-color: #e5e7eb;
}

[data-theme="cherry-style"] .tag {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .tag:hover {
    border-color: #EF2B2D;
}

/* Share Buttons */
[data-theme="cherry-style"] .share-btn {
    border-color: #e5e7eb;
}

/* Author Box */
[data-theme="cherry-style"] .author-box {
    border-color: #e5e7eb;
}

/* Post Navigation */
[data-theme="cherry-style"] .post-nav-item {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .post-nav-item:hover {
    border-color: #EF2B2D;
}

/* Comments */
[data-theme="cherry-style"] .comments-area {
    border-top-color: #e5e7eb;
}

[data-theme="cherry-style"] .comment-body {
    border-color: #e5e7eb;
}

/* Sidebar Widgets */
[data-theme="cherry-style"] .sidebar-widget {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .widget-title {
    border-bottom-color: #e5e7eb;
}

/* Search Input */
[data-theme="cherry-style"] .search-input-wrapper {
    background: #ffffff;
    border-color: #e5e7eb;
}

/* Recent Posts Widget */
[data-theme="cherry-style"] .recent-post-item {
    border-bottom-color: #e5e7eb;
}

/* Categories List */
[data-theme="cherry-style"] .categories-list li {
    border-bottom-color: #e5e7eb;
}

[data-theme="cherry-style"] .cat-count {
    background: #f3f4f6;
}

/* Quick Links */
[data-theme="cherry-style"] .quick-links-list li {
    border-bottom-color: #e5e7eb;
}

/* Device Cards */
[data-theme="cherry-style"] .device-card {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .device-card:hover {
    border-color: #EF2B2D;
}

[data-theme="cherry-style"] .device-difficulty {
    background: #f3f4f6;
}

/* App Cards */
[data-theme="cherry-style"] .app-card {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .app-card:hover {
    border-color: #EF2B2D;
}

/* Contact Form */
[data-theme="cherry-style"] .contact-form-wrapper {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .form-input,
[data-theme="cherry-style"] .form-textarea {
    border-color: #e5e7eb;
    background: #ffffff;
}

[data-theme="cherry-style"] .form-input:focus,
[data-theme="cherry-style"] .form-textarea:focus {
    border-color: #EF2B2D;
}

/* FAQ Page */
[data-theme="cherry-style"] .faq-category-card {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .faq-category-card:hover {
    border-color: #EF2B2D;
}

/* Highlight Tags */
[data-theme="cherry-style"] .highlight-tag {
    background: #f3f4f6;
}

/* Blog Hero Stats */
[data-theme="cherry-style"] .blog-stat {
    background: #f9fafb;
    border-color: #e5e7eb;
}

/* Code blocks in posts */
[data-theme="cherry-style"] .post-body code {
    background: #f3f4f6;
}

/* Reseller Contact Box - Light theme version */
[data-theme="cherry-style"] .reseller-contact-box {
    background: #f9fafb;
    border-color: rgba(239, 43, 45, 0.2);
}

/* ==========================================================================
   Affiliate Page - Cherry Light Theme Overrides
   ========================================================================== */

[data-theme="cherry-style"] .affiliate-reward-card {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .affiliate-reward-card:hover {
    border-color: #EF2B2D;
}

[data-theme="cherry-style"] .partner-terms-box,
[data-theme="cherry-style"] .partner-ideal-box {
    border-color: #e5e7eb;
}

[data-theme="cherry-style"] .ideal-list li {
    border-bottom-color: #e5e7eb;
}

[data-theme="cherry-style"] .reward-example {
    background: #f9fafb;
    border-top-color: #e5e7eb;
}

[data-theme="cherry-style"] .reward-card-header {
    border-bottom-color: #e5e7eb;
}

[data-theme="cherry-style"] .term-item {
    background: #f3f4f6;
}
