.site-footer {
    margin-top: 40px;
    padding: 40px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.footer-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer-logo-link {
    display: inline-block;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.footer-logo-link:hover {
    opacity: 1;
}

.footer-logo {
    width: 140px;
    height: auto;
    display: block;
}

.footer-copy {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

.footer-disclaimer {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
    opacity: 0.8;
}

.footer-disclaimer a {
    color: #1a6fdb;
    text-decoration: none;
    font-weight: 600;
}

/* ============================================================
   PASEK WYBORU KALKULATORA (.portal-nav) – wspólne dla nart/kijów/desek.
   Ładowane PO style.css kalkulatora → wygrywa w kaskadzie.
   ============================================================ */
/* Aktywna pigułka snapuje do środka, by JS (calculator-common.js) mógł ją
   wycentrować na mobile; mandatory-snap inaczej cofa do startu sąsiada.
   Pozostałe pigułki zostają scroll-snap-align: start z arkusza kalkulatora. */
.portal-nav-item.active {
    scroll-snap-align: center;
}

/* Wygaszanie krawędzi paska – klasy nav-fade-* ustawia calculator-common.js
   tylko po stronie, gdzie są ukryte pigułki (brak obu → brak maski). */
.portal-nav-track.nav-fade-left.nav-fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.portal-nav-track.nav-fade-right:not(.nav-fade-left) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}

.portal-nav-track.nav-fade-left:not(.nav-fade-right) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
}

/* Desktop scroll strzałki (.portal-nav-arrow) – chevron SVG po bokach paska.
   JS (includes/calculator-common.js) wstrzykuje markup idempotentnie do .portal-nav
   na każdej stronie. .has-scroll na .portal-nav dodawany przez JS gdy maxScroll > 0.

   ZAWSZE ukryte (display: none) – nawet jeśli JS coś wstrzyknie na touch, nie
   pokaże się. Defensywne reguły wewnątrz @media (hover: hover) nadpisują
   `display: none` tylko na desktopie i tylko gdy faktycznie pasek nie mieści się. */
.portal-nav-arrow {
    display: none;
}

@media (hover: hover) {
    .portal-nav {
        position: relative;
        /* Boczny padding to FALLBACK dla ciasnych desktop viewport (<980px),
           gdzie nie ma miejsca poza paskiem. Na szerokich ekranach (≥980px)
           jest cofany niżej i strzałki przenoszą się POZA pasek (w pustą
           przestrzeń wokół .app-container). */
        padding-left: 40px;
        padding-right: 40px;
    }

    .portal-nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        color: var(--primary, #1a6fdb);
        transition: opacity 0.15s, background 0.15s, box-shadow 0.15s;
        z-index: 2;
    }

    .portal-nav-arrow svg {
        width: 14px;
        height: 14px;
        display: block;
    }

    .portal-nav-arrow:hover:not([disabled]) {
        background: #f4f8ff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    }

    .portal-nav-arrow[disabled] {
        opacity: 0.3;
        cursor: default;
    }

    .portal-nav.has-scroll .portal-nav-arrow {
        display: inline-flex;
    }

    /* Fallback: strzałki w paddingu paska (ciasne desktopy). */
    .portal-nav-arrow.is-left {
        left: 4px;
    }

    .portal-nav-arrow.is-right {
        right: 4px;
    }
}

/* Szeroki desktop – strzałki POZA paskiem, w pustym tle po bokach .app-container.
   Próg 980px: gwarantuje gutter ≥60px (kalkulatory max-width 860) lub ≥130px
   (quiz max-width 720) na 980px viewport – strzałka -44px zmieści się bez
   wycinania viewport. */
@media (hover: hover) and (min-width: 980px) {
    .portal-nav {
        padding-left: 0;
        padding-right: 0;
    }

    .portal-nav-arrow.is-left {
        left: -44px;
    }

    .portal-nav-arrow.is-right {
        right: -44px;
    }
}