/**
 * H-Light Skin (Hulu Green, Light Theme)
 * Light backgrounds with Hulu green accents
 * Based on h-style but with proper light-mode contrast
 */

[data-theme="h-light-style"] {
    /* Core Colors - Light */
    --bg-primary: #ffffff;
    --bg-secondary: #f0fdf4;
    --bg-card: #ffffff;

    /* Accent Colors - Hulu Green */
    --accent-orange: #16a34a;
    --accent-orange-rgb: 22, 163, 74;
    --accent-orange-dark: #15803d;
    --accent-gradient: linear-gradient(135deg, #16a34a 0%, #15803d 100%);

    /* Buttons */
    --btn-primary: #16a34a;
    --btn-primary-hover: #15803d;

    /* Text Colors - Dark text on light bg */
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-primary: #0f172a;
    --text-secondary: #334155;

    /* Borders */
    --border-color: #e2e8f0;

    /* Shadows - Subtle for light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

    /* Dark Section Backgrounds (hero, CTA, footer stay dark) */
    --bg-dark: #0f172a;
    --bg-darker: #020617;
    --bg-dark-start: #0f172a;
    --bg-dark-end: #1e293b;
    --bg-dark-alt-start: #020617;
    --bg-dark-alt-end: #0f172a;

    /* Status Colors */
    --accent-green: #16a34a;
    --accent-red: #ef4444;
}

/* ==================== H-LIGHT COMPONENT OVERRIDES ==================== */

/* Header - White with subtle border */
[data-theme="h-light-style"] .header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .header .nav-link,
[data-theme="h-light-style"] .header .logo-text {
    color: var(--text-heading);
}

/* Top Bar - Slightly tinted */
[data-theme="h-light-style"] .top-bar {
    background: #f0fdf4;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-body);
}

[data-theme="h-light-style"] .top-bar a,
[data-theme="h-light-style"] .top-bar span {
    color: var(--text-body);
}

/* Hero Section - Dark background, ALL text forced white */
[data-theme="h-light-style"] .hero {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="h-light-style"] .hero h1,
[data-theme="h-light-style"] .hero h2,
[data-theme="h-light-style"] .hero p,
[data-theme="h-light-style"] .hero .hero-description,
[data-theme="h-light-style"] .hero .hero-content p,
[data-theme="h-light-style"] .hero .hero-stats span,
[data-theme="h-light-style"] .hero .hero-stats .stat-value,
[data-theme="h-light-style"] .hero .hero-stats .stat-label {
    color: #ffffff;
}

[data-theme="h-light-style"] .hero .hero-badge {
    color: var(--accent-orange);
    border-color: rgba(22, 163, 74, 0.4);
    background: rgba(22, 163, 74, 0.15);
}

[data-theme="h-light-style"] .hero .trust-badges span,
[data-theme="h-light-style"] .hero .trust-badges .trust-badge-text,
[data-theme="h-light-style"] .hero .compact-badges span {
    color: rgba(255, 255, 255, 0.8);
}

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

[data-theme="h-light-style"] .page-hero h1 {
    color: var(--text-heading);
}

[data-theme="h-light-style"] .page-hero-subtitle {
    color: var(--text-muted);
}

/* Pricing Section - Light */
[data-theme="h-light-style"] .pricing {
    background: var(--bg-secondary);
}

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

/* ==========================================================================
   BUTTONS - Critical for light theme contrast
   ========================================================================== */

/* Primary buttons - white text on green */
[data-theme="h-light-style"] .btn-primary {
    color: #ffffff !important;
    background: var(--btn-primary);
}

[data-theme="h-light-style"] .btn-primary:hover {
    background: var(--btn-primary-hover);
    color: #ffffff !important;
}

/* All primary button variants */
[data-theme="h-light-style"] .btn-tier,
[data-theme="h-light-style"] .cta-section .btn-primary,
[data-theme="h-light-style"] .hero-cta .btn-primary,
[data-theme="h-light-style"] .page-hero-cta .btn-primary,
[data-theme="h-light-style"] .reseller-contact-box .btn-primary,
[data-theme="h-light-style"] .affiliate-get-code-box .btn-primary,
[data-theme="h-light-style"] .affiliate-apply-box .btn-primary {
    color: #ffffff !important;
}

/* Secondary/Outline buttons - green border, green text on light bg */
[data-theme="h-light-style"] .btn-secondary,
[data-theme="h-light-style"] .btn-outline {
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

[data-theme="h-light-style"] .btn-secondary:hover,
[data-theme="h-light-style"] .btn-outline:hover {
    background: var(--btn-primary);
    color: #ffffff;
}

/* Page hero outline buttons */
[data-theme="h-light-style"] .page-hero-cta .btn-outline {
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

[data-theme="h-light-style"] .page-hero-cta .btn-outline:hover {
    background: var(--btn-primary);
    color: #ffffff;
}

/* CTA section stays dark - buttons need light text */
[data-theme="h-light-style"] .cta-section .btn-secondary,
[data-theme="h-light-style"] .cta-section .btn-outline {
    color: #fff !important;
    border-color: #fff;
}

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

/* Reseller/Affiliate boxes on light bg */
[data-theme="h-light-style"] .reseller-contact-box .btn-secondary,
[data-theme="h-light-style"] .reseller-contact-box .btn-outline {
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

[data-theme="h-light-style"] .reseller-contact-box .btn-secondary:hover,
[data-theme="h-light-style"] .reseller-contact-box .btn-outline:hover {
    background: var(--btn-primary);
    color: #ffffff;
}

/* ==========================================================================
   CARDS - All need visible borders on white background
   ========================================================================== */

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

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

[data-theme="h-light-style"] .pricing-card.featured {
    border-color: var(--accent-orange);
    box-shadow: 0 8px 30px rgba(22, 163, 74, 0.15);
}

/* ==========================================================================
   MISC COMPONENTS
   ========================================================================== */

/* Channel Stats Bar */
[data-theme="h-light-style"] .channel-stats-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Tier Margin, Term Item, Contact Feature */
[data-theme="h-light-style"] .tier-margin,
[data-theme="h-light-style"] .term-item,
[data-theme="h-light-style"] .contact-feature {
    background: var(--bg-secondary);
}

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

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

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

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

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

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

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

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

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

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

/* Mobile Menu - Light */
[data-theme="h-light-style"] .mobile-menu {
    background: #ffffff;
}

[data-theme="h-light-style"] .mobile-menu a,
[data-theme="h-light-style"] .mobile-menu .mobile-nav-link {
    color: var(--text-heading);
}

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

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

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

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

/* Footer - Dark background, ALL text forced white */
[data-theme="h-light-style"] .footer {
    background: var(--bg-darker);
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="h-light-style"] .footer h4,
[data-theme="h-light-style"] .footer h3,
[data-theme="h-light-style"] .footer .footer-title,
[data-theme="h-light-style"] .footer .footer-brand,
[data-theme="h-light-style"] .footer .footer-logo-text {
    color: #ffffff;
}

[data-theme="h-light-style"] .footer a {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="h-light-style"] .footer a:hover {
    color: #ffffff;
}

[data-theme="h-light-style"] .footer p,
[data-theme="h-light-style"] .footer .footer-description,
[data-theme="h-light-style"] .footer .footer-bottom {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="h-light-style"] .footer .trust-badge-text,
[data-theme="h-light-style"] .footer .footer-badge span {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="h-light-style"] .footer .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Reseller Contact Box */
[data-theme="h-light-style"] .reseller-contact-box {
    background: var(--bg-secondary);
    border: 2px solid rgba(22, 163, 74, 0.2);
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

[data-theme="h-light-style"] .contact-form-wrapper {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .form-input,
[data-theme="h-light-style"] .form-textarea {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-body);
}

/* Country Search */
[data-theme="h-light-style"] .country-search {
    border: 1px solid var(--border-color);
}

/* FAQ Category Cards */
[data-theme="h-light-style"] .faq-category-card {
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   BLOG COMPONENTS
   ========================================================================== */

[data-theme="h-light-style"] .post-card,
[data-theme="h-light-style"] .featured-post-card {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .blog-section-title {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .post-thumbnail-placeholder {
    background: var(--bg-secondary);
}

[data-theme="h-light-style"] .blog-pagination a,
[data-theme="h-light-style"] .blog-pagination span {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .post-tags {
    border-top: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .tag {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .share-btn {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .author-box {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .post-nav-item {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .comments-area {
    border-top: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .comment-body {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .sidebar-widget {
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .widget-title {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .search-input-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .recent-post-item {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .categories-list li {
    border-bottom: 1px solid var(--border-color);
}

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

[data-theme="h-light-style"] .quick-links-list li {
    border-bottom: 1px solid var(--border-color);
}

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

[data-theme="h-light-style"] .blog-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="h-light-style"] .post-body code {
    background: var(--bg-secondary);
}

/* ==========================================================================
   SHOP PAGE OVERRIDES
   ========================================================================== */

/* Shop hero stays dark for visual impact */
[data-theme="h-light-style"] .shop-hero .trust-badge-item .ph {
    color: var(--accent-orange);
}

/* Shop pricing section - light */
[data-theme="h-light-style"] .shop-pricing-section {
    background: var(--bg-secondary);
}

/* Plan link cards */
[data-theme="h-light-style"] .plan-link-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
}

[data-theme="h-light-style"] .plan-link-card:hover {
    border-color: var(--accent-orange);
}