/* ------------------- Accordion ------------------- */
    .accordion_margin:before {
        content: "";
        margin-top: 0;
        float: left;
        width: 100%;
    }
    .accordion_margin:after {
        content: "";
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }

    [accordion-button].active {
        /* Active accordion styles go here */
    }

    [accordion-button].active .rotate_bar {
        rotate: -90deg;
        transition: rotate .3s ease-in-out;
    }

    /* Program szkoleń: numery liczone automatycznie (klient nie wpisuje ich ręcznie). */
    .program-list {
        counter-reset: program;
    }

    .program-list .accordion-item {
        counter-increment: program;
    }

    .program-number::before {
        content: counter(program, decimal-leading-zero);
    }

    /* Numer podświetla się przy rozwinięciu pozycji. */
    [accordion-button].active .program-number {
        background-color: var(--color-secondary-500);
        border-color: var(--color-secondary-500);
    }

    /* Chevron obraca się w stanie aktywnym. */
    [accordion-button].active .program-chevron {
        transform: rotate(180deg);
    }

    /* Przełączanie etykiety Rozwiń / Zwiń. */
    [accordion-button] .program-label-close {
        display: none;
    }

    [accordion-button].active .program-label-open {
        display: none;
    }

    [accordion-button].active .program-label-close {
        display: inline;
    }

    [accordion-panel].active {
        display: block;
    }

    [accordion-button] {
        cursor: pointer;
    }

    [accordion-panel] {
        display: none;
        overflow: hidden;
        height: 0;
        transition: height .3s ease-in-out;
    }

    /* Show more FAQ button */
    @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

    .hide-accordion {
        max-height: 0;
        display: none;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .show-more-btn {
        margin: 20px auto 0 auto;
        display: block;
        font-family: 'Inter', sans-serif;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        padding: 18px 0 18px 0;
        background-color: #000;   /* TODO kolor projektu (przycisk „Pokaż więcej") */
        transition: transform 300ms;
        border: none;
        cursor: pointer;
        border-radius: 24px;
    }

    .show-more-btn:hover {
        transform: scale(1.05);
    }

/* ------------------- Tabs ------------------- */
    [tab-button].active {
        /* Active tab styles go here */
    }

    [tab-panel].active {
        display: block;
        animation: fadeIn .5s ease-in-out;
    }

    [tab-button] {
        cursor: pointer;
    }

    [tab-panel] {
        display: none;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }


/* ------------------- Mobile menu ------------------- */
    .bar{
        display: block;
        width: 25px;
        height: 2px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #000;
    }

    /* Hamburger SVG: bary zwężają się do zera przy otwarciu menu i wracają przy zamknięciu. */
    .hamburger-bar {
        transform-box: fill-box;
        transform-origin: left center;
        transition: transform 0.35s ease;
    }
    .hamburger-bar:nth-child(2) { transition-delay: 0.05s; }
    .hamburger-bar:nth-child(3) { transition-delay: 0.1s; }
    .hamburger.active .hamburger-bar { transform: scaleX(0); }

    @media(max-width:1023px){

        .nav-menu{
        position: fixed;
        z-index: 1001;
        opacity: 0;
        transform: translateX(-100%);
        top: 0;
        transition: 0.6s;
        height: calc(100dvh);
        }

        .nav-menu.active{
            opacity: 1;
            transform: translateX(-12px);
        }

        .nav-overlay.active {
            opacity: 0.5;
            visibility: visible;
            pointer-events: auto;
        }

         .hamburger.active .bar:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }
        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active .bar:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }
    }

/* ------------------- Popup ------------------- */
            /* Popup specyfic styles */


/* ------------------- Gallery (lightbox - kropki paginacji) ------------------- */
    .gallery-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background-color: #fff;
        opacity: 0.2;
        transition: opacity .2s ease;
    }

    .gallery-dot-active {
        opacity: 1;
    }


/* ------------------- Megamenu (Dropdown mwnu) ------------------- */
    [megamenu-panel] {
        display: none;
    }

    [megamenu-panel].active {
        display: flex;
    }

    .megamenu-item svg.active{
        rotate: 180deg;
    }

/* ------------------- Custom scroll ------------------- */
    .hide-scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scroll::-webkit-scrollbar {
        display: none;
    }

    .scroller {
        scrollbar-width: auto;
        scrollbar-color: #1E1E1E #E2E2E2;
    }

    .scroller::-webkit-scrollbar {
        height: 5px;
    }

    .scroller::-webkit-scrollbar-track {
        background: #E2E2E2;
        border-radius: 20px;
    }

    .scroller::-webkit-scrollbar-thumb {
        background-color: #1E1E1E;
        border-radius: 20px;
    }


/* ------------------- Smooth scroll ------------------- */
    html {
        scroll-behavior: smooth;
    }


/* ------------------- Contact Form 7 ------------------- */
    /* Układ formularza robimy klasami Tailwinda w shortcode (class:...), a <p>/<br>
       wyłącza filtr w inc/custom.php. To, czego CF7 nie przyjmie w class: (arbitrary
       [..], warianty focus:/hover:, krycie z /) ustawiamy tutaj. */

    /* Pola: ramka wg designu - radius 10px, 1px #202020 przy 50% krycia, białe tło. */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form select,
    .wpcf7-form textarea {
        border: 1px solid rgba(32, 32, 32, 0.5);
        border-radius: 10px;
        background-color: #fff;
    }

    /* Select: zdejmujemy natywną strzałkę, żeby nie dublowała się z naszym SVG chevron. */
    .wpcf7-form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: none;
    }

    /* Checkbox zgody: własny wygląd zamiast domyślnego przeglądarki. */
    .wpcf7-acceptance input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        margin: 0;
        border: 1.5px solid #202020;
        border-radius: 5px;
        background-color: #fff;
        cursor: pointer;
    }
    .wpcf7-acceptance input[type="checkbox"]:checked {
        background-color: var(--color-secondary-500);
        border-color: var(--color-secondary-500);
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    }

    /* Zgoda: checkbox flush do lewej + tekst obok. Layout (flex) jest na kontenerze
       w shortcode; tu zerujemy własne marginesy wrapperów CF7 (domyślnie wcinają
       akceptację) i spłaszczamy strukturę do inline. */
    .wpcf7-list-item {
        margin: 0;
    }
    .wpcf7-form-control-wrap {
        margin: 0;
    }
    .wpcf7-acceptance,
    .wpcf7-acceptance .wpcf7-list-item,
    .wpcf7-acceptance label {
        display: inline;
        margin: 0;
        padding: 0;
    }

    /* Komunikat walidacji pod polem. */
    .wpcf7-not-valid-tip {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: #dc2626;
    }

    .wpcf7-not-valid {
        border-color: #dc2626 !important;
    }

    /* Zbiorczy komunikat CF7 (sukces/błąd) pod formularzem. */
    .wpcf7-response-output {
        margin: 1rem 0 0;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .wpcf7-spinner {
        margin-left: 0.5rem;
    }

    /* Hover przycisku wysyłki - wariant hover: nie przechodzi przez class: CF7. */
    .wpcf7-form input[type="submit"]:hover {
        background-color: var(--color-secondary-700);
    }

    /* Moduły - checkbox wielokrotnego wyboru jako karty. CF7 renderuje [checkbox]
       jako .wpcf7-checkbox > .wpcf7-list-item > label > input + span; wewnętrzny
       markup generuje wtyczka, więc siatkę i podświetlenie kart robimy tu. Scope
       .moduleCheckboxes, żeby nie ruszyć checkboxa zgody (.wpcf7-acceptance). */
    .moduleCheckboxes .wpcf7-checkbox {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    @media (min-width: 640px) {
        .moduleCheckboxes .wpcf7-checkbox {
            grid-template-columns: 1fr 1fr;
        }
    }
    .moduleCheckboxes .wpcf7-list-item {
        margin: 0;
    }
    .moduleCheckboxes .wpcf7-list-item label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border: 1px solid var(--color-gray-300);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
    }
    .moduleCheckboxes .wpcf7-list-item label:hover {
        border-color: var(--color-primary-500);
    }
    .moduleCheckboxes .wpcf7-list-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin: 0;
        accent-color: var(--color-secondary-500);
        cursor: pointer;
    }
    /* :has = odpowiednik has-[:checked] z podglądu w blocks.html */
    .moduleCheckboxes .wpcf7-list-item label:has(input:checked) {
        border-color: var(--color-primary-500);
        background-color: color-mix(in oklab, var(--color-primary-500) 5%, transparent);
    }
    .moduleCheckboxes .wpcf7-list-item-label {
        font-family: var(--font-Poppins);
        font-size: 1rem;
        color: var(--color-dark_text);
    }


/* ------------------- Trainer bullets (karta trenera) ------------------- */
    /* Lista punktów trenera. Marker (czerwona kropka z halo) to inline SVG w bloku
       trainer-bullet, nie ::before. Tu tylko reset domyślnego punktora <ul>. */
    .trainer-bullets {
        list-style: none;
        margin: 0;
        padding: 0;
    }