/* Theme Toggle Styles for Rate My Landing Website */

/* Theme Toggle Button */
.theme-toggle-container {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.theme-toggle {
    position: relative;
    width: 50px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
    overflow: hidden;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.theme-icon {
    font-size: 12px;
    transition: all 0.3s ease;
    z-index: 2;
    position: relative;
}

.theme-icon-light {
    color: #ffc107;
    opacity: 1;
}

.theme-icon-dark {
    color: #e1e5f0;
    opacity: 0.5;
}

/* Toggle Slider */
.theme-toggle::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Dark Mode Active State */
[data-theme="dark"] .theme-toggle {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .theme-toggle::before {
    transform: translateX(24px);
    background: #1a1a1a;
}

[data-theme="dark"] .theme-icon-light {
    opacity: 0.5;
}

[data-theme="dark"] .theme-icon-dark {
    opacity: 1;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #e1e5f0;
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-border-color: #404040;
    --bs-secondary-color: #a0a0a0;
}

/* Dark Mode Global Overrides */
[data-theme="dark"] body {
    background-color: #121212 !important;
    color: #e1e5f0 !important;
}

/* Section Backgrounds */
[data-theme="dark"] .bg-light {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .bg-white {
    background-color: #2a2a2a !important;
}

/* Feature Cards */
[data-theme="dark"] .feature-card {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #e1e5f0 !important;
}

[data-theme="dark"] .feature-card .text-muted {
    color: #a0a0a0 !important;
}

[data-theme="dark"] .feature-card:hover {
    background-color: #333333 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

/* Support Cards */
[data-theme="dark"] .support-card {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #e1e5f0 !important;
}

[data-theme="dark"] .support-card .text-muted {
    color: #a0a0a0 !important;
}

[data-theme="dark"] .support-card:hover {
    background-color: #333333 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

/* Contact Cards */
[data-theme="dark"] .contact-card {
    background-color: rgba(0, 102, 204, 0.1) !important;
    border-color: #404040 !important;
    color: #e1e5f0 !important;
}

[data-theme="dark"] .contact-card:hover {
    background-color: rgba(0, 102, 204, 0.2) !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .contact-card .text-muted {
    color: #a0a0a0 !important;
}

/* Text Colors */
[data-theme="dark"] .text-muted {
    color: #a0a0a0 !important;
}

[data-theme="dark"] .text-dark {
    color: #e1e5f0 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #e1e5f0 !important;
}

/* Screenshots Section */
[data-theme="dark"] .screenshot-card h5 {
    color: #e1e5f0 !important;
}

/* System Requirements & Upcoming Features */
[data-theme="dark"] .list-unstyled li {
    color: #e1e5f0 !important;
}

/* Links */
[data-theme="dark"] a.text-decoration-none {
    color: #66b3ff !important;
}

[data-theme="dark"] a.text-decoration-none:hover {
    color: #99ccff !important;
}

/* Badges in Dark Mode */
[data-theme="dark"] .badge.bg-warning {
    color: #000 !important;
}

/* Shadows in Dark Mode */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important;
}

[data-theme="dark"] .feature-card,
[data-theme="dark"] .support-card,
[data-theme="dark"] .screenshot-card img {
    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .support-card:hover {
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.1) !important;
}

/* Hero Image in Dark Mode */
[data-theme="dark"] .hero-image img {
    filter: brightness(0.9);
}

/* Footer adjustments for dark mode */
[data-theme="dark"] footer.bg-dark {
    background-color: #0a0a0a !important;
    border-top: 1px solid #404040;
}

/* Step Numbers in Dark Mode */
[data-theme="dark"] .step-number {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Privacy settings link */
[data-theme="dark"] .cmpfooterlink {
    color: #a0a0a0 !important;
}

/* Smooth Transitions for Theme Switch */
body,
.bg-light,
.bg-white,
.feature-card,
.support-card,
.contact-card,
.text-muted,
h1, h2, h3, h4, h5, h6,
a.text-decoration-none {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .theme-toggle-container {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .navbar-nav {
        align-items: center;
    }
}

@media (max-width: 576px) {
    .theme-toggle {
        width: 45px;
        height: 24px;
    }
    
    .theme-toggle::before {
        width: 16px;
        height: 16px;
    }
    
    [data-theme="dark"] .theme-toggle::before {
        transform: translateX(21px);
    }
    
    .theme-icon {
        font-size: 11px;
    }
}

/* Focus States for Accessibility in Dark Mode */
[data-theme="dark"] .btn:focus,
[data-theme="dark"] .nav-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 179, 255, 0.25);
}

/* FAQ Accordion Styles for Dark Mode */
[data-theme="dark"] .accordion-item {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .accordion-button {
    background-color: #2a2a2a !important;
    color: #e1e5f0 !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #333333 !important;
    color: #e1e5f0 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(102, 179, 255, 0.25) !important;
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

[data-theme="dark"] .accordion-body {
    background-color: #2a2a2a !important;
    color: #e1e5f0 !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .accordion-body a {
    color: #66b3ff !important;
}

[data-theme="dark"] .accordion-body a:hover {
    color: #99ccff !important;
}

/* Footer Links in Dark Mode */
[data-theme="dark"] footer a {
    color: #66b3ff !important;
}

[data-theme="dark"] footer a:hover {
    color: #99ccff !important;
}

[data-theme="dark"] footer .text-white {
    color: #e1e5f0 !important;
}

/* Print Styles for Dark Mode */
@media print {
    [data-theme="dark"] body,
    [data-theme="dark"] .bg-light,
    [data-theme="dark"] .bg-white,
    [data-theme="dark"] .feature-card,
    [data-theme="dark"] .support-card,
    [data-theme="dark"] .contact-card,
    [data-theme="dark"] .accordion-item,
    [data-theme="dark"] .accordion-button,
    [data-theme="dark"] .accordion-body {
        background-color: white !important;
        color: black !important;
    }
    
    [data-theme="dark"] .text-muted {
        color: #6c757d !important;
    }
    
    .theme-toggle-container {
        display: none !important;
    }
}