/*

Theme Name: Luz Chemia

Description: Dedykowany motyw dla Luz Chemia.

Author: Bakphoon

Version: 1.0

*/



/* ZMIENNE KOLORYSTYCZNE */

:root {

    --bg-dark: #000000;

    --bg-light: #363437;

    --accent-main: #275D74;

    --accent-bright: #2BA9E0;

    --text-color: #FFFFFF;

    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



/* RESET I BAZOWE STYLE */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background-color: var(--bg-dark);

    color: var(--text-color);

    font-family: var(--font-main);

    line-height: 1.6;

    overflow-x: hidden;

}



a {

    color: var(--text-color);

    text-decoration: none;

    transition: color 0.3s ease, transform 0.3s ease;

}



/* WSPÓLNE KLASY UTILITY */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 20px;

}




.btn {

    display: inline-block;

    padding: 12px 24px;

    background-color: var(--accent-main);

    color: var(--text-color);

    border-radius: 8px;

    font-weight: bold;

    text-align: center;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

}



.btn:hover {

    background-color: var(--accent-bright);

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(43, 169, 224, 0.4);

}



.btn-outline {

    background-color: transparent;

    border: 2px solid var(--accent-bright);

}



.btn-outline:hover {

    background-color: var(--accent-bright);

}



.placeholder-img {

    background-color: var(--bg-light);

    border: 2px dashed var(--accent-main);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #888;

    text-align: center;

}



/* HEADER */

header {

    background-color: rgba(0, 0, 0, 0.9);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--bg-light);

}



.header-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 15px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo-area {

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 1.5rem;

    font-weight: bold;

    letter-spacing: 1px;

}


.logo-placeholder {

    width: 40px;

    height: 40px;

    border-radius: 50%;

}



nav ul {

    display: flex;

    list-style: none;

    gap: 30px;

    align-items: right;

}



nav > ul > li {

    position: relative;

}



nav a:hover {

    color: var(--accent-bright);

}



/* DROPDOWN */

.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    background-color: var(--bg-light);

    min-width: 180px;

    border-radius: 8px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

    box-shadow: 0 10px 20px rgba(0,0,0,0.5);

    padding: 10px 0;

   

    /* DODANE LINIJKI: Wymuszają układ pionowy i resetują odstępy z głównego menu */

    display: flex;

    flex-direction: column;

    gap: 0;

}



.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-menu li {

    list-style: none;

    width: 100%; /* Upewnia się, że element zajmuje całą szerokość podmenu */

}



.dropdown-menu a {

    display: block;

    padding: 10px 20px;

    font-size: 0.9rem;

}



.dropdown-menu a:hover {

    background-color: var(--accent-main);

    color: #fff;

}



/* BLOK MATURALNY (HERO) */

.hero-section {

    margin-top: 80px;

    display: flex;

    align-items: center;

    min-height: 70vh;

    gap: 40px;

}



.hero-text {

    flex: 1;

}



.hero-text h1 {

    font-size: 3.5rem;

    margin-bottom: 20px;

    color: var(--accent-bright);

}



p {

    font-size: 1.2rem;

    margin-bottom: 30px;

    color: var(--text-color);

}



.hero-buttons {

    display: flex;

    gap: 15px;

}



.hero-image {

    flex: 1;

    display: flex;

    justify-content: center;

}



.hero-image .placeholder-img {

    width: 100%;

    max-width: 400px;

    aspect-ratio: 1 / 1;

    border-radius: 20px;

}



/* BLOK Z DATĄ */

.countdown-section {

    background: linear-gradient(135deg, var(--accent-main), var(--accent-bright));

    text-align: center;

    padding: 40px 20px;

    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);

}



.countdown-section h2 {

    font-size: 2rem;

    margin-bottom: 10px;

}



.countdown-section p {

    font-size: 1.1rem;

    font-weight: bold;

    opacity: 0.9;

}



/* BLOK Z KANAŁEM YOUTUBE */

.youtube-section {

    display: flex;

    gap: 40px;

    align-items: center;

}



.yt-text {

    flex: 1;

}



.yt-text h2 {

    font-size: 2.5rem;

    margin-bottom: 20px;

}



.yt-text h2 a {

    color: var(--accent-bright);

}



.yt-video {

    flex: 1;

}



.video-wrapper {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 ratio */

    height: 0;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.6);

}



.video-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: none;

}



/* BLOK KURSÓW */

/* --- UKŁAD TRZECH KURSÓW (TRIPLE LAYOUT) --- */
.triple-layout {
    display: grid;
    /* Środkowa kolumna dostaje proporcję 1.3, co naturalnie ją powiększa względem bocznych (1) */
    grid-template-columns: 1fr 1.3fr 1fr; 
    gap: 30px;
    align-items: center; /* Wyrównuje poboczne kursy do środka w pionie */
    max-width: 1250px;
    margin: 0 auto;
}

/* --- KARTA KURSU POBOCZNEGO --- */
.side-course {
    background-color: #1a1a1a;
    border: 1px solid #333; /* Zwykła, cienka ramka. Brak neonu. */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Dyskretny cień */
    padding: 25px; 
    transform: scale(0.95); /* Optyczne pomniejszenie całego bloku o 5% */
    animation: none !important; /* Kategoryczne wyłączenie pulsowania i lewitacji */
    z-index: 1;
}

.side-course:hover {
    transform: scale(0.98) translateY(-5px); /* Delikatne uniesienie przy najechaniu, mniejsze niż główny kurs */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border-color: #555;
}

/* Zmniejszenie fontów w kartach pobocznych dla proporcji */
.side-course h3 { font-size: 1.8rem; }
.side-course .course-current-price { padding-top: 15px; margin-bottom: 15px; border-top-color: #333; }
.side-course .price-amount { font-size: 1.8rem; text-shadow: none; }

/* Ochrona głównego kursu przed zgnieceniem przez Grid */
.main-course-wrapper {
    max-width: 100%;
    margin: 0;
    z-index: 2; /* Środkowy kurs jest wyżej w hierarchii 3D */
}

/* Wymuszenie czytelności pobocznych w trybie jasnym */
html[data-theme="light"] .side-course {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1150px) {
    .triple-layout { gap: 15px; }
}

@media (max-width: 992px) {
    .triple-layout {
        grid-template-columns: 1fr; /* Przejście na jedną kolumnę */
    }
    .main-course-wrapper {
        order: -1; /* Wrzuca główny, neonowy kurs na samą górę na telefonie! */
        margin-bottom: 30px;
    }
    .side-course {
        transform: scale(1); /* Usuwamy pomniejszenie na komórkach */
        max-width: 600px;
        margin: 0 auto;
    }
}

.courses-section h2 {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 40px;

}

/* Generalne Style (Domyślny Tryb Ciemny) */

.course-card {
    /* Zmieniamy bazowy kolor na ciemniejszy, żeby neon lepiej wyglądał */
    background-color: #1a1a1a; 
    
    /* Wspólne, nienaruszone właściwości */
    flex: 1;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Transition dla wszystkiego na hover */
    width: 100%; /* Upewniamy się, że wypełnia wrapper na szerokość */
    position: relative; /* Badge CKE potrzebuje tego do pozycjonowania */
    
    /* --- OSTATECZNY NEON (DLA CAŁEGO PROSTOKĄTA) START --- */
    border: 2px solid var(--accent-bright); /* Elektryczna, niebieska ramka */
    
    /* Miękka, wielowarstwowa poświata zewnętrzna i wewnętrzna */
    box-shadow:
        0 0 15px rgba(43, 169, 224, 0.4), /* Miękka poświata zewnętrzna */
        inset 0 0 10px rgba(43, 169, 224, 0.2); /* Delikatna poświata wewnętrzna */
    /* --- NEON (DLA CAŁEGO PROSTOKĄTA) END --- */
}

/* KARTA: Hover (Duch wstaje, Neon świeci mocniej) */
.course-card:hover {
    transform: translateY(-10px);
    
    /* Intensyfikujemy blask po najechaniu, ale wyłączamy pulsowanie */
    box-shadow:
        0 0 30px rgba(43, 169, 224, 0.8), /* Szeroki niebieski halo glow */
        inset 0 0 15px rgba(43, 169, 224, 0.6);
    border-color: rgba(43, 169, 224, 1); /* Pełny niebieski w ramce */
    
    /* Nadpisujemy, by na hoverze tylko lewitowała, nie pulsowała */
    animation: floatGhost 4s ease-in-out infinite;
}

/* --- ZMODYFIKOWANE ŁĄCZENIE ANIMACJI DLA KARTY --- */
.floating-ghost {
    /* Lista animacji oddzielona przecinkiem:
       1. Lewitowanie (Duch) - stała
       2. Pulsowanie Neonu - stała, alternate sprawia, że jest miękka
    */
    animation: floatGhost 4s ease-in-out infinite, neonCardPulse 3s infinite alternate;
}

/* EXISTING ANIMATION DEFINITION FOR REFERENCE */
@keyframes floatGhost {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- NOWA DEFINICJA ANIMACJI: PULSOWANIE CAŁEGO NEONU --- */
@keyframes neonCardPulse {
    0% {
        box-shadow:
            0 0 10px rgba(43, 169, 224, 0.3),
            inset 0 0 5px rgba(43, 169, 224, 0.2);
        border-color: rgba(43, 169, 224, 0.6);
    }
    100% {
        box-shadow:
            0 0 25px rgba(43, 169, 224, 0.6),
            inset 0 0 15px rgba(43, 169, 224, 0.4);
        border-color: rgba(43, 169, 224, 1);
    }
}
/* --- NOWA DEFINICJA ANIMACJI END --- */

/* --- NADPISANIE DLA TRYBU JASNEGO (Wyłączamy Neon, zachowujemy Ducha) --- */

html[data-theme="light"] .course-card {
    background-color: #FFFFFF; /* Czyste białe tło */
    border-color: #ddd; /* Stonowana ramka */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Zwykły, płaski cień */
    
    /* Wyłączamy pulsowanie w dzień, zostawiamy tylko lewitowanie */
    animation: floatGhost 4s ease-in-out infinite; 
}

/* Hover w trybie jasnym - sharp, czysty look */
html[data-theme="light"] .course-card:hover {
    border-color: var(--accent-bright); /* Akcentujemy ramkę po najechaniu */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Intensywniejszy zwykły cień */
    
    /* Nadpisujemy, by na hoverze tylko lewitowała, nie pulsowała (choć i tak nie pulsuje) */
    animation: floatGhost 4s ease-in-out infinite;
}

/* --- GŁÓWNA CENA W KARCIE KURSU --- */
.course-current-price {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid #444; /* Subtelna linia odcinająca listę od ceny */
}

.course-current-price .price-text {
    font-size: 1.1rem;
    color: #ccc;
    margin-right: 8px;
}

.course-current-price .price-amount {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--accent-bright);
}

/* Wymuszenie czytelności w trybie jasnym */
html[data-theme="light"] .course-current-price {
    border-top-color: #E2E8F0;
}

html[data-theme="light"] .course-current-price .price-text {
    color: #4A5568;
}


.courses-grid {

    display: flex;

    gap: 40px;

}



.course-card {

    background-color: var(--bg-light);

    flex: 1;

    border-radius: 20px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: transform 0.3s ease;

}



.course-card:hover {

    transform: translateY(-10px);

}



.course-card h3 {

    font-size: 2rem;

    margin-bottom: 20px;

    color: var(--accent-bright);

}



.course-cover {

    width: 80%;

    aspect-ratio: 1 / 1.414;

    border-radius: 10px;

    margin-bottom: 20px;

}



.course-list-container {

    width: 100%;

    margin-bottom: 20px;

}



.course-list {

    list-style-position: inside;

    margin-bottom: 15px;

}



.course-list li {

    margin-bottom: 8px;

    color: #ddd;

}



/* Ukrywanie elementów listy powyżej 4 */

.course-list li:nth-child(n+5) {

    display: none;

}



.course-list.expanded li:nth-child(n+5) {

    display: list-item;

}



.expand-btn {

    background: none;

    border: none;

    color: var(--accent-bright);

    cursor: pointer;

    font-size: 1rem;

    font-weight: bold;

    text-decoration: underline;

}



.course-actions {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: auto;

    margin-bottom: 20px;

}



.course-actions-horizontal {

    width: 100%;

    display: flex;

    flex-direction: row;

    gap: 15px;

    margin-top: 20px;

    margin-bottom: auto;

}



.course-price-info {

    font-size: 0.8rem;

    color: #aaa;

    text-align: center;

}



/* BLOK PAKIETÓW */

.packages-banner {

    background: linear-gradient(45deg, var(--bg-light), var(--accent-main));

    border-radius: 20px;

    padding: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    animation: pulse 3s infinite alternate;

}



@keyframes pulse {

    0% { box-shadow: 0 0 15px rgba(43, 169, 224, 0.2); }

    100% { box-shadow: 0 0 30px rgba(43, 169, 224, 0.6); }

}



.packages-banner:hover {

    transform: scale(1.02);

}



.packages-banner h2 {

    font-size: 2rem;

    margin: 0;

}



.arrow-circle {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background-color: var(--text-color);

    color: var(--bg-dark);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 2rem;

    font-weight: bold;

    transition: transform 0.3s;

}



.packages-banner:hover .arrow-circle {

    transform: translateX(10px);

}



/* BLOK KOREPETYCJI */

.tutoring-section {

    display: flex;

    gap: 40px;

    align-items: center;

}



.tutoring-text {

    flex: 1;

}



.tutoring-text h2 {

    font-size: 2.5rem;

    margin-bottom: 20px;

}



.tutoring-image-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.tutor-face {

    width: 250px;

    height: 250px;

    border-radius: 50%;

}



/* PASEK PRZEDMIOTÓW (MARQUEE) */

.marquee-wrapper {

    background-color: var(--bg-light);

    padding: 15px 0;

    overflow: hidden;

    white-space: nowrap;

    border-top: 1px solid #444;

    border-bottom: 1px solid #444;

    position: relative;

}



.marquee-content {

    display: inline-block;

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--accent-bright);

    /* Przewijanie w prawo: zaczynamy od przesunięcia w lewo (-50%) i jedziemy do zera */

    animation: scrollRight 20s linear infinite;

}



.marquee-item {

    display: inline-block;

    margin: 0 40px;

}



@keyframes scrollRight {

    0% { transform: translateX(-50%); }

    100% { transform: translateX(0); }

}



/* BLOK OPINII */

.reviews-section h2 {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 40px;

}



.reviews-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 20px;

}



.review-card {

    background-color: var(--bg-light);

    border-radius: 15px;

    padding: 20px;

    font-size: 0.9rem;

    color: var(--text-color);

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    transition: transform 0.3s, background-color 0.3s;

}



.review-card:hover {

    transform: translateY(-5px);

    background-color: var(--bg-light);

}



/* FOOTER PLACEHOLDER */

footer {

    background-color: var(--bg-light);

    padding: 40px 20px;

    text-align: center;

    margin-top: 40px;

    border-top: 2px solid var(--accent-main);

}

/* =========================================
   PODSTRONA: KURS CHEMIA
   ========================================= */

/* --- ZAKTUALIZOWANY BLOK TABLETOWY (SCROLL PIONOWY) --- */

.tablet-slider {
    display: flex;
    flex-direction: column;      /* Zmiana układu z poziomego na pionowy */
    overflow-y: auto;            /* Przewijanie w osi Y */
    overflow-x: hidden;          /* Ukrycie ewentualnego wycieku w osi X */
    scroll-snap-type: y mandatory; /* Snapowanie pionowe */
    width: 100%;
    height: 100%;
    scrollbar-width: none;       /* Ukrycie paska w Firefox */
    flex-shrink: 0;
}

.tablet-slider::-webkit-scrollbar { 
    display: none;               /* Ukrycie paska w Chrome/Safari */
}

.tablet-slide img {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* KLUCZOWE: Usuwa domyślne mikroszczeliny (3-4 piksele), które tworzą się pod obrazkami */
}

.tablet-slide {
    min-width: 100%;
    min-height: 100%;            /* Teraz to wysokość musi wymuszać rozmiar slajdu */
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reszta stylów pozostaje bez zmian, by zachować wygląd mockupu */
.tablet-hero-section {
    margin-top: 100px;
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 70vh;
}
.tablet-text { flex: 1; }
.tablet-text .badge {
    display: inline-block; background-color: var(--accent-main); color: #fff;
    padding: 5px 15px; border-radius: 20px; font-weight: bold; margin-bottom: 15px; font-size: 0.9rem;
}
.tablet-text h1 { font-size: 3.5rem; color: var(--accent-bright); margin-bottom: 20px; }
.tablet-text p { font-size: 1.2rem; margin-bottom: 15px; color: var(--text-color); }
.btn-buy-now { margin-top: 20px; padding: 15px 35px; font-size: 1.2rem; }

.tablet-mockup-wrapper { flex: 1; display: flex; justify-content: center; perspective: 1000px; }
.tablet-mockup {
    width: 100%; max-width: 450px; aspect-ratio: 210 / 317;
    background-color: #1a1a1a; border-radius: 30px; border: 12px solid #222;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.8);
    position: relative; display: flex; flex-direction: column; align-items: center;
    transform: rotateY(-10deg) rotateX(5deg); transition: transform 0.5s ease; box-sizing: border-box;
}

.tablet-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tablet-mockup:hover { transform: rotateY(0deg) rotateX(0deg); }
.tablet-screen {
    width: 100%; height: 90%; background-color: var(--bg-light); border-radius: 10px;
    overflow: hidden; margin-top: 15px;
}
.tablet-button { width: 40px; height: 40px; border-radius: 50%; background-color: #333; margin: auto; border: 2px solid #111; }

/* --- BLOK STATYSTYK 6-KOLUMNOWY (Identyczny ze stroną główną) --- */
.stats-extended-section .stats-grid-6 {
    display: grid; grid-template-columns: repeat(3, 2fr); gap: 60px; margin-bottom: 30px; width: 100%;
}

.stats-extended-section .stat-box {
    width:17%; background-color: var(--bg-light); border-radius: 12px; padding: 15px; text-align: center; border: 1px solid #555; box-sizing: border-box;
}
.stats-extended-section .stat-box strong { display: block; font-size: 1.5rem; color: var(--accent-bright); margin-bottom: 5px; }
.stats-extended-section .stat-box span { font-size: 0.9rem; color: var(--text-color); font-weight: normal; }

.refund-info { text-align: center; margin-top: 30px; }
.refund-info h3 { color: var(--accent-bright); margin-bottom: 10px; font-size: 1.5rem; }
.refund-info p { color: var(--text-color); max-width: 800px; margin: 0 auto; }

/* --- BLOK KLEPSYDRY (Animacja SVG) --- */
.hourglass-banner {
    background-color: var(--accent-main); border-radius: 20px; padding: 40px 60px;
    display: flex; align-items: center; justify-content: space-between; gap: 40px; box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.hourglass-text { flex: 2; }
.hourglass-text h2 { font-size: 2.5rem; margin-bottom: 15px; color: #fff; }
.time-saved { font-size: 1.4rem; background: rgba(0,0,0,0.3); display: inline-block; padding: 10px 20px; border-radius: 10px; margin-bottom: 15px; color:#fff;}
.hourglass-text .small-text { font-size: 0.9rem; color: #eee; }

.hourglass-animation-v2 { flex: 1; display: flex; justify-content: center; align-items: center; }
.hg-svg { animation: flipSvg 4s ease-in-out infinite; }
.hg-sand-top { animation: sandTop 4s linear infinite; transform-origin: center 12px; }
.hg-sand-bottom { animation: sandBottom 4s linear infinite; transform-origin: center 20px; }
.hg-stream { animation: stream 4s linear infinite; }
@keyframes flipSvg { 0%, 15% { transform: rotate(0deg); } 85%, 100% { transform: rotate(180deg); } }
@keyframes sandTop { 0%, 15% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
@keyframes sandBottom { 0%, 15% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }
@keyframes stream { 0%, 15% { opacity: 0; stroke-dasharray: 0 10; } 20% { opacity: 1; stroke-dasharray: 10 0; } 80% { opacity: 1; stroke-dasharray: 10 0; } 85%, 100% { opacity: 0; stroke-dasharray: 0 10; } }

/* --- BLOK SATYSFAKCJI --- */
.satisfaction-section h2 { text-align: center; margin-bottom: 30px; font-size: 2.5rem; color: var(--accent-bright); }
.custom-bullet-list { max-width: 800px; margin: 0 auto; list-style: none; }
.custom-bullet-list li {
    position: relative; padding-left: 40px; margin-bottom: 20px; font-size: 1.1rem; color: var(--text-color);
}
.custom-bullet-list li::before {
    content: '⭐'; position: absolute; left: 0; top: 0; font-size: 1.2rem;
}

/* --- BLOK FISZEK (FLIP CARDS) --- */
.flashcards-section h2 { 
    text-align: center; 
    margin-bottom: 40px; 
    font-size: 2.5rem; 
}

.flashcards-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    align-items: stretch; /* NOWE: Sprawia, że fiszki w jednym rzędzie mają tę samą wysokość */
}

/* Wersja mobilna dla siatki - żeby na telefonach fiszki układały się jedna pod drugą */
@media (max-width: 768px) {
    .flashcards-grid {
        grid-template-columns: 1fr;
    }
}

.flashcard-container { 
    perspective: 1000px; 
    cursor: pointer; 
    /* USUNIĘTO: aspect-ratio: 4/3; */
    height: 100%; /* NOWE: Kontener wypełnia całą dostępną przestrzeń siatki */
}

.flashcard {
    width: 100%; 
    height: 100%; 
    /* USUNIĘTO: position: relative; (nie jest już potrzebne do trzymania absolutów) */
    display: grid; /* NOWE: Zastępuje pozycjonowanie absolutne */
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.flashcard-container.flipped .flashcard { 
    transform: rotateY(180deg); 
}

.flashcard-front, .flashcard-back {
    /* USUNIĘTO: position: absolute; */
    grid-area: 1 / 1; /* NOWE: Umieszcza przód i tył dokładnie w tej samej komórce, nakładając je na siebie */
    box-sizing: border-box; /* NOWE: Zapobiega rozpychaniu elementu przez padding */
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    border-radius: 15px;
    padding: 30px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center;
    border: 1px solid #555;
}

.flashcard-front { 
    background-color: var(--bg-light); 
    color: var(--text-color); 
}

.flashcard-back { 
    background-color: var(--accent-main); 
    color: #fff; 
    transform: rotateY(180deg); 
}

.flashcard-front h3, .flashcard-back h3 { 
    color: var(--accent-bright); 
    margin-bottom: 15px; 
}

.flashcard-back h3 { 
    color: #fff; 
}

/* --- BLOK FILMOWY (SLIDESHOW + WIDEO) - Zaktualizowany --- */
.media-section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.media-split-section { 
    display: flex; 
    gap: 40px; 
    align-items: flex-start; /* Zmiana na flex-start, aby podpisy nie rozpychały bloku od środka */
    justify-content: center; 
    max-width: 1050px !important; 
    margin: 0 auto; 
}

.media-slideshow { 
    width: 28.5%; 
    display: flex; 
    flex-direction: column; /* Układa pokaz slajdów i podpis jeden pod drugim */
    align-items: center; 
}

.media-video { 
    width: 71.5%; 
    display: flex;
    flex-direction: column; /* Układa film i podpis jeden pod drugim */
}

/* NOWE: Podpisy pod multimediami */
.media-caption {
    text-align: center;
    margin-top: 15px;
    font-size: 1.1rem;
    color: #ccc;
    font-style: italic;
}

/* Wymuszenie czytelności podpisu w trybie jasnym */
html[data-theme="light"] .media-caption {
    color: #4A5568;
}

/* Aktualizacja w widoku mobilnym */
@media (max-width: 992px) {
    .media-slideshow, .media-video {
        width: 100%;
    }
    .media-slideshow {
        width: 60%;
        margin: 0 auto;
    }
}

/* Slajdy w proporcji 1:1.414 */
.slideshow-container { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 1 / 1.414; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.slideshow-container .slide { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    opacity: 0; transition: opacity 1s ease-in-out; 
}

.slideshow-container .active-slide { opacity: 1; }

.slideshow-container .placeholder-img { 
    width: 100% !important; height: 100% !important; 
}

/* Wideo w nowoczesnej proporcji 16:9 - nadpisuje stary "padding hack" */
.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Wymusza poprawne 16:9 bez psucia wysokości */
    padding-bottom: 0 !important; /* Kasuje stary kod */
    height: auto !important; /* Kasuje stary kod */
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* --- SEKCJA WIĘCEJ PAKIETÓW (Pod neonem) --- */
.more-packages-area {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.more-packages-area p {
    font-size: 1.1rem;
    color: #ccc;
    margin: 0;
}

/* Zapewnienie czytelności w trybie jasnym */
html[data-theme="light"] .more-packages-area p {
    color: #4A5568;
}

/* --- NAPIS PIONOWY I WRAPPER KARTY --- */
.course-wrapper {
    position: relative; /* Pozwala na swobodne "przyklejenie" napisu do boku */
    width: 100%;
    max-width: 500px; /* Zwracamy idealny rozmiar samej karty */
    margin: 0 auto; /* Gwarantuje wyśrodkowanie samej karty */
}

.course-card {
    width: 100%;
}

.cke-badge {
    position: absolute;
    top: 50%; /* Przesuwa napis na środek w pionie */
    right: -50px; /* Odsuwa napis poza prawą krawędź karty */
    transform: translateY(-50%); /* Precyzyjne wyrównanie środka napisu do środka karty */
    
    writing-mode: vertical-rl;
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--text-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.6;
}

/* Wymuszenie czytelności w trybie jasnym */
html[data-theme="light"] .cke-badge {
    color: var(--text-color);
}

/* --- RESPONSIVE: Przywrócenie napisu na mobile --- */
@media (max-width: 992px) {
    .course-wrapper {
        display: flex;
        flex-direction: column-reverse; /* Tekst ląduje nad kartą */
        gap: 15px;
    }
    .cke-badge {
        position: static; /* Wyłącza "lewitowanie" napisu na telefonie */
        transform: none; /* Wyłącza przesunięcie w pionie */
        writing-mode: horizontal-tb; /* Tekst wraca do poziomu */
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

/* W widoku mobilnym zdejmujemy proporcje i kładziemy jedno pod drugim */
@media (max-width: 992px) {
    .media-slideshow, .media-video {
        width: 100%;
    }
    .media-slideshow {
        width: 60%; /* Żeby plakat nie był gigantyczny na telefonie */
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    /* Ukrywamy tablet na telefonach */
    .tablet-mockup-wrapper { display: none !important; }
    
    /* NOWE: Ukrywamy filmik YouTube na telefonach */
    .media-video { display: none !important; }
    
    /* Skoro wideo zniknęło, niech slajdy zajmą ładnie środek ekranu */
    .media-slideshow { width: 100% !important; margin: 0 auto; max-width: 350px; }
    
    .stats-extended-section .stats-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .flashcards-grid { grid-template-columns: 1fr; }
    .pros-cons-grid { grid-template-columns: 1fr; }
    .cons-column { display: none; }
    .reviews-grid-single { grid-template-columns: 1fr; }
    .neon-box { display: flex; flex-direction: column; gap: 10px; }
}

/* --- BLOK NEONOWY V2 (Od nowa) --- */
.neon-section-v2 {
    display: flex; flex-direction: column; align-items: center; margin-top: 60px;
}
.neon-ticket {
    background-color: #1a1a1a;
    border: 2px solid var(--accent-bright);
    border-radius: 20px; padding: 40px; text-align: center;
    box-shadow: 0 0 25px rgba(43, 169, 224, 0.3), inset 0 0 15px rgba(43, 169, 224, 0.2);
    margin-bottom: 35px; /* Odstęp dla przycisku pod spodem */
    width: 100%; max-width: 650px;
}
.neon-ticket h3 { font-size: 2rem; color: #fff; margin-bottom: 25px; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.neon-price-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.neon-text { font-size: 1.1rem; color: #aaa; text-transform: uppercase; letter-spacing: 2px; }
.price-tags { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.price-tags .old-price { color: #F44336; font-size: 1.5rem; opacity: 0.8; }
.price-tags .new-price { font-size: 3.5rem; font-weight: bold; color: var(--accent-bright); text-shadow: 0 0 20px var(--accent-bright); line-height: 1; }

.neon-action { display: flex; justify-content: center; width: 100%; }
.btn-neon-v2 {
    font-size: 1.3rem; padding: 18px 60px; text-transform: uppercase; font-weight: bold;
    background-color: transparent; border: 2px solid var(--accent-bright); color: var(--accent-bright);
    border-radius: 50px; transition: all 0.3s ease; letter-spacing: 1px;
}
.btn-neon-v2:hover {
    background-color: var(--accent-bright); color: #fff; box-shadow: 0 0 30px var(--accent-bright); transform: translateY(-3px);
}

/* Wymuszenie jasnego tła dla nowego biletu w jasnym motywie */
html[data-theme="light"] .neon-ticket { background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
html[data-theme="light"] .neon-ticket h3 { color: var(--text-color); text-shadow: none; }

/* --- BLOK PROS & CONS (PRZEBUDOWANY) --- */
.pros-cons-section h2 { 
    text-align: center; 
    font-size: 2.5rem; 
    margin-bottom: 20px; 
}

.pros-cons-subtitle { 
    text-align: center; 
    font-size: 1.5rem; 
    color: #4CAF50; 
    margin-bottom: 30px; 
    font-weight: 500; 
}

.negative-subtitle { 
    color: #F44336; 
    margin-top: 50px; /* Robi wyraźny odstęp od pozytywów */
}

/* Nowy układ siatki - 2 kolumny pod sobą */
.pros-cons-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px 40px; 
    max-width: 900px; 
    margin: 0 auto; 
}

.pro-con-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    background: var(--bg-light); 
    padding: 15px 25px; 
    border-radius: 10px; 
    border: 1px solid transparent;
}

.pro-con-item p {
    margin: 0;
}

.pro-con-item .icon { font-size: 1.5rem; font-weight: bold; }
.pro-con-item .checkmark { color: #4CAF50; }
.pro-con-item .crossmark { color: #F44336; }

/* Drobna poprawka dla trybu jasnego */
html[data-theme="light"] .pro-con-item { 
    background: #FFFFFF; 
    border: 1px solid #E2E8F0; 
}


/* --- RESPONSIVE DESIGN DLA PROS & CONS --- */
@media (max-width: 768px) {
    /* Załamuje klocki do jednej kolumny */
    .pros-cons-grid { 
        grid-template-columns: 1fr; 
    }
    
    /* Ukrywa cały blok negatywny (tytuł + klocki) na telefonach */
    .cons-wrapper { 
        display: none !important; 
    }
}

/* --- BLOK OFERTY (DUCH) --- */
.floating-ghost { animation: floatGhost 4s ease-in-out infinite; max-width: 500px; margin: 0 auto; }
@keyframes floatGhost { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.floating-ghost:hover { animation-play-state: paused; } /* Zatrzymuje lewitowanie po najechaniu myszką */

/* --- BLOK NEONOWY --- */
.neon-section { text-align: center; margin-top: 40px; }
.neon-title { font-size: 2rem; margin-bottom: 20px; }
.neon-box {
    display: inline-block; padding: 20px 40px; border-radius: 15px; background: #111;
    border: 2px solid var(--accent-bright);
    box-shadow: 0 0 10px rgba(43, 169, 224, 0.4), inset 0 0 10px rgba(43, 169, 224, 0.4);
    margin-bottom: 30px;
}
.neon-box .neon-text { font-size: 1.2rem; margin-right: 15px; color: var(--text-color); }
.neon-box .old-price { color: #F44336; font-size: 1.2rem; margin-right: 15px; opacity: 0.8; }
.neon-box .new-price { font-size: 2rem; font-weight: bold; color: var(--accent-bright); text-shadow: 0 0 10px rgba(43, 169, 224, 0.8); }
.btn-neon { font-size: 1.5rem; padding: 15px 50px; text-transform: uppercase; box-shadow: 0 0 15px rgba(43, 169, 224, 0.5); }

/* --- BLOK Q&A --- */
.faq-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; }
.faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-item { background-color: var(--bg-light); margin-bottom: 10px; border-radius: 8px; overflow: hidden; border: 1px solid #444; }
.faq-question {
    width: 100%; text-align: left; background: none; border: none; padding: 20px;
    font-size: 1.1rem; color: var(--text-color); font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.faq-icon { font-size: 1.5rem; color: var(--accent-bright); transition: transform 0.3s ease; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: rgba(0,0,0,0.2); }
.faq-answer p { padding: 0 20px 20px 20px; color: var(--text-color); }
.faq-item.active .faq-answer { max-height: 500px; } /* Zapewnia płynne rozwinięcie */
.faq-item.active .faq-icon { transform: rotate(45deg); } /* Zamienia + na X */

/* --- BLOK OPINII 1x5 --- */
.reviews-grid-single {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}

/* === NADPISYWANIE DLA TRYBU JASNEGO === */
/* html[data-theme="light"] .tablet-mockup { background-color: #f1f1f1; border-color: #ddd; box-shadow: 20px 20px 40px rgba(0,0,0,0.1); }
html[data-theme="light"] .tablet-button { background-color: #ddd; border-color: #ccc; } */
html[data-theme="light"] .hourglass-banner { box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
html[data-theme="light"] .flashcard-front { border-color: #E2E8F0; }
html[data-theme="light"] .pro-con-item { background: #FFFFFF; border: 1px solid #E2E8F0; }
html[data-theme="light"] .neon-box { background: #FFFFFF; }
html[data-theme="light"] .faq-item { border-color: #E2E8F0; }
html[data-theme="light"] .faq-answer { background-color: #F5F7FA; }
html[data-theme="light"] .faq-question { color: #2D3748; }

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    /* NOWE: Ukrywamy tablet na telefonach */
    .tablet-mockup-wrapper { display: none !important; }
    
    .stats-extended-section .stats-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .flashcards-grid { grid-template-columns: 1fr; }
    .pros-cons-grid { grid-template-columns: 1fr; }
    .cons-column { display: none; }
    .reviews-grid-single { grid-template-columns: 1fr; }
    .neon-box { display: flex; flex-direction: column; gap: 10px; }
    .media-slideshow { width: 80%; }
}

@media (max-width: 768px) {
    .stats-extended-section .stats-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .flashcards-grid { grid-template-columns: 1fr; }
    .pros-cons-grid { grid-template-columns: 1fr; }
    /* Ukrycie negatywów na mobile */
    .cons-column { display: none; }
    .reviews-grid-single { grid-template-columns: 1fr; }
    .neon-box { display: flex; flex-direction: column; gap: 10px; }
}

/* RESPONSIVE DESIGN (Widok Mobilny) */

@media (max-width: 992px) {

    .hero-section, .youtube-section, .courses-grid, .tutoring-section {

        flex-direction: column;

        text-align: center;

    }

   

    .hero-buttons {

        justify-content: center;

    }



    .reviews-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* --- HAMBURGER MENU (MOBILE) --- */



/* Przycisk domyślnie ukryty na desktopie */

.hamburger-btn {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 30px;

    height: 25px;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    margin-left: 20px;

    position: relative;

    z-index: 2000; /* Zawsze najwyżej, aby można było zamknąć menu */

}



.hamburger-line {

    width: 30px;

    height: 3px;

    background-color: var(--text-color); /* Kolor dopasowuje się do motywu jasnego/ciemnego */

    border-radius: 5px;

    transition: all 0.3s ease;

    transform-origin: left; /* Punkt odniesienia dla animacji krzyżyka */

}



/* --- ZASADY DLA EKRANÓW MOBILNYCH --- */

@media (max-width: 768px) {
    /* Pokazujemy przycisk hamburgera */

    .hamburger-btn {

        display: flex;

    }



    /* Przebudowa głównego menu w boczny panel */

    nav ul {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        position: fixed;

        top: 0;

        right: -100%; /* Domyślnie menu jest schowane poza ekranem z prawej strony */

        width: 70vw; /* Zajmuje 70% szerokości ekranu */

        max-width: 300px;

        height: 100vh; /* Cała wysokość ekranu */

        background-color: var(--bg-light);

        padding-top: 100px; /* Robi miejsce na górny pasek headera */

        transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0); /* Płynne wysunięcie */

        box-shadow: -10px 0 30px rgba(0,0,0,0.5);

        z-index: 1000;

        overflow-y: auto; /* Pozwala przewijać długie menu na małych ekranach */

    }



    /* Klasa dodawana przez JavaScript - wysuwa menu */

    nav ul.active {

        right: 0;

    }



    /* Wygląd linków na telefonie */

    nav > ul > li {

        width: 100%;

        text-align: center;

        margin-bottom: 10px;

    }



    nav a {

        font-size: 1.2rem;

        display: block;

        padding: 15px;

    }



    /* Menu rozwijane na telefonie (nie działa tam 'hover', więc robimy statyczną listę) */

    nav .sub-menu {

        position: static;

        opacity: 1;

        visibility: visible;

        transform: none;

        box-shadow: none;

        background-color: rgba(0,0,0,0.2);

        display: none; /* Ukryte przed kliknięciem */

        padding: 0;

    }



    /* Pokazujemy submenu, gdy klikniemy element nadrzędny */

    nav .menu-item-has-children:focus-within > .sub-menu,

    nav .menu-item-has-children:hover > .sub-menu {

        display: flex;

    }



    /* Animacja przycisku "Hamburger" w "Krzyżyk" (X) przy aktywnym menu */

    .hamburger-btn.active .hamburger-line:nth-child(1) {

        transform: rotate(45deg);

    }

    .hamburger-btn.active .hamburger-line:nth-child(2) {

        opacity: 0;

    }

    .hamburger-btn.active .hamburger-line:nth-child(3) {

        transform: rotate(-45deg);

    }

}

   

    .packages-banner {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }



/* --- ZAKTUALIZOWANE ZMIANY (Statystyki, Z. Maturalne, Szeroki Przycisk) --- */



/* Statystyki pod Hero */

.hero-section .hero-stats {

    display: flex;

    flex-direction: row; /* Wymuszenie układu poziomego */

    gap: 15px;

    margin-top: 40px;

    width: 100%;

}



.hero-section .stat-box {

    background-color: var(--bg-light); /* Tło zaokrąglonego prostokąta */

    border-radius: 12px;

    padding: 15px;

    text-align: center;

    flex: 1 1 0; /* Równe rozłożenie elementów obok siebie */

    border: 1px solid #555; /* Ramka dla lepszej widoczności */

    box-sizing: border-box;

}



.hero-section .stat-box strong {

    display: block;

    font-size: 1.5rem;

    color: var(--accent-bright);

    margin-bottom: 5px;

}



.hero-section .stat-box span {

    font-size: 0.9rem;

    color: var(--text-color);

    font-weight: normal;

}



/* Statystyki YouTube pod tekstem */

.youtube-section .yt-stats {

    display: flex;

    flex-direction: row; /* Wymuszenie układu poziomego */

    gap: 15px;

    margin-top: 30px;

    width: 100%;

}



.youtube-section .yt-stat-box {

    background-color: var(--bg-light);

    border-radius: 12px;

    padding: 15px;

    text-align: center;

    flex: 1 1 0;

    border: 1px solid #555;

    box-sizing: border-box;

}



.youtube-section .yt-stat-box strong {

    display: block;

    font-size: 1.5rem;

    color: var(--accent-bright);

    margin-bottom: 5px;

}



.youtube-section .yt-stat-box span {

    font-size: 0.9rem;

    color: var(--text-color);

    font-weight: normal;

}



/* Obszar wideo z przyciskiem */

.yt-video-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 20px;

    width: 100%;

}



.btn-wide {

    display: block;

    width: 100%;

    box-sizing: border-box;

}



/* Poziomy blok na Zadania Maturalne */

.courses-section .course-horizontal-card {

    background-color: var(--bg-light); /* Wspólne tło dla całego bloku */

    border-radius: 20px;

    padding: 40px;

    margin-top: 40px;

    display: flex;

    flex-direction: row; /* Tekst obok zdjęcia */

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #444;

    transition: transform 0.3s ease;

}



.courses-section .course-horizontal-text {

    flex: 2;

}



.courses-section .course-horizontal-text h3 {

    font-size: 2rem;

    color: var(--accent-bright);

    margin-bottom: 20px;

}



.courses-section .course-horizontal-text p {

    color: var(--text-color);

    font-size: 1rem;

}



.courses-section .course-horizontal-image {

    flex: 1;

    display: flex;

    justify-content: center;

}



.cover-1-1 {

    width: 100%;

    max-width: 500px;

    aspect-ratio: 1 / 1;

    border-radius: 10px;

}



/* Napis pod opiniami */

.reviews-section .trust-text {

    display: block;

    width: 100%;

    text-align: center;

    margin-top: 40px;

    font-size: 2.0rem;

    font-weight: bold;

    color: var(--accent-bright);

    text-transform: uppercase; /* Wymuszenie wielkich liter */

}



/* Responsywność dla nowych elementów (Mobile) */

@media (max-width: 992px) {

    .courses-section .course-horizontal-card {

        flex-direction: column;

        text-align: center;

    }

}



@media (max-width: 768px) {

    .hero-section .hero-stats,

    .youtube-section .yt-stats,
    
    .stats-extended-section .hero-stats
    {

        display: none

    }

}



/* --- MOTYW JASNY I PRZYCISK FIOLKI --- */



.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Przycisk zmiany motywu */

.theme-toggle-btn {

    background: none;

    border: none;

    color: var(--text-color);

    cursor: pointer;

    margin-left: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

}



.theme-toggle-btn:hover {

    transform: scale(1.1) rotate(5deg);

}



/* Domyślnie (Tryb Ciemny) pokazujemy pełną fiolkę */

html:not([data-theme="light"]) .icon-flask-empty { display: none; }

html:not([data-theme="light"]) .icon-flask-filled { display: block; }



/* W Trybie Jasnym pokazujemy pustą fiolkę */

html[data-theme="light"] .icon-flask-empty { display: block; }

html[data-theme="light"] .icon-flask-filled { display: none; }





/* NADPISYWANIE ZMIENNYCH DLA TRYBU JASNEGO */

html[data-theme="light"] {

    --bg-dark: #F5F7FA;      /* Bardzo jasny, chłodny szary jako główne tło */

    --bg-light: #FFFFFF;     /* Czysta biel dla bloków i kart */

    --text-color: #2D3748;   /* Ciemny grafitowy tekst dla czytelności */

    --accent-main: #2BA9E0;

}



/* Poprawki dla poszczególnych elementów w jasnym motywie */

html[data-theme="light"] header {

    background-color: rgba(255, 255, 255, 0.95);

    border-bottom: 1px solid #E2E8F0;

}



html[data-theme="light"] .dropdown-menu,

html[data-theme="light"] nav .sub-menu {

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}



html[data-theme="light"] .dropdown-menu a:hover,

html[data-theme="light"] nav .sub-menu a:hover {

    color: #FFFFFF; /* Naprawia kolor tekstu w hoverze submenu */

}



html[data-theme="light"] .marquee-wrapper {

    background-color: #EDF2F7;

    border-color: #E2E8F0;

}



html[data-theme="light"] .hero-section .stat-box,

html[data-theme="light"] .youtube-section .yt-stat-box,

html[data-theme="light"] .courses-section .course-horizontal-card,

html[data-theme="light"] .review-card {

    border: 1px solid #E2E8F0;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

}



html[data-theme="light"] .placeholder-img {

    background-color: #EDF2F7;

    border-color: #CBD5E0;

    color: #A0AEC0;

}



html[data-theme="light"] .course-list li,

html[data-theme="light"] .hero-section .stat-box span,

html[data-theme="light"] .youtube-section .yt-stat-box span,

html[data-theme="light"] .courses-section .course-horizontal-text p,

html[data-theme="light"] .review-card {

    color: #4A5568; /* Ciemniejszy szary dla mniejszych tekstów */

}

/* Gwarantuje, że wgrane grafiki nie wyjdą poza swoje ramy i zachowają proporcje */

img.logo-placeholder,

img.cover-1-1,

img.course-cover,

img.tutor-face {

    object-fit: cover;

    display: block;

}

/* =========================================
   FIX NA ROZWIJANE MENU W BURGERZE (AKORDEON)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Wyłączamy "lewitowanie" menu (absolute), zdejmujemy cienie i ukrywamy */
    nav .dropdown-menu,
    nav .sub-menu {
        position: static !important; /* To zmusza podmenu do spychania elementów w dół */
        display: none !important;
        transform: none !important; /* Reset animacji z PC */
        box-shadow: none !important;
        width: 100%;
    }

    /* 2. Gdy klikniesz, rozwija się i robi sobie miejsce */
    nav li.mobile-open > .dropdown-menu,
    nav li.mobile-open > .sub-menu {
        display: flex !important;
        flex-direction: column;
        margin-top: 10px;
        background-color: rgba(0,0,0,0.2); 
        border-radius: 8px;
        padding: 5px 0;
    }
}

/* ==========================================================================
   STRONA: ZADANIA MATURALNE
   ========================================================================== */

/* --- BLOK ZAWARTOŚCI --- */
.content-details-section h2 { text-align: center; margin-bottom: 30px; font-size: 2.5rem; }
.content-box-glass {
    background: #1a1a1a; border: 1px solid #333; border-radius: 15px;
    padding: 40px; text-align: center; max-width: 900px; margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- BLOK ARKUSZY (AKORDEON) --- */
.sheets-accordion { width: 35%; display: flex; flex-direction: column; gap: 10px; }
.sheet-item {
    background: --bg-light; border: 1px solid #444; border-radius: 8px; overflow: hidden;
    transition: border-color 0.3s;
}
.sheet-item.active { border-color: var(--accent-bright); }
.sheet-header {
    width: 100%; text-align: left; background: none; border: none; color: #fff;
    padding: 15px 20px; font-size: 1.1rem; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center; transition: background 0.3s;
}
.sheet-body {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
    background: #111;
}
.sheet-stats-inner {
    padding: 15px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px;
}
.sheet-stat { font-size: 0.9rem; color: #ccc; }
.sheet-stat strong { color: var(--accent-bright); font-size: 1.1rem; display: block; margin-top: 5px; }

/* Wyśrodkowanie wideo obok akordeonu */
.sheets-section .media-video { width: 65%; }

/* --- BLOK WYKRESU (Ze Zrzutu Ekranu) --- */
.chart-split { display: flex; gap: 50px; align-items: center; justify-content: center; max-width: 1100px; margin: 0 auto; }
.chart-text-col { flex: 1; }
.chart-visual-col { flex: 1; }

.chart-badge { background: --bg-light; color: var(--accent-bright); padding: 8px 15px; border-radius: 20px; font-weight: bold; font-size: 0.8rem; letter-spacing: 1px; display: inline-block; margin-bottom: 20px;}
.chart-title-main { font-size: 2.8rem; line-height: 1.2; margin-bottom: 40px; }
.text-blue { color: var(--accent-bright); }

.chart-feature { display: flex; gap: 20px; margin-bottom: 30px; }
.chart-icon-circle {
    width: 50px; height: 50px; border-radius: 50%; background: --bg-light;
    color: var(--accent-bright); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0; border: 1px solid var(--accent-main);
}
.chart-feature-text h4 { margin: 0 0 5px 0; font-size: 1.2rem; }
.chart-feature-text p { margin: 0; color: #aaa; font-size: 0.95rem; }

/* --- POPRAWIONE SŁUPKI WYKRESU (Ochrona przed zgniataniem) --- */
.chart-bars-area { 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-end; 
    height: 300px; /* Zwiększona sztywna wysokość dla całego wykresu */
    margin-bottom: 40px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #333; 
}

.chart-bar-group { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end; 
    height: 250px; /* KLUCZOWE: Sztywna wysokość dla grupy, żeby przeglądarka wiedziała z czego liczyć procenty */
    width: 20%; 
}

.bar { 
    width: 100%; 
    border-radius: 8px 8px 0 0; 
    background: linear-gradient(to top, #275D74, #2BA9E0); /* Twarde przypisanie Twoich kolorów */
    margin: 10px 0; /* Odstęp od tekstów góra/dół */
    flex-shrink: 0; /* KLUCZOWE: Kategoryczny zakaz zgniatania elementu do zera */
    transition: height 1s ease;
}

.bar-10 { height: 10%; }
.bar-30 { height: 30%; }
.bar-70 { height: 70%; }
.bar-100 { 
    height: 100%; 
    background: linear-gradient(to top, #2BA9E0, #4ae2ff); 
    box-shadow: 0 0 20px rgba(43, 169, 224, 0.4); 
}
/* ----------------------------------------------------------- */

/* Karta z Wykresem */
.glass-panel {
    background: #151515; border: 1px solid #333; border-radius: 20px; padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; overflow: hidden;
}
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; border-bottom: 1px solid #333; padding-bottom: 20px; }
.chart-header h3 { margin: 0; font-size: 1.3rem; }
.chart-arrow-bg { font-size: 3rem; color: #333; font-weight: bold; line-height: 0.5; }

/* Poprawione ułożenie słupków wykresu */
.chart-bars-area { 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-end; 
    height: 250px; 
    margin-bottom: 40px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #333; 
}

.chart-bar-group { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-end; /* Wypycha zawartość w dół */
    height: 100%; /* KLUCZOWE: Wymusza pobranie wysokości 250px od rodzica */
    width: 20%; 
    gap: 10px; 
}

.bar { 
    width: 100%; 
    border-radius: 8px 8px 0 0; 
    background: linear-gradient(to top, var(--accent-main), var(--accent-bright)); 
    transition: height 1s ease; 
}

.chart-info-box { background: var(--bg-light); border: 1px solid --accent-main; border-radius: 12px; padding: 20px; display: flex; gap: 15px; align-items: center; }
.info-icon { font-size: 1.5rem; }
.info-desc { font-size: 0.9rem; color: var(--text-color); }
.info-desc strong { color: var(--accent-bright); }

/* --- BLOK INFORMACJI HORZONTALNYCH --- */
.info-blocks-wrapper { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.info-block-horizontal {
    background: --bg-light; border: 1px solid #333; border-radius: 15px;
    display: flex; align-items: center; gap: 30px; padding: 25px 40px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.info-block-horizontal:hover { transform: translateX(10px); border-color: var(--accent-bright); }
.icon-circle-placeholder {
    width: 70px; height: 70px; border-radius: 50%; background: #222;
    display: flex; align-items: center; justify-content: center;
}
.info-text-content p { margin: 0; color: #ccc; line-height: 1.6; }

/* --- BLOK OFERTY (Poziomy) --- */
.offer-box-container { display: flex; gap: 40px; align-items: center; justify-content: center; max-width: 1000px; margin: 0 auto; }
.offer-card-horizontal {
    background: var(--bg-light); border: 2px solid var(--accent-bright); border-radius: 20px;
    padding: 40px; flex: 2; box-shadow: 0 0 20px --accent-main;
}
.offer-card-text h3 { font-size: 2.5rem; margin-bottom: 10px; }
.offer-desc { color: #aaa; margin-bottom: 30px; font-size: 1.1rem; }
.offer-price-area { display: flex; flex-direction: column; }
.price-main { font-size: 3rem; font-weight: bold; color: var(--accent-bright); line-height: 1; }
.price-old { font-size: 1rem; color: #777; margin-top: 5px; }

.offer-actions-side { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.btn-large { padding: 20px 40px; font-size: 1.2rem; text-align: center; width: 100%; display: block;}

/* --- BLOK PAKIETÓW --- */
.package-section { text-align: center; margin: 80px auto; padding: 60px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.huge-title { font-size: 4rem; margin: 0; color: #fff; letter-spacing: 5px; }
.subtitle-large { font-size: 1.8rem; color: var(--accent-bright); margin-bottom: 50px; }

.package-visuals { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 50px; }
.package-cover { width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; color: #777; }
.package-plus { font-size: 4rem; color: var(--accent-bright); font-weight: bold; }

.package-pricing-row { display: flex; align-items: center; justify-content: center; gap: 30px; }
.pkg-old-price del { font-size: 2rem; color: #777; }
.pkg-arrow { font-size: 2.5rem; color: var(--accent-bright); }
.pkg-new-price-wrapper { display: flex; flex-direction: column; align-items: flex-start; }
.pkg-new-price { font-size: 3.5rem; font-weight: bold; color: #fff; line-height: 1; }
.pkg-new-label { color: var(--accent-bright); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; }

/* --- Q&A Dodatek --- */
.faq-contact-area { text-align: center; margin-top: 50px; padding-top: 50px; border-top: 1px solid #333; }
.faq-contact-area h3 { font-size: 2rem; margin-bottom: 25px; }
.faq-small-info { color: #888; margin-top: 15px; font-size: 0.9rem; }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .sheets-section .media-split-section { flex-direction: column; }
    .sheets-accordion { width: 100%; margin-bottom: 30px; }
    .sheets-section .media-video { width: 100%; }
    
    .chart-split { flex-direction: column; text-align: center; }
    .chart-feature { flex-direction: column; align-items: center; text-align: center; }
    
    .offer-box-container { flex-direction: column; }
    .offer-actions-side { width: 100%; }
    
    .package-pricing-row { flex-direction: column; gap: 10px; }
    .pkg-arrow { transform: rotate(90deg); }
    .pkg-new-price-wrapper { align-items: center; }
}

@media (max-width: 768px) {
    .info-block-horizontal { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   STRONA: FORMULARZ KONTAKTOWY
   ========================================================================== */

.contact-form-section { max-width: 1100px; margin: 0 auto; }

.contact-card {
    background: #1a1a1a; border: 1px solid #333; border-radius: 20px;
    padding: 50px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative; overflow: hidden;
}

.contact-layout {
    display: flex; gap: 60px; justify-content: space-between; align-items: flex-start;
}

/* --- LEWA STRONA (POLA FORMULARZA) --- */
.contact-form-area { flex: 2; width: 100%; }

.form-group { margin-bottom: 25px; display: flex; flex-direction: column; }
.form-group label {
    font-size: 0.95rem; color: #ccc; margin-bottom: 8px; font-weight: 500; letter-spacing: 0.5px;
}
.form-group label span { color: #777; font-size: 0.8rem; font-style: italic; }

/* Uniwersalne style dla inputów (zadziała też na wtyczki WP) */
.contact-form-area input[type="text"],
.contact-form-area input[type="email"],
.contact-form-area select,
.contact-form-area textarea {
    width: 100%; background: #111; border: 1px solid #444; color: #fff;
    padding: 15px 20px; border-radius: 10px; font-size: 1rem;
    font-family: inherit; transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Stan Focus (Kliknięcie w pole - NEON) */
.contact-form-area input:focus,
.contact-form-area select:focus,
.contact-form-area textarea:focus {
    outline: none; border-color: var(--accent-bright);
    box-shadow: 0 0 15px rgba(43, 169, 224, 0.3), inset 0 0 5px rgba(43, 169, 224, 0.1);
    background: #151515;
}

/* Customowy Select (Strzałka) */
.select-wrapper { position: relative; }
.select-wrapper::after {
    content: "▼"; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); color: var(--accent-bright);
    pointer-events: none; font-size: 0.8rem;
}
.contact-form-area select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Checkbox Polityki */
.form-checkbox { display: flex; align-items: flex-start; gap: 15px; margin-top: 30px; margin-bottom: 30px; }
.form-checkbox input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 22px; height: 22px;
    background: #111; border: 1px solid #444; border-radius: 5px;
    cursor: pointer; position: relative; flex-shrink: 0; transition: 0.3s;
}
.form-checkbox input[type="checkbox"]:checked {
    background: var(--accent-bright); border-color: var(--accent-bright);
}
.form-checkbox input[type="checkbox"]:checked::after {
    content: "✓"; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); color: #fff; font-weight: bold; font-size: 0.9rem;
}
.form-checkbox label { font-size: 0.9rem; color: #aaa; cursor: pointer; line-height: 1.5; }
.form-checkbox a:hover { text-decoration: underline; }

/* Przycisk Wyślij */
.btn-submit { width: 100%; border: none; cursor: pointer; font-size: 1.2rem; }

/* --- PRAWA STRONA (ZAŁOŻYCIEL) --- */

/* ==========================================================================
   NADPISANIA I POPRAWKI DLA STRONY KONTAKTOWEJ (H1 I FOTO ZAŁOŻYCIELA)
   ========================================================================== */

/* 1. NAGŁÓWEK H1: "Formularz Kontaktowy" na środku, większy */
.contact-header-section h1.main-title {
    text-align: center !important; /* Twarde wyśrodkowanie */
    font-size: 3.5rem !important; /* Zwiększenie rozmiaru dla efektu "wow" */
    margin-top: 40px !important; /* Większy odstęp, żeby header odetchnął */
}

.contact-header-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.contact-form-section {
    padding-top: 0 !important;
    margin-top: 30px !important; /* Tutaj kontrolujesz faktyczną przerwę między napisem a ramką */
}

/* 2. PANEL ZAŁOŻYCIELA: Wyśrodkowanie zdjęcia i tekstu w obrębie panelu */
/* Targetujemy kontener zawierający zdjęcie i tekst (niebieską ramkę z image_4.png) */
.founder-profile {
    display: flex !important;
    flex-direction: column !important; /* Układ kolumnowy */
    align-items: center !important; /* Wyśrodkowanie w poziomie dzieci (zdjęcie, tekst) */
    width: 100% !important;
    text-align: center !important;
}

/* Zabezpieczenie kontenera zdjęcia przed uciekaniem w bok */
.founder-img-wrapper {
    margin: 0 auto 20px auto !important; /* Marginesy 'auto' w poziomie centrować w rodzicu */
    display: flex !important; /* Też flex, żeby placeholder w środku był wycentrowany */
    align-items: center !important;
    justify-content: center !important;
}

.contact-founder-area {
    flex: 1; max-width: 300px; display: flex; flex-direction: column; align-items: center;
    text-align: center; background: rgba(43, 169, 224, 0.05); padding: 40px 30px;
    border-radius: 20px; border: 1px solid rgba(43, 169, 224, 0.2);
    /* Przyklejamy element, żeby podążał przy długim formularzu */
    position: sticky; top: 40px; 
}

.founder-img-wrapper {
    width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--accent-bright); margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(43, 169, 224, 0.4);
}
.founder-placeholder {
    width: 100%; height: 100%; background: #222; display: flex;
    align-items: center; justify-content: center; color: #777; font-weight: bold;
}
.founder-name { font-size: 1.3rem; margin-bottom: 10px; color: #fff; }
.founder-desc { font-size: 0.95rem; color: #aaa; font-style: italic; line-height: 1.5; margin: 0; }

/* Wymuszenie czytelności w trybie jasnym */
html[data-theme="light"] .contact-card { background: #fff; border-color: #eee; }
html[data-theme="light"] .contact-form-area input[type="text"],
html[data-theme="light"] .contact-form-area input[type="email"],
html[data-theme="light"] .contact-form-area select,
html[data-theme="light"] .contact-form-area textarea {
    background: #f8f9fa; border-color: #ddd; color: #333;
}
html[data-theme="light"] .form-group label { color: #555; }
html[data-theme="light"] .form-checkbox input[type="checkbox"] { background: #f8f9fa; border-color: #ccc; }


/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .contact-layout { flex-direction: column-reverse; gap: 40px; }
    .contact-founder-area { max-width: 100%; width: 100%; position: relative; top: 0; }
    .contact-card { padding: 30px 20px; }
}

/* --- ADAPTACJA STYLÓW DLA WPFORMS --- */

/* Usunięcie domyślnych marginesów wtyczki */
.wpforms-container { margin: 0 !important; }
.wpforms-field { padding: 0 !important; margin-bottom: 25px !important; border: none !important; }

/* Stylizacja etykiet (Label) */
.wpforms-field-label {
    display: block !important;
    font-size: 0.95rem !important;
    color: #ccc !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

/* Stylizacja pól tekstowych, selectów i textarea */
.wpforms-field input, 
.wpforms-field select, 
.wpforms-field textarea {
    width: 100% !important;
    background: #111 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 15px 20px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

/* Efekt NEON po kliknięciu (Focus) */
.wpforms-field input:focus, 
.wpforms-field select:focus, 
.wpforms-field textarea:focus {
    outline: none !important;
    border-color: var(--accent-bright) !important;
    box-shadow: 0 0 15px rgba(43, 169, 224, 0.3), inset 0 0 5px rgba(43, 169, 224, 0.1) !important;
    background: #151515 !important;
}

/* --- TWARDA STYLIZACJA DLA WTYCZKI WPFORMS --- */
.contact-form-area { flex: 2 !important; width: 100% !important; }

/* 1. USUNIĘCIE KOMUNIKATU O JS */
.wpforms-noscript-not-loaded-tag,
.wpforms-container noscript { display: none !important; }

/* 2. ETYKIETY PÓL */
.wpforms-field-label {
    display: block !important;
    font-size: 0.95rem !important;
    color: #ccc !important; 
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

/* 3. POLA TEKSTOWE I SELECTY (WYKLUCZAMY CHECKBOXY!) */
/* Używamy :not([type="checkbox"]), żeby nie rozsadzało kwadracików */
.wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), 
.wpforms-field select, 
.wpforms-field textarea {
    width: 100% !important;
    background-color: #111 !important; 
    border: 1px solid #333 !important; 
    color: #fff !important;
    padding: 15px 20px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    appearance: none !important;
}

/* Efekt NEON po kliknięciu tylko na polach tekstowych */
.wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus, 
.wpforms-field select:focus, 
.wpforms-field textarea:focus {
    outline: none !important;
    border-color: #2BA9E0 !important; 
    box-shadow: 0 0 15px rgba(43, 169, 224, 0.4), inset 0 0 5px rgba(43, 169, 224, 0.2) !important;
    background-color: #151515 !important;
}

/* 4. NAPRAWA I STYLIZACJA CHECKBOXA POLITYKI PRYWATNOŚCI */
/* Usuwamy kropki z listy */
.wpforms-field-checkbox ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wpforms-field-checkbox li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-top: 10px !important;
}
/* Rysujemy własnego, eleganckiego checkboxa */
.wpforms-field-checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    background: #111 !important;
    border: 1px solid #444 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: 0.3s !important;
    margin: 0 !important;
    margin-top: 2px !important; /* Wyrównanie do tekstu obok */
}
/* Stan zaznaczenia (niebieski kwadracik z ptaszkiem) */
.wpforms-field-checkbox input[type="checkbox"]:checked {
    background: #2BA9E0 !important;
    border-color: #2BA9E0 !important;
}
.wpforms-field-checkbox input[type="checkbox"]:checked::after {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 0.9rem !important;
}
/* Tekst obok checkboxa */
.wpforms-field-checkbox label.wpforms-field-label-inline {
    font-size: 0.9rem !important;
    color: #aaa !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    display: inline !important;
    font-weight: normal !important;
}

/* 5. PRZYCISK PRZEŚLIJ */
.wpforms-submit-container { text-align: left !important; padding: 0 !important; margin: 0 !important; width: 100% !important; margin-top: 20px !important; }
.wpforms-submit {
    display: inline-block !important;
    padding: 18px 40px !important;
    width: 100% !important; 
    background: #2BA9E0 !important; 
    color: #FFFFFF !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    text-align: center !important;
}
.wpforms-submit:hover {
    box-shadow: 0 0 20px #2BA9E0 !important; 
    transform: translateY(-3px) !important;
}

/* ==========================================================================
   PUNKTOWE POPRAWKI DLA WPFORMS (FIELDSET ORAZ NOSCRIPT)
   ========================================================================== */

/* 1. BRUTALNE UKRYCIE KOMUNIKATU O JAVASCRIPT */
#wpforms-error-noscript {
    display: none !important;
}

.wpforms-field-label-inline {
    margin-top: 5px;
}

/* 2. USUNIĘCIE "OTOCZKI" (DOMYŚLNEJ RAMKI FIELDSET) WOKÓŁ CHECKBOXA */
.wpforms-field-checkbox fieldset {
    border: none !important; /* Całkowicie usuwa ramkę */
    padding: 0 !important;
    margin: 0 !important;
}

/* Opcjonalna stylizacja tytułu "Pola wyboru *" (Legend), żeby pasował do reszty */
.wpforms-field-checkbox legend {
    border: none !important;
    color: #ccc !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

/* ==========================================================================
   ZMIENNE GLOBALNE I BAZA
   ========================================================================== */
:root {
    --bg-dark: #000000;
    --bg-light: #363437;
    --accent-main: #275D74;
    --accent-bright: #2BA9E0;
    --text-color: #FFFFFF;
}

.page-tutoring-wrapper {
    background-color: var(--bg-dark);
    color: var(--text-color);
    overflow-x: hidden;
}

/* --- 1. BLOK OFERTY --- */
.tutoring-hero-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 50px;
}
.hero-benefits-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}
.hero-benefits-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #ddd;
    line-height: 1.6;
}
.hero-benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-bright);
    font-weight: bold;
}
.founder-card-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.founder-img-circle {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 4px solid var(--accent-bright);
    box-shadow: 0 0 30px rgba(43, 169, 224, 0.4);
    margin-bottom: 20px;
}
.founder-card-minimal h3 { font-size: 2rem; margin: 0 0 5px 0; }
.founder-card-minimal p { color: #aaa; margin: 0; font-style: italic; }
.hero-action-center { display: flex; justify-content: center; }
.btn-huge { font-size: 1.4rem !important; padding: 25px 60px !important; }

/* --- 3. BLOK PRZEDMIOTÓW --- */
.subjects-container-box {
    background: var(--bg-light);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    border: 1px solid #444;
}
.subject-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease;
}
.subject-item:hover { transform: translateY(-5px); }
.subject-icon {
    width: 80px; height: 80px;
    display: flex; justify-content: center; align-items: center;
}
.subject-name { font-weight: 500; letter-spacing: 0.5px; }

/* --- 4. BLOK FISZEK (Z animacją Scroll) --- */
.flashcards-vertical-stack { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; margin: 0 auto; }
.full-width-card { width: 100%; height: 120px; perspective: 1000px; cursor: pointer; }
.full-width-card .flashcard {
    width: 100%; height: 100%;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.full-width-card.flipped .flashcard { transform: rotateX(180deg); }
.full-width-card .flashcard-front, .full-width-card .flashcard-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px; border: 1px solid #333; padding: 20px;
    box-sizing: border-box; text-align: center;
}
.full-width-card .flashcard-front { background: var(--bg-light); border-color: var(--accent-main); }
.full-width-card .flashcard-back { background: var(--accent-main); transform: rotateX(180deg); }

/* Animacja pojawiania się (AOS custom) */
.scroll-slide-right {
    transform: translateX(100vw);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease-out;
}
.scroll-slide-right.in-view { transform: translateX(0); opacity: 1; }
.delay-0 { transition-delay: 0s; }
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* --- 5. BLOK OPISU --- */
.desc-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.desc-highlight-block {
    background: #151515;
    border-left: 4px solid #333;
    padding: 20px 30px;
    margin-bottom: 20px;
    border-radius: 0 10px 10px 0;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.desc-highlight-block:hover {
    border-left-color: var(--accent-bright);
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(43, 169, 224, 0.15);
    transform: translateX(10px);
}
.desc-visual-box { width: 100%; aspect-ratio: 1/1; background: #222; display: flex; align-items: center; justify-content: center; color: #555; font-size: 2rem; }

/* --- 6. BLOK CZASU (OŚ) --- */
.timeline-wrapper {
    max-width: 800px; margin: 0 auto;
    position: relative; padding-left: 40px;
}
.timeline-wrapper::before {
    content: ''; position: absolute; left: 19px; top: 0; bottom: 0;
    width: 2px; background: var(--accent-main);
}
.timeline-item { position: relative; margin-bottom: 50px; }
.timeline-dot {
    position: absolute; left: -40px; top: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-dark); border: 2px solid var(--accent-bright);
    color: var(--accent-bright); display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.2rem; z-index: 2;
    box-shadow: 0 0 15px rgba(43, 169, 224, 0.3);
}
.timeline-content h3 { margin: 0 0 5px 0; color: #fff; font-size: 1.5rem; }
.timeline-italic { color: var(--accent-bright); margin-bottom: 10px; font-size: 0.95rem; }
.timeline-content p:last-child { color: #ccc; line-height: 1.6; margin: 0; }

/* --- 7. BLOK ZESPOŁU (Slider) --- */
.team-carousel-wrapper {
    display: flex; align-items: center; justify-content: center; gap: 30px;
    max-width: 1100px; margin: 0 auto;
}
.carousel-viewport {
    flex: 1; overflow: hidden; border-radius: 20px;
}
.carousel-track {
    display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}
.carousel-slide {
    min-width: 100%; box-sizing: border-box; padding: 10px;
}
.team-card-horizontal {
    background: var(--bg-light); border: 1px solid #444; border-radius: 20px;
    display: flex; gap: 40px; padding: 40px; align-items: center;
}
.team-card-left { display: flex; flex-direction: column; align-items: center; text-align: center; width: 250px; flex-shrink: 0; }
.team-member-img { width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--accent-main); margin-bottom: 15px; display: flex; align-items: center; justify-content: center; background: #222;}
.team-member-name { margin: 0; font-size: 1.2rem; }
.team-card-right p { font-size: 1.1rem; line-height: 1.7; color: #ddd; margin: 0; }
.carousel-nav-btn {
    background: none; border: 2px solid #444; color: var(--text-color); width: 60px; height: 60px;
    border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.carousel-nav-btn:hover { background: var(--accent-main); border-color: var(--accent-bright); }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .tutoring-hero-grid, .desc-grid-layout { grid-template-columns: 1fr; text-align: center; }
    .hero-benefits-list li { text-align: left; }
    .team-card-horizontal { flex-direction: column; padding: 30px 20px; }
    .team-card-left { width: 100%; }
    .carousel-nav-btn { width: 45px; height: 45px; font-size: 1.2rem; }
    .team-carousel-wrapper { gap: 10px; }
    .full-width-card { height: 160px; } /* Więcej miejsca dla tekstu na telefonie */
}

@media (max-width: 768px) {
    .hero-section .hero-stats,
    .youtube-section .yt-stats,
    .stats-extended-section .hero-stats {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Kontener dla ikon */
.subject-icon {
    position: relative;
    /* Ustaw sztywną wielkość kontenera, dostosuj wymiary do swoich potrzeb */
    width: 100px; 
    height: 100px;
    margin: 0 auto 10px auto; /* Wyśrodkowanie plus margines dolny pod tekst */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ustawienia dla obu grafik */
.subject-icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Chroni przed zniekształceniem (rozciągnięciem) grafik */
    transition: opacity 0.7s ease-in-out; /* Kluczowe: 2 sekundy płynnego przejścia */
}

/* Ukrywamy docelową grafikę (bez zera) na samym początku */
.subject-icon .icon-hover {
    opacity: 0;
}

/* Co ma się stać, gdy użytkownik najedzie myszką na element (.subject-item)? */

/* 1. Wyświetlamy grafikę bez zera */
.subject-item:hover .icon-hover {
    opacity: 1;
}

/* 2. Ukrywamy podstawową grafikę z zerem */
.subject-item:hover .icon-base {
    opacity: 0;
}

/* Gwarantuje, że cała sekcja zajmuje 100% szerokości i środkuje swój środek */
.stats-extended-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Konfiguracja siatki kafelków */
.stats-grid-4 {
    display: flex;
    flex-wrap: wrap; /* Pozwala kafelkom zawijać się do nowej linii na małych ekranach */
    justify-content: center; /* Środkuje kafelki w poziomie */
    gap: 24px; /* Równy odstęp między kafelkami (zmień według preferencji) */
    width: 100%;
    margin: 0 auto; /* Dodatkowe wyśrodkowanie samego kontenera względem strony */
}

/* Wewnętrzne stylowanie pojedynczego kafelka (aby tekst był równo) */
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Wyśrodkowanie tekstu w pionie i poziomie wewnątrz kafelka */
    justify-content: center;
    text-align: center;
    /* Zakładam, że masz już tu swoje style (np. tło, border-radius) */
}

.satisfaction-section {
    text-align: center;
}

/* Główne centrowanie listy */
.custom-bullet-list {
    width: fit-content; /* Zawęża szerokość całej listy tylko do najdłuższego elementu "Bez pytań i formalności" */
    margin: 0 auto; /* Automatyczne marginesy po bokach ustawią zawężoną listę na idealnym środku strony */
    
    /* Zastosowanie flexboxa dla samych punktów */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Trzyma wszystkie gwiazdki równo w pionowej linii (wyrównane do lewej strony bloku) */
}

@media (max-width: 768px) {
    .stats-grid-4 .stat-box {
        /* Wymusza dokładną szerokość 50% minus połowa gap (24px / 2 = 12px) */
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        box-sizing: border-box; 
    }
}

/* Główny kontener siatki dla 6 elementów */
.stats-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tworzy 3 równe kolumny na dużych ekranach */
    gap: 24px; /* Równe odstępy w pionie i poziomie */
    width: 100%;
    margin: 0 auto;
}

/* Nadpisanie stylów kafelka specjalnie dla tej sekcji */
.stats-grid-6 .stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px; /* Zapewnia odpowiednią przestrzeń wewnątrz kafelka, by tło objęło tekst */
    box-sizing: border-box;
    width: 100%; /* Wymusza dopasowanie do szerokości komórki w siatce (usuwa efekt wąskiego słupka) */
    height: 100%; 
    min-height: 120px; /* Gwarantuje, że kafelki nie będą zbyt niskie */
}

/* --- RESPONSYWNOŚĆ (RWD) --- */

/* Tablety (2 kafelki w rzędzie) */
@media (max-width: 992px) {
    .stats-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Małe telefony komórkowe (1 kafelek w rzędzie, by tekst miał dużo miejsca) */
@media (max-width: 576px) {
    .stats-grid-6 {
        grid-template-columns: 1fr;
    }
}

.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid var(--accent-bright);
  border-color: var(--accent-bright) transparent var(--accent-bright) transparent;
  animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

.steps-giant-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
    position: relative;
}

.step-giant-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 280px; /* Wysokość dopasowana do ogromnych cyfr */
    padding-bottom: 20px;
}

.step-giant-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18rem; /* Gigantyczna cyfra w tle */
    font-weight: 900;
    line-height: 0.8;
    z-index: 0;
    
    /* Efekt wtopienia w tło (gradient z góry na dół) */
    background: linear-gradient(180deg, var(--accent-bright) 0%, var(--bg-dark) 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; 
}

.step-giant-text {
    position: relative;
    z-index: 1; /* Tekst nadrzędny wobec cyfry */
    font-size: 1.25rem;
    color: var(--text-color);
    font-weight: 500;
    margin: 0;
    padding: 0 15px;
    line-height: 1.5;
    /* Cień tekstu chroniący przed zlewaniem się z cyfrą */
    text-shadow: 0 4px 15px var(--bg-dark), 0 0 5px var(--bg-dark); 
}

/* Responsywność dla telefonów */
@media (max-width: 992px) {
    .steps-giant-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .step-giant-number {
        font-size: 15rem;
    }
    .step-giant-item {
        min-height: 240px;
    }
}

/* ==========================================================================
   SEKCJA "CZAS UCIEKA" (Karty i Animacje)
   ========================================================================== */

/* Neonowy, pulsujący tekst dla nagłówka */
.neon-pulse-text {
    animation: neonPulse 2s infinite alternate;
}
@keyframes neonPulse {
    0% { text-shadow: 0 0 10px rgba(43, 169, 224, 0.2), 0 0 20px rgba(43, 169, 224, 0.2); }
    100% { text-shadow: 0 0 20px rgba(43, 169, 224, 0.6), 0 0 40px rgba(43, 169, 224, 0.4); }
}

/* Lewitująca, obracająca się lekko klepsydra */
.pulsing-hourglass {
    animation: floatRotate 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(43, 169, 224, 0.5));
}
@keyframes floatRotate {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Układ kart (Grid) */
.benefits-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Stylizacja samych kart */
.benefit-card {
    background: var(--bg-light);
    border: 1px solid #444;
    border-radius: 20px;
    padding: 40px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(43, 169, 224, 0.15);
    border-color: var(--accent-bright);
}

/* Nagłówek wewnątrz karty (Ikona + Tekst) */
.card-icon-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #444;
}
.benefit-icon {
    filter: drop-shadow(0 0 8px rgba(43, 169, 224, 0.3));
}

/* --- Animacja wyłaniania się z dołu (Scroll) --- */
.scroll-slide-up {
    transform: translateY(60px);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease-out;
}
.scroll-slide-up.in-view {
    transform: translateY(0);
    opacity: 1;
}

/* Responsywność */
@media (max-width: 992px) {
    .benefits-split-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .benefit-card {
        padding: 30px 20px;
    }
}

.bartek-hero {
    margin-top: 100px;
}

/* Styl dla urządzeń mobilnych (ekrany o szerokości do 768px) */
@media (max-width: 768px) {
    .bartek-hero {
        margin-top: 15px; /* Podaj docelową wartość dla smartfonów */
    }
}

/* 1. Pola tekstowe i lista rozwijana */
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
    padding: 15px 18px !important; /* Wewnętrzny odstęp: góra/dół i lewo/prawo */
    min-height: 55px !important; /* Wymuszenie bezpiecznej wysokości */
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    font-size: 1.1rem !important; /* Nieco większy, czytelniejszy tekst wpisywany przez ucznia */
}

/* 2. Naprawa dla listy rozwijanej (Select) ze wsparciem dla iOS/iPhone */
div.wpforms-container-full .wpforms-form select {
    -webkit-appearance: none !important; /* Wyłącza błędne renderowanie Safari */
    appearance: none !important;
    height: 55px !important; /* Sztywna wysokość */
    line-height: normal !important; /* Zabezpieczenie przed przesunięciem tekstu na iOS */
    padding: 0 35px 0 18px !important;
    
    /* Własna, biała strzałka SVG, bo usunęliśmy systemową */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px auto !important;
}

/* 3. Wielki przycisk "Prześlij" */
div.wpforms-container-full .wpforms-form button[type=submit] {
    padding: 18px 30px !important;
    min-height: 60px !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   POPRAWKI DETALI FORMULARZA WPFORMS (CHECKBOXY I OPISY)
   ========================================================================== */

/* 1. Naprawa zduplikowanego checkboxa (wymuszenie jednego, poprawnego wyglądu) */
div.wpforms-container-full .wpforms-form input[type=checkbox] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
    margin-right: 8px !important;
    position: relative !important;
}

/* Ukrywamy podwójne ("oszukane") kwadraciki wymuszane przez motyw, by nie nachodziły na siebie */
div.wpforms-container-full .wpforms-form input[type=checkbox]::before,
div.wpforms-container-full .wpforms-form input[type=checkbox]::after {
    display: none !important;
}

/* 2. Naprawa koloru opisu pod polem (np. "Rodzaj szkoły...") */
div.wpforms-container-full .wpforms-form .wpforms-field-description {
    color: var(--text-color) !important;
    opacity: 0.75 !important; /* Lekkie zmatowienie, żeby odróżniało się od głównego tekstu */
    font-size: 0.9rem !important;
    margin-top: 5px !important;
    display: block !important;
}

/* ==========================================================================
   WOOCOMMERCE - POPRAWKI WIZUALNE SKLEPU I KARTY PRODUKTU
   ========================================================================== */

/* 1. Komunikaty (dodanie do koszyka, błędy, informacje) */

.woocommerce-message::before, 
.woocommerce-info::before, 
.woocommerce-error::before {
    position: static !important; /* Resetuje sztywne przypięcie ikony */
    margin-right: 15px !important; /* Dodaje bezpieczny odstęp od tekstu */
    margin-left: 0 !important;
    flex-shrink: 0 !important; /* Zapobiega zgnieceniu ikony na wąskich ekranach */
    display: inline-block !important;
}

.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    background-color: var(--bg-light) !important;
    color: var(--text-color) !important;
    border-top: 3px solid var(--accent-bright) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    line-height: 2 !important;
}
.woocommerce-message a.button, 
.woocommerce-info a.button {
    background-color: var(--accent-main) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 5px 15px !important;
    text-decoration: none !important;
    float: right !important; /* Trzyma przycisk akcji na prawej krawędzi */
    margin-left: 15px !important;
}

/* 2. Sortowanie produktów (Lista rozwijana) */
.woocommerce-ordering select {
    background-color: var(--bg-dark) !important;
    color: var(--text-color) !important;
    border: 1px solid #444 !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    outline: none !important;
}

/* 3. Formatowanie karty produktu (Cena, opis, ilość) */
.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--accent-bright) !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text-color) !important;
    opacity: 0.8 !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}
.woocommerce div.product form.cart .quantity input.qty {
    background-color: var(--bg-dark) !important;
    color: var(--text-color) !important;
    border: 1px solid #444 !important;
    padding: 10px !important;
    border-radius: 6px !important;
    height: 55px !important;
    width: 70px !important;
    font-size: 1.2rem !important;
}

/* 3b. Przycisk "Dodaj do koszyka" */
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product .button {
    background-color: var(--accent-main) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    height: 55px !important;
    margin-left: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: var(--accent-bright) !important;
    transform: translateY(-3px) !important;
}

.chart-bar-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important; /* Upewnia się, że słupki trzymają się dolnej krawędzi */
}

.bar-label {
    min-height: 2.5em !important; /* Zabezpiecza miejsce na dwie linijki tekstu */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    width: 100%;
}