/* ==========================================
   FORCE DARK MODE - Override All Inline Styles
   ========================================== */

/* CRITICAL: Override ALL backgrounds to dark */
* {
    border-color: var(--border) !important;
}

section,
.section,
div[class*="section"],
div[class*="-section"],
.hero,
.hero-section,
.page-hero,
.courses-section,
.courses-preview,
.features-section,
.stats-section,
.skills-section,
.journey-section,
.about-section,
.contact-section,
.blog-section,
.pricing-section,
.faq-section,
.testimonials-section,
.cta-section,
.compare-section,
.dashboard-section,
.content-section,
main > section {
    background: var(--dark) !important;
    color: var(--text) !important;
}

/* Alternating sections */
section:nth-child(even),
.section-alternate,
.content-section-alt,
div[class*="alternate"] {
    background: var(--bg-dark) !important;
}

/* Override any gradient or light backgrounds */
[style*="background: white"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background: linear-gradient"],
[style*="background: var(--light)"] {
    background: var(--dark) !important;
}

/* Force ALL headings to white */
h1, h2, h3, h4, h5, h6,
.section-title,
.page-title,
.course-title,
.card-title,
.heading,
div[class*="title"],
div[class*="heading"] {
    color: var(--white) !important;
}

/* Force ALL paragraphs to light gray */
p,
.description,
.text,
.content,
div p,
section p,
article p {
    color: var(--text-light) !important;
}

/* Force ALL cards to dark background */
.card,
.course-card,
.course-card-full,
.feature-card,
.skill-card,
.stat-card,
.stat-box,
.testimonial-card,
.blog-card,
.pricing-card,
.faq-card,
.about-card,
.contact-card,
.contact-info-card,
.dashboard-card,
div[class*="card"],
div[class*="-card"] {
    background: var(--card-dark) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* FAQ Items in Contact Page - NO BORDERS - CRITICAL OVERRIDE */
.faq-item {
    background: transparent !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(251, 191, 36, 0.15) !important;
    border-radius: 16px !important;
    outline: none !important;
    padding: 1.8rem !important;
}

.faq-item:hover {
    background: rgba(251, 191, 36, 0.05) !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 15px rgba(251, 191, 36, 0.25) !important;
    transform: translateY(-5px) !important;
}

/* Quick Stats in Contact Page - NO BORDERS - CRITICAL OVERRIDE */
.quick-stat-item {
    background: transparent !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(251, 191, 36, 0.15) !important;
    border-radius: 16px !important;
    outline: none !important;
    padding: 1.5rem !important;
}

.quick-stat-item:hover {
    background: rgba(251, 191, 36, 0.05) !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 15px rgba(251, 191, 36, 0.25) !important;
    transform: translateY(-5px) !important;
}

/* Timeline Item in About Page - NO BORDERS - CRITICAL OVERRIDE */
.timeline-item {
    background: transparent !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(251, 191, 36, 0.15) !important;
    border-radius: 16px !important;
    outline: none !important;
    padding: 1.5rem !important;
}

.timeline-item:hover {
    background: rgba(251, 191, 36, 0.05) !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 15px rgba(251, 191, 36, 0.25) !important;
    transform: translateY(-5px) !important;
}

.timeline-content {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid var(--primary) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    padding: 0 0 0 2rem !important;
    margin-left: 0 !important;
}

.timeline-content:hover {
    background: transparent !important;
    border-left: 3px solid var(--primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Force button text colors */
.btn-primary,
.btn-primary *,
.btn-primary span,
.btn-primary svg,
button.btn-primary,
a.btn-primary {
    color: var(--darker) !important;
    background: var(--gradient-primary) !important;
}

.btn-secondary,
.btn-secondary * {
    color: var(--darker) !important;
}

.btn-outline {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline:hover {
    color: var(--darker) !important;
}

/* Filter buttons - CRITICAL FIX */
.filter-btn,
.courses-filter button,
button[class*="filter"],
.tab-btn,
.category-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    font-weight: 600 !important;
}

.filter-btn.active,
.filter-btn:hover,
.courses-filter button.active,
.courses-filter button:hover {
    background: var(--gradient-primary) !important;
    color: #000000 !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Badges */
.badge,
.course-badge,
.page-badge,
.section-badge,
.label,
span[class*="badge"],
span[class*="label"] {
    background: rgba(251, 191, 36, 0.1) !important;
    color: var(--primary) !important;
}

/* Course specific elements - MAXIMUM CONTRAST - FINAL FIX */
.course-category,
.course-cat,
.category,
.course-category-premium,
span.course-category,
span.course-cat,
.course-header .course-category,
.course-meta-premium .course-category-premium {
    background: #fbbf24 !important;
    color: #000000 !important;
    border: 2px solid #f59e0b !important;
    font-weight: 900 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    display: inline-block !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5) !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
}

.course-level,
.level,
.course-level-premium,
span.course-level,
span.course-level-premium,
.beginner,
.intermediate,
.advanced,
.course-header .course-level {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #e5e5e5 !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    display: inline-block !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
}

.course-body,
.course-content {
    background: transparent !important;
}

.course-body h3,
.course-content h3,
.course-title {
    color: var(--white) !important;
}

.course-body p,
.course-content p,
.course-description {
    color: var(--text-light) !important;
}

/* Features */
.course-features,
.features {
    border-color: var(--border) !important;
}

.feature-item {
    color: var(--text-light) !important;
}

.feature-item svg {
    color: var(--primary) !important;
}

/* Prices */
.price,
.price-current,
.course-price .price {
    color: var(--primary) !important;
}

.old-price,
.price-old {
    color: var(--text-muted) !important;
}

.discount,
.price-discount {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

/* Forms */
input,
textarea,
select,
.form-control,
.input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid var(--border) !important;
    color: var(--white) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
textarea:focus,
select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary) !important;
}

label,
.form-label {
    color: var(--white) !important;
}

/* Tables */
table,
.table {
    background: var(--card-dark) !important;
    color: var(--text-light) !important;
}

th {
    background: var(--bg-dark) !important;
    color: var(--white) !important;
    border-color: var(--border) !important;
}

td {
    border-color: var(--border) !important;
    color: var(--text-light) !important;
}

/* Lists */
ul li,
ol li {
    color: var(--text-light) !important;
}

/* Links */
a {
    color: var(--primary) !important;
}

a:hover {
    color: var(--secondary) !important;
}

/* FAQ specific */
.faq-question,
.faq-header {
    background: var(--card-dark) !important;
    color: var(--white) !important;
}

.faq-answer,
.faq-content {
    background: var(--card-dark) !important;
    color: var(--text-light) !important;
}

/* Dashboard specific */
.dashboard-stat,
.stat-widget,
.widget {
    background: var(--card-dark) !important;
    border: 1px solid var(--border) !important;
}

.stat-value,
.widget-value {
    color: var(--primary) !important;
}

.stat-label,
.widget-label {
    color: var(--text-light) !important;
}

/* Compare table specific */
.compare-table,
.comparison-table {
    background: var(--card-dark) !important;
}

.compare-header,
.comparison-header {
    background: var(--bg-dark) !important;
}

/* Override any white text on gold/yellow backgrounds */
[style*="background: var(--primary)"] *,
[style*="background: var(--gradient-primary)"] *,
.bg-primary *,
.gradient-bg * {
    color: var(--darker) !important;
}

/* Specific overrides for common issues */
.page-hero {
    background: var(--darker) !important;
}

.page-hero * {
    color: inherit !important;
}

.page-hero h1 {
    color: var(--white) !important;
}

.page-hero p {
    color: var(--text-light) !important;
}

/* Timeline */
.timeline-year {
    background: var(--gradient-primary) !important;
    color: var(--darker) !important;
}

/* Skills */
.skill-bar,
.progress-bar {
    background: rgba(255, 255, 255, 0.05) !important;
}

.skill-progress,
.progress-fill {
    background: var(--gradient-primary) !important;
}

/* Scrollbar */
::-webkit-scrollbar-track {
    background: var(--bg-dark) !important;
}

/* Ensure no element has pure white background */
*[style*="background-color: #ffffff"],
*[style*="background-color: white"],
*[style*="background: #ffffff"],
*[style*="background: white"],
.bg-white,
.background-white {
    background: var(--card-dark) !important;
}

/* Remove any conflicting text colors */
*[style*="color: white"],
*[style*="color: #ffffff"] {
    color: var(--white) !important;
}

*[style*="color: black"],
*[style*="color: #000000"],
*[style*="color: var(--dark)"] {
    color: var(--text-light) !important;
}

/* Ensure proper contrast on all interactive elements */
button,
.button,
.btn {
    color: inherit !important;
}

button:not(.btn-primary):not(.btn-secondary),
.button:not(.btn-primary):not(.btn-secondary) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border) !important;
}

/* Fix any remaining contrast issues */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--text-light) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.bg-dark {
    background: var(--dark) !important;
}

.bg-light {
    background: var(--card-dark) !important;
}

/* ==========================================
   ADDITIONAL FIXES FOR SPECIFIC SECTIONS
   ========================================== */

/* What You'll Learn Section */
.curriculum-section,
.learning-section,
.what-you-learn,
div[class*="learn"],
div[class*="curriculum"] {
    background: var(--dark) !important;
}

.curriculum-section h2,
.curriculum-section h3,
.learning-section h2,
.learning-section h3 {
    color: var(--white) !important;
}

.curriculum-section p,
.learning-section p {
    color: var(--text-light) !important;
}

.lesson-item,
.curriculum-item,
.learning-item {
    background: var(--card-dark) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-light) !important;
}

/* CTA Sections - "Still have questions?" etc */
.cta-box,
.help-box,
.support-box,
.contact-cta,
div[class*="cta"] {
    background: var(--card-dark) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.cta-box h2,
.cta-box h3,
.help-box h2,
.help-box h3,
.support-box h2,
.support-box h3 {
    color: var(--white) !important;
}

.cta-box p,
.help-box p,
.support-box p {
    color: var(--text-light) !important;
}

/* FAQ specific CTAs */
.faq-cta,
.faq-help {
    background: var(--card-dark) !important;
    border: 2px solid rgba(251, 191, 36, 0.3) !important;
    padding: 3rem !important;
    border-radius: 24px !important;
}

.faq-cta h2,
.faq-cta h3,
.faq-help h2,
.faq-help h3 {
    color: var(--white) !important;
}

.faq-cta p,
.faq-help p {
    color: var(--text-light) !important;
}

/* Dashboard Stats & Cards */
.dashboard-stat,
.stat-widget,
.dashboard-card,
.widget-card {
    background: var(--card-dark) !important;
    border: 1px solid var(--border) !important;
}

.dashboard-stat:hover,
.stat-widget:hover,
.dashboard-card:hover {
    border-color: rgba(251, 191, 36, 0.5) !important;
    box-shadow: var(--shadow-gold) !important;
}

.dashboard-value,
.widget-value,
.stat-number {
    color: var(--primary) !important;
}

.dashboard-label,
.widget-label {
    color: var(--text-light) !important;
}

/* Course Details Sections */
.course-details-section,
.course-content-section,
.course-curriculum,
.course-reviews {
    background: var(--dark) !important;
}

.course-details-section:nth-child(even) {
    background: var(--bg-dark) !important;
}

/* Ensure all inner content is visible */
.course-details-section *,
.course-content-section *,
.course-curriculum *,
.course-reviews * {
    color: inherit !important;
}

.course-details-section h2,
.course-details-section h3,
.course-content-section h2,
.course-content-section h3 {
    color: var(--white) !important;
}

.course-details-section p,
.course-content-section p {
    color: var(--text-light) !important;
}

/* ==========================================
   HOME PAGE SPECIFIC FIXES
   ========================================== */

/* Remove any borders from feature card headers */
.feature-card-header,
.feature-card-modern .feature-card-header {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Fix View Details button text visibility */
.course-quick-view,
.course-overlay-premium a {
    color: #000000 !important;
    font-weight: 700 !important;
}

.course-quick-view svg {
    stroke: #000000 !important;
}

/* Remove background from View All Courses container */
.courses-cta-modern,
div[class*="cta-modern"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Fix View All Courses button and Explore Courses */
.btn-outline,
.btn-outline.btn-large {
    background: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.btn-outline:hover,
.btn-outline.btn-large:hover {
    background: var(--gradient-primary) !important;
    color: #000000 !important;
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-gold) !important;
}

.btn-outline:hover span,
.btn-outline.btn-large:hover span {
    color: #000000 !important;
}

.btn-outline svg,
.btn-outline.btn-large svg {
    stroke: var(--primary) !important;
}

.btn-outline:hover svg,
.btn-outline.btn-large:hover svg {
    stroke: #000000 !important;
}

.btn-outline:hover *,
.btn-outline.btn-large:hover * {
    color: #000000 !important;
}

/* ==========================================
   CTA SECTION - Remove All Borders/Boxes
   ========================================== */

.cta-section-modern,
.cta-section,
.cta-content-modern,
.cta-content,
div[class*="cta-"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cta-content-modern,
.cta-content {
    background: transparent !important;
    padding: 0 !important;
    max-width: 800px;
}

/* Remove container borders that might cause rectangles */
.cta-section-modern .container,
.cta-section .container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Fix Enroll Now button - Always black text */
.btn-course-premium,
.btn-enroll,
a[href*="checkout"] {
    background: var(--gradient-primary) !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.btn-course-premium:hover,
.btn-enroll:hover,
a[href*="checkout"]:hover {
    color: #000000 !important;
    filter: brightness(1.1) !important;
}

.btn-course-premium svg,
.btn-enroll svg,
a[href*="checkout"] svg {
    stroke: #000000 !important;
}

/* Fix Course Badges - Prevent shaking + Better Design */
.course-badge-premium,
.course-badge,
.badge-trending,
.badge-new,
.bestseller,
.popular,
.new,
div[class*="badge-"] {
    pointer-events: none !important;
    transition: none !important;
    will-change: auto !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 0.75rem !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Specific badge colors */
.course-badge.bestseller,
.bestseller {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #000000 !important;
}

.course-badge.popular,
.popular {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #000000 !important;
}

.course-badge.new,
.new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

/* Prevent card hover from affecting badges */
.course-card-premium:hover .course-badge-premium,
.course-card:hover .course-badge,
.course-card-full:hover .course-badge {
    transform: none !important;
}

/* ==========================================
   FLOATING BUTTONS - Enhanced Colors
   ========================================== */

/* WhatsApp Button - Fix hover color */
.whatsapp-float {
    color: #ffffff !important;
}

.whatsapp-float:hover {
    background: #25D366 !important;
    box-shadow: 0 8px 35px rgba(37, 211, 102, 0.7), 0 0 0 10px rgba(37, 211, 102, 0.2) !important;
    color: #ffffff !important;
}

.whatsapp-float svg {
    fill: #ffffff !important;
}

.whatsapp-float:hover svg {
    fill: #ffffff !important;
}

/* Back to Top Button - Same Green as WhatsApp */
.back-to-top {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #ffffff !important;
}

.back-to-top:hover {
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.08) !important;
    box-shadow: 0 8px 35px rgba(37, 211, 102, 0.7) !important;
}

.back-to-top svg {
    stroke: #ffffff !important;
}

.back-to-top:hover svg {
    stroke: #ffffff !important;
}