/**
 * H-Style Skin (Hulu Inspired)
 * Dark theme with green accents
 */

[data-theme="h-style"] {
    /* Core Colors */
    --bg-primary: #0B0C0F;
    --bg-secondary: #16181D;
    --bg-card: #1F2329;
    
    /* Accent Colors - Hulu Green */
    --accent-orange: #1CE783;
    --accent-orange-rgb: 28, 231, 131;
    --accent-orange-dark: #14a85f;
    --accent-gradient: linear-gradient(135deg, #1CE783 0%, #14a85f 100%);
    
    /* Buttons */
    --btn-primary: #1CE783;
    --btn-primary-hover: #14a85f;
    
    /* Text Colors */
    --text-heading: #ffffff;
    --text-body: #e5e5e5;
    --text-muted: #9ca3af;
    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    
    /* Borders */
    --border-color: #2d333b;
    
    /* Shadows - Darker for dark theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    
    /* Dark Section Backgrounds */
    --bg-dark: #080a0c;
    --bg-darker: #060809;
    --bg-dark-start: #080a0c;
    --bg-dark-end: #12151a;
    --bg-dark-alt-start: #060809;
    --bg-dark-alt-end: #0e1115;
    
    /* Status Colors */
    --accent-green: #1CE783;
    --accent-red: #ef4444;
}

/* ==================== H-STYLE COMPONENT OVERRIDES ==================== */

/* Hero Section */
[data-theme="h-style"] .hero {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Header */
[data-theme="h-style"] .header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

/* Top Bar */
[data-theme="h-style"] .top-bar {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border-color);
}

/* Pricing Section */
[data-theme="h-style"] .pricing {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Dropdowns */
[data-theme="h-style"] .dropdown-menu,
[data-theme="h-style"] .mega-dropdown,
[data-theme="h-style"] .simple-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="h-style"] .simple-dropdown ul li a {
    color: var(--text-body);
}

[data-theme="h-style"] .simple-dropdown .dropdown-text strong {
    color: var(--text-heading);
}

[data-theme="h-style"] .simple-dropdown .dropdown-text small {
    color: var(--text-muted);
}

[data-theme="h-style"] .dropdown-menu li a:hover {
    background: var(--bg-secondary);
}

[data-theme="h-style"] .mega-highlight {
    background: var(--bg-secondary);
}

/* IMPORTANT: Button text color for light accent */
[data-theme="h-style"] .btn-primary {
    color: #000;
}

/* Button text color for all button types with light accent */
[data-theme="h-style"] .btn-tier,
[data-theme="h-style"] .cta-section .btn-primary,
[data-theme="h-style"] .hero-cta .btn-primary,
[data-theme="h-style"] .page-hero-cta .btn-primary,
[data-theme="h-style"] .reseller-contact-box .btn-primary,
[data-theme="h-style"] .affiliate-get-code-box .btn-primary,
[data-theme="h-style"] .affiliate-apply-box .btn-primary {
    color: #000 !important;
}

/* Secondary/Outline buttons in CTA sections - need visible text on dark bg */
[data-theme="h-style"] .cta-section .btn-secondary,
[data-theme="h-style"] .cta-section .btn-outline,
[data-theme="h-style"] .reseller-contact-box .btn-secondary,
[data-theme="h-style"] .reseller-contact-box .btn-outline {
    color: #fff !important;
    border-color: #fff;
}

[data-theme="h-style"] .cta-section .btn-secondary:hover,
[data-theme="h-style"] .cta-section .btn-outline:hover,
[data-theme="h-style"] .reseller-contact-box .btn-secondary:hover,
[data-theme="h-style"] .reseller-contact-box .btn-outline:hover {
    background: #fff;
    color: #000 !important;
}

/* Mobile Menu */
[data-theme="h-style"] .mobile-menu {
    background: var(--bg-primary);
}

[data-theme="h-style"] .mobile-quick-links {
    background: var(--bg-darker);
}

[data-theme="h-style"] .mobile-submenu {
    background: var(--bg-secondary);
}

[data-theme="h-style"] .mobile-cta {
    background: var(--bg-secondary);
}

[data-theme="h-style"] .mobile-account-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Feature Cards */
[data-theme="h-style"] .feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Pricing Cards */
[data-theme="h-style"] .pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="h-style"] .pricing-card.featured {
    border-color: var(--accent-orange);
    box-shadow: 0 8px 30px rgba(28, 231, 131, 0.3);
}

/* Testimonials */
[data-theme="h-style"] .testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* FAQ */
[data-theme="h-style"] .faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Footer */
[data-theme="h-style"] .footer {
    background: var(--bg-darker);
}

/* Section Alt */
[data-theme="h-style"] .section-alt {
    background: var(--bg-secondary);
}


/* ==========================================================================
   Pages Component Overrides - Visible Borders on Dark Background
   ========================================================================== */

[data-theme="h-style"] .benefit-card,
[data-theme="h-style"] .tier-card,
[data-theme="h-style"] .category-card,
[data-theme="h-style"] .country-card,
[data-theme="h-style"] .league-card,
[data-theme="h-style"] .quality-card,
[data-theme="h-style"] .visual-item,
[data-theme="h-style"] .step-card,
[data-theme="h-style"] .affiliate-reward-card,
[data-theme="h-style"] .partner-terms-box,
[data-theme="h-style"] .partner-ideal-box,
[data-theme="h-style"] .reseller-contact-box,
[data-theme="h-style"] .contact-feature,
[data-theme="h-style"] .device-card,
[data-theme="h-style"] .app-card {
    border-color: var(--border-color);
}

[data-theme="h-style"] .channel-stats-bar {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="h-style"] .tier-margin,
[data-theme="h-style"] .term-item,
[data-theme="h-style"] .contact-feature {
    background: var(--bg-secondary);
}

[data-theme="h-style"] .ideal-list li {
    border-bottom-color: var(--border-color);
}

[data-theme="h-style"] .reward-example {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
}

[data-theme="h-style"] .reward-card-header {
    border-bottom-color: var(--border-color);
}

[data-theme="h-style"] .highlight-tag {
    background: var(--bg-card);
}

/* ==========================================================================
   Page Hero & Affiliate - Outline Button Visibility on Dark Background
   ========================================================================== */

[data-theme="h-style"] .page-hero-cta .btn-outline {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

[data-theme="h-style"] .page-hero-cta .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

/* ==========================================================================
   PHOSPHOR ICON COLOR OVERRIDES
   Note: Icons inherit from var(--accent-orange) in main.css
   CSS variables handle theme-specific colors automatically
   ========================================================================== */

/* No additional overrides needed - CSS variables handle this */