/**
 * WhiteR Pro - Dark Mode Styles
 * @version 1.0.0
 */

/* Theme toggle button */
.theme-toggle {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
}

.theme-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
    transition: color var(--transition-fast), transform var(--transition-normal);
}

.theme-toggle:hover .theme-toggle-icon {
    color: var(--text-primary);
}

/* Sun icon - visible in dark mode */
.icon-sun {
    display: none;
}

.dark .icon-sun {
    display: block;
}

/* Moon icon - visible in light mode */
.icon-moon {
    display: block;
}

.dark .icon-moon {
    display: none;
}

/* Dark mode specific overrides */
.dark {
    color-scheme: dark;
}

/* Images in dark mode */
.dark img:not([src*=".svg"]) {
    filter: brightness(0.95);
}

/* Logo adjustment in light mode */
[data-theme="light"] .navbar-logo-img,
.light .navbar-logo-img {
    filter: brightness(0);
}

/* Card surfaces */
.dark .card,
.dark .whiter-card {
    background-color: var(--surface-elevated);
    border-color: var(--border-color);
}

/* Input fields in dark mode */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--text-muted);
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

/* Buttons in dark mode */
.dark .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark .btn-secondary:hover {
    background-color: var(--bg-secondary);
    border-color: var(--color-primary);
}

/* Code blocks */
.dark pre,
.dark code {
    background-color: var(--bg-secondary);
}

/* Tables */
.dark table {
    border-color: var(--border-color);
}

.dark th {
    background-color: var(--bg-secondary);
}

.dark tr:nth-child(even) {
    background-color: var(--bg-secondary);
}

/* Dividers */
.dark hr {
    border-color: var(--border-color);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle-icon {
        transition: none;
    }
}

/* ==================== LIGHT MODE CTA BUTTONS ==================== */

/* Light mode - animated border CTAs */
[data-theme="light"] .group.relative.overflow-hidden.rounded-full > span:first-child {
    background: conic-gradient(from 90deg at 50% 50%, #d1d5db 0%, #3B82F6 50%, #d1d5db 100%) !important;
}

[data-theme="light"] .group.relative.overflow-hidden.rounded-full > span:last-child,
[data-theme="light"] .group.relative.flex.overflow-hidden.rounded-full > span:last-child {
    background: white !important;
    color: #111827 !important;
}

[data-theme="light"] .group.relative.overflow-hidden.rounded-full:hover > span:last-child,
[data-theme="light"] .group.relative.flex.overflow-hidden.rounded-full:hover > span:last-child {
    background: #f3f4f6 !important;
}

/* Service card buttons light mode */
[data-theme="light"] .card-btn {
    border-color: var(--border-color);
}

/* Glass panel in light mode */
[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

/* Stats cards light mode */
[data-theme="light"] .stats-card-enhanced {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .stats-number-glow {
    text-shadow: 0 0 20px currentColor;
}

/* ==================== SECTION VISUAL BOX SHADOWS ==================== */

/* SEO Section - Green shadow */
.seo-visual-box {
    box-shadow: 0 10px 40px -10px rgba(34, 197, 94, 0.2);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.seo-visual-box:hover {
    box-shadow: 0 20px 60px -15px rgba(34, 197, 94, 0.35);
    transform: translateY(-4px);
}

/* Analysis Section - Purple shadow */
.analysis-visual-box {
    box-shadow: 0 10px 40px -10px rgba(168, 85, 247, 0.2);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.analysis-visual-box:hover {
    box-shadow: 0 20px 60px -15px rgba(168, 85, 247, 0.35);
    transform: translateY(-4px);
}

/* Redesign Section - Blue shadow */
.comparison-slider {
    box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.2);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.comparison-slider:hover {
    box-shadow: 0 20px 60px -15px rgba(59, 130, 246, 0.35);
    transform: translateY(-4px);
}

/* ==================== LIGHT MODE CTA BUTTONS ==================== */

/* SEO Section CTA - Green */
[data-theme="light"] #seo .group.relative.overflow-hidden.rounded-full > span:first-child {
    background: conic-gradient(from 90deg at 50% 50%, #d1d5db 0%, #22c55e 50%, #d1d5db 100%) !important;
}
[data-theme="light"] #seo .group.relative.overflow-hidden.rounded-full > span:last-child {
    background: white !important;
    color: #166534 !important;
}
[data-theme="light"] #seo .group.relative.overflow-hidden.rounded-full:hover > span:last-child {
    color: #15803d !important;
}

/* Analysis Section CTA - Purple */
[data-theme="light"] #analysis .group.relative.overflow-hidden.rounded-full > span:first-child {
    background: conic-gradient(from 90deg at 50% 50%, #d1d5db 0%, #a855f7 50%, #d1d5db 100%) !important;
}
[data-theme="light"] #analysis .group.relative.overflow-hidden.rounded-full > span:last-child {
    background: white !important;
    color: #7e22ce !important;
}
[data-theme="light"] #analysis .group.relative.overflow-hidden.rounded-full:hover > span:last-child {
    color: #9333ea !important;
}