/*
 * NOVA IPTV - Blue & White Theme
 * Change colors fast: edit variables below.
 * Blue backgrounds → white text | White backgrounds → blue text
 */

:root {
  /* Primary colors - change these to rebrand quickly */
  --nova-blue-dark:    #1d4ed8;
  --nova-blue:         #2563eb;
  --nova-blue-light:   #3b82f6;
  --nova-blue-lighter: #60a5fa;
  --nova-blue-pale:    #93c5fd;
  --nova-blue-bg:      #dbeafe;
  --nova-blue-bg-alt:  #eff6ff;
  
  /* Text & surfaces */
  --nova-text-on-blue: #ffffff;
  --nova-text-on-white: #1d4ed8;
  --nova-bg-white:     #ffffff;
  --nova-bg-body:      #f0f4f8;
  
  /* Opacity helpers */
  --nova-blue-alpha-1: rgba(37, 99, 235, 0.1);
  --nova-blue-alpha-2: rgba(37, 99, 235, 0.2);
  --nova-blue-alpha-3: rgba(37, 99, 235, 0.35);
  --nova-white-alpha:  rgba(255, 255, 255, 0.1);
}

/* Decorative shapes - use variables */
.hero-section .hero-shape { background: var(--nova-blue-alpha-1) !important; }
.site-categories-section .section-shape,
.why-choose-us .section-shape,
.faq-section .section-shape { background: var(--nova-white-alpha) !important; }
.package-card .package-card-shape { background: var(--nova-blue-alpha-1) !important; }
.service-card .service-card-shape { background: var(--nova-blue-alpha-1) !important; }
.package-card .package-icon-circle { background: linear-gradient(45deg, var(--nova-blue-lighter), var(--nova-blue)) !important; border: 3px solid var(--nova-blue-dark) !important; }
.hero-image-border { border: 8px solid var(--nova-blue) !important; }
.hero-feature-label { color: var(--nova-text-on-white) !important; }
.site-categories-section .section-badge,
.why-choose-us .section-badge,
.faq-section .section-badge { background: var(--nova-bg-white) !important; border: 2px solid var(--nova-bg-white) !important; color: var(--nova-text-on-white) !important; }

/* Hero - light bg → blue text */
.hero-section { background: linear-gradient(135deg, var(--nova-bg-white) 0%, var(--nova-blue-bg-alt) 50%, var(--nova-blue-bg) 100%) !important; }
.hero-section .position-absolute[style*="rgba"] { background: var(--nova-blue-alpha-1) !important; }
.hero-badge { background: linear-gradient(45deg, var(--nova-blue), var(--nova-blue-dark)) !important; border-color: var(--nova-blue-dark) !important; color: #ffffff !important; }
.hero-badge span { color: #ffffff !important; }
.hero-title span { background: linear-gradient(45deg, var(--nova-blue-dark), var(--nova-blue)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.hero-title span[style*="color"] { color: var(--nova-text-on-white) !important; -webkit-text-fill-color: var(--nova-text-on-white) !important; }
.hero-description { background: var(--nova-bg-white) !important; border-color: var(--nova-blue) !important; }
.hero-description .lead, .hero-description p { color: var(--nova-text-on-white) !important; }
.hero-feature-icon { background: linear-gradient(45deg, var(--nova-blue), var(--nova-blue-dark)) !important; border-color: var(--nova-blue-dark) !important; }
.hero-feature-icon i { color: var(--nova-text-on-blue) !important; }
.hero-content-left p { color: var(--nova-text-on-white) !important; }
.hero-whatsapp-btn { background: linear-gradient(45deg, var(--nova-blue), var(--nova-blue-dark)) !important; border-color: var(--nova-blue-dark) !important; color: #ffffff !important; }
.hero-whatsapp-btn, .hero-whatsapp-btn i { color: #ffffff !important; }
.hero-image-frame { background: linear-gradient(45deg, var(--nova-blue-lighter), var(--nova-blue)) !important; border-color: var(--nova-blue) !important; }
.hero-image-right > div:last-of-type { border-color: var(--nova-blue) !important; }
.hero-floating-badge { background: linear-gradient(45deg, var(--nova-blue), var(--nova-blue-dark)) !important; border-color: var(--nova-blue-dark) !important; color: var(--nova-text-on-blue) !important; }
.hero-floating-badge strong, .hero-floating-badge i { color: var(--nova-text-on-blue) !important; }

/* Packages Section - BLUE bg → WHITE text */
.site-categories-section { background: linear-gradient(135deg, var(--nova-blue-light) 0%, var(--nova-blue) 50%, var(--nova-blue-dark) 100%) !important; }
.site-categories-section .position-absolute { background: var(--nova-white-alpha) !important; }
.site-categories-section .rounded-pill { background: var(--nova-bg-white) !important; border-color: var(--nova-bg-white) !important; color: var(--nova-text-on-white) !important; }
.site-categories-section h2 { color: var(--nova-text-on-blue) !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--nova-text-on-blue) !important; background: none !important; }
.site-categories-section .lead { color: var(--nova-text-on-blue) !important; }

/* Package cards - WHITE bg → BLUE text */
.package-card, .category-card { background: var(--nova-bg-white) !important; border-color: var(--nova-blue) !important; }
.package-card .position-absolute[style*="opacity: 0"] { background: transparent !important; }
.package-card .rounded-circle { background: linear-gradient(45deg, var(--nova-blue-lighter), var(--nova-blue)) !important; border-color: var(--nova-blue-dark) !important; }
.package-card .rounded-circle i { color: var(--nova-text-on-blue) !important; }
.package-card .category-name, .package-card h3 { color: var(--nova-text-on-white) !important; }
.package-card .category-description, .package-card p { color: var(--nova-text-on-white) !important; }
.package-card .btn { background: linear-gradient(45deg, var(--nova-blue), var(--nova-blue-dark)) !important; border-color: var(--nova-blue-dark) !important; color: var(--nova-text-on-blue) !important; }
.category-card:hover { box-shadow: 0 20px 40px var(--nova-blue-alpha-3) !important; border-color: var(--nova-blue-light) !important; }

/* Why Choose Us - BLUE bg → WHITE text */
.why-choose-us { background: linear-gradient(135deg, var(--nova-blue-dark) 0%, var(--nova-blue) 50%, var(--nova-blue-light) 100%) !important; }
.why-choose-us .position-absolute { background: var(--nova-white-alpha) !important; }
.why-choose-us .rounded-pill { background: var(--nova-bg-white) !important; border-color: var(--nova-bg-white) !important; color: var(--nova-text-on-white) !important; }
.why-choose-us h2 { color: var(--nova-text-on-blue) !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--nova-text-on-blue) !important; background: none !important; }
.why-choose-us .lead { color: var(--nova-text-on-blue) !important; }

/* Service cards - WHITE bg → BLUE text */
.service-card { background: var(--nova-bg-white) !important; border-color: var(--nova-blue) !important; }
.service-card .position-absolute { background: var(--nova-blue-alpha-1) !important; }
.service-icon { background: var(--nova-blue-alpha-2) !important; border-color: var(--nova-blue) !important; }
.service-icon i { color: var(--nova-text-on-white) !important; }
.service-card h3 { color: var(--nova-text-on-white) !important; }
.service-card p { color: var(--nova-text-on-white) !important; }
.service-card .btn { background: linear-gradient(45deg, var(--nova-blue), var(--nova-blue-dark)) !important; border-color: var(--nova-blue-dark) !important; color: var(--nova-text-on-blue) !important; }
.service-card:hover { box-shadow: 0 20px 40px var(--nova-blue-alpha-3) !important; }

/* FAQ Section - BLUE bg → WHITE text */
.faq-section { background: linear-gradient(135deg, var(--nova-blue-light) 0%, var(--nova-blue) 50%, var(--nova-blue-dark) 100%) !important; }
.faq-section .position-absolute { background: var(--nova-white-alpha) !important; }
.faq-section .rounded-pill { background: var(--nova-bg-white) !important; border-color: var(--nova-bg-white) !important; color: var(--nova-text-on-white) !important; }
.faq-section h2 { color: var(--nova-text-on-blue) !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--nova-text-on-blue) !important; background: none !important; }
.faq-section .lead { color: var(--nova-text-on-blue) !important; }

/* Accordion items - WHITE bg → BLUE text */
.faq-section .accordion-item { background: var(--nova-bg-white) !important; border-color: var(--nova-blue) !important; }
.faq-section .accordion-button,
.faq-section .faq-accordion-btn,
.faq-section .accordion-header .accordion-button,
.faq-section .accordion-item .accordion-button { color: #000000 !important; background: var(--nova-bg-white) !important; }
.faq-section .accordion-button:not(.collapsed),
.faq-section .faq-accordion-btn:not(.collapsed) { background: var(--nova-blue-bg-alt) !important; color: #000000 !important; box-shadow: 0 5px 15px var(--nova-blue-alpha-2) !important; }
.faq-section .accordion-button:focus { border-color: var(--nova-blue) !important; box-shadow: 0 0 0 0.25rem var(--nova-blue-alpha-2) !important; }
.faq-section .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d4ed8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); filter: none; }
.faq-section .accordion-item:hover { transform: translateX(5px); box-shadow: 0 10px 25px var(--nova-blue-alpha-2) !important; border-color: var(--nova-blue-light) !important; }
.faq-section .accordion-body { background: var(--nova-bg-white) !important; color: var(--nova-text-on-white) !important; border-color: var(--nova-blue) !important; }
.faq-section .fa-question-circle { color: #000000 !important; }
.faq-section .fa-check-circle { color: var(--nova-text-on-white) !important; }
.faq-section .accordion-body a { color: #000000 !important; }
.faq-section .accordion-body a:hover { color: #1d4ed8 !important; text-decoration: underline !important; }

/* Navbar */
.navbar { background: var(--nova-bg-white) !important; border-bottom-color: var(--nova-blue) !important; }

/* Footer - BLUE bg → WHITE text */
footer { background: linear-gradient(135deg, var(--nova-blue-dark) 0%, var(--nova-blue) 50%, var(--nova-blue-light) 100%) !important; border-top-color: var(--nova-blue-dark) !important; }
footer .footer-copyright { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255,255,255,0.5) !important; }
footer .footer-copyright p, footer .text-white { color: var(--nova-text-on-blue) !important; }
footer .footer-copyright-dark p,
footer .footer-copyright-dark #current-year { color: #000000 !important; }
footer #current-year { color: var(--nova-text-on-blue) !important; }
footer .footer-shape { background: var(--nova-blue-alpha-2) !important; }

/* Body */
body { background: var(--nova-bg-body) !important; }

/* Contact Us */
.contact-hero-section { background: linear-gradient(135deg, var(--nova-blue) 0%, var(--nova-blue-dark) 100%) !important; border-color: var(--nova-blue-dark) !important; }
.contact-hero-section .position-absolute { background: var(--nova-white-alpha) !important; }
.contact-hero-section .rounded-pill { background: var(--nova-bg-white) !important; border-color: var(--nova-bg-white) !important; color: var(--nova-text-on-white) !important; }
.contact-hero-section h1 { color: var(--nova-text-on-blue) !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--nova-text-on-blue) !important; background: none !important; }
.contact-hero-section .lead { color: var(--nova-text-on-blue) !important; }
.contact-content-section { background: linear-gradient(135deg, var(--nova-blue-light) 0%, var(--nova-blue) 100%) !important; }
.contact-hero-section .section-shape { background: var(--nova-white-alpha) !important; }
.contact-card { background: var(--nova-bg-white) !important; border-color: var(--nova-blue) !important; }
.contact-card .position-absolute { background: var(--nova-blue-alpha-1) !important; }
.contact-card .rounded-circle { background: var(--nova-blue-alpha-2) !important; border-color: var(--nova-blue) !important; }
.contact-card .rounded-circle i { color: var(--nova-text-on-white) !important; }
.contact-card h2 { color: var(--nova-text-on-white) !important; }
.contact-card p { color: var(--nova-text-on-white) !important; }
.contact-card .text-white { color: var(--nova-text-on-white) !important; }
.contact-info-card { background: var(--nova-bg-white) !important; border-color: var(--nova-blue) !important; }
.contact-info-card i, .contact-info-card h4 { color: var(--nova-text-on-white) !important; }
.contact-info-card .text-white { color: var(--nova-text-on-white) !important; }
.contact-card .contact-card-shape { background: var(--nova-blue-alpha-1) !important; }
.contact-card .contact-whatsapp-icon { background: var(--nova-blue-alpha-2) !important; border: 4px solid var(--nova-blue) !important; box-shadow: 0 10px 30px var(--nova-blue-alpha-3) !important; }
.contact-card .contact-whatsapp-icon i { color: var(--nova-text-on-white) !important; }
.contact-phone-link { color: var(--nova-text-on-white) !important; }
.contact-phone-link:hover { color: var(--nova-blue) !important; }

/* CTA Section */
.cta-section { background: linear-gradient(135deg, var(--nova-blue-dark) 0%, var(--nova-blue) 100%) !important; }
.cta-section p { color: var(--nova-text-on-blue) !important; }
