/**
 * DigitAlb Shop - Dark Mode
 * Toggle-fähig mit CSS Variables
 * Inspiriert von digitalb.al
 */
/* Auch auf html Element (für sofortiges Laden) */
html.dark-mode {
    background: #0a0a12;
}

html.dark-mode body {
    background: #0a0a12;
}
/* ============================================
   DARK MODE VARIABLES
   ============================================ */
body.dark-mode {
    /* Hintergrund */
    --dark-bg: #0a0a12;
    --light-bg: #12121a;
    
    /* Grau-Töne (invertiert) */
    --gray-50: #1a1a24;
    --gray-100: #22222e;
    --gray-200: #2d2d3a;
    --gray-300: #3d3d4a;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
    
    /* Primärfarben bleiben */
    --primary: #ff3b42;
    --primary-dark: #e31e24;
    
    /* Text */
    --text-primary: #f1f1f1;
    --text-secondary: #a0a0a0;
    --text-muted: #6b7280;
    
    /* Shadows für Dark Mode */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    
    /* Gradients */
    --gradient-dark: linear-gradient(135deg, #1a1a24 0%, #12121a 100%);
    --gradient-card: linear-gradient(135deg, #1e1e2a 0%, #16161e 100%);
}

/* ============================================
   BASE - Body & Background
   ============================================ */
body.dark-mode {
    background: var(--dark-bg);
    color: var(--text-primary);
}

body.dark-mode .modern-homepage,
body.dark-mode .product-page-modern,
body.dark-mode .checkout-page-wrapper,
body.dark-mode .auth-container {
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--light-bg) 100%);
}

/* ============================================
   HEADER & FOOTER (style.css)
   ============================================ */
body.dark-mode .site-header {
    background: rgba(10, 10, 18, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
}

body.dark-mode .header-nav .nav-link {
    color: var(--text-secondary);
}

body.dark-mode .header-nav .nav-link:hover,
body.dark-mode .header-nav .nav-link.active {
    color: var(--primary);
}

body.dark-mode .btn-icon {
    color: var(--text-secondary);
}

body.dark-mode .btn-icon:hover {
    color: var(--primary);
    background: var(--gray-100);
}

/* Mobile Menu */
body.dark-mode .mobile-menu {
    background: var(--light-bg);
    border-left: 1px solid var(--gray-200);
}

body.dark-mode .mobile-menu-header {
    border-bottom-color: var(--gray-200);
}

body.dark-mode .mobile-menu-item {
    color: var(--text-secondary);
    border-bottom-color: var(--gray-100);
}

body.dark-mode .mobile-menu-item:hover,
body.dark-mode .mobile-menu-item.active {
    background: var(--gray-100);
    color: var(--primary);
}

body.dark-mode .mobile-cart-preview {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

body.dark-mode .mobile-cart-empty {
    background: var(--gray-100);
    color: var(--text-muted);
}

body.dark-mode .mobile-lang-btn {
    background: var(--gray-100);
    color: var(--text-secondary);
    border-color: var(--gray-200);
}

body.dark-mode .mobile-lang-btn.active {
    background: var(--primary);
    color: white;
}

/* Footer */
body.dark-mode .site-footer {
    background: linear-gradient(135deg, #0a0a12 0%, #12121a 100%);
}

body.dark-mode .footer-trust-badges {
    background: var(--light-bg);
}

body.dark-mode .trust-item {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

body.dark-mode .footer-newsletter {
    background: linear-gradient(135deg, #1a0a0a 0%, #2a1010 100%);
}

/* ============================================
   HOMEPAGE (homepage.css)
   ============================================ */
/* Category Pills */
body.dark-mode .category-pill {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--text-secondary);
}

body.dark-mode .category-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.dark-mode .category-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Sort Bar */
body.dark-mode .sort-bar {
    background: var(--gray-100);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .items-count {
    color: var(--text-muted);
}

body.dark-mode .sort-select {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--text-secondary);
}

/* Product Cards */
body.dark-mode .modern-card {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
}

body.dark-mode .modern-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .card-image-wrapper {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}

body.dark-mode .card-content {
    background: transparent;
}

body.dark-mode .card-category {
    color: var(--primary);
}

body.dark-mode .card-title {
    color: var(--text-primary);
}

body.dark-mode .card-features .feature {
    color: var(--text-secondary);
}

body.dark-mode .card-footer {
    border-top-color: var(--gray-200);
}

body.dark-mode .btn-wishlist {
    background: var(--gray-100);
    color: var(--text-muted);
}

body.dark-mode .btn-wishlist:hover,
body.dark-mode .btn-wishlist.active {
    background: var(--primary);
    color: white;
}

/* Sale Section */
body.dark-mode .sale-section {
    background: linear-gradient(135deg, #1a0a0a 0%, #2a1515 100%);
}

/* Section Headers */
body.dark-mode .section-title-modern {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ============================================
   PRODUCT PAGE (shop-unified.css)
   ============================================ */
body.dark-mode .product-card-modern {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
}

body.dark-mode .product-image-modern {
    background: var(--gray-100);
}

body.dark-mode .product-header-modern {
    background: transparent;
}

body.dark-mode .product-title-modern {
    color: var(--text-primary);
}

body.dark-mode .price-box-modern {
    background: linear-gradient(135deg, #1a0a0a 0%, #2a1515 100%);
    border-color: var(--primary);
}

body.dark-mode .price-box-modern.with-bb {
    background: var(--gradient-dark);
}

body.dark-mode .price-main-modern {
    color: var(--primary);
}

body.dark-mode .badge-modern {
    background: rgba(255, 59, 66, 0.15);
    color: var(--primary);
}

body.dark-mode .input-modern {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .input-modern:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 59, 66, 0.15);
}

body.dark-mode .form-text-modern {
    color: var(--text-muted);
}

body.dark-mode .bb-addon-modern {
    background: linear-gradient(135deg, #1a1510 0%, #2a2015 100%);
    border-color: #ff9800;
}

body.dark-mode .trust-badges-modern {
    border-top-color: var(--gray-200);
}

body.dark-mode .trust-badge-modern {
    color: var(--text-muted);
}

body.dark-mode .content-section-modern {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

body.dark-mode .content-section-modern h5 {
    color: var(--text-primary);
}

body.dark-mode .feature-item-modern {
    color: var(--text-secondary);
    border-bottom-color: var(--gray-200);
}

body.dark-mode .related-card-modern {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
}

body.dark-mode .sticky-bar-modern {
    background: var(--light-bg);
    border-top: 1px solid var(--gray-200);
}

body.dark-mode .breadcrumb-modern {
    background: var(--gray-100);
}

body.dark-mode .breadcrumb-modern a {
    color: var(--text-muted);
}

/* ============================================
   CART PAGE
   ============================================ */
body.dark-mode .cart-item-card {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
}

body.dark-mode .cart-item-title {
    color: var(--text-primary);
}

body.dark-mode .cart-item-info-mobile small {
    color: var(--text-muted);
}

body.dark-mode .cart-item-bottom {
    border-top-color: var(--gray-200);
}

body.dark-mode .quantity-controls {
    border-color: var(--gray-200);
}

body.dark-mode .quantity-btn {
    background: var(--gray-100);
    color: var(--text-secondary);
}

body.dark-mode .quantity-btn:hover {
    background: var(--gray-200);
}

body.dark-mode .quantity-input {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .btn-remove-cart,
body.dark-mode .btn-remove-item {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .summary-card {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
}

body.dark-mode .summary-body {
    background: transparent;
}

body.dark-mode .discount-section {
    background: var(--gray-100);
}

body.dark-mode .discount-section label {
    color: var(--text-secondary);
}

body.dark-mode .discount-input {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .summary-row {
    color: var(--text-secondary);
}

body.dark-mode .summary-row.total {
    border-top-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .security-badge {
    border-top-color: var(--gray-200);
    color: var(--text-muted);
}

/* ============================================
   CHECKOUT PAGE
   ============================================ */
body.dark-mode .checkout-page-title {
    color: var(--text-primary);
}

body.dark-mode .checkout-section-modern {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
}

body.dark-mode .checkout-section-header-modern {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    border-bottom-color: var(--gray-200);
}

body.dark-mode .checkout-section-header-modern h2 {
    color: var(--text-primary);
}

body.dark-mode .checkout-section-body-modern {
    background: transparent;
}

body.dark-mode .checkout-product-modern {
    border-bottom-color: var(--gray-200);
}

body.dark-mode .checkout-product-name-modern {
    color: var(--text-primary);
}

body.dark-mode .checkout-product-meta-modern {
    color: var(--text-muted);
}

body.dark-mode .form-label-modern {
    color: var(--text-secondary);
}

body.dark-mode .form-input-modern {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .form-input-modern:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 59, 66, 0.15);
}

body.dark-mode .user-logged-in-alert {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .user-logged-in-alert span {
    color: #34d399;
}

body.dark-mode .account-exists-alert-modern {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .account-alert-content strong {
    color: #fbbf24;
}

body.dark-mode .account-alert-content p {
    color: #f59e0b;
}

body.dark-mode .payment-option-modern {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

body.dark-mode .payment-option-modern:hover {
    border-color: var(--primary);
    background: rgba(255, 59, 66, 0.05);
}

body.dark-mode .payment-option-modern.selected {
    border-color: var(--primary);
    background: rgba(255, 59, 66, 0.1);
}

body.dark-mode .payment-title {
    color: var(--text-primary);
}

body.dark-mode .payment-subtitle {
    color: var(--text-muted);
}

body.dark-mode .save-card-option-modern {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .save-card-text strong {
    color: #60a5fa;
}

body.dark-mode .save-card-text small {
    color: #3b82f6;
}

body.dark-mode .newsletter-optin-modern {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .newsletter-optin-label-modern strong {
    color: #fbbf24;
}

body.dark-mode .newsletter-optin-label-modern small {
    color: #f59e0b;
}

body.dark-mode .terms-checkbox-modern {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

body.dark-mode .terms-checkbox-modern label {
    color: #fbbf24;
}

body.dark-mode .checkout-summary-modern {
    background: var(--gray-100);
    border-top-color: var(--gray-200);
}

body.dark-mode .summary-row-modern {
    color: var(--text-secondary);
}

body.dark-mode .summary-row-modern.total {
    border-top-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .security-badge-modern {
    border-top-color: var(--gray-200);
}

body.dark-mode .security-badge-modern small {
    color: var(--text-muted);
}

body.dark-mode .test-mode-badge-modern {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

body.dark-mode .back-link-modern {
    color: var(--primary);
}

/* ============================================
   AUTH PAGES (Login, Register, Password Reset)
   ============================================ */
body.dark-mode .auth-card {
    background: var(--gradient-card);
    border: 1px solid var(--gray-200);
}

body.dark-mode .auth-body {
    background: transparent;
}

body.dark-mode .cart-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

body.dark-mode .form-control {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .form-control:focus {
    background: var(--gray-100);
    border-color: var(--primary);
    color: var(--text-primary);
}

body.dark-mode .form-label {
    color: var(--text-secondary);
}

body.dark-mode .divider span {
    color: var(--text-muted);
}

body.dark-mode .divider::before,
body.dark-mode .divider::after {
    border-color: var(--gray-200);
}

body.dark-mode .benefits-card {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}

body.dark-mode .benefit-item {
    color: var(--text-secondary);
}

body.dark-mode .rate-limit-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

body.dark-mode .success-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .success-box h4 {
    color: #34d399;
}

body.dark-mode .success-box p {
    color: #10b981;
}

body.dark-mode .info-box {
    background: var(--gray-100);
}

body.dark-mode .info-box h6,
body.dark-mode .info-box ul {
    color: var(--text-muted);
}

body.dark-mode .newsletter-checkbox {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .password-requirements {
    background: var(--gray-100);
}

body.dark-mode .password-requirements li {
    color: var(--text-muted);
}

/* ============================================
   PAYMENT PAGE
   ============================================ */
body.dark-mode .saved-cards-section {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}

body.dark-mode .saved-card-item {
    background: var(--gray-50);
    border-color: var(--gray-200);
}

body.dark-mode .saved-card-item:hover {
    border-color: var(--primary);
}

body.dark-mode .saved-card-item.selected {
    border-color: var(--primary);
    background: rgba(255, 59, 66, 0.1);
}

body.dark-mode .new-card-option {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.4);
}

body.dark-mode .divider-text {
    color: var(--text-muted);
}

body.dark-mode .divider-text::before,
body.dark-mode .divider-text::after {
    border-color: var(--gray-200);
}

/* ============================================
   ALERTS (Bootstrap Override)
   ============================================ */
body.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

body.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

body.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

body.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
body.dark-mode .dropdown-menu {
    background: var(--light-bg);
    border-color: var(--gray-200);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .dropdown-item {
    color: var(--text-secondary);
}

body.dark-mode .dropdown-item:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

body.dark-mode .dropdown-divider {
    border-color: var(--gray-200);
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.dark-mode-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s;
}

.dark-mode-toggle:hover {
    background: var(--gray-100);
    color: var(--primary);
}

/* Icon wechseln */
.dark-mode-toggle .icon-light { display: block; }
.dark-mode-toggle .icon-dark { display: none; }

body.dark-mode .dark-mode-toggle .icon-light { display: none; }
body.dark-mode .dark-mode-toggle .icon-dark { display: block; }

body.dark-mode .dark-mode-toggle {
    color: var(--text-secondary);
}

body.dark-mode .dark-mode-toggle:hover {
    background: var(--gray-100);
    color: #fbbf24;
}

/* ============================================
   SMOOTH TRANSITION
   ============================================ */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body * {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   SYSTEM PREFERENCE (Optional)
   ============================================ */
@media (prefers-color-scheme: dark) {
    body.auto-dark-mode {
        /* Gleiche Styles wie body.dark-mode */
        /* Aktiviere dies wenn du automatische Erkennung willst */
    }
}