/* ============================================================
   SPIS TREŚCI - components.css (style komponentów JS i wtyczek)
   1. ACCORDION (panel: animacja wysokości, otwarty = height auto; reduced motion bez animacji)
   2. TABS
   3. MOBILE MENU (stan otwarty .nav-menu.active poniżej xl)
   4. POPUP
   5. GALLERY (lightbox - kropki paginacji)
   6. MEGAMENU (panele, chevron, przyciemnienie strony od xl)
   7. CUSTOM SCROLL
   8. SMOOTH SCROLL
   9. CONTACT FORM 7 (pola, zgoda, karty obszaru kb-obszar, pigułki kb-pigulki, walidacja)
   10. WIDEO (iframe wstawiany przez wideo.js w miejsce miniatury)
   11. PRZYCISK TELEFONU (dymek .telDymek pokazywany przez telefon.js)
   ------------------------------------------------------------
   Reguły z tego pliku są poza @layer, więc wygrywają z utilities Tailwinda,
   także z wariantami (xl:, md:). Stan, który ma działać tylko na jednym
   breakpoincie, zamykaj w media query, inaczej nadpisze klasy z markupu.
   ============================================================ */

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

    /* Wygląd buttona w stanie otwartym (ikona, kolory, padding) dawaj klasami TW
       z wariantem group-[.active]: / [&.active]: w markupie, nie tutaj: reguła
       poza @layer przykryłaby klasy z markupu. */
    [accordion-button] {
        cursor: pointer;
    }

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

    /* Wysokość ustawia accordion.js: px tylko na czas animacji, otwarty panel
       kończy z height: auto. Czas animacji zmieniasz tutaj, JS czyta go sam. */
    [accordion-panel] {
        display: none;
        overflow: hidden;
        height: 0;
        transition: height .3s ease-in-out;
    }

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

    @media (prefers-reduced-motion: reduce) {
        [accordion-panel] {
            transition: none;
        }
    }

    /* 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);
    }

/* ------------------- 2. 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; }
    }


/* ------------------- 3. Mobile menu ------------------- */
    /* Położenie, stan zamknięty (invisible opacity-0) i przejście siedzą w klasach TW
       na .nav-menu, ikona hamburgera przełącza się wariantami [&.active]:. Tu tylko
       stan otwarty. Próg = breakpoint xl, od którego działa nawigacja desktopowa
       (ten sam w mobilemenu.js); bez media query reguła przykryłaby xl:visible. */
    @media (width < 80rem) {
        .nav-menu.active {
            visibility: visible;
            opacity: 1;
        }
    }

/* ------------------- 4. Popup ------------------- */
            /* Popup specyfic styles */


/* ------------------- 5. 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;
    }


/* ------------------- 6. Megamenu (dropdown menu) ------------------- */
    /* Display panelu ustawia wyłącznie ta para reguł (poza @layer, więc klasy display
       na panelu, np. xl:grid, nic nie zmienią). Kierunek flex-col i układ wnętrza w TW. */
    [megamenu-panel] {
        display: none;
    }

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

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

    /* Przyciemnienie strony pod otwartym panelem, tylko w nawigacji desktopowej
       (poniżej xl panele rozwijają się w menu mobilnym jak akordeon). Stan zamknięty
       i przejście w klasach TW na .megamenu-overlay; klik w overlay zamyka panel
       (megamenu.js zamyka po kliknięciu poza .megamenu-item). */
    @media (width >= 80rem) {
        body:has([megamenu-panel].active) .megamenu-overlay {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }
    }

/* ------------------- 7. 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;
    }


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


/* ------------------- 9. Contact Form 7 ------------------- */
    /* Układ formularza robimy klasami Tailwinda w zwykłym HTML między form-tagami,
       a <p>/<br> wyłącza filtr w inc/custom.php. Przez opcję class: samego tagu
       przechodzą TYLKO proste klasy (litery/cyfry/dywiz); warianty (focus:),
       arbitrary ([..]) i kroki .5 psują parser form-tagów - wygląd pól siedzi tutaj.
       Podgląd formularza w bloku kontakt-formularz (bloki-kontakt.html) odtwarza DOM
       generowany przez CF7 w kontenerze .wpcf7-form, więc te reguły stylują i front,
       i podgląd w Pinegrow.
       9a. Pola tekstowe, textarea, select (+ wariant formularza z głównej kb-form-glowna)
       9b. Zgoda (acceptance)
       9c. Karty wyboru obszaru (radio z class:kb-obszar)
       9d. Pigułki rodzaju sprawy (radio z class:kb-pigulki)
       9e. Walidacja i komunikaty */

    /* --- 9a. Pola tekstowe, textarea, select --- */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="number"],
    .wpcf7-form select,
    .wpcf7-form textarea {
        display: block;
        width: 100%;
        height: 3.375rem;
        padding: 0 1.125rem;
        border: 1px solid var(--color-light_blue-600);
        border-radius: 0.75rem;
        background-color: var(--color-light_blue-100);
        font: inherit;
        font-size: 0.9375rem;
        line-height: normal;
        color: var(--color-brand_dark);
        transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .wpcf7-form textarea {
        height: 9.1875rem;
        padding: 1rem 1.125rem;
        line-height: 1.5;
        resize: none;
    }

    /* Formularz ze strony głównej (wrapper kb-form-glowna w kodzie CF7): niższe pole
       opisu i jaśniejsze kółko ikony obszaru, tak jak w designie tej sekcji. */
    .kb-form-glowna textarea {
        height: 7.75rem;
    }

    .kb-form-glowna .kb-obszar label:not(:has(:checked))::before {
        background-color: var(--color-light_blue-300);
    }

    .wpcf7-form input::placeholder,
    .wpcf7-form textarea::placeholder {
        color: var(--color-neutral-500);
        opacity: 1;
    }

    .wpcf7-form input:focus,
    .wpcf7-form select:focus,
    .wpcf7-form textarea:focus {
        outline: none;
        border-color: var(--color-primary-500);
        background-color: var(--color-white);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 10%, transparent);
    }

    /* Select: bez natywnej strzałki (dubluje się z własnym SVG chevron w wrapperze .relative). */
    .wpcf7-form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: none;
    }

    /* Wrappery CF7 bez marginesów (inaczej listy radio i zgoda mają wcięcie z lewej);
       odstępy reguluje klasa mt-* na kontenerze w shortcode. Wrapper pola jako blok,
       żeby input z width: 100% brał szerokość kolumny. Prefiks .wpcf7 podnosi
       specyficzność: arkusz wtyczki ładuje się później i jego margin-left: 1em
       wygrywał z samą klasą. */
    .wpcf7 .wpcf7-list-item,
    .wpcf7 .wpcf7-form-control-wrap {
        margin: 0;
    }

    .wpcf7-form-control-wrap {
        display: block;
    }

    /* --- 9b. Zgoda (acceptance) ---
       Wariant z treścią w tagu: [acceptance nazwa] tekst [/acceptance]. CF7 owija
       wtedy checkbox i tekst w jeden <label>, klik w tekst zaznacza zgodę. Scope pod
       .wpcf7-acceptance, żeby wygrać z globalnymi regułami dla input[type=checkbox]. */
    .wpcf7-acceptance .wpcf7-list-item label {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin: 0;
        cursor: pointer;
    }

    .wpcf7-acceptance input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1.125rem;
        height: 1.125rem;
        flex-shrink: 0;
        margin: 0.0625rem 0 0;
        border: 1px solid var(--color-neutral-500);
        border-radius: 0.15625rem;
        background-color: var(--color-white);
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .wpcf7-acceptance input[type="checkbox"]:checked {
        border-color: var(--color-primary-500);
        background-color: var(--color-primary-500);
        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");
        background-size: 0.75rem;
        background-position: center;
        background-repeat: no-repeat;
    }

    .wpcf7-acceptance input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    .wpcf7-acceptance .wpcf7-list-item-label {
        font-size: 0.8125rem;
        line-height: 1.5;
        color: var(--color-secondary-500);
    }

    .wpcf7-acceptance .wpcf7-list-item-label a {
        color: var(--color-brand_dark);
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .wpcf7-acceptance .wpcf7-list-item-label a:hover {
        color: var(--color-accent-900);
    }

    /* --- 9c/9d wspólne: natywny radio schowany wizualnie (zostaje dla klawiatury
       i czytników ekranu), wygląd robi <label>. --- */
    .kb-obszar input[type="radio"],
    .kb-pigulki input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .kb-obszar label:has(:focus-visible),
    .kb-pigulki label:has(:focus-visible) {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    /* --- 9c. Karty wyboru obszaru (radio z class:kb-obszar) ---
       Kółko: ::before labela (tło). Ikona: ::before tekstu opcji, maska z
       inc/img/ikony/ w kolorze tła (zmienia się po zaznaczeniu). Ikona i podpis pod
       nazwą zależą od POZYCJI opcji w tagu: 1. opcja = samochód, 2. opcja = waga.
       Zmiana kolejności opcji albo treści podpisów = zmiana tutaj. */
    .kb-obszar {
        display: grid;
        gap: 0.75rem;
    }

    @media (min-width: 48rem) {
        .kb-obszar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .kb-obszar .wpcf7-list-item {
        display: block;
    }

    .kb-obszar label {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.875rem;
        height: 100%;
        padding: 1.125rem 1rem 1.125rem 1.25rem;
        border: 1px solid var(--color-light_blue-600);
        border-radius: 0.875rem;
        background-color: var(--color-white);
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .kb-obszar label::before {
        content: "";
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        background-color: var(--color-light_blue-500);
        transition: background-color 0.3s ease;
    }

    .kb-obszar .wpcf7-list-item-label {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: normal;
        color: var(--color-brand_dark);
    }

    .kb-obszar .wpcf7-list-item-label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 1.875rem;
        width: 1.25rem;
        height: 1.25rem;
        translate: 0 -50%;
        background-color: var(--color-primary-500);
        -webkit-mask: url('../../inc/img/ikony/samochod.svg') center / contain no-repeat;
        mask: url('../../inc/img/ikony/samochod.svg') center / contain no-repeat;
        transition: background-color 0.3s ease;
    }

    .kb-obszar .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before {
        -webkit-mask-image: url('../../inc/img/ikony/waga.svg');
        mask-image: url('../../inc/img/ikony/waga.svg');
    }

    .kb-obszar .wpcf7-list-item-label::after {
        font-size: 0.8125rem;
        font-weight: 400;
        color: var(--color-secondary-400);
    }

    .kb-obszar .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::after {
        content: "Cała Polska, także zdalnie";
    }

    .kb-obszar .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::after {
        content: "Spadki, cywilne, gospodarcze";
    }

    .kb-obszar label:hover {
        border-color: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
    }

    .kb-obszar label:has(:checked) {
        border-color: var(--color-primary-500);
        background-color: var(--color-light_blue-300);
    }

    .kb-obszar label:has(:checked)::before {
        background-color: var(--color-primary-500);
    }

    .kb-obszar label:has(:checked) .wpcf7-list-item-label::before {
        background-color: var(--color-accent-300);
    }

    /* --- 9d. Pigułki rodzaju sprawy (radio z class:kb-pigulki) --- */
    .kb-pigulki {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem;
    }

    .kb-pigulki label {
        position: relative;
        display: flex;
        align-items: center;
        height: 2.5rem;
        padding: 0 1rem;
        border: 1px solid var(--color-light_blue-600);
        border-radius: 9999px;
        background-color: var(--color-white);
        font-size: 0.875rem;
        font-weight: 500;
        line-height: normal;
        color: var(--color-brand_dark);
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }

    .kb-pigulki label:hover {
        border-color: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
    }

    .kb-pigulki label:has(:checked) {
        border-color: var(--color-primary-500);
        background-color: var(--color-primary-500);
        color: var(--color-white);
    }

    @media (prefers-reduced-motion: reduce) {
        .wpcf7-form input,
        .wpcf7-form textarea,
        .wpcf7-form select,
        .kb-obszar label,
        .kb-obszar label::before,
        .kb-obszar .wpcf7-list-item-label::before,
        .kb-pigulki label {
            transition: none;
        }
    }

    /* --- 9e. Walidacja i komunikaty --- */
    .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;
    }

/* ------------------- 10. Wideo ------------------- */
    /* Klasa nadawana w JS, więc nie przechodzi przez kompilator Tailwinda:
       wypełnienie kontenera i zaokrąglenie trzymamy tutaj. */
    [data-wideo] .wideoFrame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: inherit;
    }


/* ------------------- 11. Przycisk telefonu ------------------- */
    /* Dymek nad pływającym przyciskiem telefonu (markup: kb_telefon_przycisk w
       inc/custom.php). Schowany na starcie, .is-visible dodaje telefon.js. */
    .telDymek {
        visibility: hidden;
        opacity: 0;
        translate: 0 0.5rem;
        pointer-events: none;
        transition: opacity 0.3s ease, translate 0.3s ease, visibility 0.3s;
    }

    .telDymek.is-visible {
        visibility: visible;
        opacity: 1;
        translate: 0 0;
        pointer-events: auto;
    }

    /* Ogonek dymka wskazujący przycisk. */
    .telDymek::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: -0.375rem;
        width: 0.75rem;
        height: 0.75rem;
        rotate: 45deg;
        border-right: 1px solid var(--color-light_blue-600);
        border-bottom: 1px solid var(--color-light_blue-600);
        background-color: var(--color-white);
    }

    @media (prefers-reduced-motion: reduce) {
        .telDymek {
            transition: none;
        }
    }