/**
 * Style ciemnego motywu
 */

/* Przełącznik motywu - poprawione style */
.theme-toggle-container {
    display: flex !important;
    align-items: center !important;
    margin-left: 15px !important;
}

.theme-toggle {
    position: relative !important;
    width: 50px !important;
    height: 25px !important;
}

.theme-toggle input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.toggle-label {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #ccc !important;
    border-radius: 25px !important;
    transition: .4s !important;
}

.toggle-label:before {
    position: absolute !important;
    content: "" !important;
    height: 19px !important;
    width: 19px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: .4s !important;
}

.toggle-icon {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

.toggle-icon i {
    font-size: 12px !important;
    color: #333 !important;
}

.fa-sun {
    opacity: 1 !important;
    transition: .4s !important;
}

.fa-moon {
    opacity: 0 !important;
    transition: .4s !important;
}

input:checked + .toggle-label {
    background-color: #3498db !important;
}

input:checked + .toggle-label:before {
    transform: translateX(25px) !important;
}

input:checked + .toggle-label .fa-sun {
    opacity: 0 !important;
}

input:checked + .toggle-label .fa-moon {
    opacity: 1 !important;
    color: white !important;
}

/* Ciemny motyw - podstawowe kolory */
body.dark-theme {
    background-color: #121212;
    color: #e0e0e0;
}

/* Nagłówek w ciemnym motywie */
body.dark-theme .header {
    background-color: #1e1e1e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-theme .nav-menu li a {
    color: #e0e0e0;
}

body.dark-theme .nav-menu li a:hover {
    color: #3498db;
}

body.dark-theme .btn-contact {
    background-color: #3498db;
    color: #f5f5f5;
}

/* Sekcje w ciemnym motywie */
body.dark-theme .section-title h2 {
    color: #e0e0e0;
}

body.dark-theme .section-title p {
    color: #b0b0b0;
}

body.dark-theme .hero-section {
    background-color: #1e1e1e;
}

/* Karty w ciemnym motywie */
body.dark-theme .card {
    background-color: #1e1e1e;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

body.dark-theme .card-title {
    color: #e0e0e0;
}

body.dark-theme .card-content {
    color: #b0b0b0;
}

/* Portfolio w ciemnym motywie */
body.dark-theme .filter-btn {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

body.dark-theme .filter-btn.active {
    background-color: #3498db;
    color: #fff;
}

body.dark-theme .portfolio-item {
    background-color: #1e1e1e;
}

body.dark-theme .portfolio-details {
    background-color: #2a2a2a;
}

/* Formularz kontaktowy w ciemnym motywie */
body.dark-theme .form-control {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #3a3a3a;
}

body.dark-theme .form-control:focus {
    border-color: #3498db;
}

body.dark-theme .btn {
    background-color: #3498db;
    color: #e0e0e0;
}

/* Stopka w ciemnym motywie */
body.dark-theme .footer {
    background-color: #1a1a1a;
}

body.dark-theme .footer-content h3 {
    color: #e0e0e0;
}

body.dark-theme .footer-content p, 
body.dark-theme .footer-content a {
    color: #b0b0b0;
}

body.dark-theme .footer-bottom {
    background-color: #151515;
}

/* Przyciski w ciemnym motywie */
body.dark-theme .btn-primary {
    background-color: #3498db;
    color: #f5f5f5;
}

body.dark-theme .btn-secondary {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #3a3a3a;
} 