/* dark-mode.css - Wersja Poprawiona (Fix Footer & CTA) */

body.dark-mode {
    --color-bg: #050505;        /* Głęboka czerń */
    --color-navy: #ffffff;      /* Tekst główny na biały */
    --color-gold: #bfa17a;      /* Złoto */
    --color-text: #dddddd;      /* Tekst akapitów na jasnoszary */
    --white: #121212;           /* Tło kart - bardzo ciemny grafit */
    
    /* Nadpisanie zmiennych Headera i Footera */
    --h-beige: #050505;
    --h-navy: #ffffff;
    
    --f-beige: #000000;         /* Czarna stopka */
    --f-navy: #eeeeee;          /* Biały tekst stopki */
    --f-gold: #bfa17a;
    --f-border: #333333;
}

/* --- 1. NAPRAWA HERO I TEKSTÓW --- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #ffffff !important;
    background: transparent !important; /* Usuwa dziwne tła za tekstem */
}

body.dark-mode p {
    color: #ffffff !important;
}

/* --- 2. NAPRAWA PASKA CTA (Indywidualne zamówienie) --- */
/* To naprawia ten biały pasek na środku */
body.dark-mode .cta-strip {
    background-color: #111111 !important; /* Ciemne tło */
    border-top: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
}

body.dark-mode .cta-text h2 {
    color: #ffffff !important;
}

body.dark-mode .cta-text p {
    color: #dddddd !important;
}

/* Przycisk w CTA na ciemnym tle */
body.dark-mode .cta-btn .btn-white {
    background-color: transparent !important;
    color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
}

body.dark-mode .cta-btn .btn-white:hover {
    background-color: var(--color-gold) !important;
    color: #000 !important;
}

/* --- 3. NAPRAWA FOOTERA (STOPKI) --- */
/* To naprawia niewidoczny tekst w stopce */
body.dark-mode footer {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-top: 4px solid var(--color-gold);
}

body.dark-mode .footer-col h4 {
    color: var(--color-gold) !important;
}

body.dark-mode .footer-col p,
body.dark-mode .footer-col a,
body.dark-mode .footer-col li {
    color: #bbbbbb !important; /* Jasnoszary tekst linków */
}

body.dark-mode .footer-col a:hover {
    color: var(--color-gold) !important;
}

body.dark-mode .footer-bottom {
    background-color: #080808 !important;
    color: #777 !important;
    border-top: 1px solid #222;
}

/* --- 4. NAPRAWA MENU (HEADER) --- */
body.dark-mode nav {
    background-color: #050505 !important;
    border-bottom: 1px solid #222;
}

body.dark-mode .menu a {
    color: #ffffff !important;
}

body.dark-mode .menu a:hover {
    color: var(--color-gold) !important;
}

body.dark-mode .logo-main {
    color: #ffffff !important;
}

/* --- 5. NAPRAWA KART I SEKCJI --- */
body.dark-mode .feature-card,
body.dark-mode .product-card,
body.dark-mode .prod-card {
    background-color: #121212 !important; /* Ciemne karty */
    border: 1px solid #333 !important;
    box-shadow: none !important;
}

body.dark-mode .feature-card:hover,
body.dark-mode .product-card:hover {
    border-color: var(--color-gold) !important;
}

body.dark-mode .prod-title {
    color: #fff !important;
}

body.dark-mode .prod-price {
    color: var(--color-gold) !important;
    border-top: 1px solid #333 !important;
}

/* --- NAPRAWA KONFIGURATORA (DARK MODE) --- */

/* Panel boczny (Sticky) */
body.dark-mode .sticky-panel {
    background-color: #121212 !important; /* Bardzo ciemny grafit */
    border: 1px solid #333 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Opcje (Checkboxy) */
body.dark-mode .option-box {
    background-color: #1a1b1e !important;
    border-color: #333 !important;
}

body.dark-mode .option-box:hover {
    border-color: var(--color-gold) !important;
}

body.dark-mode .opt-name {
    color: #fff !important;
}

body.dark-mode .opt-cost {
    color: var(--color-gold) !important;
}

/* Dolna sekcja z ceną */
body.dark-mode .checkout-area {
    background-color: #0f1012 !important; /* Jeszcze ciemniejszy spód */
}

body.dark-mode .price-display {
    color: var(--color-gold) !important;
}

body.dark-mode .total-label {
    color: #bbb !important;
}

/* Tabela specyfikacji pod spodem */
body.dark-mode .specs-container {
    background-color: #121212 !important;
    border-color: #333 !important;
}

body.dark-mode .spec-section-row td {
    background-color: #222 !important;
    color: var(--color-gold) !important;
    border-color: #444 !important;
}

body.dark-mode .spec-key {
    background-color: #1a1a1a !important;
    color: #ccc !important;
    border-color: #333 !important;
}

body.dark-mode .spec-value {
    background-color: #121212 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* --- NAPRAWA PRZYCISKU W HEADERZE (BIAŁA PLAMA) --- */
body.dark-mode .nav-btn {
    background-color: transparent !important; /* Usuwa białe tło */
    border: 1px solid var(--color-gold) !important; /* Złota ramka */
    color: var(--color-gold) !important; /* Złoty tekst */
}

body.dark-mode .nav-btn:hover {
    background-color: var(--color-gold) !important; /* Złote tło po najechaniu */
    color: #000000 !important; /* Czarny tekst dla kontrastu */
    border-color: var(--color-gold) !important;
}
/* W trybie ciemnym (dla pewności, dodaj to w dark-mode.css lub tutaj) */
body.dark-mode .theme-switch {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

body.dark-mode .theme-switch::before {
    background-color: var(--color-gold);
}

body.dark-mode .theme-switch:hover {
    background-color: var(--color-gold);
    color: #000;
}


/* --- NAPRAWA WYBORU JĘZYKA (DARK MODE) --- */
body.dark-mode .lang-select {
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
    background-color: transparent !important;
}

body.dark-mode .lang-select:hover {
    background-color: var(--color-gold) !important;
    color: #000 !important;
}

/* Kolor opcji po rozwinięciu (niestety style systemowe selecta są ograniczone, ale to pomoże) */
body.dark-mode .lang-select option {
    background-color: #1a1b1e;
    color: #fff;
}