/* Dark Mode Transformation - V3 (Specific Fixes) */

:root {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --secondary-color: #06b6d4;

    --main-bg: #020617;
    /* Very deep slate/black */
    --card-bg: #0f172a;
    /* Slate 900 */
    --surface-bg: #1e293b;
    /* Slate 800 */

    --text-primary: #f8fafc;
    /* Slate 50 */
    --text-secondary: #94a3b8;
    /* Slate 400 */
    --text-muted: #64748b;
    /* Slate 500 */

    --border-color: #1e293b;
    --gradient-dark: linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

/* 1. Global Reset */
body,
html {
    background-color: var(--main-bg) !important;
    color: var(--text-primary) !important;
}

section,
header,
footer,
div.section-padding {
    background-color: var(--main-bg) !important;
}

/* 2. FAQ FIXES (Targeting faq-minimalist.css) */
#faq,
.faq,
.faq-container {
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
}

.faq-item {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
}

.faq-item:first-child {
    border-top: 1px solid var(--border-color) !important;
}

.faq-question {
    color: var(--text-primary) !important;
}

/* Overriding the hover color from minimalist css */
.faq-question:hover {
    color: var(--primary-color) !important;
}

/* The Plus Icon */
.faq-question .icon {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.faq-answer p {
    color: var(--text-secondary) !important;
}

/* 3. FEATURES FIXES (Targeting features-fix.css) */

/* Fix the white header user complained about */
.features .section-header {
    background: var(--main-bg) !important;
    /* Overrides #FFFFFF !important */
    background-color: var(--main-bg) !important;
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
}

.features .section-header h2 {
    color: var(--text-primary) !important;
}

.features .section-header .subtitle {
    color: var(--text-secondary) !important;
}

/* Fix alternating white rows */
.feature-row,
.feature-row:nth-child(n),
.feature-row:nth-of-type(n) {
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
}

/* Fix text colors inside features */
.feature-row .feature-text h3,
.feature-row:nth-child(n) h3 {
    color: var(--text-primary) !important;
}

.feature-row .feature-text p,
.feature-row:nth-child(n) p {
    color: var(--text-secondary) !important;
}

/* Fix Visual Placeholders/Cards background */
.visual-placeholder,
.feature-row .visual-placeholder,
.feature-row:nth-child(n) .visual-placeholder {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 4. OTHER SECTIONS */

/* Navbar */
.navbar {
    background-color: rgba(2, 6, 23, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo span {
    color: var(--text-primary) !important;
}

.nav-links a:not(.btn) {
    color: var(--text-secondary) !important;
}

.nav-links a:not(.btn):hover {
    color: var(--primary-color) !important;
}

.mobile-menu-btn span {
    background-color: var(--text-primary) !important;
}

/* Hero */
.hero {
    background: var(--gradient-dark) !important;
}

.hero p.hero-subtitle {
    color: var(--text-secondary) !important;
}

/* Cards & Grid Items */
.card,
.step-card,
.achievement-item,
.naming-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.card h3,
.step-card h3 {
    color: var(--text-primary) !important;
}

.card p,
.step-card p {
    color: var(--text-secondary) !important;
}

.icon-box {
    filter: grayscale(0.2) drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
}

/* Pricing */
.pricing-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.pricing-card:hover {
    background: var(--surface-bg) !important;
    border-color: var(--primary-color) !important;
}

.pricing-card .plan-name {
    color: var(--text-secondary) !important;
}

.pricing-card .plan-price {
    color: var(--text-primary) !important;
}

.pricing-card .plan-price .period {
    color: var(--text-muted) !important;
}

.plan-features li {
    color: var(--text-secondary) !important;
}

/* Toggle Box */
.toggle-box {
    background: var(--surface-bg) !important;
    border: 1px solid var(--border-color) !important;
}

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

.toggle-btn.active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Social Proof */
.social-proof,
.bg-light {
    background: var(--main-bg) !important;
}

.testimonial-card-new {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

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

.author-name {
    color: var(--text-primary) !important;
}

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

.carousel-btn {
    background: var(--surface-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--primary-color) !important;
}

/* Footer */
footer {
    background-color: #000000 !important;
    border-top: 1px solid var(--border-color) !important;
}

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

/* Mobile Sidebar Fix */
@media (max-width: 768px) {
    .nav-links {
        background: rgba(2, 6, 23, 0.98) !important;
    }
}