/* ==========================================================================
   DARK MODE
   Przełącznik motywu i reguły dla [data-theme="dark"].
   ========================================================================== */

/* ==========================================================================
   DARK MODE - KOMPLETNE WSPARCIE
   ========================================================================== */

/* Płynne przejścia przy zmianie motywu */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *:before,
body.theme-transitioning *:after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Przycisk toggle dark mode */
.dark-mode-toggle {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-mint);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1) rotate(20deg);
    background-color: var(--color-mint-dark);
}

.dark-mode-toggle .toggle-icon {
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.dark-mode-toggle .dark-icon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .light-icon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .dark-icon {
    display: block;
}

/* Dark mode - Wszystkie karty */
[data-theme="dark"] .product-card,
[data-theme="dark"] .woocommerce ul.products li.product,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .size-guide-card,
[data-theme="dark"] .handmade-benefit {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-gray);
}

/* Dark mode - Modalne */
[data-theme="dark"] .quick-view-modal,
[data-theme="dark"] .quick-view-overlay {
    background-color: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .quick-view-content {
    background-color: var(--color-bg-secondary);
}

/* Dark mode - Formularze */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--color-gray-light);
    color: var(--color-text);
    border-color: var(--color-gray);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-mint);
    background-color: var(--color-bg-secondary);
}

/* Dark mode - Przyciski */
[data-theme="dark"] .button,
[data-theme="dark"] .btn,
[data-theme="dark"] .woocommerce-button,
[data-theme="dark"] button[type="submit"] {
    background-color: var(--color-mint);
    color: var(--color-bg);
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] .btn:hover {
    background-color: var(--color-mint-dark);
}

[data-theme="dark"] .button-secondary {
    background-color: var(--color-rose);
}

/* Dark mode - Header */
[data-theme="dark"] .site-header {
    background-color: var(--color-bg-secondary);
    border-bottom-color: var(--color-gray);
}

[data-theme="dark"] .site-header a {
    color: var(--color-text);
}

/* Dark mode - Footer */
[data-theme="dark"] .site-footer {
    background-color: var(--color-bg-secondary);
    border-top-color: var(--color-gray);
}

/* Dark mode - Ikony header (koszyk, wishlist, compare) */
[data-theme="dark"] .header-icon {
    color: var(--color-text);
}

[data-theme="dark"] .header-icon:hover {
    color: var(--color-mint-light);
}

[data-theme="dark"] .header-icon .icon-label {
    color: var(--color-text-light);
}

/* Dark mode - Counts/badges */
[data-theme="dark"] .cart-count,
[data-theme="dark"] .wishlist-count,
[data-theme="dark"] .compare-count {
    background-color: var(--color-mint);
    color: var(--color-bg);
    font-weight: 700;
}
