/* ============================================
   COMPREHENSIVE ICON COLOR SYSTEM
   ============================================
   
   This system adds contextual colors to all icons
   throughout the website based on their usage
   and section context.
*/

/* ============================================
   BASE ICON TRANSITIONS
   ============================================ */

i,
.fas,
.fab,
.far,
.fal {
    transition: color 0.3s ease, transform 0.3s ease;
}

/* ============================================
   HEADER & NAVIGATION ICONS
   ============================================ */

/* Logo icon - Primary color */
.logo i {
    color: #008060;
}

body.dark-theme .logo i,
html.dark-mode .logo i,
html[data-theme="dark"] .logo i {
    color: #10b981;
}

/* Navigation link icons */
.nav-links i {
    color: #008060;
    margin-right: 6px;
}

.nav-links a:hover i {
    color: #00563e;
}

body.dark-theme .nav-links i,
html.dark-mode .nav-links i,
html[data-theme="dark"] .nav-links i {
    color: #10b981;
}

body.dark-theme .nav-links a:hover i,
html.dark-mode .nav-links a:hover i,
html[data-theme="dark"] .nav-links a:hover i {
    color: #34d399;
}

/* Theme toggle icon */
#theme-toggle i {
    color: #6b7280;
}

body.dark-theme #theme-toggle i,
html.dark-mode #theme-toggle i,
html[data-theme="dark"] #theme-toggle i {
    color: #fbbf24;
}

#theme-toggle:hover i {
    color: #008060;
}

body.dark-theme #theme-toggle:hover i,
html.dark-mode #theme-toggle:hover i,
html[data-theme="dark"] #theme-toggle:hover i {
    color: #fcd34d;
}

/* Start Free button icons */
#start-free-btn i,
#hero-start-btn i,
#btn-free i,
#btn-pro i,
#btn-ultimate i,
#chat-start-btn i,
#final-cta-btn i {
    color: white;
    margin-right: 6px;
}

/* ============================================
   HERO SECTION ICONS
   ============================================ */

/* Badge icon in hero */
.badge-new i {
    color: #fbbf24;
    margin-right: 6px;
}

/* Brain icon in hero title */
.hero-premium h1 i {
    color: #fbbf24;
    text-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
    margin-right: 8px;
}

/* Stat badge icons */
.stat-badge i {
    color: white;
    font-size: 1.8rem;
    margin-right: 8px;
}

/* Trust badges icons */
.trust-badges i {
    color: #10b981;
    font-weight: 700;
    margin-right: 6px;
}

/* Hero CTA button icons */
.hero-buttons .btn-primary i {
    color: white;
}

.hero-buttons .btn-outline i {
    color: #008060;
}

body.dark-theme .hero-buttons .btn-outline i,
html.dark-mode .hero-buttons .btn-outline i,
html[data-theme="dark"] .hero-buttons .btn-outline i {
    color: #10b981;
}

/* Phone mockup icons */
.msg-bubble i {
    color: #008060;
    font-size: 1.1rem;
    margin-right: 6px;
}

.screen-input button i {
    color: white;
    font-size: 1rem;
}

/* ============================================
   FEATURES SECTION ICONS
   ============================================ */

/* Section header icon */
.section-header h2 i {
    color: #008060;
    margin-right: 8px;
}

body.dark-theme .section-header h2 i,
html.dark-mode .section-header h2 i,
html[data-theme="dark"] .section-header h2 i {
    color: #10b981;
}

/* Feature icons - Large */
.feature-icon-large {
    color: #008060;
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-icon-large i {
    color: inherit;
}

.feature-showcase-item:hover .feature-icon-large {
    color: #0097b2;
    transform: scale(1.1);
}

body.dark-theme .feature-icon-large,
html.dark-mode .feature-icon-large,
html[data-theme="dark"] .feature-icon-large {
    color: #10b981;
}

body.dark-theme .feature-showcase-item:hover .feature-icon-large,
html.dark-mode .feature-showcase-item:hover .feature-icon-large,
html[data-theme="dark"] .feature-showcase-item:hover .feature-icon-large {
    color: #34d399;
}

.feature-showcase-item.feature-highlight .feature-icon-large,
.feature-showcase-item.feature-highlight1 .feature-icon-large {
    color: #fbbf24;
}

/* Feature bullet icons */
.feature-bullets i {
    color: #10b981;
    font-weight: 700;
    min-width: 20px;
    margin-right: 8px;
}

.feature-showcase-item.feature-highlight .feature-bullets i,
.feature-showcase-item.feature-highlight1 .feature-bullets i {
    color: #fbbf24;
}

/* ============================================
   PRICING SECTION ICONS
   ============================================ */

/* Pricing section title icon */
.subscription-premium .section-header h2 i {
    color: #008060;
    margin-right: 8px;
}

body.dark-theme .subscription-premium .section-header h2 i,
html.dark-mode .subscription-premium .section-header h2 i,
html[data-theme="dark"] .subscription-premium .section-header h2 i {
    color: #10b981;
}

/* Plan icons */
.plan-name i {
    color: #008060;
    margin-right: 8px;
    font-size: 1.2rem;
}

body.dark-theme .plan-name i,
html.dark-mode .plan-name i,
html[data-theme="dark"] .plan-name i {
    color: #10b981;
}

.plan-card-premium.featured .plan-name i {
    color: #fbbf24;
}

/* Check icons in pricing features */
.plan-features-premium li i {
    color: #10b981;
    font-weight: 700;
    margin-right: 8px;
}

.plan-features-premium li.disabled i {
    color: #9ca3af;
}

body.dark-theme .plan-features-premium li.disabled i,
html.dark-mode .plan-features-premium li.disabled i,
html[data-theme="dark"] .plan-features-premium li.disabled i {
    color: #6b7280;
}

/* Comparison table icons */
.comparison-table i.fa-check {
    color: #10b981;
    font-weight: 700;
}

.comparison-table i.fa-times {
    color: #ef4444;
    font-weight: 700;
}

/* ============================================
   CHAT SECTION ICONS
   ============================================ */

/* Chat section title icon */
.chat-section .section-title i {
    color: #008060;
    margin-right: 8px;
}

body.dark-theme .chat-section .section-title i,
html.dark-mode .chat-section .section-title i,
html[data-theme="dark"] .chat-section .section-title i {
    color: #10b981;
}

/* Chat header icon */
.chat-header i {
    color: white;
}

/* Chat message icons */
.chat-bubble i {
    color: #008060;
    margin-right: 6px;
    font-size: 1rem;
}

body.dark-theme .chat-bubble.ai i,
html.dark-mode .chat-bubble.ai i,
html[data-theme="dark"] .chat-bubble.ai i {
    color: #10b981;
}

.chat-bubble.user i {
    color: white;
}

/* Chat send button icon */
.chat-btn i {
    color: white;
    font-size: 1rem;
}

/* Chat feature list icons */
.chat-features-list i {
    color: #008060;
    font-size: 1.2rem;
    min-width: 20px;
    margin-right: 8px;
}

body.dark-theme .chat-features-list i,
html.dark-mode .chat-features-list i,
html[data-theme="dark"] .chat-features-list i {
    color: #10b981;
}

/* Chat CTA section icons */
#chat-cta-title i {
    color: #008060;
    margin-right: 8px;
}

body.dark-theme #chat-cta-title i,
html.dark-mode #chat-cta-title i,
html[data-theme="dark"] #chat-cta-title i {
    color: #10b981;
}

/* ============================================
   TESTIMONIALS SECTION ICONS
   ============================================ */

/* Testimonial section icon */
.testimonials-section .section-title i {
    color: #fbbf24;
    margin-right: 8px;
}

/* Author avatar (gradient background) */
.author-avatar {
    background: linear-gradient(135deg, #008060 0%, #0097b2 100%);
}

/* ============================================
   CTA SECTION ICONS
   ============================================ */

/* Final CTA button icon */
.cta-final-section .btn-primary i {
    color: white;
    margin-right: 8px;
}

/* ============================================
   FOOTER ICONS
   ============================================ */

/* Footer section header icons */
.footer-section h4 i {
    color: #10b981;
    margin-right: 8px;
}

/* Footer list item icons */
.footer-section a i {
    color: #808080;
    margin-right: 8px;
    font-size: 0.95rem;
}

.footer-section a:hover i {
    color: #10b981;
    transform: translateX(3px);
}

/* Specific footer icon colors */
.footer-section a .fab.fa-whatsapp {
    color: #25d366;
}

.footer-section a:hover .fab.fa-whatsapp {
    color: #1fab47;
}

.footer-section a .fa-envelope {
    color: #ef4444;
}

.footer-section a:hover .fa-envelope {
    color: #dc2626;
}

.footer-section a .fa-file-contract {
    color: #3b82f6;
}

.footer-section a .fa-gavel {
    color: #8b5cf6;
}

.footer-section a .fa-trash {
    color: #ef4444;
}

/* ============================================
   BANNER ICONS
   ============================================ */

.banner h2 i,
.banner p i {
    color: #fbbf24;
    margin-right: 8px;
}

/* ============================================
   CONTACT PAGE ICONS
   ============================================ */

.contact-icon i {
    color: white;
    font-size: 1.8rem;
}

.contact-form-container h2::before,
.contact-info-container h2::before {
    color: #008060;
}

body.dark-theme .contact-form-container h2,
body.dark-theme .contact-info-container h2,
html.dark-mode .contact-form-container h2,
html.dark-mode .contact-info-container h2,
html[data-theme="dark"] .contact-form-container h2,
html[data-theme="dark"] .contact-info-container h2 {
    color: #ffffff;
}

/* Contact CTA icons */
.contact-cta h2 i {
    color: #fbbf24;
    margin-right: 8px;
}

.contact-cta .btn i {
    margin-right: 8px;
}

.contact-cta .btn-primary i {
    color: #008060;
}

.contact-cta .btn-outline i {
    color: white;
}

/* ============================================
   FAQ PAGE ICONS
   ============================================ */

.faq-icon-wrapper i {
    color: white;
}

.faq-header h3 i {
    color: #008060;
}

body.dark-theme .faq-header h3 i,
html.dark-mode .faq-header h3 i,
html[data-theme="dark"] .faq-header h3 i {
    color: #10b981;
}

.faq-toggle-icon {
    color: #008060;
}

body.dark-theme .faq-toggle-icon,
html.dark-mode .faq-toggle-icon,
html[data-theme="dark"] .faq-toggle-icon {
    color: #10b981;
}

.faq-item:hover .faq-toggle-icon,
.faq-item.active .faq-toggle-icon {
    color: white;
}

.faq-tab-btn i {
    color: inherit;
}

.faq-contact-cta h2 i {
    color: #fbbf24;
}

/* ============================================
   DELETE DATA PAGE ICONS
   ============================================ */

.legal-container h2 i {
    color: #008060;
    margin-right: 8px;
}

body.dark-theme .legal-container h2 i,
html.dark-mode .legal-container h2 i,
html[data-theme="dark"] .legal-container h2 i {
    color: #10b981;
}

.info-box i,
.warning-box i,
.contact-box i {
    margin-right: 8px;
}

.info-box i {
    color: #10b981;
}

.warning-box i {
    color: #ef4444;
}

.contact-box i {
    color: #008060;
}

body.dark-theme .contact-box i,
html.dark-mode .contact-box i,
html[data-theme="dark"] .contact-box i {
    color: #10b981;
}

/* ============================================
   MODAL & FORM ICONS
   ============================================ */

/* Modal close button */
.modal-close i {
    color: #6b7280;
}

.modal-close:hover i {
    color: #008060;
}

body.dark-theme .modal-close i,
html.dark-mode .modal-close i,
html[data-theme="dark"] .modal-close i {
    color: #9ca3af;
}

body.dark-theme .modal-close:hover i,
html.dark-mode .modal-close:hover i,
html[data-theme="dark"] .modal-close:hover i {
    color: #10b981;
}

/* Form section icons */
.form-group i {
    color: #008060;
    margin-right: 6px;
}

body.dark-theme .form-group i,
html.dark-mode .form-group i,
html[data-theme="dark"] .form-group i {
    color: #10b981;
}

/* Phone form WhatsApp icon */
.phone-form .btn-primary i {
    color: white;
    margin-right: 8px;
}

/* ============================================
   SPECIAL ICON COLORS BY CONTEXT
   ============================================ */

/* WhatsApp icons - Always green */
.fab.fa-whatsapp {
    color: #25d366 !important;
}

.fab.fa-whatsapp:hover {
    color: #1fab47 !important;
}

/* Check icons */
.fa-check,
.fa-check-circle {
    color: #10b981;
}

/* Times/Close icons */
.fa-times,
.fa-times-circle {
    color: #ef4444;
}

/* Warning icons */
.fa-exclamation-triangle,
.fa-exclamation-circle {
    color: #f59e0b;
}

/* Info icons */
.fa-info-circle {
    color: #3b82f6;
}

/* Lock/Security icons */
.fa-lock,
.fa-shield-halved,
.fa-shield-alt {
    color: #7c3aed;
}

/* Star icons */
.fa-star {
    color: #fbbf24;
}

/* Rocket icons */
.fa-rocket {
    color: #008060;
}

body.dark-theme .fa-rocket,
html.dark-mode .fa-rocket,
html[data-theme="dark"] .fa-rocket {
    color: #10b981;
}

/* Brain/AI icons */
.fa-brain {
    color: #7c3aed;
}

/* Lightning/Energy icons */
.fa-bolt,
.fa-zap,
.fa-lightning-bolt {
    color: #fbbf24;
}

/* Globe/World icons */
.fa-globe {
    color: #3b82f6;
}

/* Book/Learning icons */
.fa-book,
.fa-graduation-cap {
    color: #7c3aed;
}

/* Email icons (standalone) */
.fa-envelope {
    color: #ef4444;
}

/* Phone icons */
.fa-phone,
.fa-phone-alt {
    color: #3b82f6;
}

/* ============================================
   ICON ANIMATIONS
   ============================================ */

/* Spinning icons */
.fa-spin,
.icon-spin {
    animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulsing icons */
.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Bounce icons */
.icon-bounce {
    animation: icon-bounce 1s ease-in-out infinite;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ============================================
   RESPONSIVE ICON ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .feature-icon-large {
        font-size: 2.5rem;
    }
    
    .section-header h2 i {
        display: none;
    }
    
    .footer-section h4 i {
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .feature-icon-large {
        font-size: 2rem;
    }
    
    .stat-badge i {
        font-size: 1.2rem;
    }
    
    .hero-premium h1 i {
        font-size: 1.5rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    i {
        color: #000 !important;
    }
}