/* ==========================================================================
   1. ZMIENNE I CONFIG BAZOWY (Zieleń!)
   ========================================================================== */
:root {
    color-scheme: light;
    --bg-main: #F1F2F3;
    --bg-light: #ffffff;
    --color-primary: #124a3f;
    --color-accent: #2ec4b6;
    --color-text: #222831;
    --color-muted: #64748b;
    --font-main: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3, h4, h5, h6, .section-title {
    font-family: var(--font-heading);
}

/* ==========================================================================
   1B. ZMIENNE DLA DARK MODE
   ========================================================================== */
.dark-theme {
    color-scheme: dark;
    --bg-main: #0f172a;
    /* Bardzo ciemny granat/szary na główne tło */
    --bg-light: #1e293b;
    /* Nieco jaśniejsze tło dla kafelków w dark mode */
    --color-primary: #2ec4b6;
    /* Akcent zastępuje główną zieleń dla kontrastu na ciemnym */
    --color-accent: #124a3f;
    /* Zamiana ról kolorów */
    --color-text: #f1f5f9;
    /* Bardzo jasny tekst (prawie biały) */
    --color-muted: #94a3b8;
    /* Jaśniejszy szary dla tekstów drugorzędnych */
}

.dark-theme .main-form input,
.dark-theme .main-form select,
.dark-theme .main-form textarea {
    border-color: #475569 !important;
}

.dark-theme .nav-links a {
    border-color: #475569;
}

.dark-theme .price-item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-theme .contact-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .price-action {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .step-num,
.dark-theme .pagination-link.active {
    color: #0f172a !important;
}

/* Dark-theme override: miętowy ptaszek we wszystkich sekcjach z custom-bullet-list */
.dark-theme .custom-bullet-list li::before {
    color: #2ec4b6 !important;
    text-shadow: 0 0 4px rgba(46, 196, 182, 0.4);
}

.legal-document {
    min-height: 100vh;
    padding: 48px 0 80px;
    background: var(--bg-main);
}

.legal-document .container {
    max-width: 820px;
    background: var(--bg-light);
    padding: 40px;
    border-radius: 12px;
}

.legal-document h1,
.legal-document h2 {
    color: var(--color-primary);
    margin: 0 0 18px;
}

.legal-document h2 {
    margin-top: 32px;
    font-size: 22px;
}

.legal-document p {
    margin-bottom: 16px;
}

.legal-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.dark-theme .legal-document a:not(.btn-primary) {
    color: #7de1d7;
}

.dark-theme .legal-document a:not(.btn-primary):hover {
    color: #b8fff7;
}

.legal-back-link {
    margin-bottom: 12px;
}

.reviews-social-action {
    margin: 28px 0 0;
    text-align: center;
}

.footer-facebook-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.footer-facebook-icon {
    flex: 0 0 auto;
}

.mobile-floating-actions {
    display: none;
}

@media (max-width: 768px) {
    .mobile-floating-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 1100;
    }

    .mobile-floating-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 10px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
    }

    .mobile-floating-action span:first-child {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-floating-phone {
        background: #124a3f;
    }

    .mobile-floating-facebook {
        background: #1877f2;
    }

    .mobile-floating-action:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }

    body {
        padding-bottom: 76px;
    }
}

.form-consent {
    margin: 4px 0 20px;
    font-size: 13px;
    line-height: 1.5;
}

.form-consent label {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    font-weight: 400 !important;
}

.form-consent input {
    width: auto !important;
    margin-top: 4px;
    flex: 0 0 auto;
}

.privacy-error {
    display: none;
    position: relative;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    background: #fff1f2;
    color: #9f1239;
    font-size: 12px;
    line-height: 1.4;
}

.privacy-error::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: #fff1f2;
    transform: rotate(45deg);
}

.privacy-error.is-visible {
    display: block;
}

.dark-theme .privacy-error {
    background: #451a24;
    color: #fecdd3;
}

.dark-theme .privacy-error::before {
    background: #451a24;
}

@media (max-width: 600px) {
    .legal-document .container {
        padding: 24px 20px;
    }
}


/* Reset uniwersalny - usuwa domyślne, fabryczne marginesy przeglądarek */
* {
    margin: 0;
    /* Zeruje zewnętrzne marginesy wszystkich elementów */
    padding: 0;
    /* Zeruje wewnętrzne marginesy wszystkich elementów */
    box-sizing: border-box;
    /* Sprawia, że obramowanie i padding nie powiększają ustalonej szerokości elementów */
}

/* Globalne ustawienia dla całego dokumentu HTML */
html {
    scroll-behavior: smooth;
    /* Włącza płynne, eleganckie przewijanie strony po kliknięciu w menu */
    overflow-x: clip;
}

/* Globalne ustawienia dla ciała strony (całej widocznej zawartości) */
body {
    font-family: var(--font-main);
    /* Wstrzykuje zdefiniowaną wyżej główną czcionkę */
    background-color: var(--bg-main);
    /* Ustawia zdefiniowane wyżej stonowane tło strony */
    color: var(--color-text);
    /* Ustawia domyślny, czytelny kolor dla wszystkich tekstów */
    line-height: 1.6;
    /* Odpowiednia interlinia (odstęp między liniami tekstu) zwiększająca czytelność */
    overflow-x: clip;
}

#kontakt {
    scroll-margin-top: 225px;
}

/* Kontener centrujący treść - zapobiega rozjeżdżaniu się strony na bardzo szerokich monitorach */
.container {
    width: 100%;
    /* Na małych ekranach kontener zajmuje pełną dostępną szerokość */
    max-width: 1200px;
    /* Na dużych ekranach treść blokuje się na szerokości 1200 pikseli (Premium spacing) */
    margin: 0 auto;
    /* Centruje kontener idealnie na środku ekranu (lewy i prawy margines automatyczny) */
    padding: 0 20px;
    /* Bezpieczny boczny odstęp, aby treść nie dotykała krawędzi ekranu na telefonach */
}

/* ==========================================================================
   2. STICKY HEADER (Logo wyśrodkowane + Menu pod spodem)
   ========================================================================== */

/* Główny kontener całego nagłówka (pasek, w którym jest logo i menu) */
.site-header {
    background-color: var(--bg-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.35s ease;
}

/* Efekt header po scrollu — klasa dodawana przez JS */
.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}


.header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0 10px 0;
    position: relative;
    transition: padding 0.35s ease;
}

/* ==========================================================================
   STYLIZACJA LOGO (Dla wymiarów 200px)
   ========================================================================== */

/* Zewnętrzny kontener otaczający logo */
.logo-wrapper {
    margin-bottom: 8px;
    /* Delikatny odstęp w pionie między logo a menu pod spodem */
    display: flex;
    /* Włącza układ elastyczny (Flexbox) wewnątrz kontenera */
    justify-content: center;
    /* Centruje logo w poziomie wewnątrz tego bloku */
    align-items: center;
    /* Centruje logo w pionie wewnątrz tego bloku */
}

/* Sam link owijający obrazek logo (znacznik <a> w HTML) */
.logo {
    display: block;
    /* Zamienia element liniowy w blokowy, pozwalając na nadanie wymiarów */
    width: 140px;
    /* Kompaktowy rozmiar logo, aby sticky header nie zajmował zbyt dużo miejsca */
    height: auto;
    /* Wysokość dopasuje się automatycznie, dbając o właściwe proporcje grafiki */
    text-decoration: none;
    /* Usuwa domyślne podkreślenie linku, jeśli tekst byłby wewnątrz */
}

/* Klasa przypisana bezpośrednio do znacznika grafiki <img> w HTML */
.logo-img {
    width: 100%;
    /* Obrazek wypełni dokładnie 100% szerokości swojego rodzica, czyli 200px */
    height: auto;
    /* Zapobiega zniekształceniu (zgnieceniu lub rozciągnięciu) obrazka w pionie */
    display: block;
    /* Usuwa niewidoczny, domyślny margines pod grafiką w przeglądarkach */
    transition: var(--transition);
    /* Nadaje płynność, gdybyśmy chcieli animować wielkość logo */
}

/* Główny kontener nawigacji (znacznik <nav> w HTML) */
.main-nav {
    width: 100%;
    /* Sprawia, że pasek nawigacji rozciąga się na pełną szerokość nagłówka */
}

/* Lista przechowująca linki menu (znacznik <ul> w HTML) */
.nav-links {
    display: flex;
    /* Układa elementy listy w jednym rzędzie poziomym (obok siebie) */
    justify-content: center;
    /* Centruje całe menu w poziomie, idealnie pod wyśrodkowanym logo */
    list-style: none;
    /* Usuwa domyślne, brzydkie kropki/wypunktowanie listy */
    gap: 25px;
    /* Tworzy nowoczesny, równy odstęp 25 pikseli między pozycjami w menu */
    transition: var(--transition);
    /* Zapewnia płynne przejścia przy zmianie stylów */
}

/* Pojedyncze linki w menu (znacznik <a> wewnątrz listy) */
.nav-links a {
    text-decoration: none;
    /* Usuwa domyślne, staroświeckie podkreślenie tekstu linku */
    color: var(--color-text);
    /* Nadaje tekstowi nasz zdefiniowany w bazie, czytelny ciemny kolor */
    font-weight: 600;
    /* Nadaje czcionce pogrubienie (półgruba), by menu było wyraziste */
    font-size: 15px;
    /* Ustawia optymalną wielkość pisma dla czytelności na ekranie komputera */
    padding: 6px 0;
    /* Dodaje 6 pikseli wolnej przestrzeni nad i pod tekstem (łatwiej kliknąć) */
    transition: var(--transition);
    /* Sprawia, że zmiana koloru po najechaniu myszką dzieje się płynnie */
    border-bottom: 2px solid transparent;
    /* Tworzy niewidoczną dolną ramkę (zapobiega skakaniu tekstu przy hoverze) */
}

/* Efekt najechania myszką (Hover) na link w menu */
.nav-links a:hover {
    color: var(--color-accent);
    /* Zmienia kolor tekstu na świeżą miętę po najechaniu myszką */
    border-bottom: 2px solid var(--color-accent);
    /* Pokazuje pod tekstem miętową, elegancką linię */
}

/* Ukryty domyślnie przycisk menu na desktopie (znacznik <button> w HTML) */
.menu-toggle {
    display: none;
    /* Całkowicie ukrywa przycisk na dużych ekranach (włączymy go dopiero dla telefonów) */
    background: none;
    /* Usuwa domyślne, szare tło przycisku przeglądarki */
    border: none;
    /* Usuwa fabryczną, brzydką ramkę przycisku */
    cursor: pointer;
    /* Zmienia kursor myszy w "rączkę z palcem", sygnalizując interakcję */
    padding: 10px;
    /* Powiększa obszar kliknięcia dla wygody użytkownika */
    position: absolute;
    /* Wyrywa przycisk z układu i pozwala ustawić go w dowolnym miejscu */
    right: 60px;
    /* Pozycjonuje przycisk, zostawiając miejsce na dark mode toggle */
    top: 18px;
    /* Pozycjonuje przycisk 18 pikseli od górnej krawędzi nagłówka */
}

/* ==========================================================================
   STYLIZACJA PRZEŁĄCZNIKA DARK MODE
   ========================================================================== */
.theme-switch-wrapper {
    position: absolute;
    right: 20px;
    top: 22px;
}

.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.theme-toggle-btn:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

.header-phone-action {
    display: none;
}

/* Dostosowanie nagłówka z przełącznikiem */
@media (max-width: 768px) {
    .header-phone-action {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 104px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--color-primary);
        color: #ffffff;
        line-height: 1;
        text-decoration: none;
    }

    .theme-switch-wrapper {
        right: 56px;
        top: 20px;
        width: 36px;
        height: 36px;
    }

    .theme-toggle-btn {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .menu-toggle {
        right: 12px;
        top: 20px;
        width: 36px;
        height: 36px;
        padding: 8px;
    }
}

.dark-theme .main-form label,
.dark-theme .form-consent label {
    color: #f1f5f9 !important;
}

.main-form .form-consent label {
    font-weight: 400 !important;
    line-height: 1.45;
}

.dark-theme .main-form .form-consent a {
    color: #7de1d7 !important;
    text-decoration: underline;
}

.dark-theme .main-form .form-consent a:hover {
    color: #b8fff7 !important;
}

.dark-theme .main-form input::placeholder,
.dark-theme .main-form textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 1;
}

/* Środkowa kreska ikony hamburgera (trzy poziome linie) */
.hamburger {
    display: block;
    /* Zamienia element w blok o konkretnych wymiarach */
    width: 24px;
    /* Szerokość poziomych kresek ikony */
    height: 2px;
    /* Grubość poziomej kreski */
    background-color: var(--color-primary);
    /* Nadaje kresce kolor naszej butelkowej zieleni */
    position: relative;
    /* Tworzy bazę/punkt odniesienia dla pozostałych dwóch kresek */
    transition: var(--transition);
    /* Płynna animacja zmiany w znak "X" */
}

/* Konstrukcja górnej (before) i dolnej (after) kreski hamburgera */
.hamburger::before,
.hamburger::after {
    content: '';
    /* Wymagane przez CSS, generuje fizyczny element na stronie */
    position: absolute;
    /* Pozycjonuje kreski idealnie względem środkowej linii */
    width: 24px;
    /* Taka sama szerokość jak linia środkowa */
    height: 2px;
    /* Taka sama grubość jak linia środkowa */
    background-color: var(--color-primary);
    /* Taki sam kolor butelkowej zieleni */
    transition: var(--transition);
    /* Zapewnia płynność obrotu kresek podczas animacji */
}

/* Dokładne rozstawienie kresek w pionie */
.hamburger::before {
    top: -6px;
}

/* Przesuwa górną kreskę o 6 pikseli wyżej */
.hamburger::after {
    top: 6px;
}

/* Przesuwa dolną kreskę o 6 pikseli niżej */

/* ANIMACJA HAMBURGERA: Stan po otwarciu menu (Gdy klasa .active zostanie nadana przez JS) */

/* Ukrywanie środkowej kreski (staje się przezroczysta) */
.menu-toggle.active .hamburger {
    background-color: transparent;
}

/* Obracanie górnej kreski o 45 stopni i wyrównanie jej do środka */
.menu-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

/* Obracanie dolnej kreski o -45 stopni i wyrównanie jej do środka (tworzy się idealny krzyżyk X) */
.menu-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

/* ==========================================================================
   3. SEKCJE I UKŁADY (LAYOUT)
   ========================================================================== */

/* Klasa bazowa dla każdej sekcji na stronie */
.section {
    padding: 80px 0;
    scroll-margin-top: 130px;
}

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

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

/* Uniwersalny podtytuł sekcji */
.section-subtitle {
    max-width: 700px;
    margin: 0 auto 50px auto;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Uniwersalny styl dla głównych tytułów każdej sekcji */

.section-title {
    font-size: 32px;
    /* Duża, wyraźna wielkość pisma dla nagłówka */
    color: var(--color-primary);
    /* Nadaje tytułom kolor naszej eleganckiej butelkowej zieleni */
    margin-bottom: 40px;
    /* Tworzy 40 pikseli odstępu pod tytułem, oddzielając go od treści sekcji */
    font-weight: 700;
    /* Mocne pogrubienie (Bold), aby nagłówek od razu rzukał się w oczy */
}

/* Nowoczesna siatka dwukolumnowa (używana m.in. w sekcji "O mnie" i "Gdzie pracuję") */
.grid-2 {
    display: grid;
    /* Aktywuje zaawansowany system siatki CSS Grid */
    grid-template-columns: 1fr 1fr;
    /* Dzieli przestrzeń na 2 równe kolumny (każda zajmuje 1 frakcję dostępnego miejsca) */
    gap: 50px;
    /* Tworzy duży, komfortowy odstęp 50 pikseli pomiędzy kolumnami */
    align-items: center;
    /* Wyrównuje zawartość obu kolumn idealnie w pionie (środkuje je względem siebie) */
}

/* Styl dla nowoczesnego bloku zastępczego (placeholdera) w miejscach, gdzie pojawią się zdjęcia */
.placeholder-img {
    background: linear-gradient(135deg, rgba(46, 196, 182, 0.1), rgba(18, 74, 63, 0.1));
    /* Subtelny gradient w kolorach marki z rozmytym efektem premium */
    backdrop-filter: blur(10px);
    height: 350px;
    /* Wymusza stałą wysokość bloku na 350 pikseli */
    border-radius: 12px;
    /* Zaokrągla rogi bloku o 12 pikseli, nadając mu nowoczesny wygląd */
    display: flex;
    /* Włącza Flexbox wewnątrz bloku, aby łatwo wyśrodkować napis tekstowy */
    align-items: center;
    /* Centruje tekst wewnątrz obrazka w pionie */
    justify-content: center;
    /* Centruje tekst wewnątrz obrazka w poziomie */
    color: var(--color-primary);
    /* Nadaje napisowi "Miejsce na Twoje zdjęcie" elegancki główny kolor */
    font-weight: 500;
    /* Nadaje napisowi lekko pogrubioną strukturę */
    border: 1px solid rgba(46, 196, 182, 0.2);
}

/* Główny, najważniejszy przycisk na stronie (tzw. Call To Action - Akcja Główna, np. "Umów się") */
.btn-primary {
    display: inline-block;
    /* Pozwala elementowi zachowywać się jak blok (nadanie paddingów), ale nie łamie linii tekstu */
    background-color: #124a3f;
    color: #ffffff;
    text-decoration: none;
    /* Usuwa standardowe podkreślenie linku z tekstu przycisku */
    padding: 14px 32px;
    /* Wewnętrzne wymiary przycisku: 14px od góry/dołu i aż 32px po bokach dla wygody klikania */
    border-radius: 50px;
    /* Eleganckie zaokrąglenie rogów przycisku w kształt pigułki (Premium) */
    font-weight: 600;
    /* Wyraźne pogrubienie czcionki wewnątrz przycisku */
    transition: var(--transition);
    /* Włącza płynną animację dla wszystkich zmian (np. koloru przy najechaniu) */
    box-shadow: 0 10px 25px -5px rgba(18, 74, 63, 0.4), 0 8px 10px -6px rgba(18, 74, 63, 0.1);
    /* Wielowarstwowy, miękki cień Premium */
}

/* Efekt najechania kursorem myszy na główny przycisk (Hover) */
.btn-primary:hover {
    transform: translateY(-2px);
    /* Delikatnie i subtelnie unosi przycisk o 2 piksele w górę, dając efekt trójwymiarowości */
    background-color: #0c3c32;
}

.dark-theme .btn-primary,
.dark-theme .main-form .btn-primary,
.dark-theme .contact-form-wrapper .btn-primary {
    background-color: #2ec4b6 !important;
    color: #0a2721 !important;
    box-shadow: 0 10px 25px -5px rgba(46, 196, 182, 0.3), 0 8px 10px -6px rgba(46, 196, 182, 0.1);
}

.dark-theme .btn-primary:hover,
.dark-theme .main-form .btn-primary:hover,
.dark-theme .contact-form-wrapper .btn-primary:hover {
    background-color: #7de1d7 !important;
}


/* ==========================================================================
   4. STYLIZACJA SEKCJI SZCZEGÓŁOWYCH
   ========================================================================== */

/* Sekcja powitalna (Hero) */
.hero {
    background: linear-gradient(135deg, rgba(18, 74, 63, 0.97), rgba(12, 60, 50, 0.95));
    color: #ffffff;
    padding: 120px 0 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Dekoracyjna fala SVG pod Hero */
.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}

.hero-wave svg {
    width: 100%;
    height: 80px;
    display: block;
}

.hero h1 {
    font-size: clamp(46px, 5vw, 64px);
    margin-bottom: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    font-family: var(--font-heading);
}

.hero p {
    font-size: 18px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Animacja wejścia elementów w Hero */
.hero .animate-on-scroll {
    opacity: 0;
    animation: heroFadeInUp 0.7s ease-out forwards;
}

@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Siatka kafelków w sekcji "Pierwsza wizyta" */
.steps-grid {
    display: grid;
    /* Aktywuje nowoczesny system siatki CSS Grid */
    /* Automatycznie dopasowuje liczbę kolumn (auto-fit): kafelki kurczą się lub rozszerzają, zachowując minimum 280px szerokości. Jeśli brakuje miejsca, automatycznie przeskakują do nowej linii (brak potrzeby pisania media queries!) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    /* Równy odstęp 30 pikseli pomiędzy kafelkami kroków */
}

/* Pojedynczy kafelek kroku (np. Krok 1, Krok 2) w sekcji "Pierwsza wizyta" */
.step-card {
    background-color: var(--bg-main);
    /* Jasnoszare tło kafelka, odznaczające się na białym tle sekcji */
    padding: 30px;
    /* Komfortowa przestrzeń 30 pikseli wewnątrz kafelka z każdej strony */
    border-radius: 12px;
    /* Łagodne zaokrąglenie rogów kafelka o 12 pikseli */
}

/* Kółko z numerem kroku wewnątrz kafelka */
.step-num {
    background-color: var(--color-primary);
    /* Tło kółka w kolorze naszej głębokiej, butelkowej zieleni */
    color: #ffffff;
    /* Kolor cyfry wewnątrz kółka (czysta biel) */
    width: 35px;
    /* Dokładna szerokość kółka */
    height: 35px;
    /* Dokładna wysokość kółka */
    border-radius: 50%;
    /* Idealne zaokrąglenie (50%) zamieniające kwadrat w idealne koło */
    display: flex;
    /* Włącza układ Flexbox wewnątrz kółka */
    align-items: center;
    /* Centruje cyfrę w pionie wewnątrz kółka */
    justify-content: center;
    /* Centruje cyfrę w poziomie wewnątrz kółka */
    font-weight: 700;
    /* Mocne pogrubienie cyfry numeru kroku */
    margin-bottom: 15px;
    /* Margines 15 pikseli pod kółkiem, oddzielający je od tytułu kroku */
}

/* Kontener ograniczający szerokość listy w sekcji "Jak pracuję" */
.methods-list {
    max-width: 700px;
    /* Blokuje szerokość listy na maksymalnie 700px, ułatwiając czytanie */
    margin: 0 auto;
    /* Centruje całą listę poziomo na środku sekcji */
}

/* Pojedynczy element (wiersz) na liście metod pracy */
.method-item {
    background-color: var(--bg-light);
    /* Białe tło wiersza wyróżniające go ze szarego tła strony */
    padding: 20px;
    /* Wewnętrzny odstęp 20 pikseli dla swobody tekstu */
    border-radius: 8px;
    /* Subtelne zaokrąglenie rogów o 8 pikseli */
    margin-bottom: 15px;
    /* Odstęp 15 pikseli pod każdym wierszem, aby metody się nie zlewały */
    border-left: 4px solid var(--color-accent);
    /* Nowoczesny akcent: gruba, miętowa pionowa linia po lewej stronie elementu */
}

/* Dwukolumnowa siatka przeznaczona na opinie pacjentów */
.testimonials-grid {
    display: grid;
    /* Aktywuje system CSS Grid */
    grid-template-columns: 1fr 1fr;
    /* Dzieli przestrzeń na 2 równe kolumny dla dwóch opinii obok siebie */
    gap: 30px;
    /* Odstęp 30 pikseli pomiędzy kafelkami opinii */
}

/* Pojedynczy kafelek z opinią pacjenta */
.testimonial-card {
    background-color: var(--bg-light);
    /* Białe tło kafelka opinii */
    padding: 30px;
    /* Przestrzeń 30 pikseli wewnątrz kafelka */
    border-radius: 12px;
    /* Zaokrąglenie rogów o 12 pikseli */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Bardzo cienka, ledwo widoczna szara ramka zamykająca kafelek */
}

/* Tekst samej cytowanej opinii pacjenta */
.review-text {
    font-style: italic;
    /* Nadaje tekstowi kursywę (styl pism pochyłego) właściwy dla cytatów */
    margin-bottom: 15px;
    /* Margines 15 pikseli na dole, oddzielający cytat od podpisu autora */
}

/* Podpis autora opinii (imię i nazwisko pacjenta) */
.review-author {
    font-weight: 600;
    /* Wyraźne pogrubienie podpisu pacjenta */
    color: var(--color-primary);
    /* Nadaje podpisowi kolor głównej butelkowej zieleni */
}

/* Blok z informacjami teleadresowymi w sekcji kontaktowej */
.contact-info {
    margin-top: 30px;
    /* Odsuwa dane kontaktowe o 30 pikseli od tekstu powyżej */
    font-size: 20px;
    /* Powiększona, wyraźna czcionka dla numeru telefonu i maila */
}

/* Linki wewnątrz sekcji kontaktowej (numery telefonów i adresy e-mail) */
.contact-info a {
    color: var(--color-primary);
    /* Domyślnie linki są w kolorze naszej butelkowej zieleni */
    text-decoration: none;
    /* Usuwa standardowe podkreślenie linków */
}

/* Efekt najechania myszką na dane kontaktowe */
.contact-info a:hover {
    color: var(--color-accent);
    /* Zmienia kolor na miętowy po najechaniu kursorem, sugerując klikalność */
}

/* ==========================================================================
   ROZBUDOWANY FOOTER
   ========================================================================== */
.site-footer {
    background-color: var(--color-primary);
    color: rgba(255, 255, 255, 0.85);
    padding: 60px 0 0 0;
    font-size: 14px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
}

.footer-description {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    max-width: 280px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--color-accent);
    padding-left: 4px;
}

.footer-bottom {
    text-align: center;
    padding: 22px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-description {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ==========================================================================
   SEKCJA CTA (Call-to-Action)
   ========================================================================== */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary), #0c3c32);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(46, 196, 182, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-heading {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: -0.3px;
}

.cta-text {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 35px;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-cta {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 10px;
}

.btn-cta-secondary {
    display: inline-block;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    text-decoration: none;
    transition: var(--transition);
}

.btn-cta-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* ==========================================================================
   ANIMACJE SCROLL (IntersectionObserver)
   ========================================================================== */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js .animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   NOWA STYLIZACJA LISTY PUNKTOWANEJ W METODACH PRACY (Wcięcie + Nowy Punktator)
   ========================================================================== */

/* Główny kontener listy <ul> wewnątrz karty metody */
.method-card-body .custom-bullet-list {
    list-style: none;
    /* Całkowicie usuwa fabryczne, czarne kropki przeglądarki */
    padding: 0;
    margin: 15px 0 5px 0;
    /* Odstęp: 15px od tekstu powyżej, 5px od dołu kafelka */
}

/* Pojedynczy element listy <li> (Twój punktator) */
.method-card-body .custom-bullet-list li {
    font-size: 15px;
    /* Optymalna wielkość tekstu punktu */
    color: var(--color-text);
    /* Kolor ciemnego grafitu dla czytelności */
    position: relative;
    /* Baza dla pozycjonowania naszej nowej ikony */

    /* 🧠 TUTAJ ROBIMY WCIĘCIE PUNKTTORÓW W PRAWO: */
    padding-left: 35px;
    /* Zwiększamy odstęp od lewej krawędzi, tworząc eleganckie wcięcie dla tekstu */
    margin-left: 15px;
    /* Przesuwamy cały punkt w prawo względem głównego akapitu tekstowego */

    margin-bottom: 12px;
    /* Komfortowy odstęp w pionie między poszczególnymi punktami dolegliwości */
    line-height: 1.5;
    /* Przyjazna dla oka interlinia tekstu */
    text-align: left;
    /* Wyrównanie tekstu do lewej strony */
}

/* Usuwamy dolny margines dla ostatniego elementu listy, by nie rozpychał kafelka */
.method-card-body .custom-bullet-list li:last-child {
    margin-bottom: 0;
}

/* 🟢 PROJEKTOWANIE FAJNEGO, MEDYCZNEGO PUNKTATORA (Ikona miętowego ptaszka "✓") */
.method-card-body .custom-bullet-list li::before {
    content: '✓';
    /* 👈 Wstawiamy czysty, elegancki symbol potwiedzenia/fajki */
    position: absolute;
    /* Umieszczamy ikonę niezależnie od tekstu */
    left: 5px;
    /* Pozycjonujemy punktator wewnątrz przygotowanego wcięcia po lewej */
    top: 1px;
    /* Centrujemy ikonę pionowo idealnie względem pierwszej linii tekstu */
    font-size: 16px;
    /* Wielkość ikony punktatora */
    font-weight: 900;
    /* Mocne pogrubienie ikony, aby była wyraźna */
    color: var(--color-accent);
    /* Nadaje ikonie kolor naszej świeżej, miętowej zieleni */

    /* Dodatkowy smaczek wizualny: delikatna, miętowa poświata pod ikoną dla nowoczesnego efektu */
    text-shadow: 0 0 4px rgba(46, 196, 182, 0.4);
}

/* ==========================================================================
   STYLIZACJA SEKCJI: GDZIE PRACUJĘ (Karty Lokalizacji)
   ========================================================================== */

/* Pojedyncza karta lokalizacji (Stacjonarna lub Mobilna) */
.location-card {
    background-color: var(--bg-main);
    /* Szare tło odznaczające się na białej sekcji */
    padding: 35px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Efekt delikatnego uniesienia karty po najechaniu myszką */
.location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(18, 74, 63, 0.04);
    background-color: var(--bg-light);
    /* Zmiana tła na białe dla podświetlenia */
    border-color: var(--color-accent);
    /* Zmiana ramki na miętową */
}

/* Duża, czytelna ikona na górze karty (Emoji) */
.location-icon {
    font-size: 36px;
    margin-bottom: 15px;
    background-color: rgba(46, 196, 182, 0.1);
    /* Miętowe, półprzezroczyste tło pod ikoną */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(46, 196, 182, 0.1);
}

/* Tytuł karty (np. Gabinet stacjonarny) */
.location-card h2,
.location-card h3 {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Belka informująca o dniach pracy (np. W środy, Od poniedziałku do piątku) */
.location-schedule {
    display: inline-block;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

/* Zmiana koloru belki harmonogramu dla dojazdu na miętowy dla rozróżnienia */
.mobile-card .location-schedule {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* Szczegółowy opis dojazdu lub dokładny adres gabinetu */
.location-details {
    font-size: 14.5px;
    color: var(--color-text);
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================================
   5. RESPONSYWNOŚĆ (Media Queries dla Telefonów)
   ========================================================================== */

/* Reguła uruchamiająca się automatycznie, gdy szerokość ekranu urządzenia wynosi 768 pikseli lub mniej (smartfony i mniejsze tablety) */
@media (max-width: 768px) {
    .logo {
        width: 120px;
    }


    /* Dostosowanie marginesu przewijania do mniejszego nagłówka mobilnego */
    [id] {
        scroll-margin-top: 85px;
        /* Zmniejszamy przestrzeń nad sekcją, bo logo na telefonie jest mniejsze i zajmuje mniej miejsca w pionie */
    }

    /* Zmniejszenie pionowych marginesów sekcji na małych ekranach */
    .section {
        padding: 50px 0;
        /* Zmniejszamy z 80px do 50px, aby pacjent nie musiał przewijać kilometrów pustego tła na telefonie */
    }

    /* Przebudowa siatki dwukolumnowej na jednokolumnową */
    .grid-2 {
        grid-template-columns: 1fr;
        /* Zamiast dwóch kolumn obok siebie wymuszamy jedną kolumnę - elementy (tekst i zdjęcie) układają się pionowo jeden pod drugim */
        gap: 30px;
        /* Zmniejszamy odstęp między elementami z 50px do 30px dla oszczędności miejsca */
    }

    /* Zmniejszenie nagłówka głównego w sekcji powitalnej */
    .hero h1 {
        font-size: 30px;
        /* Zmniejszamy z 42px do 30px, aby długi tytuł nie łamał się brzydko na małym ekranie telefonu */
    }

    /* Przebudowa siatki opinii na jednokolumnową */
    .testimonials-grid {
        grid-template-columns: 1fr;
        /* Opinie pacjentów wyświetlają się pionowo jedna pod drugą, co ułatwia ich czytanie na smartfonie */
    }

    /* WŁĄCZENIE I OBSŁUGA MENU MOBILNEGO (HAMBURGERA) */

    /* Pokazanie przycisku menu */
    .menu-toggle {
        display: block;
        /* Zmieniamy z 'none' na 'block' - przycisk z trzema kreskami staje się fizycznie widoczny w prawym górnym rogu */
    }

    /* Zmiana wyrównania elementów w całego nagłówka */
    .header-container {
        align-items: flex-start;
        /* Przemieszczamy logo na lewą stronę (zamiast środka), robiąc miejsce dla hamburgera po prawej */
        padding: 20px;
        /* Dodajemy równe 20 pikseli marginesu wokół całego paska mobilnego nagłówka */
    }

    /* Reset marginesu logo */
    .logo-wrapper {
        margin-bottom: 0;
        /* Usuwamy dolny margines logo, ponieważ menu nie jest już bezpośrednio pod nim */
    }

    /* Transformacja poziomego menu w pionowy panel mobilny */
    .nav-links {
        display: none;
        /* Domyślnie całkowicie ukrywamy listę linków - rozwinie się dopiero po kliknięciu */
        flex-direction: column;
        /* Układamy pozycje menu pionowo, jedna pod drugą */
        width: 100%;
        /* Menu rozciąga się na pełną szerokość ekranu telefonu */
        gap: 0;
        /* Zerujemy boczny odstęp między linkami, który obowiązywał na komputerach */
        padding-top: 20px;
        /* Dodajemy 20 pikseli odstępu od góry, aby menu nie dotykało bezpośrednio logo */
    }

    /* Klasa ratunkowa aktywowana dynamicznie przez JavaScript w pliku app.js */
    .nav-links.active {
        display: flex;
        /* Gdy pacjent kliknie hamburgera, JS dodaje klasę .active, a ta linijka natychmiast wysuwa/pokazuje całe menu */
    }

    /* Stylizacja pojedynczych linków wewnątrz menu mobilnego */
    .nav-links a {
        display: block;
        /* Sprawiamy, że cały wiersz jest klikalny, a nie tylko sam tekst (bardzo ważne dla grubych palców na ekranach dotykowych) */
        padding: 15px 0;
        /* Duży pionowy odstęp 15 pikseli gwarantuje komfortowe i bezbłędne klikanie w menu */
        width: 100%;
        /* Link zajmuje 100% szerokości ekranu */
        border-bottom: 1px solid #e2e8f0;
        /* Dodajemy cieniutką linię pod każdym linkiem, tworząc czytelną listę opcji */
        font-size: 16px;
        /* Delikatnie powiększamy czcionkę dla wygody użytkownika mobilnego */
    }

    /* Efekt dotknięcia/najechana na link w menu mobilnym */
    .nav-links a:hover {
        border-bottom: 1px solid var(--color-accent);
        /* Zmienia kolor dolnej linii na miętowy, dając sygnał o wyborze */
    }
}

/* ==========================================================================
   NOWA STYLIZACJA CENNIKA (Karty usług z opisami - Wersja Poprawiona z Opisami)
   ========================================================================== */

/* Główny kontener otaczający cały blok cennika na stronie */
.pricing-container {
    width: 100%;
    /* Kontener domyślnie próbuje zająć całą dostępną szerokość */
    max-width: 900px;
    /* Blokujemy szerokość na 900 pikseli, aby cennik wyglądał zgrabnie na monitorach */
    margin: 0 auto;
    /* Centruje cały blok cennika idealnie na środku strony */
    display: flex;
    /* Włącza układ elastyczny (Flexbox) do zarządzania kategoriami */
    flex-direction: column;
    /* Układa kategorie pionowo, jedna pod drugą */
    gap: 50px;
    /* Tworzy duży, elegancki odstęp 50 pikseli pomiędzy poszczególnymi kategoriami */
}

/* Kontener pojedynczej kategorii (np. Terapia i rehabilitacja) */
.price-category {
    width: 100%;
    /* Wymusza, aby każda kategoria zajmowała pełną szerokość (900px) */
}

/* Stylizacja i ujednolicenie nagłówków kategorii (znaczników <h3>) */
.price-category h3 {
    color: var(--color-primary);
    /* Nadaje tytułom kolor naszej butelkowej zieleni */
    font-size: 22px;
    /* Odpowiednio duża wielkość czcionki dla nazwy kategorii */
    margin-bottom: 20px;
    /* Tworzy 20 pikseli odstępu pod tytułem, odsuwając go od kafelka z cenami */
    border-bottom: 3px solid var(--color-accent);
    /* Dodaje pod nazwą kategorii grubą, miętową linię ozdobną */
    padding-bottom: 8px;
    /* Odstęp między tekstem nagłówka a miętową linią pod nim */
    display: block;
    /* Sprawia, że miętowa linia rozciąga się na pełną szerokość kafelka */
    text-align: left;
    /* Wyrównuje tekst nazwy kategorii do lewej strony */
}

/* Biały kafelek zbiorczy, w którym zamknięte są usługi z danej kategorii */
.price-list {
    background-color: var(--bg-light);
    /* Nadaje czyste, białe tło dla całego bloku usług */
    padding: 10px 30px;
    /* Wewnętrzne marginesy: 10px góra/dół oraz komfortowe 30px po bokach */
    border-radius: 14px;
    /* Eleganckie, nowoczesne zaokrąglenie rogów kafelka o 14 pikseli */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    /* Dodaje bardzo subtelny, nowoczesny i rozmyty cień pod kafelkiem */
    border: 1px solid rgba(0, 0, 0, 0.04);
    /* Dodaje niemal niewidoczną, cieniutką szarą ramkę zamykającą kształt */
}

/* Pojedynczy wiersz konkretnej usługi (Nazwa + Opis vs Cena + Przycisk) */
.price-item {
    display: flex;
    /* Włącza Flexbox dla tego wiersza, układając elementy poziomo obok siebie */
    justify-content: space-between;
    /* Kluczowe! Rozpycha elementy: opis leci maksymalnie w lewo, cena maksymalnie w prawo */
    align-items: center;
    /* Centruje zawartość wiersza idealnie w pionie (środkuje tekst względem przycisku) */
    padding: 25px 0;
    /* Dodaje 25 pikseli wolnej przestrzeni nad i pod każdą usługą */
    border-bottom: 1px solid #f1f2f3;
    /* Tworzy jasnoszarą linię poziomą oddzielającą usługi wewnątrz kafelka */
    gap: 40px;
    /* Bezpieczny, sztywny odstęp 40px, który zapobiega najechaniu długiego opisu na cenę */
}

/* Ukrywanie dolnej linii oddzielającej dla ostatniej usługi w danej kategorii */
.price-item:last-child {
    border-bottom: none;
    /* Usuwa ramkę na samym dole bloku, aby kod wyglądał estetycznie */
}

/* Lewa strona wiersza: zawiera tytuł usługi oraz jej opis */
.price-info {
    flex: 1;
    /* Informuje przeglądarkę, że ta kolumna ma zająć całą dostępną wolną przestrzeń po lewej stronie */
    text-align: left;
    /* Wyrównuje tekst nazwy i opisu do lewej krawędzi */
}

/* Stylizacja samej nazwy usługi */
.price-name {
    font-size: 18px;
    /* Wyraźna, lekko powiększona czcionka dla nazwy zabiegu */
    font-weight: 700;
    /* Mocne pogrubienie (Bold), aby nazwa była czytelna na pierwszy rzut oka */
    color: var(--color-text);
    /* Kolor tekstu zgodny z naszym ciemnym grafitem bazowym */
    display: block;
    /* Wymusza, aby nazwa była osobnym blokiem, dzięki czemu opis pod nią przeskoczy do nowej linii */
    margin-bottom: 6px;
    /* Tworzy subtelny odstęp 6 pikseli pomiędzy nazwą usługi a jej opisem */
}

/* Stylizacja opisu zabiegu/usługi */
.price-desc {
    font-size: 14.5px;
    /* Nieco mniejsza, lżejsza czcionka dla tekstu opisowego */
    color: var(--color-muted);
    /* Stonowany, szary kolor sprawia, że opis nie odciąga uwagi od nazwy i ceny */
    line-height: 1.5;
    /* Odpowiedni odstęp między linijkami opisu dla komfortu czytania */
}

/* Prawa strona wiersza: grupuje cenę, czas trwania oraz przycisk rezerwacji */
.price-action {
    display: flex;
    /* Włącza Flexbox wewnątrz bloku ceny */
    flex-direction: column;
    /* Układa elementy pionowo (jeden pod drugim): Cena, pod nią Czas, pod nim Przycisk */
    align-items: flex-end;
    /* Równa wszystkie te elementy idealnie do prawej krawędzi kafelka */
    justify-content: center;
    /* Środkuje elementy w pionie */
    min-width: 140px;
    /* Blokuje minimalną szerokość tej kolumny na 140px, zapobiegając ucinaniu cen */
    text-align: right;
    /* Wyrównuje tekst cyfr do prawej strony */
}

/* Stylizacja wyświetlanej kwoty (ceny) */
.price-value {
    font-size: 22px;
    /* Duża, dobrze widoczna czcionka dla ceny */
    font-weight: 800;
    /* Bardzo mocne pogrubienie, podkreślające wartość biznesową */
    color: var(--color-primary);
    /* Cena wyświetla się w kolorze naszej butelkowej zieleni */
    margin-bottom: 2px;
    /* Drobny margines 2 pikseli nad informacją o czasie trwania */
}

/* Stylizacja informacji o czasie trwania zabiegu (np. 45 min) */
.price-time {
    font-size: 13.5px;
    /* Mniejsza, dyskretna czcionka dla czasu */
    color: var(--color-muted);
    /* Stonowany, szary kolor pomocniczy */
    font-weight: 500;
    /* Średnie pogrubienie czcionki */
    margin-bottom: 10px;
    /* Odsuwa czas trwania od przycisku znajdującego się pod nim o 10 pikseli */
}

/* Nowoczesny przycisk "Wybierz" przypisany do każdej usługi - Wersja z pełnym resetem systemowym */
.btn-select-service {
    background-color: transparent;
    /* Przycisk domyślnie ma przezroczyste tło */
    color: var(--color-primary);
    /* Kolor tekstu to nasza butelkowa zieleń */
    border: 2px solid var(--color-primary) !important;
    /* Wymusza 2-pikselową ramkę w kolorze zielonym i blokuje fabryczne kolory przeglądarek */
    padding: 8px 20px;
    /* Wymiary wewnętrzne przycisku: 8px góra/dół oraz 20px na boki */
    font-size: 14px;
    /* Optymalna wielkość tekstu na przycisku */
    font-weight: 700;
    /* Wyraźne, grube pogrubienie tekstu "Wybierz" */
    border-radius: 8px;
    /* Nowoczesne zaokrąglenie rogów przycisku */
    text-decoration: none;
    /* Usuwa domyślne podkreślenie linku w przeglądarkach */

    /* ZABEZPIECZENIE: Ten blok usuwa ukryte, czarne obwódki i cienie systemowe przeglądarek */
    outline: none !important;
    /* Całkowicie wyłącza systemowy kontur skupienia wokół przycisku */
    box-shadow: none !important;
    /* Wymazuje domyślne cienie 3D, które przeglądarki dodają do elementów klikalnych */
    text-shadow: none !important;
    /* Usuwa ukryte cienie pod literami, które na niektórych ekranach udają podwójną ramkę */
    -webkit-appearance: none;
    /* Całkowity reset fabrycznego wyglądu przycisków na urządzeniach Apple/Safari */
    -moz-appearance: none;
    /* Całkowity reset fabrycznego wyglądu przycisków na przeglądarce Firefox */
    appearance: none;
    /* Globalny, nowoczesny reset systemowego wyglądu dla wszystkich przeglądarek */

    display: inline-block;
    /* Wymusza poprawne renderowanie wymiarów i paddingów dla znacznika linku <a> */
    cursor: pointer;
    /* Zmienia kursor myszy w interaktywną rączkę, sugerując możliwość kliknięcia */
    transition: var(--transition);
    /* Włącza płynną animację (0.3s) dla efektu najechania myszką */
}

/* Efekt najechania kursorem myszy na przycisk "Wybierz" (Hover) */
.btn-select-service:hover {
    background-color: var(--color-primary);
    /* Tło przycisku zmienia się na pełną butelkową zieleń */
    color: #ffffff !important;
    /* Tekst na przycisku zmienia kolor na czystą biel dla idealnego kontrastu */
    transform: translateY(-1px);
    /* Delikatne uniesienie przycisku o 1 piksel, dające nowoczesny efekt klikalności */
}

.btn-select-service:focus-visible,
button.pagination-link:focus-visible,
.main-form input:focus-visible,
.main-form select:focus-visible,
.main-form textarea:focus-visible,
.menu-toggle:focus-visible,
.theme-toggle-btn:focus-visible,
.header-phone-action:focus-visible {
    outline: 3px solid var(--color-accent) !important;
    outline-offset: 3px;
}

/* ==========================================================================
   ROZBUDOWANA STYLIZACJA KART LOKALIZACJI (Z informacją o klinice)
   ========================================================================== */

/* Nadpisanie karty lokalizacji, aby przyciski zawsze były idealnie na dole */
.location-card {
    min-height: 420px;
    /* Wymuszamy minimalną wysokość kart, aby były równe i symetryczne */
}

/* Tekst z instrukcją rejestracji w gabinecie/klinice */
/* Zwiększamy odstęp tekstu rejestracji od przerywanej linii u góry */
.location-reg-info {
    font-size: 13.5px;
    color: var(--color-muted);
    line-height: 1.5;
    margin-top: 20px;
    /* 👈 Zwiększyliśmy margines z 15px do 20px dla lepszego oddechu */
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* Uniwersalna klasa bazowa dla przycisków wewnątrz kart lokalizacji */
.btn-location-action {
    display: block;
    /* Przycisk zajmuje cały wiersz wewnątrz karty */
    width: 100%;
    padding: 10px 15px;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 10px;
    /* Margines między dwoma przyciskami */
    transition: var(--transition);
}

.btn-location-action:last-child {
    margin-bottom: 0;
    /* Ostatni przycisk nie potrzebuje dolnego marginesu */
}

/* Styl dla przycisku zewnętrznej kliniki (Czysty, minimalistyczny z ramką) */
.btn-clinic {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary) !important;
}

.btn-clinic:hover {
    background-color: var(--color-primary);
    color: #ffffff !important;
}

/* Styl dla przycisku kontaktu bezpośredniego (Pełny, miętowy) */
/* Poprawka stylu dla przycisku kontaktu bezpośredniego (Pełny, miętowy) */
.btn-direct {
    background-color: var(--color-accent);
    color: var(--color-primary) !important;
    /* 👈 WYMUSZAMY kolor naszej głębokiej butelkowej zieleni dla idealnego kontrastu tekst/tło! */
    border: 2px solid var(--color-accent) !important;
}


/* Stan po najechaniu myszką na przycisk bezpośredni */
.btn-direct:hover {
    background-color: #24a195;
    border-color: #24a195 !important;
    color: #ffffff !important;
    /* Podczas hoveru tekst zmienia się na czystą biel */
}

/* ==========================================================================
   POPRAWIONA RESPONSYWNOŚĆ MOBILNA (Modyfikacje cennika dla smartfonów)
   ========================================================================== */
@media (max-width: 768px) {

    /* Zmniejszenie bocznych odstępów wewnątrz białego kafelka na telefonach */
    .price-list {
        padding: 10px 20px;
        /* Zmniejszamy z 30px do 20px, zyskując cenną przestrzeń na ekranie smartfona */
    }

    /* Przebudowa wiersza usługi na smartfonach */
    .price-item {
        flex-direction: column;
        /* Zmieniamy układ z poziomego na pionowy: na telefonie cena i przycisk lądują pod opisem */
        align-items: flex-start;
        /* Wyrównujemy wszystko do lewej krawędzi ekranu */
        gap: 15px;
        /* Zmniejszamy odstęp między sekcją tekstu a sekcją ceny do 15 pikseli */
        padding: 20px 0;
        /* Odchudzamy marginesy pionowe wiersza */
    }

    /* Przebudowa dolnego bloku akcji (cena/czas/guzik) na smartfonach */
    .price-action {
        flex-direction: row;
        /* Zamiast kolumny układamy cenę, czas i przycisk w jednym poziomym rzędzie na telefonie */
        align-items: center;
        /* Centruje te 3 elementy równo w pionie względem siebie */
        justify-content: space-between;
        /* Rozsuwa je: cena i czas są po lewej, a przycisk lądują po prawej stronie ekranu telefonu */
        width: 100%;
        /* Blok akcji zajmuje pełne 100% szerokości ekranu komórkowego */
        border-top: 1px dashed #e2e8f0;
        /* Dodaje estetyczną, przerywaną linię oddzielającą opis od ceny na telefonie */
        padding-top: 15px;
        /* Dodaje 15 pikseli odstępu od przerywanej linii */
        min-width: auto;
        /* Resetuje minimalną szerokość, która obowiązywała na komputerach */
    }

    /* Reset dolnego marginesu czasu trwania na telefonie */
    .price-time {
        margin-bottom: 0;
        /* Usuwamy margines, ponieważ elementy na smartfonie stoją teraz obok siebie, a nie jeden pod drugim */
    }
}

/* ==========================================================================
   NOWA STYLIZACJA SEKCJI: PIERWSZA WIZYTA (Oś Czasu / Proces)
   ========================================================================== */

/* Główny kontener osi czasu trzymający wszystkie kroki w pionie */
.steps-timeline {
    position: relative;
    /* Baza pod absolutne pozycjonowanie pionowej linii */
    max-width: 800px;
    /* Blokujemy szerokość, by tekst czytało się wygodnie */
    margin: 0 auto;
    /* Centrujemy całą oś czasu na środku sekcji */
    padding: 20px 0;
    /* Delikatny margines góra/dół dla oddechu konstrukcji */
}


/* 1. Całkowicie usuwamy starą linię z głównego kontenera */
.steps-timeline::before {
    display: none !important;
}

/* 2. Tworzymy linię przypisaną bezpośrednio do każdego wiersza kroku */
.step-timeline-item::before {
    content: '';
    position: absolute;
    /* Pozycjonujemy linię dokładnie na środku kółka (szerokość kółka to 50px, więc środek to 25px) */
    left: 25px;
    /* Linia startuje od środka obecnego kółka (25px od góry wiersza) */
    top: 25px;
    /* Linia ciągnie się pionowo w dół przez cały wiersz, aż do początku kolejnego kółka */
    bottom: -45px;
    /* Ta wartość idealnie pokrywa się z marginesem 'margin-bottom: 45px' elementu */
    width: 3px;
    background: linear-gradient(to bottom, var(--color-accent), #e2e8f0);
    z-index: 1;
}

/* Zabezpieczenie usuwające zbędny margines pod ostatnim krokiem procesu */
.step-timeline-item:last-child {
    margin-bottom: 0;
    /* Ostatni krok nie potrzebuje dolnego odstępu */
}

/* 3. 🎯 KLUCZOWY RESET: Ostatni krok procesu NIE dostaje linii pod sobą! */
.step-timeline-item:last-child::before {
    display: none !important;
    /* Ta linijka całkowicie wymazuje linię pod trójkątem */
}


/* Pojedynczy wiersz kroku na osi czasu (Kółko + Tekst) */
.step-timeline-item {
    display: flex;
    /* Układa kółko z cyfrą poziomo obok bloku z tekstem */
    align-items: flex-start;
    /* Równa tekst do górnej krawędzi kółka z numerem */
    margin-bottom: 45px;
    /* Margines oddzielający jeden krok procesu od drugiego */
    position: relative;
    /* Baza dla pozycjonowania warstw z-index */
    z-index: 2;
    /* Wyciąga krok nad pionową linię tła */
}


/* Nowoczesne kółko z cyfrą (identyfikator kroku) - Wersja Poprawiona */
.step-timeline-number {
    background-color: var(--color-primary) !important;
    /* Wymusza pełne, ciemnozielone tło kółka */
    color: #ffffff !important;
    /* Kontrastowy, biały kolor cyfry wewnątrz */
    width: 50px;
    /* Szerokość idealnego koła */
    height: 50px;
    /* Wysokość idealnego koła */
    border-radius: 50%;
    /* Zaokrąglenie 50% zamienia kwadrat v idealny okrąg */
    display: flex;
    /* Uruchamia Flexbox wewnątrz kółka */
    align-items: center;
    /* Centruje cyfrę idealnie w pionie */
    justify-content: center;
    /* Centruje cyfrę idealnie w poziomie */
    font-size: 20px;
    /* Większa, dobrze widoczna czcionka */
    font-weight: 700;
    /* Grube pogrubienie cyfry */
    flex-shrink: 0;
    /* Blokuje kurczenie się kółka na mniejszych ekranach */
    box-shadow: 0 0 0 6px rgba(46, 196, 182, 0.15);
    /* Stylowa, miętowa poświata wokół kółka */

    /* 👈 KLUCZOWE LINIJKI KTÓRE NAPRAWIAJĄ BŁĄD ZASŁANIANIA NUMERÓW: */
    position: relative;
    /* Wymagane, aby z-index zaczął działać na tym elemencie */
    z-index: 10 !important;
    /* Wymusza, aby kółko z cyfrą było NAWIERZCHU linii procesu (linia ma z-index: 1) */
}

/* Kontener na tekst (Tytuł kroku + Opis) znajdujący się po prawej stronie kółka */
.step-timeline-content {
    margin-left: 30px;
    /* Odsuwa tekst o 30 pikseli w prawo od kółka z numerem */
    background-color: var(--bg-main);
    /* Jasnoszare tło dla bloku tekstowego, odróżniające go od tła sekcji */
    padding: 25px 30px;
    /* Komfortowa wolna przestrzeń dla tekstu wewnątrz ramki */
    border-radius: 12px;
    /* Nowoczesne, łagodne zaokrąglenie rogów bloku tekstowego */
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Bardzo subtelna, cieniutka ramka zamykająca kształt */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    /* Minimalistyczny, niemal niewidoczny cień pod tekstem */
}

/* Tytuł konkretnego kroku (nagłówek <h3>) */
.step-timeline-content h3 {
    color: var(--color-primary);
    /* Kolor nagłówka w odcieniu butelkowej zieleni */
    font-size: 19px;
    /* Odpowiednio dobrana wielkość pisma dla czytelności */
    font-weight: 700;
    /* Mocne pogrubienie tytułu */
    margin-bottom: 8px;
    /* Odstęp 8 pikseli pod tytułem, oddzielający go od opisu */
}

/* Sam tekst opisujący dany krok w procesie pierwszej wizyty */
.step-timeline-content p,
.step-timeline-content .method-text-paragraph {
    font-size: 14.5px;
    /* Optymalna wielkość tekstu do dłuższego czytania na ekranach */
    color: var(--color-text);
    /* Ciemny grafit gwarantujący idealny kontrast i brak zmęczenia oczu */
    line-height: 1.5;
    /* Przyjazna dla oka interlinia tekstu */
    margin-bottom: 10px;
    /* Odstęp między akapitami / przed listą punktowaną */
}

.step-timeline-content p:last-child,
.step-timeline-content .method-text-paragraph:last-child {
    margin-bottom: 0;
    /* Usuwa margines z ostatniego akapitu */
}

/* Stylizacja listy punktowanej wewnątrz kroku pierwszej wizyty */
.step-timeline-content .custom-bullet-list,
.step-timeline-content ul {
    list-style: none;
    /* Całkowicie usuwa fabryczne kropki przeglądarki */
    padding: 0;
    margin: 10px 0 0 0;
    /* Odstęp od akapitu powyżej */
}

/* Pojedynczy element listy w kroku wizyty */
.step-timeline-content .custom-bullet-list li,
.step-timeline-content ul li {
    font-size: 14.5px;
    color: var(--color-text);
    position: relative;
    padding-left: 28px;
    /* Eleganckie wcięcie na punktator */
    margin-left: 8px;
    /* Subtelne przesunięcie listy w prawo */
    margin-bottom: 8px;
    /* Komfortowy odstęp między punktami */
    line-height: 1.5;
    text-align: left;
}

.step-timeline-content .custom-bullet-list li:last-child,
.step-timeline-content ul li:last-child {
    margin-bottom: 0;
}

/* Punktator: miętowy ptaszek "✓" pasujący do reszty witryny */
.step-timeline-content .custom-bullet-list li::before,
.step-timeline-content ul li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    top: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--color-accent);
    text-shadow: 0 0 4px rgba(46, 196, 182, 0.4);
}

/* ==========================================================================
   RESPONSYWNOŚĆ MOBILNA (Dostosowanie osi czasu do ekranów smartfonów)
   ========================================================================== */
@media (max-width: 576px) {

    /* Delikatne przesunięcie pionowej linii łączącej bliżej krawędzi ekranu telefonu */
    .steps-timeline::before {
        left: 20px;
        /* Przesuwamy linię w lewo, bo kółko mobilne też się zmniejszy */
    }

    /* Zmniejszenie wymiarów kółka z numerem na małych wyświetlaczach */
    .step-timeline-number {
        width: 40px;
        /* Zmniejszamy średnicę z 50px do 40px dla oszczędności miejsca */
        height: 40px;
        font-size: 16px;
        /* Zmniejszamy cyfrę wewnątrz kółka */
        box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.15);
        /* Odchudzamy również poświatę wokół kółka */
    }

    /* Dopasowanie marginesów i paddingów tekstu na telefonie */
    .step-timeline-content {
        margin-left: 20px;
        /* Zmniejszamy odstęp tekstu od kółka z 30px do 20px */
        padding: 20px;
        /* Odchudzamy wewnętrzne marginesy tekstu, by zmieścić więcej słów w linii */
    }

    /* Subtelne zmniejszenie tytułu kroku na telefonie */
    .step-timeline-content h3 {
        font-size: 17px;
        /* Zmniejszamy nagłówek, by nie łamał się brzydko w pionie */
    }

    .step-timeline-content .custom-bullet-list li,
    .step-timeline-content ul li {
        margin-left: 0;
        padding-left: 24px;
        font-size: 14px;
    }
}

/* ==========================================================================
   STYLIZACJA SEKCJI: O MNIE (Tekst + Profesjonalne Zdjęcie)
   ========================================================================== */

/* Zabezpieczenie przewijania menu dla sekcji O Mnie */
#o-mnie {
    scroll-margin-top: 180px;
    /* 👈 Zwiększyliśmy ze 155px na 180px, aby nagłówek "O mnie" nigdy nie był ucinany przez menu */
    padding-top: 20px;
    /* Dodatkowy wewnętrzny oddech od góry dla estetyki */
}

/* Wewnętrzny kontener tekstu w sekcji O Mnie */
.about-text-content {
    text-align: left;
}

.about-section-heading {
    text-align: left;
    margin-bottom: 25px;
}

/* Formatowanie akapitów i odległości tekstowych w opisie */
.about-description-body .method-text-paragraph {
    font-size: 16px;
    /* Komfortowa wielkość czcionki do czytania biografii */
    color: var(--color-text);
    margin-bottom: 20px;
    /* Odstęp między akapitami tekstu */
    line-height: 1.6;
}

/* Stylizacja listy punktowanej z wyróżnieniami (kursy, atuty) w sekcji O Mnie */
.about-description-body .custom-bullet-list {
    list-style: none;          /* Wyłączamy domyślne czarne kropki przeglądarki */
    padding: 0;
    margin: 20px 0 25px 15px;  /* Odpycha listę od akapitów i dodaje wcięcie w prawo */
}

.about-description-body .custom-bullet-list li {
    font-size: 15.5px;
    position: relative;
    padding-left: 28px;        /* Miejsce na miętowy ptaszek po lewej */
    margin-bottom: 12px;       /* Przestrzeń pionowa między punktami zalet */
    line-height: 1.5;
}

/* Punktator w sekcji O Mnie: miętowy ptaszek "✓" spójny z resztą witryny */
.about-description-body .custom-bullet-list li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    top: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--color-accent);
    text-shadow: 0 0 4px rgba(46, 196, 182, 0.4);
}

/* Kontener otaczający profesjonalne zdjęcie */
.about-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dekoracja i badge dla zdjęcia "O mnie" */
.about-image-decoration {
    position: relative;
    width: 100%;
    max-width: 450px;
}

.about-image-decoration::before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 250px;
    height: 250px;
    background-color: var(--color-accent);
    border-radius: 24px;
    z-index: -1;
    opacity: 0.15;
    transform: rotate(10deg);
}

.about-experience-badge {
    position: absolute;
    bottom: 30px;
    left: -30px;
    background: var(--bg-light);
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 4px solid var(--color-accent);
    animation: floatBadge 4s ease-in-out infinite;
}

.about-experience-badge .badge-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.about-experience-badge .badge-label {
    font-size: 13px;
    color: var(--color-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

@keyframes floatBadge {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Stylizacja właściwego zdjęcia portretowego */
.about-main-img {
    width: 100%;
    height: auto;
    /* Automatyczne zachowanie proporcji portretu */
    border-radius: 16px;
    /* Łagodne zaokrąglenie rogów zdjęcia dopasowane do kafelków lokalizacji */
    box-shadow: 0 15px 35px rgba(18, 74, 63, 0.06);
    /* Nowoczesny, rozmyty butelkowozielony cień pod zdjęciem */
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Stylizacja zielonkawego bloku zastępczego (placeholdera), gdy nie ma jeszcze zdjęcia */
.about-placeholder-box {
    width: 100%;
    height: 400px;
    /* Wymuszona wysokość prostokąta portretowego */
    background: linear-gradient(135deg, #124a3f, #2ec4b6) !important;
    /* Piękny gradient w kolorach Twojej marki zamiast nudnej szarości */
    color: #ffffff !important;
    /* Biały napis wewnątrz */
    font-weight: 600;
    box-shadow: 0 15px 35px rgba(18, 74, 63, 0.1);
    border-radius: 16px;
}

/* Responsywność dla małych ekranów (Smartfony) */
@media (max-width: 768px) {
    #o-mnie {
        scroll-margin-top: 90px;
    }

    .about-image-wrapper {
        order: -1;
        /* 👈 UX TRYK: Na telefonie zdjęcie wskoczy NAD tekst, co wygląda znacznie lepiej marketingowo */
        margin-bottom: 30px;
        /* Odstęp zdjęcia od tekstu poniżej */
        padding-left: 20px;
    }

    .about-experience-badge {
        left: -10px;
        bottom: 20px;
        padding: 10px 15px;
    }

    .about-experience-badge .badge-number {
        font-size: 20px;
    }
}

/* ==========================================================================
   STYLIZACJA SEKCJI: KONTAKT
   ========================================================================== */
.contact-header-block {
    text-align: left;
    margin-bottom: 40px;
}

.contact-header-block .section-title {
    text-align: left;
    margin-bottom: 15px;
}

.contact-main-desc {
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 800px;
}

/* ==========================================================================
   STYLIZACJA SEKCJI: OPINIE PACJENTÓW (Siatka i Miętowe Gwiazdki)
   ========================================================================== */

/* Zabezpieczenie przewijania menu dla sekcji Opinie */
/* 🎯 WZMACNIAMY margines przewijania oraz dodajemy padding górny */
#opinie {
    scroll-margin-top: 160px !important;
    /* Wymusza zatrzymanie ekranu 180px przed sekcją, idealnie odsłaniając nagłówek */
    padding-top: 40px !important;
    /* Dodaje bezpieczną strefę buforową od góry sekcji */
}


/* Nowoczesna dwukolumnowa siatka na opinie */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dwie równe kolumny obok siebie na komputerach */
    gap: 30px;
    /* Odstęp 30 pikseli między kafelkami opinii */
    max-width: 1000px;
    /* Blokujemy szerokość, by sekcja wyglądała zgrabnie */
    margin: 0 auto;
    /* Centruje całą siatkę na środku strony */
}


/* Poprawka literówki w stylach kafelka opinii, która mogła blokować układ */
.testimonial-card {
    background-color: var(--bg-light);
    padding: 35px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 👈 POPRAWIONO LITERÓWKĘ: było 'bwtween', teraz jest prawidłowo 'space-between' */
    position: relative;
    text-align: left;
}

/* Duży, dekoracyjny, półprzezroczysty cudzysłów w tle karty (Styl Premium) */
.testimonial-card::after {
    content: '“';
    position: absolute;
    right: 25px;
    bottom: 10px;
    font-size: 90px;
    /* Bardzo duży rozmiar znaku */
    font-family: Georgia, serif;
    color: var(--color-accent);
    opacity: 0.12;
    /* Bardzo duża przezroczystość, by nie zasłaniać tekstu */
    line-height: 1;
    pointer-events: none;
    /* Sprawia, że znak ignoruje kliknięcia myszką */
}

/* 🟢 MIĘTOWE GWIAZDKI: Stylizacja kodu encji gwiazdek z HTML */
.review-stars {
    font-size: 18px;
    /* Odpowiednia wielkość gwiazdek na ekranie */
    letter-spacing: 3px;
    /* Elegancki odstęp między ramionami gwiazdek */
    margin-bottom: 15px;
    /* Odstęp gwiazdek od tekstu opinii */
    color: var(--color-accent) !important;
    /* Nadaje gwiazdkom kolor naszej świeżej, miętowej zieleni */
}

/* Stylizacja właściwego tekstu recenzji pacjenta */
.review-text {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
    font-style: italic;
    /* Pismo pochyłe (kursywa) odpowiednie dla cytatów */
    margin-bottom: 25px;
    /* Odstęp tekstu od podpisu autora */

    /* 🧠 KLUCZOWA LINIJKA: flex-grow sprawia, że tekst zajmuje całą wolną przestrzeń pionową, 
       automatycznie wpychając poniższy podpis autora na sam dół karty i wyrównując go do jednej linii! */
    flex-grow: 1;
}

/* Dolny kontener na dane autora (imię, źródło) */
.review-author-wrapper {
    display: flex;
    flex-direction: column;
    /* Układa imię i źródło jedno pod drugim */
    align-items: flex-start;
    /* Równa podpis do lewej krawędzi kafelka */
    width: 100%;
}

/* Imię i nazwisko pacjenta lub uniwersalny podpis */
.review-author {
    font-size: 16px;
    font-weight: 700;
    /* Mocne pogrubienie podpisu autora */
    color: var(--color-primary);
    /* Podpis w kolorze naszej butelkowej zieleni */
    margin-bottom: 2px;
}

/* Mały dopisek informujący o zweryfikowanym źródle z Facebooka */
.review-source {
    font-size: 12px;
    font-weight: 600;
    color: #1877f2;
    /* Kolor oficjalnego niebieskiego brandu Facebooka */
    letter-spacing: 0.2px;
}

/* ==========================================================================
   RESPONSYWNOŚĆ MOBILNA (Opinie na ekranach telefonów)
   ========================================================================== */
/* Dostosowanie marginesu przewijania dla ekranów telefonów komórkowych */
@media (max-width: 768px) {
    #opinie {
        scroll-margin-top: 105px !important;
        padding-top: 20px !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        /* Na smartfonach siatka kurczy się do jednej kolumny (karty jedna pod drugą) */
        gap: 20px;
        /* Mniejszy odstęp między kartami na telefonie */
    }

    .testimonial-card {
        padding: 25px;
        /* Odchudzamy padding na telefonie, by zmieścić więcej tekstu */
    }
}

/* ==========================================================================
   NOWA STYLIZACJA PRZYCISKÓW PAGINACJI (Stronicowanie Opinii)
   ========================================================================== */

/* Główny kontener na przyciski stron umieszczony pod siatką opinii */
.pagination-container {
    display: flex;
    justify-content: center;
    /* Centruje numery stron idealnie na środku */
    align-items: center;
    gap: 10px;
    /* Elegancki, 10-pikselowy odstęp między przyciskami */
    margin-top: 45px;
    /* Odsuwa paginację od dolnych kafelków opinii */
}

/* Uniwersalny wygląd pojedynczego przycisku numerycznego */
.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Idealne proporcje kwadratu */
    height: 40px;
    border-radius: 50%;
    /* Zamienia przycisk w idealne kółko */
    background-color: transparent;
    color: var(--color-primary);
    /* Numer strony wyświetla się w kolorze butelkowej zieleni */
    border: 2px solid var(--color-primary);
    /* Czysta zielona ramka */
    text-decoration: none;
    /* Usuwa podkreślenie linku */
    font-size: 15px;
    font-weight: 700;
    /* Grube, wyraźne cyfry */
    transition: var(--transition);
    /* Płynna animacja hoveru */
}

/* Styl dla aktywnej (obecnie przeglądanej) strony */
.pagination-link.active {
    background-color: var(--color-primary);
    /* Całkowite butelkowozielone wypełnienie */
    color: #ffffff !important;
    /* Biała, czytelna cyfra */
    border-color: var(--color-primary);
    cursor: default;
    /* Zmienia kursor na standardowy strzałki (brak interakcji z aktywną stroną) */
}

/* Stan najechania myszką na nieaktywny numer strony */
.pagination-link:not(.active):hover {
    background-color: var(--color-accent);
    /* Tło zmienia się na naszą świeżą miętę */
    border-color: var(--color-accent);
    color: var(--color-primary) !important;
    /* Kolor czcionki staje się głęboko zielony pod wysoki kontrast */
    transform: translateY(-2px);
    /* Subtelne uniesienie przycisku o 2 piksele */
}

/* Osobny styl dla strzałek nawigacyjnych (lewo/prawo) */
.pagination-link.nav-arrow {
    font-size: 18px;
    /* Nieco większe, wyraźne znaczki strzałek */
    background-color: var(--bg-main);
    /* Lekko szarawe tło dla odróżnienia od numerów */
    border-color: rgba(0, 0, 0, 0.05);
}

.pagination-link.nav-arrow:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff !important;
}


/* ==========================================================================
   NOWA STYLIZACJA BELKI PODSUMOWANIA OCEN (Reviews Summary Badge)
   ========================================================================== */

/* Główny kontener podsumowania ocen znajdujący się pod tytułem sekcji */
.reviews-summary-badge {
    background-color: var(--bg-main);
    /* Szarawe, neutralne tło odróżniające belkę od bieli sekcji */
    max-width: 600px;
    /* Ograniczamy szerokość, by belka była zgrabną pigułką */
    margin: 0 auto 50px auto;
    /* Centruje belkę i odsuwa ją o 50px od pierwszych kafelków opinii */
    padding: 18px 30px;
    /* Wolna przestrzeń wewnątrz belki */
    border-radius: 50px;
    /* Pełne zaokrąglenie krawędzi tworzące nowoczesny kształt pigułki */
    display: flex;
    /* Układa gwiazdki i tekst w jednej linii poziomej */
    align-items: center;
    /* Środkuje elementy idealnie w pionie */
    justify-content: center;
    /* Środkuje całą zawartość w poziomie */
    gap: 20px;
    /* 20-pikselowy odstęp między gwiazdkami a tekstem podsumowania */
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 15px rgba(18, 74, 63, 0.02);
}

/* Gwiazdki zbiorcze wewnątrz belki podsumowania */
.summary-stars {
    font-size: 20px;
    /* Nieco większe, wyraźne gwiazdki */
    color: var(--color-accent);
    /* Nasz flagowy, miętowy kolor marki */
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(46, 196, 182, 0.3);
    /* Delikatna miętowa poświata pod gwiazdkami */
}

/* Tekst podsumowania (np. Średnia ocena 5.0...) */
.summary-text {
    font-size: 15px;
    color: var(--color-text);
    /* Kolor ciemnego grafitu */
    margin: 0;
    line-height: 1;
    /* Reset linii dla idealnego wyśrodkowania z gwiazdkami */
}

/* Pogrubione liczby statystyk wewnątrz tekstu */
.summary-text strong {
    color: var(--color-primary);
    /* Statystyki wyświetlają się w kolorze butelkowej zieleni */
    font-weight: 700;
}

/* Dostosowanie przycisków paginacji pod obsługę AJAX */
button.pagination-link {
    border-style: solid;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

button.pagination-link.active {
    cursor: default;
}

/* ==========================================================================
   NOWOCZESNE UI DLA SEKCJI KONTAKTOWYCH (Baza MySQL Relacyjna)
   ========================================================================== */

/* Kontener trzymający karty kontaktowe w pionie */
.contact-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Elegancki odstęp między kafelkiem danych a kafelkiem rejestru */
}

/* Pojedyncza, nowoczesna karta UI dla sekcji informacyjnej */
.contact-ui-card {
    background-color: var(--bg-light);
    /* Czyste, białe tło karty kontrastujące ze szarym tłem strony */
    padding: 25px 30px;
    border-radius: 14px;
    /* Łagodne zaokrąglenie rogów zgodne z całym layoutem */
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01);
    /* Bardzo delikatny, nowoczesny cień */
}

/* Nagłówek wewnątrz karty kontaktowej (Ikona + Tytuł) */
.contact-card-header {
    display: flex;
    align-items: center;
    /* Centruje ikonę i napis w pionie względem siebie */
    gap: 15px;
    /* Odstęp między kółkiem ikony a tekstem nagłówka */
    margin-bottom: 20px;
    /* Przestrzeń odsuwająca nagłówek od wierszy z danymi */
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
    /* Subtelna linia przerywana pod nagłówkiem */
}

/* Kółko tła dla ikony wektorowej SVG */
.contact-svg-icon {
    background-color: rgba(46, 196, 182, 0.1);
    /* Jasny, miętowy bufor tła */
    color: var(--color-primary);
    /* Kolor samej ikony to nasza głęboka butelkowa zieleń */
    width: 44px;
    height: 44px;
    border-radius: 10px;
    /* Nowoczesny kształt zaokrąglonego kwadratu dla ikon */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tytuł bloku (np. Dane kontaktowe) */
.contact-card-header h3 {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

/* Kontener na wiersze z polami informacyjnymi */
.contact-card-body-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Kompaktowy odstęp między wierszami danych */
}

/* Pojedynczy wiersz danych (Label po lewej, Wartość po prawej) */
.contact-field-row {
    display: flex;
    justify-content: space-between;
    /* Rozpycha nazwę pola w lewo, a wartość w prawo */
    align-items: center;
    font-size: 14.5px;
    line-height: 1.4;
}

/* Etykieta pola (np. Telefon, NIP) */
.field-label {
    color: var(--color-muted);
    /* Stonowany szary dla nazw pól */
    font-weight: 500;
}

/* Wartość pola (np. numer telefonu, numer NIP) */
.field-value {
    color: var(--color-text);
    /* Wyraźny grafitowy dla właściwych danych */
    font-weight: 600;
    /* Pogrubienie danych dla lepszej czytelności */
    text-align: right;
    /* Wyrównanie danych do prawej strony */
}

/* Interaktywne linki wewnątrz pól (E-mail, Telefon) */
.contact-interactive-link {
    color: var(--color-primary);
    /* Linki wyróżniają się kolorem butelkowej zieleni */
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

/* Efekt najechania myszką na link kontaktowy */
.contact-interactive-link:hover {
    color: var(--color-accent);
    /* Zmiana koloru linku na żywą miętę */
    border-bottom-color: var(--color-accent);
    /* Pojawienie się miętowej linii podkreślenia */
}

/* Responsywność na ekranach telefonów */
@media (max-width: 576px) {
    .contact-field-row {
        flex-direction: column;
        /* Na małych smartfonach nazwa i wartość układają się pionowo */
        align-items: flex-start;
        /* Równanie tekstu do lewej krawędzi */
        gap: 2px;
    }

    .field-value {
        text-align: left;
    }

    .contact-ui-card {
        padding: 20px;
    }
}

/* ==========================================================================
   NOWE, DOPRACOWANE UI FORMULARZA KONTAKTOWEGO (Wersja Poprawiona)
   ========================================================================== */

/* Bezpieczny punkt zatrzymania ekranu po kliknięciu kotwicy #kontakt */
#kontakt {
    scroll-margin-top: 155px;
    padding-bottom: 60px;
}

#kontakt .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Dwie kolumny o równej szerokości */
    gap: 40px !important;
    /* Przerwa między kolumnami danych a formularzem */
    align-items: stretch !important;
    /* Rozciąga oba elementy równo do dolnej krawędzi */
    margin-top: 0 !important;
    /* Gwarantuje brak przesunięcia od góry */
}



/* 2. Rozciągamy kontener owijający formularz */
.contact-form-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* 👈 Sprawia, że wrapper zajmuje pełną wysokość prawej kolumny */
}

/* 3. Zmuszamy sam biały kafelek formularza do rozciągnięcia się na 100% wysokości */
.contact-form-wrapper .main-form {
    background-color: var(--bg-light) !important;
    padding: 30px 35px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin-top: 0 !important;
    /* 👈 NOWE LINIJKI: Formularz wypełni całą dostępną przestrzeń w pionie */
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    /* Wymusza rozciągnięcie do dolnej krawędzi lewych kart */
    position: relative !important;
}

.main-form.is-sending-success> :not(#form-ajax-response) {
    display: none !important;
}

.main-form.is-sending-success #form-ajax-response {
    display: block !important;
    flex: 1;
}

/* Każda grupa (label + input) musi być osobnym blokiem pionowym */
.form-group {
    display: flex !important;
    flex-direction: column !important;
    /* Wymusza, aby podpis był ZAWSZE nad polem wpisywania, a nie obok! */
    align-items: flex-start !important;
    /* Równa tekst do lewej */
    margin-bottom: 20px !important;
    /* Bezpieczny odstęp w pionie między polami */
    width: 100% !important;
}

/* Układ dwukolumnowy dla Imienia/Telefonu standing obok siebie */
.form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Dwie równe kolumny obok siebie */
    gap: 20px !important;
    /* 20-pikselowy odstęp poziomy między polami */
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Stylizacja etykiet tekstowych (Napisy nad polami, np. Imię i Nazwisko) */
.main-form label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    /* Czytelne pogrubienie nazwy pola */
    color: var(--color-text) !important;
    /* Ciemnografitowy kolor pisma */
    margin-bottom: 8px !important;
    /* Odstęp odsuwający napis od pola tekstowego poniżej */
    text-align: left !important;
}

/* 🟢 UNIFIKACJA PÓL TEKSTOWYCH: input, select oraz duże pole textarea */
.main-form input[type="text"],
.main-form input[type="tel"],
.main-form input[type="email"],
.main-form select,
.main-form textarea {
    width: 100% !important;
    /* Pola bezwzględnie zajmują pełną szerokość */
    max-width: 100% !important;
    padding: 12px 16px !important;
    /* Komfortowe, duże przestrzenie na wpisywany tekst */
    border: 1px solid #cbd5e1 !important;
    /* Elegancka, szara krawędź pola */
    border-radius: 8px !important;
    /* Delikatne zaokrąglenie rogów pól tekstowych */
    background-color: var(--bg-light) !important;
    font-family: var(--font-main) !important;
    font-size: 14.5px !important;
    color: var(--color-text) !important;
    outline: none !important;
    box-sizing: border-box !important;
    /* Zabezpiecza przed rozpychaniem pól poza kartę */
    transition: var(--transition) !important;
    /* Płynne podświetlenie podczas kliknięcia */
}

/* Specjalne wymiary dla dużego pola wiadomości */
.main-form textarea {
    resize: vertical !important;
    /* Pozwala pacjentowi rozciągać pole tylko w pionie, nie psując szerokości */
    min-height: 120px !important;
    /* Wygodna wysokość startowa na opis problemu */
}

/* 🔥 EFEKT KLIKNIĘCIA W POLE (Focus) */
.main-form input:focus,
.main-form select:focus,
.main-form textarea:focus {
    border-color: var(--color-accent) !important;
    /* Krawędź zmienia kolor na naszą świeżą miętę */
    box-shadow: 0 0 0 3px rgba(46, 196, 182, 0.12) !important;
    /* Nowoczesna, miętowa poświata wokół pola */
}

/* 4. Popychamy przycisk "Wyślij zgłoszenie" na sam dół formularza, aby zyskać piękny oddech */
.main-form .btn-primary {
    margin-top: auto !important;
    /* 👈 Przycisk zawsze idealnie wyrówna się do dołu białego kafelka */
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: var(--transition) !important;
}

/* Efekt najechania myszką na przycisk wyślij */
.main-form .btn-primary:hover {
    background-color: var(--color-accent) !important;
    /* Przycisk zmienia kolor na miętowy */
    color: var(--color-primary) !important;
    /* Tekst staje się ciemnozielony dla idealnego kontrastu */
}

/* ==========================================================================
   RESPONSYWNOŚĆ MOBILNA FORMULARZA (Smartfony)
   ========================================================================== */
/* Responsywność dla telefonów (na smartfonach wyłączamy stretch, bo kolumny są jedna pod drugą) */
@media (max-width: 768px) {
    #kontakt {
        scroll-margin-top: 185px;
    }

    #kontakt .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .contact-form-wrapper .main-form {
        padding: 20px !important;
        /* Odchudzamy padding na małych ekranach */
    }

    .contact-form-wrapper .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* ==========================================================================
   RESPONSYWNOŚĆ BELKI PODSUMOWANIA (Modyfikacje na telefony)
   ========================================================================== */
@media (max-width: 650px) {
    .reviews-summary-badge {
        flex-direction: column;
        /* Na smartfonach układamy gwiazdki NAD tekstem, bo pigułka nie zmieści się poziomo */
        gap: 8px;
        /* Zmniejszamy odstęp między nimi */
        border-radius: 16px;
        /* Zmieniamy kształt z pigułki na zaokrąglony prostokąt, by tekst ładnie się zawijał */
        padding: 20px;
        margin-bottom: 40px;
    }

    .summary-text {
        text-align: center;
        /* Centrujemy tekst na ekranie telefonu */
        line-height: 1.4;
        /* Zwiększamy interlinię, bo tekst na telefonie rozbije się na 2 linijki */
    }
}

/* ==========================================================================
   OSTATECZNA POPRAWKA: Wyśrodkowanie nagłówków i wyrównanie dolnej krawędzi
   ========================================================================== */
/* ==========================================================================
   PERFEKCYJNE WYRÓWNANIE SEKCJI KONTAKTOWEJ (Równy Start + Stała Wysokość)
   ========================================================================== */
/* ==========================================================================
   PERFEKCYJNE WYRÓWNANIE SEKCJI KONTAKTOWEJ (Równy Start + Stała Wysokość)
   ========================================================================== */

/* 1. 🎯 WYŚRODKOWANIE NAGŁÓWKA I PODTYTUŁU SEKCJI */
.contact-header-block {
    text-align: center !important;
    /* Wymusza wyśrodkowanie tekstów w poziomie */
    margin-bottom: 50px !important;
    /* Zwiększamy odstęp od kafelków dla lepszego balansu */
}

.contact-header-block .section-title {
    text-align: center !important;
    /* Środkuje duży tytuł "Napisz lub zadzwoń" */
}

.contact-header-block .contact-main-desc {
    margin: 0 auto !important;
    /* Centruje blok opisu na środku ekranu */
    max-width: 650px !important;
    /* Ogranicza szerokość opisu, aby ładnie łamał się w pionie */
    text-align: center !important;
}

/* 2. 🎯 WYRÓWNANIE WYSOKOŚCI: Obie kolumny startują i kończą się w tej samej linii */
#kontakt .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: stretch !important;
    /* Zmusza lewą i prawą kolumnę do posiadania IDENTYCZNEJ wysokości */
}

/* 3. ROZCIĄGANIE LEWEJ KOLUMNY (Aby karty wypełniły przestrzeń i zrównały się z formularzem) */
.contact-info-side .contact-blocks-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* Zajmuje pełną wysokość lewej kolumny */
}

/* Pierwsza karta (Dane kontaktowe) i druga karta (Informacje o praktyce) rosną proporcjonalnie */
.contact-info-side .contact-ui-card {
    flex-grow: 1 !important;
    /* Obie karty automatycznie i równomiernie rozciągną się w pionie */
    display: flex !important;
    flex-direction: column !important;
}

/* Popychamy pola wewnątrz kart, aby zachować symetrię wewnętrzną */
.contact-card-body-fields {
    margin-top: auto !important;
    /* Rozsuwa zawartość karty dla idealnego ładu */
}

/* 4. ROZCIĄGANIE PRAWEJ KOLUMNY (Formularz) */
.contact-form-wrapper {
    height: 100% !important;
}

.contact-form-wrapper .main-form {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--bg-light) !important;
    padding: 30px 35px 35px 35px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: visible !important;
}

/* 5. 🧠 PERFEKCYJNA REZERWACJA MIEJSCA POD POLAMI INPUTÓW (Brak skakania / CLS) */
.field-error-msg {
    display: block !important;
    min-height: 18px !important;
    height: auto !important;
    margin-top: 4px !important;
    /* Stały odstęp pod ramką inputa */
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    /* Idealne centrowanie tekstu w pionie */
    text-align: left !important;
    box-sizing: border-box !important;
    transition: color 0.2s ease-in-out !important;
    /* Płynne zapalanie koloru bez ruchu polami */

    /* DOMYŚLNIE: Tekst zajmuje swoje miejsce, ale jest niewidoczny (przezroczysty) */
    color: transparent !important;
}

/* Klasa aktywacji: Gdy JS wykryje błąd, po prostu zmienia kolor tekstu na czerwień */
.field-error-msg.active-error {
    color: #c92a2a !important;
    /* Wyrazista, medyczna czerwień ostrzegawcza */
}

/* 6. 🎯 SCALONY, PANCERNY PRZYCISK WYSYŁANIA (Zawsze na samym dole kafelka) */
.contact-form-wrapper .btn-primary {
    display: block !important;
    /* Wymusza widoczność elementu na stronie */
    visibility: visible !important;
    /* Zabezpiecza przed ukryciem przez inne style */
    width: 100% !important;
    /* Rozciąga przycisk na pełną szerokość */
    background-color: var(--color-primary) !important;
    /* Nasza butelkowa zieleń */
    color: #ffffff !important;
    /* Biały tekst */
    border: none !important;
    padding: 14px !important;
    /* Wysoki, komfortowy guzik do klikania */
    font-size: 15px !important;
    font-weight: 700 !important;
    /* Grube pogrubienie napisu */
    border-radius: 8px !important;
    /* Nowoczesne zaokrąglenie */
    cursor: pointer !important;
    /* Zmienia kursor w rączkę */
    margin-top: auto !important;
    /* Popycha przycisk na sam dół rozciągniętego kafelka */
    transition: var(--transition) !important;
}

/* Efekt najechania myszką na przycisk wyślij */
.contact-form-wrapper .btn-primary:hover {
    background-color: var(--color-accent) !important;
    /* Zmiana na świeżą miętę */
    color: var(--color-primary) !important;
    /* Ciemnozielony tekst pod wysoki kontrast */
}

/* ==========================================================================
   MIKROANIMACJA SUKCESU: Odlatujący Papierowy Samolocik (Opcja 2)
   ========================================================================== */

/* Główny kontener pozycjonujący animację wewnątrz kafelka */
.animation-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    z-index: 10;
    padding: 0 30px;
    box-sizing: border-box;
}

/* Wrapper trzymający samolocik i nadający strefę odlotu */
.paper-plane-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    overflow: visible;
    /* Pozwala samolocikowi wylecieć poza obszar ikonki */
}

/* Właściwa ikona SVG z zapiętą dwufazową animacją (Start -> Wystrzał) */
.paper-plane-svg {
    transform-origin: center;
    /* Spina dwie animacje: najpierw drżenie silnika, potem potężny start w kosmos */
    animation:
        planeWiggle 0.5s ease-in-out infinite alternate,
        planeTakeOff 1.2s cubic-bezier(0.25, 1, 0.50, 1) forwards 0.6s;
}

/* Napis podziękowania pojawiający się z płynnym wyłonieniem (Fade-in) */
.success-plane-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    /* Ciemnozielony kolor marki */
    margin: 0;
    opacity: 0;
    animation: textFadeInUp 0.5s ease-out forwards 0.4s;
}

/* PHASE 1: Subtelne drżenie i pochył samolocika przed startem */
@keyframes planeWiggle {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(2px, -2px) rotate(-3deg);
    }
}

/* PHASE 2: 🚀 WYSTRZAŁ! Samolocik robi pętlę i ucieka po skosie w prawy górny róg z zanikaniem */
@keyframes planeTakeOff {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }

    30% {
        transform: translate(-10px, 10px) scale(1.05) rotate(-15deg);
        opacity: 1;
    }

    100% {
        transform: translate(350px, -350px) scale(0.4) rotate(25deg);
        opacity: 0;
        /* Samolocik całkowicie znika w locie */
    }
}

/* Płynne wyłonienie tekstu od dołu */
@keyframes textFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsywność dla małych ekranów (smartfony) */
@media (max-width: 768px) {
    @keyframes planeTakeOff {
        0% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
        }

        100% {
            transform: translate(180px, -220px) scale(0.5);
            opacity: 0;
        }

        /* Krótsza trasa lotu na wąskim ekranie telefonu */
    }
}

/* ==========================================================================
   BRAKUJĄCE KLASY DLA SEKCJI: JAK PRACUJĘ I GDZIE PRACUJĘ
   ========================================================================== */

/* Metody Pracy */
.methods-timeline-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.method-custom-card {
    background: var(--bg-light);
    padding: 30px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.method-custom-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(46, 196, 182, 0.15);
}

.method-card-title {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    border-left: 4px solid var(--color-accent);
    padding-left: 15px;
}

.method-card-body {
    padding-left: 19px;
}

/* Lokalizacje / Gdzie pracuję */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

.location-actions {
    margin-top: auto;
    width: 100%;
    padding-top: 20px;
}

@media (max-width: 768px) {
    #kontakt .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    #kontakt .contact-form-wrapper,
    #kontakt .contact-form-wrapper .main-form {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   PREMIUM UX/UI ADDITIONS
   ========================================================================== */

/* 1. NOISE OVERLAY */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}
.dark-theme .noise-overlay {
    opacity: 0.06;
}

/* 2. CUSTOM CURSOR — Sleek premium arrow */
@media (pointer: fine) {
    body, a, button, input, textarea, select {
        cursor: none !important;
    }
    .custom-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 22px; height: 22px;
        pointer-events: none;
        z-index: 10000;
        color: var(--color-primary);
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                    color 0.25s ease,
                    filter 0.25s ease;
    }
    .custom-cursor svg {
        width: 100%; height: 100%;
        display: block;
    }
    .custom-cursor.hover {
        transform: scale(1.3);
        color: var(--color-accent);
        filter: drop-shadow(0 0 8px rgba(46, 196, 182, 0.5));
    }
    .dark-theme .custom-cursor {
        color: #ffffff;
    }
    .dark-theme .custom-cursor.hover {
        color: var(--color-accent);
    }
}
@media (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
}

/* 3. GLASSMORPHISM FOR CARDS */
.testimonial-card, .price-category, .method-custom-card, .step-card {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.04) !important;
}
.dark-theme .testimonial-card, .dark-theme .price-category, .dark-theme .method-custom-card, .dark-theme .step-card {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* 4. OVERLAPPING & PARALLAX FIXES */
.about-image-wrapper {
    position: relative;
    z-index: 2;
    margin-top: -60px; /* Overlapping onto the previous section slightly */
}
@media (max-width: 768px) {
    .about-image-wrapper {
        margin-top: 0;
    }
}