/*
 * STOPKA - WSPOLNE STYLE CALEGO SERWISU STATYCZNEGO.
 *
 * Jedno zrodlo prawdy. Wczesniej kazda strona miala wlasna kopie stopki
 * i z czasem sie rozjechaly (o-nas, regulamin i polityka utknely na starej
 * wersji bez siatki z napisem marki). Markup rozsyla scripts/stopka/sync.mjs,
 * a wyglad opisuje ten plik. Zmiana w jednym miejscu = zmiana wszedzie.
 */

.footer-add-app-btn{
            margin-top: 14px;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            font-size: 0.9rem;
            color: #2563eb;
            cursor: pointer;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
            font-family: inherit;
        }

.footer-add-app-btn:hover{
            color: #1d4ed8;
        }

footer{
            position: relative;
            z-index: 1;
            /* Bez odstepu na dole: migoczaca siatka konczy strone i sama zawiera
               copyright. Odstep zostawial jasny pasek bez kropek pod siatka
               (identycznie jak stopka kursow, ktora ma pb-0). */
            padding: 8rem 8% 0;
            background: var(--bg-alt);
            border-top: 1px solid var(--border);
            margin-top: 4rem;
        }

.footer{
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 1),
                    rgba(248, 250, 255, 1));
        }

.footer-col-title{
            font-size: 1.02rem;
            font-weight: 700;
            letter-spacing: -0.01em;
        }

.footer-col p{
            margin: 6px 0;
            color: #6b7280;
            transition: all 0.2s ease;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.footer-col p:hover{
            color: #4F6EF7;
            transform: translateX(3px);
        }

/* Odnosniki w stopce: zamiast stalego podkreslenia - strzalka wjezdzajaca
   przy najechaniu, tak jak przy odnosniku do kursow w nawigacji.
   `width: fit-content` sprawia, ze obszar najechania konczy sie na tekscie,
   a nie ciagnie sie przez cala szerokosc kolumny. */
.footer-col a{
            display: flex;
            align-items: center;
            width: fit-content;
            gap: 6px;
            margin: 6px 0;
            color: #64748b !important;
            text-decoration: none;
            transition: color 0.2s ease;
        }

.footer-col a::after{
            content: "\2192";
            opacity: 0;
            transform: translateX(-5px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

.footer-col a:hover{
            color: #4F6EF7 !important;
        }

.footer-col a:hover::after,
.footer-col a:focus-visible::after{
            opacity: 1;
            transform: none;
        }

@media (prefers-reduced-motion: reduce){
  .footer-col a::after{
            transition: opacity 0.2s ease;
            transform: none;
        }
}

.footer-divider{
            height: 1px;
            background: rgba(0, 0, 0, 0.05);
            margin: 30px 0 20px;
        }

.footer-bottom{
            text-align: center;
            font-size: 14px;
            color: #9ca3af;
        }

.social-links{
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 20px;
            margin-bottom: 8px;
        }

.social-links a{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
        }

.footer-socials{
            display: flex;
            gap: 12px;
            margin-top: 22px;
        }

.footer-socials a{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: #fff;
            color: #64748b;
            transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
        }

.footer-socials a:hover{
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #2f5cff, #7c3aed);
            transform: translateY(-2px);
        }

.footer-socials svg{
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

.footer-flicker{
            position: relative;
            /* Siatka ma isc na PELNA szerokosc stopki. Stopka ma wewnetrzne
               marginesy (8% / 24px), wiec wychodzimy z nich ujemnym marginesem -
               inaczej napis marki sciska sie do srodka i kropki nie dochodza
               do krawedzi ekranu. */
            width: auto;
            margin: 48px -8% 0;
            height: 220px;
            overflow: hidden;
        }

.footer-flicker-grid{
            position: absolute;
            inset: 0;
            margin: 0 16px;
        }

.footer-flicker-grid canvas{
            pointer-events: none;
        }

.footer-flicker-fade{
            position: absolute;
            inset: 0;
            z-index: 10;
            background: linear-gradient(to top, transparent 40%, rgba(248, 250, 255, 1) 100%);
        }

.footer-flicker-copy{
            position: absolute;
            bottom: 16px;
            left: 0;
            right: 0;
            z-index: 20;
            text-align: center;
            font-size: 13px;
            color: #9ca3af;
        }

.social-links img{
            width: 20px;
            height: 20px;
            opacity: 0.7;
            transition: 0.2s;
        }

.social-links img:hover{
            opacity: 1;
            transform: scale(1.1);
        }

.footer{
            opacity: 1;
            transform: none;
            transition: none;
        }

.footer.visible{
            opacity: 1;
            transform: none;
        }

.footer-grid{
            display: grid;
            /* Staly uklad: kolumna marki szersza, potem rowne kolumny linkow.
               Wczesniejsze auto-fit rozjezdzalo sie, gdy kolumna "Matura pisemna"
               byla ukryta (kursy przed startem sprzedazy) - reszta przeskakiwala
               do innych szerokosci i stopka wygladala inaczej na kazdej stronie. */
            grid-template-columns: 1.6fr repeat(4, 1fr);
            gap: 2.5rem;
            align-items: start;
        }

        @media (max-width: 1280px) {
            .footer-grid {
                /* Marka na calej szerokosci, pod nia rowne kolumny linkow. */
                grid-template-columns: repeat(4, 1fr);
                gap: 2rem;
            }

            .footer-top {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 760px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.75rem;
            }
        }

@media (max-width: 768px) {
  .footer-flicker{
                height: 160px;
                /* Na telefonie stopka ma 24 px marginesu - wychodzimy z niego. */
                margin: 40px -24px 0;
            }

  .footer-flicker-grid{
                margin: 0 6px;
            }

  footer{
                padding: 3rem 24px 0;
                margin-top: 2.5rem;
                border-top: 1px solid var(--border);
            }

  .footer-grid{
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }

  .footer-top{
                grid-column: 1 / -1;
                margin-bottom: 20px;
            }

  footer .footer-col-title{
                font-size: 0.95rem;
                margin-bottom: 12px !important;
            }

  footer p,
            footer a,
            footer li{
                font-size: 0.88rem;
            }

  footer ul{
                gap: 10px !important;
            }

  footer a{
                display: block;
            }

  footer .logo{
                font-size: 1.15rem;
            }

  footer>div:last-child{
                margin-top: 2rem !important;
                padding-top: 1.25rem !important;
                font-size: 0.82rem !important;
            }

  footerObserver.observe(footer);
        }

        // Tap + button hover helpers
        document
            .querySelectorAll(
                "button, a.btn, a.btn-panel, .step-card, .quote-card, .price-card"
            )
            .forEach((el) => el.classList.add("tap-effect"));

        document
            .querySelectorAll("button, a.btn, a.btn-panel, .price-buy-btn")
            .forEach((el) => el.classList.add("button"));

        // Subtle floating on icons (small, lightweight)
        document
            .querySelectorAll(".icon-box, .benefit-icon")
            .forEach((el) => el.classList.add("float"));

        // Progress bars: 0 -> target
        setTimeout(() =>{
            document.querySelectorAll(".progress-bar").forEach((el) => {
                el.classList.add("loaded");
            }
}