/* PLIK GENEROWANY: node tools/build-css.mjs. Nie edytować ręcznie. */
/* Strona: pages/estimate-package.html | arkuszy w paczce: 10 */

/* ===== css/index.css ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #000000;
}

/* ===== Globalna siatka bezpieczeństwa dla mobilek =====
   Na telefonie żadna ozdobna poświata / sub-pikselowy element nie może
   wywołać poziomego przewijania. `clip` (a nie `hidden`) nie psuje
   position: sticky / fixed. Duże realne przepełnienia są naprawione u źródła. */
@media (max-width: 1024px) {
    html, body { overflow-x: clip; max-width: 100%; }
}
/* ================= KNOWLEDGE HUB SECTION ================= */
.knowledge-hub {
    position: relative;
    padding: 6vw 0;
    background: #080000; /* Bardzo ciemne tło */
    overflow: hidden;
}

/* Subtelny gradient w tle */
.knowledge-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hub-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Header sekcji */
.hub-header {
    text-align: center;
    margin-bottom: 4vw;
}

.hub-badge {
    display: inline-block;
    padding: 0.5vw 1vw;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 20px;
    color: #ff4d4d;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hub-title {
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.hub-desc {
    color: #888;
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid kart */
.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
}

/* Styl kart */
.hub-card {
    position: relative;
    background: #110505;
    border: 1px solid #2a0a0a;
    border-radius: 16px;
    padding: 3vw;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    group: pointer;
}

/* Efekt glow w tle karty */
.hub-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255, 0, 0, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hub-card:hover .hub-card-bg {
    opacity: 1;
}

.hub-card:hover {
    transform: translateY(-5px);
    border-color: #ff0000;
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.15);
}

/* Ikona */
.card-icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #220000, #3d0000);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: #ff3333;
    border: 1px solid #550000;
    transition: transform 0.4s ease;
}

.hub-card:hover .card-icon-box {
    transform: scale(1.1) rotate(5deg);
    background: #ff0000;
    color: white;
    border-color: #ff0000;
}

/* Treść karty */
.card-content h3 {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 0.8rem 0;
    font-weight: 600;
}

.card-content p {
    color: #999;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

/* Link na dole karty */
.card-link {
    font-weight: 600;
    color: #ff3333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.hub-card:hover .card-link {
    color: #ff6666;
    gap: 1rem;
}

/* Responsywność */
@media (max-width: 768px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
    .hub-title {
        font-size: 1.8rem;
    }
}
/* (Sekcja „Program Partnerski / Twój Hype to Waluta" została usunięta z indexu.) */
/* Widoczna data aktualizacji (stemplowana przez tools/stamp-dates.mjs). */
.kf-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 14px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #262626;
    background: rgba(255, 255, 255, .03);
    font-size: .78rem;
    color: #9a9a9a;
}
.kf-updated i { color: #E60000; font-size: .9em; }
.kf-updated time { color: #d0d0d0; font-weight: 600; }


/* ===== css/index/navbar.css ===== */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* ================= NAVBAR ================= */
.custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(22, 3, 3, 0.80) 0%, rgba(8, 0, 0, 0.60) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255, 26, 26, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: background 0.4s cubic-bezier(.4,0,.2,1), border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    z-index: 9999;
}

/* Animowana, świecąca linia na dole navbaru */
.custom-navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230, 0, 0, 0.5), rgba(255, 26, 26, 0.85), rgba(230, 0, 0, 0.5), transparent);
    opacity: 0.45;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.custom-navbar.is-scrolled {
    background: linear-gradient(180deg, rgba(13, 0, 0, 0.96) 0%, rgba(9, 0, 0, 0.92) 100%);
    border-bottom-color: rgba(138, 0, 0, 0.7);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    padding: 7px 0;
}

.custom-navbar.is-scrolled::after { opacity: 1; }

/* ================= INNER ================= */
.nav-inner {
    width: 95%;
    max-width: 1800px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ================= LOGO ================= */
.nav-brand img {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

@media (min-width: 1600px) {
    .nav-brand img { width: 72px; height: 46px; }
    .nav-inner { gap: 18px; }
}

.nav-brand img:hover {
    transform: scale(1.05);
}
/* ================= 1. NOWY TRIGGER W NAVBARZE ================= */
/* ================= 1. NOWY TRIGGER W NAVBARZE ================= *//* ================= 1. NOWY TRIGGER W NAVBARZE (Poprawione rozmiary) ================= */
.nav-search-trigger {
    display: flex;
    align-items: center;
    gap: 12px; /* Zamiast vw */
    background: rgba(20, 0, 0, 0.6);
    border: 1px solid rgba(255, 26, 26, 0.15); /* Zamiast vw */
    padding: 0 16px; /* Zamiast vw */
    border-radius: 25px; /* Pigułka */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 50px; /* STAŁA WYSOKOŚĆ - to naprawi problem */
    min-width: 250px; /* STAŁA SZEROKOŚĆ */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Subtelny gradient */
.nav-search-trigger::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, rgba(255, 26, 26, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-search-trigger i {
    color: #FF1A1A;
    font-size: 16px; /* Stały rozmiar lupy */
    z-index: 1;
    transition: transform 0.3s ease;
}

.search-placeholder {
    color: #888;
    font-size: 14px; /* Stały rozmiar tekstu */
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 1;
    transition: color 0.3s ease;
}

/* Efekty na Hover */
.nav-search-trigger:hover {
    border-color: #FF1A1A;
    background: rgba(30, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(255, 26, 26, 0.15), inset 0 0 5px rgba(255, 26, 26, 0.05);
    transform: translateY(-2px);
}

.nav-search-trigger:hover::before {
    opacity: 1;
}

.nav-search-trigger:hover i {
    transform: scale(1.1);
}

.nav-search-trigger:hover .search-placeholder {
    color: #fff;
}
/* ================= 2. PALETA WYSZUKIWANIA + SZUKANIE PO ZDJĘCIU ================= */
/* Przeniesione do css/index/search.css (2026-09-19). */

/* ================= KUPONY I NOWOŚCI - GOLD NAV ITEM ================= */
.nav-qc-btn {
    border-color: rgba(0, 255, 153, 0.45) !important;
    color: #00FF99 !important;
    background: rgba(0, 255, 153, 0.05) !important;
}
.nav-qc-btn i { color: #00FF99 !important; }
.nav-qc-btn:hover {
    background: rgba(0, 255, 153, 0.12) !important;
    border-color: #00FF99 !important;
    color: #66ffbb !important;
}
.nav-qc-btn.active {
    background: rgba(0, 255, 153, 0.18) !important;
    border-color: #00FF99 !important;
    box-shadow: 0 0 12px rgba(0, 255, 153, 0.25);
}

.nav-kupony-btn {
    border-color: rgba(255, 215, 0, 0.55) !important;
    color: #FFD700 !important;
    background: rgba(255, 215, 0, 0.06) !important;
    animation: kuponyGlow 2.8s ease-in-out infinite;
}

.nav-kupony-btn:hover {
    background: rgba(255, 215, 0, 0.14) !important;
    border-color: #FFD700 !important;
    color: #ffe566 !important;
}

.nav-kupony-badge {
    display: inline-flex;
    align-items: center;
    background: #FFD700;
    color: #111;
    font-size: 0.55rem;
    font-weight: 800;
    border-radius: 4px;
    padding: 0 5px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    height: 1.2vw;
    min-height: 14px;
    animation: kuponyBadgePulse 2.8s ease-in-out infinite;
}

@keyframes kuponyGlow {
    0%, 100% { border-color: rgba(255, 215, 0, 0.55); box-shadow: none; }
    50% { border-color: rgba(255, 215, 0, 0.85); box-shadow: 0 0 10px rgba(255, 215, 0, 0.15); }
}

@keyframes kuponyBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ================= MENU ================= */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 0;
    margin-left: 8px;
    align-items: center;
}

.nav-menu > li { display: flex; align-items: center; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #cccccc;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    line-height: 1;
    height: 36px;
    white-space: nowrap;
}

/* Bardzo szerokie ekrany - lekko większy tekst */
@media (min-width: 1600px) {
    .nav-link { font-size: 13px; padding: 9px 12px; height: 38px; gap: 6px; }
    .nav-menu { gap: 5px; margin-left: 10px; }
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(230, 0, 0, 0.10);
    border-color: rgba(255, 26, 26, 0.22);
}

.nav-menu > li > .nav-link.active:not(.nav-qc-btn):not(.nav-kupony-btn) {
    color: #fff;
    background: rgba(230, 0, 0, 0.14);
    border-color: rgba(230, 0, 0, 0.45);
    box-shadow: inset 0 0 14px rgba(230, 0, 0, 0.12), 0 2px 10px rgba(230, 0, 0, 0.15);
}

/* Świecący wskaźnik pod aktywnym linkiem */
.nav-menu > li > .nav-link.active:not(.nav-qc-btn):not(.nav-kupony-btn)::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #FF1A1A, transparent);
    box-shadow: 0 0 8px rgba(255, 26, 26, 0.7);
}

.nav-link i {
    font-size: 14px;
    transition: transform 0.3s ease, color 0.3s ease;
    line-height: 1;
}

.nav-link:hover i {
    transform: translateY(-2px) scale(1.05);
    color: #FF1A1A;
}

/* ================= DROPDOWN ================= */
.dropdown { position: relative; }

.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
}

.dropdown-menu {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: max-content;
    padding: 8px;
    background: linear-gradient(160deg, rgba(26, 2, 2, 0.97), rgba(13, 0, 0, 0.97));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(138, 0, 0, 0.8);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 26, 26, 0.06);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #ddd;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: 0.25s ease;
}

.dropdown-menu a i {
    color: #FF1A1A;
    width: 16px;
    text-align: center;
    transition: transform 0.25s ease;
}

.dropdown-menu a:hover {
    background: linear-gradient(90deg, #8A0000, #6a0000);
    color: white;
    transform: translateX(3px);
}

.dropdown-menu a:hover i {
    color: #fff;
    transform: scale(1.12);
}

.arrow {
    font-size: 9px;
    transition: 0.3s ease;
}

.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* ================= SETTINGS, FAVS & PREFS ================= */
/* push menu items grupę w lewo, a co po niej (auth, settings, hamburger) w prawo */
.nav-menu {
    margin-right: auto;
}
.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-auth:empty { display: none; }

/* --- STYL PRZYCISKU ULUBIONE (PEŁNE SERCE) --- */
.nav-fav-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E60000;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-fav-btn i {
    font-size: 18px;
    filter: drop-shadow(0 0 3px rgba(230, 0, 0, 0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-fav-btn:hover {
    background: #140000;
    border-color: #8A0000;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.4);
    transform: translateY(-1px);
}

.nav-fav-btn:hover i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
}

/* --- USTAWIENIA (segmentowy kontroler z ikonami) --- */
.nav-settings-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 0, 0, 0.55);
    border: 1px solid rgba(255, 26, 26, 0.16);
    border-radius: 13px;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.nav-settings-trigger:hover {
    border-color: rgba(255, 26, 26, 0.5);
    background: rgba(36, 0, 0, 0.7);
    box-shadow: 0 0 18px rgba(230, 0, 0, 0.22);
}

.nav-prefs {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
    color: #d8d8d8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
}

/* Segment: ikona + wartość (globus / moneta / sklep) */
.nav-pref-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-pref-item:not(:first-child) {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

.nav-pref-item i {
    font-size: 12px;
    color: #FF1A1A;
    transition: transform 0.25s ease;
}

.nav-pref-item span { color: #ededed; }

.nav-pref-item:hover {
    background: rgba(255, 26, 26, 0.12);
}

.nav-pref-item:hover i {
    transform: scale(1.15);
}

/* Stary separator '|' – ukryty, gdyby JS nie zdążył przebudować */
.nav-prefs-sep { display: none; }

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(160deg, #E60000, #8A0000);
    border: 1px solid rgba(255, 26, 26, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-icon i {
    color: #ffffff;
    font-size: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.nav-settings-trigger:hover .btn-icon {
    box-shadow: 0 0 14px rgba(230, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Zębatka: płynny obrót na hover (zastępuje wieczną pętlę JS — działa na każdej stronie) */
.btn-icon i { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nav-settings-trigger:hover .btn-icon i { transform: rotate(90deg); }

/* Średnie ekrany (1280–1450px): chowamy etykiety, zostają same ikony */
@media (max-width: 1450px) {
    .nav-pref-item span { display: none; }
    .nav-pref-item { padding: 6px 8px; }
}
/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - NAVBAR
   ========================================== */

/* Domyślnie ukrywamy hamburgera na komputerach */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 10001; /* Zawsze nad menu */
}

.hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
/* ==========================================
   IKONA NEWSÓW I DYMEK
   ========================================== */
.nav-news-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-news-btn {
    color: var(--text-main);
    font-size: 1.3rem;
    position: relative;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
}
.nav-news-btn:hover { color: var(--primary); }

/* Pulsująca kropka powiadomienia */
.news-pulse-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 10px; height: 10px;
    background-color: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.news-pulse-dot::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; width: 10px; height: 10px;
    background-color: var(--primary);
    border-radius: 50%;
    animation: pulseRed 2s infinite;
}
@keyframes pulseRed {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}


.nav-news-btn {
    position: relative;
    color: #fff;
    font-size: 1.4rem;
    transition: 0.3s;
}

.news-pulse-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0000;
}

/* Styl dymku ze zdjęcia */
.nav-news-bubble {
    position: absolute;
    top: 50px;
    right: -13.4px;
    background: #ff0000; /* Mocna czerwień */
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4);
    z-index: 999;
    display: none; /* Sterowane przez JS */
    animation: bounce 2s infinite;
}

/* Strzałka dymku */
.nav-news-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 25px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #ff0000 transparent;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
/* Wyskakujący dymek (Tooltip) */
.nav-news-tooltip {
    position: absolute;
    top: 140%;
    right: 50%;
    transform: translateX(50%) translateY(10px);
    background: #E60000;
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(230, 0, 0, 0.4);
    z-index: 100;
    font-family: 'Poppins', sans-serif;
}

/* Trójkącik dymku */
.nav-news-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%; right: 50%;
    transform: translateX(50%);
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #E60000 transparent;
}

.nav-news-wrapper:hover .nav-news-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
}
/* FIX: usunięcie przerwy między dzwonkiem a sercem */
.nav-news-wrapper + .nav-auth {
    margin-left: 0 !important;
}

.nav-news-wrapper {
    margin-right: -0.5vw; /* delikatne "dociśnięcie" */
}

/* Dodatkowo wyrównanie flexa */
.custom-navbar .nav-inner {
    gap: 1.2vw; /* możesz zmniejszyć globalny gap tylko trochę */
}

/* ================= TABLETY I MNIEJSZE (do 1024px) ================= */
@media (max-width: 1280px) {
    .custom-navbar {
        padding: 15px 0; /* Przechodzimy z vw na stałe piksele */
    }

    .nav-inner {
        justify-content: space-between; /* Rozsuwamy elementy na boki */
        width: 95%;
        gap: 15px;
    }

    /* Logo i Ikonki - powiększamy na stałe wartości */
    .nav-brand img {
        width: auto;
        height: 35px;
    }

    /* Wyszukiwarka - chowamy tekst, zostawiamy tylko lupkę jako okrągły przycisk */
   /* Wyszukiwarka (Mobilna) - większa i przesunięta w lewo */
    .nav-search-trigger {
        min-width: unset;
        width: 42px; /* Lekko powiększona */
        height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        margin-left: 15px; /* Przesuwa w lewo, tuż obok loga */
        margin-right: auto; /* Wypycha resztę elementów (ulubione, zębatkę) do prawej strony */
    }
    
    .nav-search-trigger i {
        font-size: 18px; /* Powiększona ikona lupy */
    }
    
    .search-placeholder {
        display: none; /* Ukrywamy "Szukaj..." */
    }

    /* Ulubione - stały rozmiar */
    .nav-fav-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .nav-fav-btn i {
        font-size: 18px;
    }

    /* Ustawienia - Chowamy tekst "PL | PLN | Kakobuy", zostawiamy tylko zębatkę */
    .nav-prefs {
        display: none; 
    }
    .btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .btn-icon i {
        font-size: 18px;
    }

    /* Włączamy Hamburgera */
    .hamburger-menu {
        display: flex;
        margin-left: 10px;
    }

    /* Otwarty hamburger (krzyżyk) */
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: #FF1A1A;
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: #FF1A1A;
    }

    /* Boczny Panel Menu (Drawer) */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 88vw;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, rgba(15,0,0,0.98) 0%, rgba(8,0,0,0.98) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid rgba(255, 0, 0, 0.25);
        flex-direction: column;
        justify-content: flex-start;
        padding: 90px 22px 30px;
        margin-right: 0;
        transition: right 0.4s cubic-bezier(.4,0,.2,1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85);
        overflow-y: auto;
        gap: 4px;
        z-index: 9998;
    }

    .nav-menu.active {
        right: 0;
    }

    /* Scroll styling dla drawera */
    .nav-menu::-webkit-scrollbar { width: 6px; }
    .nav-menu::-webkit-scrollbar-track { background: transparent; }
    .nav-menu::-webkit-scrollbar-thumb { background: rgba(230,0,0,0.3); border-radius: 3px; }

    .nav-link {
        font-size: 16px;
        padding: 14px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        height: auto;
        gap: 14px;
    }
    .nav-link:hover {
        background: rgba(230,0,0,0.08);
    }
    .nav-link.active, .nav-link.nav-qc-btn.active, .nav-link.nav-kupony-btn.active {
        background: rgba(230,0,0,0.15);
        border-color: rgba(230,0,0,0.3);
        color: #fff;
    }

    .nav-link i {
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

    /* Naprawa Dropdownu dla widoku mobilnego */
    .dropdown::after { display: none; }
    
    .dropdown-menu {
        position: relative;
        top: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background: transparent;
        border: none;
        padding: 10px 0 10px 20px; /* Wcięcie podkategorii */
        display: none; /* Domyślnie zwinięte */
    }

    /* Klasa dodawana przez JS do rozwijania na kliknięcie */
    .dropdown.mobile-open .dropdown-menu {
        display: flex;
        flex-direction: column;
    }
    
    .dropdown.mobile-open .arrow {
        transform: rotate(180deg);
    }

    .dropdown-menu a {
        font-size: 15px;
        padding: 10px 15px;
    }

    /* paleta wyszukiwania na telefonie: css/index/search.css */
}

/* ================= TELEFONY (do 480px) ================= */
@media (max-width: 480px) {
    .nav-inner { gap: 10px; }
    .nav-brand img { height: 30px; }
    
    /* Trochę mniejsze ikonki akcji, żeby się zmieściły */
    .nav-search-trigger, .nav-fav-btn, .btn-icon {
        width: 35px; height: 35px; border-radius: 10px;
    }
    .nav-search-trigger i, .nav-fav-btn i, .btn-icon i {
        font-size: 16px;
    }
}


/* ===== css/index/navbar-redesign.css ===== */
/* =========================================================
   KAKOFIND — NAVBAR REDESIGN 2026 (warstwa nakładkowa)
   Ładowana PO navbar.css. Czysty, „agent-shop" układ:
   logo · szybkie akcje · wyszukiwarka · waluta/agent · ulubione.
   Animacje wyłącznie na transform/opacity → płynnie, bez lagów.
   ========================================================= */

/* ---------- pasek ---------- */
.custom-navbar {
    padding: 9px 0;
    background: linear-gradient(180deg, rgba(14, 4, 4, 0.82) 0%, rgba(6, 0, 0, 0.66) 100%);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    border-bottom: 1px solid rgba(255, 26, 26, 0.10);
    /* UWAGA: bez `contain: paint` — przycinałoby pełnowysokościową
       szufladę mobilną (position:fixed) do wysokości paska. */
}
.custom-navbar.is-scrolled { padding: 6px 0; }

.nav-inner {
    width: 95%;
    max-width: 1760px;
    gap: 14px;
}

/* ---------- logo ---------- */
.nav-brand { flex-shrink: 0; line-height: 0; }
.nav-brand img {
    width: 58px; height: 40px;
    border-radius: 11px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.nav-brand a:hover img {
    transform: translateY(-1px) scale(1.04) rotate(-1.5deg);
    filter: drop-shadow(0 6px 14px rgba(230, 0, 0, .35));
}

/* =========================================================
   SZYBKIE AKCJE (chipy ikona-góra / etykieta-dół)
   ========================================================= */
.nav-quick {
    display: none;                 /* mobile: ukryte (jest hamburger) */
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.nav-chip {
    --chip-accent: #FF1A1A;
    --chip-accent-soft: rgba(230, 0, 0, .14);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 66px;
    padding: 7px 4px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    color: #c9c9c9;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                border-color .28s ease, background .28s ease, color .28s ease;
}
/* poświata pojawiająca się od dołu */
.nav-chip::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 130%, var(--chip-accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.nav-chip__ico {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 14px;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.nav-chip__lbl {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    color: inherit;
}
.nav-chip:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}
.nav-chip:hover::before { opacity: 1; }
.nav-chip:hover .nav-chip__ico {
    transform: translateY(-1px) scale(1.08);
    background: var(--chip-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}
.nav-chip:active { transform: translateY(-1px) scale(.97); }

/* warianty akcentów */
.nav-chip--qc { --chip-accent: #00FF99; --chip-accent-soft: rgba(0, 255, 153, .14); }
.nav-chip--qc .nav-chip__ico { color: #66ffbb; }
/* Promocje: zimowe promki wleciały, więc chip jest niebieski z płatkiem śniegu */
.nav-chip--promocje { --chip-accent: #3BA7FF; --chip-accent-soft: rgba(59, 167, 255, .2); }
.nav-chip--promocje .nav-chip__ico {
    color: #8fd3ff;
    background: rgba(59, 167, 255, .1);
    border-color: rgba(120, 200, 255, .22);
}
.nav-chip--promocje:hover .nav-chip__ico { transform: translateY(-1px) scale(1.08) rotate(60deg); }

/* ---------- Produkty | Kategorie: para w jednej ramce ----------
   Oba chipy wyglądają jak reszta paska (ikona nad podpisem), a wspólna ramka i cienka
   kreska pokazują, że Kategorie należą do Produktów. W parze chip nie podskakuje przy
   najechaniu (rozerwałby ramkę), tylko podświetla tło i ikonę. */
.nav-prod {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    transition: border-color .28s ease, background .28s ease;
}
.nav-prod:hover { border-color: rgba(255, 70, 70, .28); background: rgba(255, 255, 255, .035); }
.nav-prod .nav-chip {
    border-color: transparent;
    background: transparent;
    border-radius: 13px;
}
.nav-prod .nav-chip:hover,
.nav-prod .nav-chip:active {
    transform: none;
    border-color: transparent;
    background: rgba(255, 255, 255, .045);
}
.nav-chip--cat .nav-chip__ico { color: #ffb0b0; }
/* Top (ranking /top): trzeci chip w ramce, bursztynowy jak puchar */
.nav-chip--top { --chip-accent: #FF9F1C; --chip-accent-soft: rgba(255, 159, 28, .18); }
.nav-chip--top .nav-chip__ico { color: #ffc46b; }
.nav-chip--cat::after,
.nav-chip--top::after {                 /* kreska między chipami w ramce */
    content: "";
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: linear-gradient(transparent, rgba(255, 255, 255, .16), transparent);
    pointer-events: none;
}
.nav-chip--cat.is-active,
.nav-chip--top.is-active { color: #fff; }
.nav-chip--cat.is-active::before,
.nav-chip--top.is-active::before { opacity: 1; }
.nav-chip--cat.is-active .nav-chip__ico,
.nav-chip--top.is-active .nav-chip__ico {
    background: var(--chip-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}

.nav-chip--kupony { --chip-accent: #FFD700; --chip-accent-soft: rgba(255, 215, 0, .16); }
.nav-chip--kupony .nav-chip__ico { color: #ffd866; }
.nav-chip--kupony::after {            /* mała kropka „nowość" — statyczna, bez migania */
    content: "";
    position: absolute; top: 6px; right: 10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #FFD700;
    box-shadow: 0 0 6px rgba(255,215,0,.6);
}

/* =========================================================
   „WIĘCEJ" — rozwijane menu z dodatkowymi podstronami (desktop)
   ========================================================= */
.nav-more { position: relative; display: flex; }
.nav-chip--more {
    --chip-accent: #8E8BFF;
    --chip-accent-soft: rgba(142, 139, 255, .16);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}
.nav-more.open .nav-chip--more {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
    color: #fff;
}
.nav-more.open .nav-chip--more::before { opacity: 1; }
.nav-more.open .nav-chip--more .nav-chip__ico {
    transform: translateY(-1px) scale(1.08);
    background: var(--chip-accent); color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}

.nav-more-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 380px;
    max-width: min(380px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 8, 8, .98), rgba(9, 3, 3, .98));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s;
    z-index: 1200;
}
.nav-more.open .nav-more-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-more-title {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8a8a8a;
    padding: 10px 8px 4px;
}
.nav-more-title:first-child { padding-top: 4px; }
.nav-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-more-item:hover { background: rgba(230, 0, 0, .10); border-color: rgba(230, 0, 0, .28); transform: translateY(-1px); }
.nav-more-item.active { background: rgba(230, 0, 0, .14); border-color: rgba(230, 0, 0, .40); }
.nmi-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
    color: #ff6a6a;
    font-size: 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-more-item:hover .nmi-ico { background: linear-gradient(160deg, #E60000, #8A0000); color: #fff; transform: scale(1.06); }
.nav-more-item.active .nmi-ico { background: linear-gradient(160deg, #E60000, #8A0000); color: #fff; }
.nmi-txt { display: flex; flex-direction: column; min-width: 0; }
.nmi-name { font-size: 13px; font-weight: 600; color: #ececec; line-height: 1.2; }
.nav-more-item:hover .nmi-name, .nav-more-item.active .nmi-name { color: #fff; }
.nmi-desc { font-size: 10.5px; color: #888; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   „NARZĘDZIA" (zastąpiło „Więcej", 2026-09): narzędzia jako kafelki,
   w bocznej kolumnie pozostałe strony. Panel jest w HTML strony.
   ========================================================= */
.nav-tools-panel {
    width: 640px;
    max-width: min(640px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}
.ntp-tools, .ntp-side { display: flex; flex-direction: column; min-width: 0; }
.ntp-side { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .07); }
.ntp-side .nav-more-title:not(:first-child) { padding-top: 14px; }
.ntp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ntp-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    min-height: 96px;
    padding: 12px;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    background: rgba(255, 255, 255, .025);
    border-color: rgba(255, 255, 255, .06);
}
button.ntp-card { width: 100%; }
.ntp-card .nmi-desc { white-space: normal; }
.ntp-card--qc .nmi-ico { color: #66ffbb; }
.ntp-card--qc:hover { background: rgba(0, 255, 153, .07); border-color: rgba(0, 255, 153, .30); }
.ntp-card--qc:hover .nmi-ico,
.ntp-card--qc.active .nmi-ico { background: linear-gradient(160deg, #00d27f, #007a4a); color: #fff; }
.ntp-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #d4d4d4;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ntp-link i { width: 18px; text-align: center; font-size: 13px; color: #ff6a6a; }
.ntp-link:hover { background: rgba(230, 0, 0, .10); border-color: rgba(230, 0, 0, .25); color: #fff; }
.ntp-link.active { background: rgba(230, 0, 0, .14); border-color: rgba(230, 0, 0, .40); color: #fff; }
/* dymek „Nowe kupony" (navbar.js) wisi nad paskiem - przy otwartym panelu nachodziłby na kafelki */
body:has(.nav-tools.open) .kfnc-ping { opacity: 0 !important; pointer-events: none !important; }

/* =========================================================
   WYSZUKIWARKA (rośnie na środku)
   ========================================================= */
.nav-search-trigger {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    height: 46px;
    margin: 0 4px;
    gap: 10px;
    padding: 0 8px 0 18px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.nav-search-trigger i { font-size: 15px; }
.search-placeholder {
    flex: 1;
    text-align: left;
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-search-kbd {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
    color: #b9b9b9;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    padding: 5px 9px;
    transition: border-color .3s ease, color .3s ease;
}
.nav-search-trigger:hover {
    transform: none;
    border-color: rgba(255, 26, 26, .5);
    background: rgba(12, 0, 0, .5);
    box-shadow: 0 0 0 4px rgba(230, 0, 0, .07);
}
.nav-search-trigger:hover .nav-search-kbd { border-color: rgba(255,26,26,.4); color: #fff; }

/* =========================================================
   PRAWA STRONA — ulubione · waluta/agent
   ========================================================= */
.nav-auth { gap: 8px; }

.nav-fav-btn {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.nav-fav-btn:hover {
    transform: translateY(-3px);
    background: rgba(230, 0, 0, .10);
    border-color: rgba(230, 0, 0, .55);
    box-shadow: 0 10px 22px rgba(230, 0, 0, .22);
}
.nav-fav-btn.has-favs { border-color: rgba(230, 0, 0, .35); color: #ff6a6a; }

/* =========================================================
   ULUBIONE — plakietka licznika + hover-statystyki
   ========================================================= */
.nav-fav { position: relative; display: inline-flex; }
.nav-fav-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    display: none;            /* JS pokazuje gdy > 0 */
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(160deg, #FF1A1A, #B30000);
    color: #fff;
    font-size: 10px; font-weight: 800; line-height: 1;
    border: 2px solid #0a0202;
    box-shadow: 0 3px 8px rgba(230, 0, 0, .45);
    pointer-events: none;
    z-index: 2;
}

.fav-pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 28px);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 8, 8, .98), rgba(9, 3, 3, .98));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .62);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s;
    z-index: 1200;
}
.nav-fav.show .fav-pop {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.fav-pop-inner { padding: 14px; }
.fav-pop-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #fff;
    margin-bottom: 12px;
}
.fav-pop-head i { color: #FF3B3B; }

.fav-pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fps {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
}
.fps-num { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.1; }
.fps-lbl { font-size: 10px; font-weight: 600; color: #8c8c8c; text-transform: uppercase; letter-spacing: .4px; }

.fav-pop-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fpl-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px; border-radius: 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease;
}
.fpl-item:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.fpl-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #1a0000; flex-shrink: 0; }
.fpl-name {
    flex: 1; min-width: 0;
    font-size: 12px; color: #d8d8d8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpl-price { font-size: 12px; font-weight: 800; color: #ff6a6a; flex-shrink: 0; }
.fpl-more { font-size: 11px; color: #8c8c8c; text-align: center; padding: 4px; }

.fav-pop-empty { font-size: 12px; color: #9a9a9a; line-height: 1.6; text-align: center; padding: 6px 4px 14px; }
.fav-pop-empty i { color: #FF3B3B; }
.fav-pop-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    padding: 10px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 12.5px; font-weight: 700;
    color: #fff;
    background: linear-gradient(160deg, #E60000, #8A0000);
    box-shadow: 0 8px 18px rgba(230, 0, 0, .28);
    transition: filter .2s ease, transform .2s ease;
}
.fav-pop-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* na wąskich ekranach nie pokazujemy hover-popovera (brak hovera/dotyk) */
@media (max-width: 1280px) {
    .fav-pop { display: none; }
}

/* segment waluta/agent (settings-panel.js przebudowuje .nav-prefs) */
.nav-settings-trigger {
    height: 46px;
    gap: 4px;
    padding: 4px 4px 4px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.nav-settings-trigger:hover {
    border-color: rgba(255, 26, 26, .45);
    background: rgba(28, 4, 4, .6);
    box-shadow: 0 0 16px rgba(230, 0, 0, .16);
}
.nav-prefs { font-size: 11px; }
.nav-pref-item { padding: 6px 9px; border-radius: 9px; }
.nav-pref-item i { color: #FF3B3B; }
.btn-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(160deg, #E60000, #8A0000);
}
.btn-icon i { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
/* zębatka kręci się TYLKO na hover (zamiast wiecznego requestAnimationFrame) */
.nav-settings-trigger:hover .btn-icon i { transform: rotate(90deg); }

/* =========================================================
   PRZEŁĄCZNIK DESKTOP / MOBILE
   ========================================================= */
@media (min-width: 1281px) {
    .nav-quick { display: flex; }
    .nav-menu { display: none; }          /* tekstowe menu tylko jako szuflada mobilna */
}
@media (min-width: 1600px) {
    .nav-chip { width: 72px; }
    .nav-chip__lbl { font-size: 11px; }
    .nav-search-trigger { height: 48px; max-width: 620px; }
}

/* średni desktop — chowamy etykiety chipów tylko gdy naprawdę ciasno
   (od 2026-08 chipów jest 7, więc próg podniesiony z 1360 na 1440) */
@media (min-width: 1281px) and (max-width: 1440px) {
    .nav-chip { width: 46px; }
    .nav-chip__lbl { display: none; }
}

/* mobile: wyszukiwarka znów jako czysty przycisk-ikona (równy z sercem/zębatką),
   ale chowamy podpowiedź klawiszową i tekst "Szukaj…" */
@media (max-width: 1280px) {
    .nav-search-kbd { display: none; }
    .nav-search-trigger {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        min-width: 0;
        margin: 0;
        padding: 0;
        gap: 0;
        border-radius: 13px;
        justify-content: center;
        overflow: visible;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
    }
    .nav-search-trigger .search-placeholder { display: none; }
    .nav-search-trigger i { font-size: 17px; }
    /* lupa + aparat (szukanie po zdjęciu) jako pigułka: css/index/search.css */
}

/* =========================================================
   SZUFLADA MOBILNA 2026 — dopracowane menu boczne
   (overlay + nagłówek wstrzykiwane przez js/index/navbarhamb.js)
   ========================================================= */

/* przyciemnienie strony pod szufladą */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(4, 0, 0, .56);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.nav-overlay.active { opacity: 1; visibility: visible; }

/* blokada przewijania tła, gdy szuflada otwarta */
body.nav-drawer-open { overflow: hidden; }

/* szuflada otwarta: chowamy hamburger (zamienia się w „X"), żeby nie było DWÓCH
   krzyżyków — zostaje jeden przycisk zamykania w nagłówku szuflady */
body.nav-drawer-open .hamburger-menu { display: none; }

@media (max-width: 1280px) {
    /* szuflada — trochę szersza, z miejscem na nagłówek */
    .nav-menu {
        width: 330px;
        max-width: 90vw;
        padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
        gap: 6px;
        align-items: stretch;          /* nadpisuje align-items:center z bazy */
        box-shadow: -18px 0 60px rgba(0, 0, 0, .9);
    }

    /* nagłówek szuflady (logo + zamknij) */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 12px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .nav-drawer-head img {
        height: 32px; width: auto;
        border-radius: 10px;
    }
    .nav-drawer-close {
        width: 42px; height: 42px;
        display: grid; place-items: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .09);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
    }
    .nav-drawer-close:hover {
        background: rgba(230, 0, 0, .16);
        border-color: rgba(230, 0, 0, .55);
        transform: rotate(90deg);
    }

    /* pozycje menu jako kafelki z ikoną w „pudełku" */
    .nav-menu > li { width: 100%; }
    /* rozwijane „Tools" — Narzędzia nad podlistą, nie obok */
    .nav-menu > li.dropdown {
        flex-direction: column;
        align-items: stretch;
    }
    .nav-menu .nav-link {
        width: 100%;
        height: auto;
        border: 1px solid transparent;
        border-radius: 13px;
        padding: 11px 12px;
        font-size: 15.5px;
        font-weight: 600;
        gap: 13px;
    }
    .nav-menu .nav-link > i:first-child {
        display: grid; place-items: center;
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .06);
        font-size: 16px;
        color: #ff5a5a;
        transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
    }
    .nav-menu .nav-link:hover {
        background: rgba(230, 0, 0, .08);
        border-color: rgba(230, 0, 0, .22);
        transform: none;
    }
    .nav-menu .nav-link:hover > i:first-child {
        transform: translateY(-2px) scale(1.06);
    }
    .nav-menu .nav-link.active {
        background: rgba(230, 0, 0, .15);
        border-color: rgba(230, 0, 0, .38);
        color: #fff;
    }
    .nav-menu .nav-link.active > i:first-child {
        background: linear-gradient(160deg, #E60000, #8A0000);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 16px rgba(230, 0, 0, .4);
    }

    /* QC / Kupony — akcenty również w szufladzie */
    .nav-qc-btn > i:first-child { color: #66ffbb; }
    .nav-qc-btn:hover > i:first-child { background: #00FF99; color: #04130d; box-shadow: 0 6px 16px rgba(0,255,153,.35); }
    .nav-kupony-btn > i:first-child { color: #ffd866; }
    .nav-kupony-btn:hover > i:first-child { background: #FFD700; color: #2a2200; box-shadow: 0 6px 16px rgba(255,215,0,.35); }
    .nav-promocje-btn > i:first-child { color: #8fd3ff; background: rgba(59, 167, 255, .1); border-color: rgba(120, 200, 255, .22); }
    .nav-promocje-btn:hover > i:first-child { background: #3BA7FF; color: #fff; box-shadow: 0 6px 16px rgba(59, 167, 255, .38); }
    .nav-kategorie-btn > i:first-child { color: #ff8a8a; }
    .nav-top-btn > i:first-child { color: #ffc46b; }

    /* rozwijane „Tools" w szufladzie */
    .dropdown > .nav-link .arrow {
        margin-left: auto;
        width: auto; height: auto;
        background: none; border: none;
        font-size: 13px; color: #9a9a9a;
        transition: transform .3s ease, color .3s ease;
    }
    .dropdown.mobile-open > .nav-link .arrow { color: #ff5a5a; }
    .dropdown-menu {
        padding: 6px 0 6px 14px;
        gap: 2px;
    }
    .dropdown-menu a {
        gap: 12px;
        font-size: 14.5px;
        font-weight: 500;
        color: #cfcfcf;
        border-radius: 11px;
        padding: 10px 12px;
    }
    .dropdown-menu a > i {
        width: 22px; text-align: center;
        color: #ff7a7a;
    }
    .dropdown-menu a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
    .dropdown-menu a.active { background: rgba(230, 0, 0, .12); color: #fff; }
    /* nagłówki grup w rozwijanych „Narzędziach" */
    .dropdown-menu .nav-sub-title {
        display: block;
        padding: 12px 12px 4px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #7d7d7d;
    }

    /* delikatne wejście pozycji po otwarciu */
    .nav-menu.active > li {
        animation: navDrawerItemIn .42s cubic-bezier(.2,.8,.2,1) both;
    }
    .nav-menu.active > li:nth-of-type(1) { animation-delay: .05s; }
    .nav-menu.active > li:nth-of-type(2) { animation-delay: .09s; }
    .nav-menu.active > li:nth-of-type(3) { animation-delay: .13s; }
    .nav-menu.active > li:nth-of-type(4) { animation-delay: .17s; }
    .nav-menu.active > li:nth-of-type(5) { animation-delay: .21s; }
    .nav-menu.active > li:nth-of-type(6) { animation-delay: .25s; }
    .nav-menu.active > li:nth-of-type(7) { animation-delay: .29s; }
    .nav-menu.active > li:nth-of-type(8) { animation-delay: .33s; }
    .nav-menu.active > li:nth-of-type(9) { animation-delay: .37s; }
}

@keyframes navDrawerItemIn {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* dostępność / wydajność */
@media (prefers-reduced-motion: reduce) {
    .nav-chip, .nav-fav-btn, .nav-brand img, .btn-icon i { transition: none !important; }
    .nav-chip--kupony::after { animation: none; }
    .nav-menu.active > li { animation: none !important; }
    .nav-overlay { transition: opacity .15s ease; }
}

/* =========================================================
   ZĘBATKA BEZ PIGUŁKI (2026-10): w pasku została sama zębatka,
   bieżący język, waluta i agent są w panelu ustawień, który
   na desktopie otwiera się już po najechaniu (settings-panel.js). Markup .nav-prefs zostaje,
   bo settings-panel.js trzyma w nim aktualne wartości.
   ========================================================= */
.nav-settings-trigger,
.nav-settings-trigger:hover {
    height: auto;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.nav-settings-trigger .nav-prefs { display: none !important; }
.nav-settings-trigger .btn-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}
.nav-settings-trigger:hover .btn-icon,
.nav-settings-trigger.is-open .btn-icon {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(230, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.nav-settings-trigger.is-open .btn-icon i { transform: rotate(90deg); }
@media (max-width: 1280px) {
    .nav-settings-trigger .btn-icon { width: 44px; height: 44px; border-radius: 13px; }
}

/* =========================================================
   PODGLĄDY W PASKU (js/index/nav-mega.js): jeden panel, który
   przy przejściu między chipami przesuwa się, zmienia rozmiar
   i podmienia treść. Tylko desktop z myszką (skrypt sam pilnuje).
   ========================================================= */
.nav-chip.kfm-on {
    border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}
.nav-chip.kfm-on::before { opacity: 1; }
.nav-chip.kfm-on .nav-chip__ico {
    transform: translateY(-1px) scale(1.08);
    background: var(--chip-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}
.nav-quick > .nav-chip.kfm-on,
.nav-more .nav-chip.kfm-on { transform: translateY(-3px); }
.nav-prod:has(.kfm-on) { border-color: rgba(255, 70, 70, .28); background: rgba(255, 255, 255, .035); }
/* dymek „Nowe kupony” (navbar.js) nie może wisieć na otwartym podglądzie */
body.kfm-open .kfnc-ping { opacity: 0 !important; pointer-events: none !important; }

.kfm {
    --kfm-ease: cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    left: 0;
    top: 64px;
    z-index: 1200;
    width: var(--kfm-w, 460px);
    height: var(--kfm-h, 200px);
    transform: translate3d(var(--kfm-x, 0px), 8px, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    transition: opacity .18s ease, transform .34s var(--kfm-ease), width .34s var(--kfm-ease),
                height .34s var(--kfm-ease), visibility 0s linear .18s;
}
.kfm.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(var(--kfm-x, 0px), 0, 0);
    transition: opacity .2s ease, transform .34s var(--kfm-ease), width .34s var(--kfm-ease),
                height .34s var(--kfm-ease), visibility 0s;
}
.kfm.kfm--snap,
.kfm.kfm--snap .kfm__arrow { transition: none !important; }
/* tło osobno, żeby strzałka mogła na nim leżeć */
.kfm::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(22, 8, 8, .985), rgba(10, 3, 3, .985));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(230, 0, 0, .05);
}
/* most nad szczeliną między chipem a panelem: kursor nie „wypada” w drodze w dół */
.kfm::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.kfm__arrow {
    position: absolute;
    top: -6px;
    left: 0;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 3px 0 0 0;
    background: rgb(22, 8, 8);
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-top: 1px solid rgba(255, 255, 255, .08);
    transform: translateX(calc(var(--kfm-ax, 40px) - 6px)) rotate(45deg);
    transition: transform .34s var(--kfm-ease);
}
.kfm__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}
.kfm__sec {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .32s var(--kfm-ease), visibility 0s linear .32s;
}
.kfm__sec:not(.is-on) { pointer-events: none; }
.kfm__sec.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .24s ease .05s, transform .32s var(--kfm-ease), visibility 0s;
}
.kfm__sec.is-on.from-l { transform: translateX(28px); }
.kfm__sec.is-on.from-r { transform: translateX(-28px); }
.kfm__sec.to-l { transform: translateX(-28px); }
.kfm__sec.to-r { transform: translateX(28px); }

/* --- elementy wspólne --- */
.kfm-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.kfm-head__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(160deg, #E60000, #8A0000);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(230, 0, 0, .3);
}
.kfm-ico--gold { background: linear-gradient(160deg, #FFD24A, #C9930E); color: #2a1d00; box-shadow: 0 8px 18px rgba(255, 190, 40, .26); }
.kfm-ico--green { background: linear-gradient(160deg, #2fe08f, #007a4a); box-shadow: 0 8px 18px rgba(0, 210, 127, .26); }
.kfm-ico--blue { background: linear-gradient(160deg, #3BA7FF, #1460b8); box-shadow: 0 8px 18px rgba(59, 167, 255, .28); }
.kfm-head__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kfm-head__txt b { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
.kfm-head__txt span { font-size: 12.5px; color: #9d9d9d; line-height: 1.45; }
.kfm-sub {
    margin: 14px 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8a8a8a;
}
.kfm-sub em { font-style: normal; color: #ff6a6a; margin-left: 4px; }
.kfm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kfm-chips--mt { margin-top: 12px; }
.kfm-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .03);
    color: #dcdcdc;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.kfm-chip:hover { border-color: rgba(230, 0, 0, .5); background: rgba(230, 0, 0, .1); color: #fff; }
.kfm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.kfm-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #8c8c8c; min-width: 0; }
.kfm-hint i { color: #ff6a6a; font-size: 11px; }
.kfm-foot__btns { display: flex; gap: 8px; flex-shrink: 0; }
.kfm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #e8e8e8;
    font: 600 12.5px 'Poppins', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.kfm-btn:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; }
.kfm-btn--p {
    border-color: transparent;
    background: linear-gradient(160deg, #E60000, #8A0000);
    color: #fff;
    box-shadow: 0 8px 18px rgba(230, 0, 0, .28);
}
.kfm-btn--p:hover { border-color: transparent; background: linear-gradient(160deg, #E60000, #8A0000); filter: brightness(1.12); transform: translateY(-1px); }
.kfm-btn__arr { font-size: 11px; transition: transform .2s ease; }
.kfm-btn--p:hover .kfm-btn__arr { transform: translateX(3px); }
.kfm-btn--gold { border-color: transparent; background: linear-gradient(160deg, #FFD24A, #C9930E); color: #251a00; }
.kfm-btn--gold:hover { border-color: transparent; background: linear-gradient(160deg, #FFD24A, #C9930E); color: #251a00; filter: brightness(1.08); }
.kfm-btn--gold.is-done,
.kfm-btn--gold.is-done:hover { background: linear-gradient(160deg, #2fe08f, #0c9a5b); color: #fff; }
.kfm-err { grid-column: 1 / -1; margin: 0; padding: 10px 0; font-size: 12.5px; color: #9a9a9a; }
.kfm-skel {
    display: block;
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 70%);
    background-size: 300% 100%;
    animation: kfmShimmer 1.2s linear infinite;
}
.kfm-skel--card { aspect-ratio: .74; }
.kfm-skel--tall { aspect-ratio: .62; }
@keyframes kfmShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Baza: jedna liczba + skróty, bez listy --- */
.kfm-stat2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(230, 0, 0, .22);
    background: radial-gradient(120% 140% at 0% 0%, rgba(230, 0, 0, .2), rgba(230, 0, 0, .03));
}
.kfm-stat2 b { font-size: 28px; font-weight: 800; line-height: 1; color: #fff; }
.kfm-stat2 span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #e2e2e2; }
.kfm-stat2 em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #9d9d9d; }

/* --- Kategorie --- */
.kfm-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kfm-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .25s var(--kfm-ease);
}
.kfm-cat:hover { border-color: rgba(230, 0, 0, .45); background: rgba(230, 0, 0, .08); transform: translateY(-2px); }
.kfm-cat__img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: #1a0505;
    transition: transform .35s var(--kfm-ease);
}
.kfm-cat:hover .kfm-cat__img { transform: scale(1.07) rotate(-2deg); }
.kfm-cat__txt { display: flex; flex-direction: column; min-width: 0; }
.kfm-cat__txt b { font-size: 12.5px; font-weight: 700; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfm-cat__n { font-size: 10.5px; color: #8f8f8f; }

/* --- karty: Top, Outfity, Promocje --- */
.kfm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kfm-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 6px 6px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .25s var(--kfm-ease);
}
.kfm-card:hover { border-color: rgba(230, 0, 0, .45); background: rgba(230, 0, 0, .07); transform: translateY(-2px); }
.kfm-card__pic {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #140505;
}
.kfm-card--tall .kfm-card__pic { aspect-ratio: 4 / 5; }
.kfm-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--kfm-ease); }
.kfm-card:hover .kfm-card__pic img { transform: scale(1.05); }
.kfm-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    padding: 0 2px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #e6e6e6;
}
.kfm-card__price { padding: 0 2px; font-size: 12.5px; font-weight: 800; color: #ff6a6a; }
.kfm-card__price s { margin-left: 4px; font-size: 11px; font-weight: 500; color: #777; }
.kfm-card__meta { padding: 0 2px; font-size: 11px; font-weight: 600; color: #9a9a9a; }
.kfm-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: #1b1200;
    background: linear-gradient(160deg, #FFD24A, #C9930E);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.kfm-rank--2 { background: linear-gradient(160deg, #eef2f6, #9aa5b1); }
.kfm-rank--3 { background: linear-gradient(160deg, #f3b783, #a8582a); }
.kfm-off {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 7px;
    border-radius: 8px;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(160deg, #3BA7FF, #1460b8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

/* --- Konwerter: agenci --- */
.kfm-agents { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kfm-agent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 8px 2px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .05);
    background: rgba(255, 255, 255, .025);
}
/* tło jest wtopione w miniatury graphics/inne/nav (jasne logo = ciemne tło, ciemne logo = białe) */
.kfm-agent img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; }
.kfm-agent span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; color: #bdbdbd; }
.kfm-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: #a9a9a9; }
.kfm-note i { color: #ff6a6a; }

/* --- QC Finder: kroki --- */
.kfm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.kfm-steps li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid rgba(0, 255, 153, .14);
    background: rgba(0, 255, 153, .04);
    font-size: 12px;
    line-height: 1.35;
    color: #d8d8d8;
}
.kfm-steps em {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: #04130d;
    background: linear-gradient(160deg, #2fe08f, #00a865);
}

/* --- naklejka 2D w nagłówku podglądu (Kupony, Top, docelowo grafiki z MJ) --- */
.kfm-head--art { align-items: center; }
/* naklejka zastępuje kafelek z ikoną, żeby nagłówek nie miał dwóch obrazków */
.kfm-head--art .kfm-head__ico { display: none; }
.kfm-head__art {
    flex-shrink: 0;
    width: 80px;
    height: 68px;
    margin: -10px -4px -8px auto;
    object-fit: contain;
    transform: rotate(-7deg);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.kfm__sec:hover .kfm-head__art { transform: rotate(-2deg) scale(1.06); }

/* --- Kupony --- */
.kfm-code {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 214, 102, .45);
    background: linear-gradient(150deg, rgba(40, 30, 7, .65), rgba(23, 17, 4, .65));
}
.kfm-code__lbl { grid-column: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #bfae7c; }
.kfm-code b { grid-column: 1; font-family: 'Courier New', monospace; font-size: 22px; font-weight: 800; letter-spacing: 2px; line-height: 1.2; color: #ffd866; }
.kfm-code__bonus { grid-column: 1; font-size: 11.5px; font-weight: 700; color: #8ff0b5; }
.kfm-code .kfm-btn { grid-column: 2; grid-row: 1 / span 3; }

/* --- Narzędzia: panel z HTML strony przeniesiony do podglądu --- */
.kfm__sec[data-k="tools"] { padding: 14px; }
.kfm .nav-tools-panel {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    opacity: 1;
    visibility: inherit;          /* ukryta sekcja ma zostać ukryta (i nie łapać myszki) */
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
.kfm .ntp-side { position: relative; }
.kfm .ntp-side::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -4px;
    width: 104px;
    height: 98px;
    background: url(/graphics/nav-art/narzedzia-200.webp) center / contain no-repeat;
    transform: rotate(-8deg);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
    pointer-events: none;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.kfm__sec[data-k="tools"]:hover .ntp-side::after { transform: rotate(-3deg) scale(1.05); }
/* Wycena paczki: pierwsza i wyróżniona w Narzędziach (chip zniknął z paska) */
.ntp-card--est {
    position: relative;
    overflow: hidden;
    border-color: rgba(230, 0, 0, .28);
    background: radial-gradient(120% 120% at 0% 0%, rgba(230, 0, 0, .16), rgba(255, 255, 255, .02));
}
.ntp-card--est .nmi-txt { position: relative; z-index: 1; max-width: 66%; }
.ntp-card--est::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -8px;
    width: 92px;
    height: 62px;
    background: url(/graphics/mascot/web/parcel-fly-190.webp) center / contain no-repeat;
    transform: rotate(-6deg);
    pointer-events: none;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.ntp-card--est:hover::after { transform: rotate(-6deg) translate(5px, -4px); }
.ntp-card--track { position: relative; overflow: hidden; }
.ntp-card--track .nmi-txt { position: relative; z-index: 1; }
.ntp-card--track::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 96px;
    height: 55px;
    margin-top: -27px;
    background: url(/graphics/mascot/web/stage-plane-128.webp) center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ntp-card--track:hover::after { transform: translateX(10px) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
    .kfm, .kfm.open, .kfm__sec, .kfm__sec.is-on, .kfm__arrow { transition: opacity .12s ease, visibility 0s !important; }
    .kfm__sec.is-on.from-l, .kfm__sec.is-on.from-r, .kfm__sec.to-l, .kfm__sec.to-r { transform: none; }
    .kfm-skel { animation: none; }
}


/* ===== css/index/search.css ===== */
/* =========================================================
   WYSZUKIWARKA 2026-09: pasek w navbarze, paleta Ctrl+K, szukanie po zdjęciu.
   Logika: js/szukaj.js. Ładowany PO navbar.css i navbar-redesign.css.
   Motyw przewodni: narożniki wizjera (jak w aparacie) przy szukaniu po zdjęciu.
   ========================================================= */
@property --vf-l {
    syntax: '<length>';
    inherits: false;
    initial-value: 24px;
}

:root {
    --ks-bg: #110b0b;
    --ks-raise: rgba(255, 255, 255, .035);
    --ks-line: rgba(255, 255, 255, .075);
    --ks-line-2: rgba(255, 255, 255, .12);
    --ks-red: #ff2a2a;
    --ks-red-soft: rgba(255, 42, 42, .12);
    --ks-text: #f3eeee;
    --ks-muted: #a39a9a;
    --ks-dim: #7a7070;
    --ks-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- 1. Pasek w navbarze ---------- */
.nav-search-trigger:focus-visible {
    outline: none;
    border-color: rgba(255, 42, 42, .6);
    box-shadow: 0 0 0 3px rgba(230, 0, 0, .22);
}
.nav-search-trigger .nav-search-cam {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .045);
    color: #ff4d4d;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.nav-search-trigger .nav-search-cam svg { display: block; }
.nav-search-trigger .nav-search-cam:hover,
.nav-search-trigger .nav-search-cam:focus-visible {
    outline: none;
    background: #e60000;
    border-color: #e60000;
    color: #fff;
}
.nav-search-trigger .nav-search-cam:active { transform: scale(.94); }
/* desktop: zamiast 18px z lewej i 8px z prawej, aparat dosuwa się do krawędzi pigułki */
.nav-search-trigger:has(.nav-search-cam) { padding-right: 6px; }

@media (max-width: 1280px) {
    /* lupa + aparat jako jedna pigułka (inaczej ikony nachodzą na siebie) */
    .nav-inner .nav-search-trigger:has(.nav-search-cam) {
        width: auto;
        min-width: 44px;
        padding: 0 5px 0 13px;
        gap: 10px;
        border-radius: 14px;
        justify-content: flex-start;
    }
    .nav-search-trigger .nav-search-cam {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: rgba(255, 42, 42, .13);
        border-color: rgba(255, 42, 42, .28);
        color: #ff5a5a;
    }
}
@media (max-width: 480px) {
    .nav-inner .nav-search-trigger:has(.nav-search-cam) {
        padding: 0 3px 0 10px;
        gap: 8px;
        border-radius: 11px;
    }
    .nav-search-trigger .nav-search-cam {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 13px;
    }
}

/* ---------- 2. Okno palety ---------- */
.cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 11vh 16px 24px;
    background: rgba(5, 2, 2, .66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.cmd-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility 0s;
}
.cmd-modal {
    position: relative;
    width: min(680px, 100%);
    min-width: 0;
    max-height: min(740px, 82vh);
    display: flex;
    flex-direction: column;
    background: var(--ks-bg);
    border: 1px solid var(--ks-line-2);
    border-radius: 18px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .72), 0 0 70px rgba(230, 0, 0, .07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    color: var(--ks-text);
    font-family: 'Poppins', sans-serif;
    transform: translateY(-8px) scale(.985);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.cmd-overlay.active .cmd-modal { transform: none; }
/* dymek „Nowe kupony” (navbar.js) ma wyższy z-index i wisiałby nad paletą */
html.ks-lock .kfnc-ping { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.cmd-modal [hidden] { display: none !important; }

/* nagłówek: lupa · pole · wyczyść · aparat · Esc */
.cmd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--ks-line);
    flex-shrink: 0;
}
.cmd-header .search-icon {
    flex-shrink: 0;
    margin: 0;
    color: var(--ks-red);
    font-size: 17px;
    filter: none;
}
.cmd-header input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 60px;
    margin: 0;
    padding: 0 4px;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    color: #fff;
    font: 500 17px/1.2 'Poppins', sans-serif;
    letter-spacing: .1px;
}
.cmd-header input::placeholder { color: #6f6666; font-weight: 400; }
.cmd-header .ks-clear,
.cmd-header .cmd-cam-btn,
.cmd-header .cmd-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cmd-header .ks-clear {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: var(--ks-muted);
    font-size: 13px;
}
.cmd-header .ks-clear:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cmd-header:not(.has-q) .ks-clear { display: none; }
.cmd-header .cmd-cam-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--ks-line-2);
    background: var(--ks-raise);
    color: #ff4d4d;
    font-size: 16px;
}
.cmd-header .cmd-cam-btn:hover { border-color: rgba(255, 42, 42, .55); background: rgba(255, 42, 42, .12); }
.cmd-header .cmd-cam-btn.is-on { background: #e60000; border-color: #e60000; color: #fff; }
.cmd-header .cmd-close {
    min-width: 40px;
    width: auto;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .04);
    color: var(--ks-muted);
    font: 600 11px/1 var(--ks-mono);
}
.cmd-header .cmd-close i { display: none; }
.cmd-header .cmd-close:hover { color: #fff; border-color: rgba(255, 42, 42, .5); background: rgba(255, 42, 42, .1); }

/* treść */
.cmd-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 42, 42, .25) transparent;
}
.cmd-body::-webkit-scrollbar { width: 6px; }
.cmd-body::-webkit-scrollbar-thumb { background: rgba(255, 42, 42, .25); border-radius: 6px; }

.ks-sec { padding: 12px 6px 2px; }
.ks-sec-h,
.ks-tools .cmd-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 8px;
    color: var(--ks-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.ks-sec-act {
    border: 0;
    background: none;
    padding: 2px 4px;
    color: var(--ks-dim);
    font: 500 12px 'Poppins', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    text-decoration: none;
}
.ks-sec-act:hover { color: #ff6b6b; }

/* przyciski */
.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .05);
    color: #eee;
    font: 600 13.5px/1 'Poppins', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, filter .15s ease, color .15s ease;
}
.ks-btn svg { font-size: 15px; flex-shrink: 0; }
.ks-btn:hover { border-color: rgba(255, 42, 42, .5); background: rgba(255, 42, 42, .1); color: #fff; }
.ks-btn-sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.ks-btn-sm svg { font-size: 14px; }
.ks-btn-red,
.ks-btn-red:hover {
    border-color: transparent;
    background: linear-gradient(180deg, #ff2a2a, #d10f0f);
    color: #fff;
    box-shadow: 0 8px 22px rgba(230, 0, 0, .28);
}
.ks-btn-red:hover { filter: brightness(1.08); }

/* chipy */
.ks-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ks-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--ks-line-2);
    background: var(--ks-raise);
    color: #e6dfdf;
    font: 500 13px/1 'Poppins', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ks-chip:hover,
.ks-chip.selected,
.ks-chip-rec:has(> .ks-nav.selected) {
    border-color: rgba(255, 42, 42, .5);
    background: rgba(255, 42, 42, .1);
    color: #fff;
}
.ks-chip-rec { padding: 0 5px 0 0; gap: 0; }
.ks-chip-rec > .ks-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 6px 0 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
}
.ks-chip-rec > .ks-nav svg { color: var(--ks-dim); font-size: 13px; }
.ks-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ks-dim);
    font-size: 11px;
    cursor: pointer;
}
.ks-chip-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* kategorie */
.ks-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ks-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-raise);
    color: #e6dfdf;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-cat img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.ks-cat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-cat:hover, .ks-cat.selected { border-color: rgba(255, 42, 42, .45); background: rgba(255, 42, 42, .08); color: #fff; }

/* skróty zapisane w HTML strony (#cmdDefault) */
.ks-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 6px 2px;
}
.ks-tools .cmd-group-title { grid-column: 1 / -1; padding-bottom: 2px; }
.ks-tools .cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-raise);
    color: inherit;
    text-decoration: none;
    transform: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-tools .cmd-item:hover,
.ks-tools .cmd-item.selected { border-color: rgba(255, 42, 42, .45); background: rgba(255, 42, 42, .08); transform: none; }
.ks-tools .cmd-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid rgba(255, 42, 42, .2);
    background: rgba(255, 42, 42, .1);
    color: #ff5a5a;
    font-size: 13px;
    box-shadow: none;
}
.ks-tools .cmd-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ks-tools .cmd-name {
    color: #eee;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-tools .cmd-desc,
.ks-tools .cmd-item .arrow { display: none; }

/* pasek "Szukaj po zdjęciu" w widoku startowym */
.ks-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 6px 2px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, .17);
    background: linear-gradient(100deg, rgba(255, 42, 42, .08), rgba(255, 42, 42, 0) 62%);
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.ks-strip:hover,
.ks-strip:focus-visible,
.is-drag .ks-strip { border-color: rgba(255, 42, 42, .65); background-color: rgba(255, 42, 42, .05); }
.ks-strip-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-strip-txt b { color: #fff; font-size: 14px; font-weight: 600; }
.ks-strip-txt span { color: var(--ks-muted); font-size: 12.5px; line-height: 1.4; }

/* ---------- 3. Wyniki wpisywania ---------- */
.ks-all {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 2px;
    padding: 9px 12px 9px 9px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-raise);
    color: #ddd;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-all:hover, .ks-all.selected { border-color: rgba(255, 42, 42, .45); background: rgba(255, 42, 42, .08); }
.ks-all-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ks-red-soft);
    color: #ff4d4d;
    font-size: 15px;
}
.ks-all-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-all-t b { color: #fff; font-weight: 600; }
.ks-count {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ks-red-soft);
    color: #ffb0b0;
    font-size: 12px;
    font-weight: 600;
}
.ks-enter {
    flex-shrink: 0;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ks-line-2);
    color: var(--ks-muted);
    font: 600 11px/1 var(--ks-mono);
    opacity: 0;
    transition: opacity .15s ease;
}
.ks-all.selected .ks-enter { opacity: 1; }

.ks-catrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 2px 2px; }
.ks-catrow-l { margin-right: 2px; color: var(--ks-dim); font-size: 12px; }
.ks-chip-cat { height: 30px; padding: 0 11px; font-size: 12.5px; }
.ks-chip-n { color: var(--ks-dim); font-size: 11.5px; font-weight: 600; }

.ks-qbody { transition: opacity .15s ease; }
.ks-qbody.is-stale { opacity: .5; }
.ks-qbody > .ks-sec-h { padding: 14px 6px 6px; }
.ks-prod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.ks-prod:hover, .ks-prod.selected { background: rgba(255, 255, 255, .045); border-color: var(--ks-line); }
.ks-prod.selected { border-color: rgba(255, 42, 42, .38); }
.ks-prod-img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--ks-line);
    background: #1b1414;
}
.ks-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-prod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ks-prod-name { color: #eee; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-prod-name mark { background: none; color: #ff6b6b; font-weight: 600; }
.ks-prod-meta { color: var(--ks-muted); font-size: 12px; }
.ks-prod-price { flex-shrink: 0; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- 4. Szukanie po zdjęciu ---------- */
/* narożniki wizjera: 8 pasków z gradientów, długość w --vf-l (animowana) */
.ks-drop,
.ks-scan-ph,
.ks-strip-ic {
    --vf-c: #ff2a2a;
    --vf-w: 2px;
    background-image:
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c));
    background-size:
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l),
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l),
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l),
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l);
    background-position:
        left top, left top, right top, right top,
        left bottom, left bottom, right bottom, right bottom;
    background-repeat: no-repeat;
}
.ks-strip-ic {
    --vf-l: 9px;
    --vf-w: 1.5px;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background-color: rgba(255, 42, 42, .1);
    color: #ff4040;
    font-size: 18px;
}

.ks-drop {
    --vf-l: 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 250px;
    margin: 14px 6px 6px;
    padding: 26px 20px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .018);
    text-align: center;
    cursor: pointer;
    outline: none;
    transition: --vf-l .28s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}
.ks-drop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 42, 42, .09), transparent 62%);
    pointer-events: none;
}
.ks-drop:hover,
.ks-drop:focus-visible,
.is-drag .ks-drop { --vf-l: 44px; background-color: rgba(255, 42, 42, .045); }
.ks-drop > * { position: relative; }
.ks-drop-ic {
    width: 62px;
    height: 62px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 42, 42, .28);
    background: rgba(255, 42, 42, .12);
    color: #ff4040;
    font-size: 27px;
}
.ks-drop-t { color: #fff; font-size: 16px; font-weight: 600; }
.ks-drop-s { color: var(--ks-muted); font-size: 13px; }
.ks-drop kbd,
.ks-strip kbd {
    display: inline-block;
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .06);
    color: #ddd;
    font: 600 11px/1.3 var(--ks-mono);
}
.ks-drop .ks-btn { margin-top: 10px; }
.ks-tip {
    margin: 6px 24px 12px;
    color: var(--ks-dim);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* ładowanie: Twoje zdjęcie w wizjerze + linia skanu */
.ks-scan { display: flex; align-items: center; gap: 18px; padding: 18px 8px 8px; }
.ks-scan-ph {
    --vf-l: 16px;
    position: relative;
    width: 96px;
    height: 96px;
    padding: 7px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.ks-scan-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; }
.ks-scan-line {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    height: 2px;
    border-radius: 2px;
    background: #ff3b3b;
    box-shadow: 0 0 10px 2px rgba(255, 42, 42, .6);
    animation: ksScan 1.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes ksScan { to { transform: translateY(80px); } }
.ks-scan-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ks-scan-txt b { color: #fff; font-size: 15px; font-weight: 600; }
.ks-scan-txt span { color: var(--ks-muted); font-size: 12.5px; }

.ks-skel span,
.ks-skel i,
.ks-prod-skel .ks-prod-img,
.ks-prod-skel i {
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, .04) 75%);
    background-size: 200% 100%;
    animation: ksShim 1.2s linear infinite;
}
@keyframes ksShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ks-skel { display: flex; flex-direction: column; gap: 7px; }
.ks-skel span { display: block; aspect-ratio: 1 / 1; border-radius: 12px; }
.ks-skel i { display: block; height: 10px; width: 85%; border-radius: 5px; }
.ks-skel i + i { width: 45%; }
.ks-prod-skel { pointer-events: none; }
.ks-prod-skel .ks-prod-img { border-color: transparent; }
.ks-prod-skel i { display: block; height: 11px; width: 62%; border-radius: 5px; }
.ks-prod-skel i + i { width: 28%; }

/* wyniki po zdjęciu */
.ks-imghead { display: flex; align-items: center; gap: 12px; padding: 14px 6px 12px; }
.ks-imghead-q {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 42, 42, .45);
}
.ks-imghead-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-imghead-txt b { color: #fff; font-size: 15px; font-weight: 600; }
.ks-imghead-txt span { color: var(--ks-muted); font-size: 12.5px; }
.ks-imghead-act { display: flex; gap: 6px; flex-shrink: 0; }

.ks-imggrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 16px 12px;
    padding: 4px 6px 8px;
}
.ks-icard { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; text-decoration: none; border-radius: 12px; }
.ks-icard-ph {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: #1b1414;
    transition: border-color .15s ease;
}
.ks-icard-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ks-icard:hover .ks-icard-ph,
.ks-icard.selected .ks-icard-ph { border-color: rgba(255, 42, 42, .6); }
.ks-icard:hover .ks-icard-ph > img { transform: scale(1.04); }
.ks-icard-match {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 40%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.ks-icard-match img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-icard-match em {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(230, 0, 0, .9);
    color: #fff;
    font: normal 700 8px/1.6 'Poppins', sans-serif;
    letter-spacing: .05em;
    text-align: center;
}
.ks-icard-name {
    min-height: 2.6em;
    color: #e6dfdf;
    font-size: 12.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ks-icard-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #fff; font-size: 13px; font-weight: 600; }
.ks-pct {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ks-red-soft);
    color: #ff8a8a;
    font-size: 11px;
    font-weight: 600;
}
img.is-ph { object-fit: contain !important; padding: 18%; opacity: .45; }

/* puste wyniki i błędy */
.ks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 18px 26px;
    color: var(--ks-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.ks-empty b { color: #eee; font-size: 15px; font-weight: 600; }
.ks-empty-ic {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ks-red-soft);
    color: #ff5a5a;
    font-size: 22px;
}
.ks-empty-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* plik przeciągany nad paletą */
.cmd-modal.is-drag::after {
    content: attr(data-drop-label);
    position: absolute;
    inset: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 42, 42, .75);
    border-radius: 14px;
    background: rgba(20, 4, 4, .9);
    color: #fff;
    font: 600 16px 'Poppins', sans-serif;
    pointer-events: none;
}

/* stopka ze skrótami */
.cmd-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid var(--ks-line);
    background: rgba(0, 0, 0, .25);
    flex-shrink: 0;
}
.cmd-hint { display: flex; align-items: center; gap: 4px; color: var(--ks-dim); font-size: 12px; white-space: nowrap; }
.cmd-hint > span:last-child { margin-left: 4px; }
.cmd-hint .key-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .05);
    color: #bbb;
    font: 600 11px/1 var(--ks-mono);
}
.cmd-footer .ks-hint-img { margin-left: auto; }

/* fokus z klawiatury */
.cmd-modal .ks-nav:focus-visible,
.cmd-modal .ks-btn:focus-visible,
.cmd-modal .ks-chip-x:focus-visible,
.cmd-modal .ks-sec-act:focus-visible,
.cmd-header .ks-clear:focus-visible,
.cmd-header .cmd-cam-btn:focus-visible,
.cmd-header .cmd-close:focus-visible,
.ks-drop:focus-visible,
.ks-strip:focus-visible {
    outline: 2px solid rgba(255, 60, 60, .85);
    outline-offset: 2px;
}

/* ---------- 5. "Duży widok" wyników po zdjęciu ---------- */
.kf-imgbrowse {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    flex-direction: column;
    background: rgba(8, 5, 6, .95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: 'Poppins', sans-serif;
    animation: kfIbIn .2s ease;
}
@keyframes kfIbIn { from { opacity: 0; } to { opacity: 1; } }
.kf-ib-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kf-ib-q { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; border: 1px solid rgba(255, 42, 42, .5); }
.kf-ib-title { color: #fff; font-size: 18px; font-weight: 700; }
.kf-ib-title b { color: #ff6b6b; }
.kf-ib-hint { color: #888; font-size: 13px; }
.kf-ib-close {
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
}
.kf-ib-close:hover { background: rgba(255, 42, 42, .15); border-color: rgba(255, 42, 42, .4); color: #fff; }
.kf-ib-grid {
    flex: 1;
    overflow-y: auto;
    align-content: start;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    padding: 22px;
}
.kf-bcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.kf-bc-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #1a1414;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.kf-bcard:hover .kf-bc-stage { border-color: rgba(255, 42, 42, .4); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.kf-bc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.kf-bc-alt { opacity: 0; }
.kf-bcard.swapped .kf-bc-main { opacity: 0; }
.kf-bcard.swapped .kf-bc-alt { opacity: 1; }
.kf-bc-score {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .6);
    color: #ff8585;
    font-size: 11px;
    font-weight: 700;
}
.kf-bc-mini {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 3;
    width: 38%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(255, 42, 42, .5), 0 4px 14px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: transform .2s ease;
}
.kf-bc-mini:hover { transform: scale(1.06); }
.kf-bc-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.kf-bc-mini-main { opacity: 0; }
.kf-bcard.swapped .kf-bc-mini-alt { opacity: 0; }
.kf-bcard.swapped .kf-bc-mini-main { opacity: 1; }
.kf-bc-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(230, 0, 0, .9);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
}
.kf-bc-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.kf-bc-name {
    color: #eee;
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kf-bc-sub { color: #888; font-size: 12px; }

/* ---------- 6. Telefon: paleta na cały ekran ---------- */
@media (max-width: 760px) {
    html.ks-lock,
    html.ks-lock body { overflow: hidden; }
    .cmd-overlay {
        padding: 0;
        background: var(--ks-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .cmd-modal {
        width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
    }
    .cmd-header {
        min-height: 58px;
        padding: env(safe-area-inset-top) 6px 0 16px;
        gap: 6px;
    }
    .cmd-header input { height: 56px; font-size: 16px; }
    .cmd-header .cmd-close {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ks-muted);
        font-size: 20px;
    }
    .cmd-header .cmd-close .ks-esc { display: none; }
    .cmd-header .cmd-close i { display: inline-block; }
    .cmd-body { padding: 2px 8px calc(20px + env(safe-area-inset-bottom)); }
    .cmd-footer { display: none; }
    .ks-cats { gap: 6px; }
    .ks-cat {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        height: 72px;
        padding: 6px 4px;
        font-size: 11.5px;
    }
    .ks-cat img { width: 28px; height: 28px; }
    .ks-tools { grid-template-columns: 1fr; }
    .ks-tools .cmd-desc {
        display: block;
        color: var(--ks-muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ks-strip .ks-btn { display: none; }
    .ks-drop { min-height: 230px; margin-top: 10px; }
    .ks-scan { padding-top: 14px; }
    .ks-imghead { flex-wrap: wrap; }
    .ks-imghead-act { width: 100%; }
    .ks-imghead-act .ks-btn { flex: 1; }
    .ks-only-wide { display: none !important; }
    .ks-imggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .kf-ib-bar { padding: 12px 14px; }
    .kf-ib-hint { display: none; }
    .kf-ib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 14px; }
}
@media (max-width: 400px) {
    .ks-prod-img { width: 46px; height: 46px; }
    .ks-prod-name { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .cmd-overlay,
    .cmd-modal,
    .ks-drop { transition: none; }
    .ks-scan-line { animation: none; transform: translateY(40px); }
    .ks-skel span,
    .ks-skel i,
    .ks-prod-skel .ks-prod-img,
    .ks-prod-skel i { animation: none; }
    .ks-icard:hover .ks-icard-ph > img { transform: none; }
}


/* ===== css/index/footer.css ===== */
:root {
    --c1: #E60000;
    --c2: #FF1A1A;
    --c3: #8A0000;
    --pink: #FF4081;
}

body {
    background-color: #050505;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

a{

    text-decoration: none;
}

.custom-footer {
    padding: 5vw 2vw;
    display: flex;
    justify-content: center;
    /* Efekt poświaty tła w rogach */
    background: radial-gradient(circle at 0% 100%, rgba(230, 0, 0, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 100% 0%, rgba(255, 64, 129, 0.1) 0%, transparent 40%);
}

.footer-container {
    display: flex;
    gap: 8vw;
    width: 90vw;
    justify-content: center;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.info-column {
    align-items: flex-start;
    text-align: left;
}

.footer-title {
    font-size: 1.2vw;
    font-weight: 800;
    letter-spacing: 0.1vw;
    margin-bottom: 1.5vw;
    padding-bottom: 0.4vw;
    border-bottom: 0.2vw solid var(--pink);
    text-transform: uppercase;
}

/* Logo jako zdjęcie */
.user-logo img {
    width: 6vw;
    height: 6vw;
    object-fit: cover;
    border-radius: 1vw;
    margin-bottom: 1.5vw;
    border: 0.15vw solid var(--c1);
    box-shadow: 0 0 1.5vw rgba(230, 0, 0, 0.4);
}

/* Sekcja ikon społecznościowych */
.social-icons {
    display: flex;
    gap: 15px; /* Stały odstęp zamiast vw dla stabilności */
    margin-bottom: 25px;
    justify-content: center; /* Kluczowe dla 2 ikon */
    width: 100%;
}

.social-icons a {
    color: white;
    font-size: 24px; /* Stały rozmiar */
    background: rgba(255, 255, 255, 0.05);
    width: 50px;  /* Stała szerokość */
    height: 50px; /* Stała wysokość */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    flex-shrink: 0; /* Nie pozwala ikonom się gnieść */
}

.social-icons a:hover {
    background: var(--c1);
    box-shadow: 0 0 1vw var(--c1);
}

/* Przycisk Discord */
.discord-button {
    background: linear-gradient(135deg, var(--c3), var(--c1));
    color: white;
    text-decoration: none;
    padding: 0.8vw 2.5vw;
    border-radius: 2vw;
    font-size: 1vw;
    font-weight: bold;
    box-shadow: 0 0.3vw 1.5vw rgba(230, 0, 0, 0.5);
    transition: 0.3s;
}

.discord-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 2vw var(--pink);
}

/* Teksty */
.copyright {
    font-size: 0.9vw;
    color: #666;
    margin-bottom: 1vw;
}

.disclaimer {
    font-size: 0.85vw;
    color: #aaa;
    max-width: 25vw;
    line-height: 1.5;
    margin-bottom: 0.5vw;
}

.footer-legal {
    font-size: 0.85vw;
    color: var(--pink);
    margin-top: 1vw;
    transition: 0.3s ease;
}

.footer-legal:hover {
    color: white;
    text-shadow: 0 0 0.8vw var(--pink);
}
/* ==========================================
   NOWE PRZYCISKI I LINKI W STOPCE
   ========================================== */

/* Kontener na przyciski z lewej strony */
.footer-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* Wymuszenie ikonek w przycisku Discorda */
.discord-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* Nowy przycisk Support (Styl outline/secondary) */
.support-button {
    background-color: transparent;
    color: #cccccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.support-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #E60000;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.2);
}

.support-button i {
    color: #E60000;
}

/* Kontener na linki po prawej stronie */
.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Delikatna linia oddzielająca od disclaimerów */
}

/* Styl pojedynczego linku (np. FAQ) */
.footer-link {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.footer-link i {
    font-size: 1.1rem;
    color: #666;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffffff;
    transform: translateX(5px); /* Subtelny wjazd w prawo po najechaniu */
}

.footer-link:hover i {
    color: #E60000;
}


/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - FOOTER
   ========================================== */

/* 1. TABLETY POZIOMO (do 1024px) */
@media (max-width: 1024px) {
    .custom-footer {
        padding: 60px 20px; /* Przejście z vw na stałe piksele */
    }
    
    .footer-container {
        gap: 40px;
        width: 95vw;
    }
    
    .footer-title {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 8px;
        border-bottom-width: 2px;
    }
    
    .user-logo img {
        width: 80px;
        height: 80px;
        border-width: 2px;
        border-radius: 15px;
    }
    
    .social-icons a {
        font-size: 20px;
        padding: 12px;
        width: 45px;
        height: 45px;
    }
    
    .discord-button {
        font-size: 14px;
        padding: 12px 24px;
        border-radius: 30px;
    }
    
    .copyright {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .disclaimer {
        font-size: 12px;
        max-width: 45vw; /* Zwiększamy obszar tekstu na tablecie */
    }
}

/* 2. TABLETY PIONOWO I TELEFONY (do 768px) */
@media (max-width: 768px) {
   .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .social-icons {
        margin-bottom: 20px;
    }

    /* Ustawiamy stałą szerokość dla przycisków, żeby nie latały na boki */
    .footer-action-buttons {
        width: 100%;
        max-width: 280px; 
        margin: 0 auto;
    }

    .discord-button, .support-button {
        width: 100%; /* Oba przyciski będą tej samej szerokości */
        padding: 14px;
        font-size: 14px;
        box-sizing: border-box;
    }
}

/* 3. MAŁE TELEFONY (do 480px) */
@media (max-width: 480px) {
    .custom-footer {
        padding: 50px 15px;
    }
    
  .footer-title {
        font-size: 16px;
        margin-bottom: 25px;
    }
    
    .user-logo img {
        width: 70px;
        height: 70px;
    }
    
    .social-icons {
        gap: 15px;
    }
    
   .social-icons a {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    /* Przyciski Discord i Support na pełną szerokość bloku */
    .discord-button, .support-button {
        width: 100%; 
        padding: 14px 20px;
        font-size: 14px;
        justify-content: center;
    }
    
    .footer-link {
        font-size: 14px;
    }
}
/* ==========================================
   NASZA SIEĆ - naglowek grupy linkow do
   siostrzanych domen w stopce (blok
   KF-NETWORK w kazdej podstronie).
   ========================================== */
.footer-net-title {
    margin: 14px 0 2px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f6f6f;
}

/* ==========================================
   PORADNIKI + QC FINDER DLA AGENTOW (blok
   KF-GUIDES w stopce kazdej podstrony).
   ========================================== */
.footer-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
}
.footer-inline a {
    color: #aaaaaa;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-inline a:hover {
    color: #ffffff;
}


/* ===== css/tutorials/tutorials.css ===== */
/* ==========================================
   BAZA STRONY
   ========================================== */
body {
    background-color: #050505;
    color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding-top: 100px;
    overflow-x: hidden;
}

/* ==========================================
   NOWY UKŁAD STRONY
   ========================================== */
.tutorials-page-wrapper {
    display: flex;
    width: 100%;
}

/* 1. SKRAJNIE LEWE MENU (KATEGORIE PORADNIKÓW) */
.master-sidebar {
    position: fixed;
    top: 100px; 
    left: 0;
    width: 260px;
    height: calc(100vh - 100px);
    background-color: #0a0a0a;
    border-right: 1px solid #2C2C2C;
    /* Zwiększony padding górny (było 2rem), żeby navbar nie ucinał tytułu! */
    padding: 3.5rem 1rem 2rem 1rem; 
    z-index: 9980;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 10px 0 30px rgba(0,0,0,0.5);
}

.master-sidebar__title {
    color: #4a4a4a;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-left: 10px;
}

.master-link {
    background: transparent;
    border: none;
    color: #cccccc;
    text-align: left;
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Poppins', sans-serif;
}

.master-link i {
    font-size: 1.2rem;
    color: #808080;
    transition: all 0.3s ease;
}

.master-link:hover {
    background: #1a1a1a;
    color: white;
}

.master-link.active {
    background: rgba(230, 0, 0, 0.1);
    color: #E60000;
    border-left: 4px solid #E60000;
}

.master-link.active i {
    color: #E60000;
}

/* ==========================================
   BADGE "MEGA" (Złoty wyróżnik Premium)
   ========================================== */
.mega-badge {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(90deg, #D4AF37 0%, #FFF5A5 50%, #D4AF37 100%);
    background-size: 200% auto;
    color: #050505;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 20px; 
    margin-left: auto;
    flex-shrink: 0; 
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4); 
    border: none;
    animation: shine-gold 3s linear infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@keyframes shine-gold {
    to { background-position: 200% center; }
}

/* ==========================================
   2. GŁÓWNY KONTENER NA TREŚĆ 
   ========================================== */
.tutorials-content-area {
    margin-left: 260px; 
    width: calc(100% - 260px);
}

.tutorial-wrapper {
    display: none; 
    max-width: 1500px; 
    margin: 0 auto;
    padding: 3rem 4rem 6rem 10px; 
    animation: fadeIn 0.4s ease forwards;
}

.tutorial-wrapper.active {
    display: flex; 
    align-items: flex-start;
    gap: 40px; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   3. WEWNĘTRZNY SIDEBAR (KOTWICE KROKÓW) 
   ========================================== */
.tutorial-sidebar {
    position: sticky; 
    top: 50vh;
    transform: translateY(-50%);
    left: 270px; 
    width: 65px;
    flex-shrink: 0; 
    z-index: 90;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: none; 
}

/* TWEAK DLA DŁUGIEJ PIGUŁKI (14 KROKÓW) - Daje ją nieco niżej! */
.tutorial-sidebar.long-sidebar {
    top: 55vh; 
    transform: translateY(-40%);
}
.tutorial-sidebar.long-sidebar .sidebar-nav {
    gap: 8px; /* Mniejsze odstępy, żeby się zmieściło */
    padding: 15px 8px;
}
.tutorial-sidebar.long-sidebar .sidebar-link {
    width: 40px;
    height: 40px;
    font-size: 1.1rem; /* Mniejsze ikonki */
}

.tutorial-sidebar::-webkit-scrollbar { display: none; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: #0d0d0d;
    padding: 20px 10px;
    border-radius: 40px; 
    border: 1px solid #1a1a1a;
    box-shadow: 0 15px 35px rgba(0,0,0,0.9);
}

.sidebar-link {
    width: 45px;
    height: 45px;
    border-radius: 14px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555555; 
    text-decoration: none;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0; 
}

.sidebar-link:hover { color: #ffffff; }

.sidebar-link.active {
    background-color: #E60000;
    color: white;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.6); 
}

.tooltip-text {
    position: absolute;
    left: 65px;
    background-color: #1E1E1E;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #2C2C2C;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.sidebar-link:hover .tooltip-text {
    opacity: 1; visibility: visible; transform: translateX(0);
}

.tutorial-content { flex-grow: 1; min-width: 0; }

/* ==========================================
   WYGLĄD TREŚCI PORADNIKA & CZERWONA POŚWIATA
   ========================================== */
.tutorial-header { text-align: center; margin-bottom: 5rem; }
.tutorial-header h1, .tutorial-header h2 { font-size: 4rem; font-weight: 900; margin: 0 0 1rem 0; text-transform: uppercase; }
.tutorial-header p { color: #808080; font-size: 1.2rem; max-width: 800px; margin: 0 auto; }
.text-red { color: #E60000; }

.tutorial-section {
    display: flex; 
    align-items: center; 
    gap: 3.5rem; 
    margin-bottom: 6rem;
    padding: 3rem; 
    background-color: #121212; 
    border: 1px solid #2C2C2C;
    border-radius: 30px; 
    /* Delikatna czerwona poświata w tle sekcji */
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 0 45px rgba(230, 0, 0, 0.05);
    overflow: hidden; 
    scroll-margin-top: 20vh; 
    transition: box-shadow 0.4s ease; 
}

/* Wzmocnienie poświaty po najechaniu myszką */
.tutorial-section:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 70px rgba(230, 0, 0, 0.12);
}

.tutorial-section.reverse { flex-direction: row-reverse; }

.tutorial-text { 
    flex: 1.1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.step-badge {
    display: inline-block; background-color: rgba(230, 0, 0, 0.1); color: #E60000;
    padding: 6px 18px; border-radius: 20px; font-weight: 800; font-size: 1rem;
    letter-spacing: 2px; margin-bottom: 1.5rem; width: max-content; border: 1px solid rgba(230, 0, 0, 0.3);
}

.tutorial-text h2 { font-size: 2.5rem; margin: 0 0 1.5rem 0; color: white; }

/* ==========================================
   LISTA KROKÓW Z FA-CHECK
   ========================================== */
.styled-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.styled-list li { 
    color: #cccccc; 
    font-size: 1.15rem; 
    line-height: 1.6; 
    display: block; 
    position: relative;
    padding-left: 48px; 
}

.styled-list li i.fa-check {
    position: absolute;
    left: 0;
    top: 3px;
    color: #E60000; 
    background-color: rgba(230, 0, 0, 0.1); 
    border: 1px solid rgba(230, 0, 0, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 50%; 
    font-size: 0.9rem; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================
   AFILIACYJNE RAMKI (AFF-BOX)
   ========================================== */
.aff-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #1a1a1a;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid #2C2C2C;
    margin-top: 10px;
    width: fit-content;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.aff-box.inline {
    display: inline-flex;
    margin-top: 0;
    vertical-align: middle; 
    padding: 4px 12px;
}

.aff-link {
    color: #cccccc;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

.aff-link i {
    color: #E60000;
    margin-right: 5px;
}

.aff-link:hover {
    color: #ffffff;
}

.aff-code {
    color: #E60000;
    font-weight: 800;
    letter-spacing: 1px;
}

.aff-copy {
    background: none;
    border: none;
    color: #808080;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.aff-copy:hover {
    color: #E60000;
    background-color: rgba(230, 0, 0, 0.1);
    transform: scale(1.1);
}

/* ==========================================
   BUTTONY PRZEJDŹ DO KARTY
   ========================================== */
.step-link-box {
    margin-top: 30px;
    align-self: flex-start; 
}

.step-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(230, 0, 0, 0.05); 
    color: #E60000;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 12px;
    border: 1px solid rgba(230, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.step-link-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.step-link-btn:hover {
    background-color: #E60000;
    color: white;
    box-shadow: 0 5px 20px rgba(230, 0, 0, 0.4);
    border-color: #E60000;
}

.step-link-btn:hover i {
    transform: translate(3px, -3px); 
}

/* ==========================================
   TUTORIAL SLIDER & ZOOM
   ========================================== */
.tutorial-slider {
    flex: 1; 
    position: relative; 
    border-radius: 20px; 
    overflow: hidden;
    aspect-ratio: 16 / 10; 
    border: 1px solid #2C2C2C; 
    background-color: #000; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

.slide { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    pointer-events: none; 
}

.slide.active { 
    opacity: 1; 
    pointer-events: auto; 
    cursor: zoom-in;
}

/* Nakładka Lupy & Zoom */
.tutorial-slider:hover .slide.active {
    transform: scale(1.08);
}

.tutorial-slider::after {
    content: '\f00e'; 
    font-family: "KF Icons";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0); 
    color: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5rem;
    pointer-events: none; 
    transition: all 0.4s ease;
    z-index: 4; 
}

.tutorial-slider:hover::after {
    background: rgba(5, 5, 5, 0.178); 
    backdrop-filter: blur(0.01px); 
    color: rgba(255, 255, 255, 0.9); 
}

.slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(5, 5, 5, 0.7);
    color: white; border: 1px solid rgba(255,255,255,0.1); width: 50px; height: 50px;
    border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s; z-index: 5; font-size: 1.2rem;
}

.slider-btn:hover { background: #E60000; border-color: #E60000; }
.prev-btn { left: 15px; } .next-btn { right: 15px; }

.slider-dots {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex;
    gap: 10px; z-index: 5; background: rgba(0,0,0,0.5); padding: 8px 15px; border-radius: 20px;
}

.dot { width: 12px; height: 12px; background-color: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: all 0.3s; }
.dot.active { background-color: #E60000; transform: scale(1.3); }

/* ==========================================
   ANIMACJE WJAZDU NA SCROLL
   ========================================== */
.tutorial-section .tutorial-slider,
.tutorial-section .tutorial-text {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tutorial-section:not(.reverse) .tutorial-slider { transform: translateX(-150px); }
.tutorial-section:not(.reverse) .tutorial-text { transform: translateX(150px); }

.tutorial-section.reverse .tutorial-text { transform: translateX(-150px); }
.tutorial-section.reverse .tutorial-slider { transform: translateX(150px); }

.tutorial-section.animate-in .tutorial-slider,
.tutorial-section.animate-in .tutorial-text {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================
   MODAL DO ZDJĘĆ (Lightbox)
   ========================================== */
.custom-image-modal {
    display: none; 
    position: fixed;
    z-index: 999999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.85); 
    backdrop-filter: blur(8px); 
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-image-modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.custom-image-modal .modal-content {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 15px;
    box-shadow: 0 15px 50px rgba(230, 0, 0, 0.2); 
    border: 2px solid #2C2C2C;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.custom-image-modal.show .modal-content {
    transform: scale(1); 
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #cccccc;
    font-size: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000000;
}

.close-modal:hover {
    color: #E60000;
    transform: scale(1.1) rotate(90deg); 
}
/* Kontener dla przycisku wideo */
/* BOCZNY PRZYCISK - Zawsze widoczny */
/* --- WERSJA DESKTOP (PC) --- */
.sticky-yt-btn {
    position: fixed;
    right: 0; /* Przyklejony całkowicie do prawej krawędzi */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13, 13, 13, 0.85);
    backdrop-filter: blur(8px); /* Efekt rozmycia tła pod przyciskiem */
    border: 1px solid #2a2a2a;
    border-right: none;
    border-radius: 16px 0 0 16px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 25px rgba(0,0,0,0.5);
}

.sticky-yt-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #E60000, #990000);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.sticky-yt-text {
    /* Litery ustawione pionowo, jedna pod drugą */
    writing-mode: vertical-rl;
    text-orientation: upright; 
    color: #888888;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -3px; /* Zmniejszamy odstęp między literami w pionie */
    transition: color 0.3s ease;
}

/* Efekty po najechaniu myszką */
.sticky-yt-btn:hover {
    background: #111111;
    border-color: #E60000;
    padding-right: 15px; /* Lekko wysuwa się w lewo */
    box-shadow: -8px 0 30px rgba(230, 0, 0, 0.15);
}

.sticky-yt-btn:hover .sticky-yt-icon {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(230, 0, 0, 0.7);
}

.sticky-yt-btn:hover .sticky-yt-text {
    color: #ffffff;
}

/* --- WERSJA MOBILNA (Telefony) --- */
@media (max-width: 768px) {
    .sticky-yt-btn {
        top: auto;
        bottom: 25px; /* Odstęp od dołu */
        right: 20px;  /* Odstęp od prawej */
        transform: none;
        border: 1px solid #2a2a2a;
        border-radius: 50%; /* Zmieniamy w idealne koło */
        padding: 10px;
        background: rgba(13, 13, 13, 0.95);
        box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    }

    .sticky-yt-text {
        display: none; /* Na telefonie ukrywamy tekst, zostawiamy samą ikonę */
    }

    .sticky-yt-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        border-radius: 50%; /* Okrągła ikona */
        animation: pulse-red 2s infinite; /* Dodajemy animację zwracającą uwagę */
    }

    /* Animacja pulsowania dla mobilki */
    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.5); }
        70% { box-shadow: 0 0 0 12px rgba(230, 0, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(230, 0, 0, 0); }
    }
}

/* ==========================================
   RESPONSYWNOŚĆ (MOBILE)
   ========================================== */
@media (max-width: 1200px) {
    .tutorials-page-wrapper { flex-direction: column; }
    
    .master-sidebar {
        position: sticky; top: 100px; left: 0; width: 100%; height: auto;
        flex-direction: row; border-right: none; border-bottom: 1px solid #2C2C2C;
        padding: 10px; overflow-x: auto; box-shadow: 0 10px 20px rgba(0,0,0,0.3); align-items: center;
        z-index: 9980;
    }
    
    .master-sidebar__title { display: none; }
    .master-link { white-space: nowrap; padding: 10px 15px; }
    .tutorials-content-area { margin-left: 0; width: 100%; }
    /* kolumna: rozciągnij elementy na pełną szerokość, inaczej .tutorial-content
       przyjmuje swoją max-content szerokość i wychodzi poza ekran (poziomy scroll) */
    .tutorial-wrapper.active { flex-direction: column; gap: 20px; align-items: stretch; }
    .tutorial-content { width: 100%; max-width: 100%; min-width: 0; }
    .full-width-info, .tutorial-section.full-width-info { padding: 2rem 1.25rem; }
    .rules-grid { grid-template-columns: 1fr; }
    
    .tutorial-sidebar {
        width: 100%; position: fixed; bottom: 20px; top: auto; left: 0;
        transform: none; z-index: 9999; display: flex; justify-content: center; max-height: none;
    }
    
    .sidebar-nav { flex-direction: row; border-radius: 40px; padding: 10px 20px; gap: 10px; }
    .tutorial-sidebar.long-sidebar .sidebar-nav { padding: 10px; gap: 5px; } 
    .tooltip-text { display: none; }
    
    .tutorial-wrapper { padding: 2rem 1rem 6rem 1rem; }
    .tutorial-section, .tutorial-section.reverse { flex-direction: column; gap: 3rem; padding: 2rem; }
    .tutorial-section .tutorial-slider, .tutorial-section .tutorial-text { opacity: 1; transform: none !important; }
    .tutorial-slider { width: 100%; }
}
/* ==========================================
   SEKCJA INFORMACYJNA (ZASADY I LIMITY)
   ========================================== */
.tutorial-section.full-width-info {
    display: block;
    padding: 3rem 4rem;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.rule-card {
    background: rgba(18, 18, 18, 0.5);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.rule-card:hover {
    border-color: var(--primary);
    background: rgba(230, 0, 0, 0.05);
    transform: translateY(-5px);
}

.rule-card h3 {
    color: white;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rule-card h3 i {
    color: var(--primary);
    font-size: 1.2rem;
}

.rule-card p, .rule-card ul {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.rule-card ul {
    padding-left: 20px;
    margin-top: 10px;
}

.rule-card ul li {
    margin-bottom: 5px;
}

.rule-card ul li::marker {
    color: var(--primary);
}

/* ==========================================
   MOBILE (RESPONSYWNOŚĆ TUTORIALA)
   ========================================== */

@media (max-width: 768px) {

    .tutorial-content {
        padding: 0 5vw;
    }

    .tutorial-header h1, .tutorial-header h2 {
        font-size: 6vw;
        line-height: 1.2;
    }

    .tutorial-header p {
        font-size: 3.5vw;
    }

    /* GŁÓWNA SEKCJA */
    .tutorial-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    /* RESET reverse */
    .tutorial-section.reverse {
        flex-direction: column;
    }

    /* SLIDER / OBRAZ */
    .tutorial-slider {
        width: 100%;
        height: auto;
        border-radius: 12px;
        overflow: hidden;
    }

    .tutorial-slider img,
    .tutorial-slider video {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* TEKST */
    .tutorial-text {
        width: 100%;
    }

    .tutorial-text h2 {
        font-size: 5vw;
        line-height: 1.3;
    }

    .tutorial-text p,
    .tutorial-text li {
        font-size: 3.6vw;
        line-height: 1.6;
    }

    .step-badge {
        font-size: 3vw;
        padding: 6px 12px;
    }

    /* LISTA */
    .styled-list {
        padding-left: 0;
    }

    .styled-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    /* BUTTONY */
    .step-link-box {
        margin-top: 15px;
    }

    .step-link-btn {
        width: 100%;
        justify-content: center;
        font-size: 3.5vw;
        padding: 12px;
    }

    /* SLIDER BUTTONY */
    .slider-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* RULES GRID */
    .rules-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rule-card h3 {
        font-size: 4.5vw;
    }

    .rule-card p,
    .rule-card li {
        font-size: 3.5vw;
    }

    /* SIDEBAR (opcjonalnie ukrycie na mobile) */
    .tutorial-sidebar {
        display: none;
    }
}

/* ==========================================
   FALLBACK DLA NIEDZIAŁAJĄCYCH SCREENÓW
   ========================================== */
.slide-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 35%, rgba(230, 0, 0, 0.08), transparent 60%),
        linear-gradient(160deg, #141414, #0c0c0c);
    color: #8a8a8a;
}
.slide-fallback i {
    font-size: 2.6rem;
    color: #E60000;
    opacity: 0.55;
}
.slide-fallback span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #b5b5b5;
    max-width: 80%;
    line-height: 1.4;
}

/* ==========================================
   TOAST (kopiowanie linków/kodów)
   ========================================== */
.tut-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 100001;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #1d1d1d, #121212);
    border: 1px solid #2c2c2c;
    border-left: 3px solid #2ecc71;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.18, 0.9, 0.32, 1.2), visibility 0.3s;
    max-width: 90vw;
}
.tut-toast i { color: #2ecc71; }
.tut-toast.tut-toast--err { border-left-color: #E60000; }
.tut-toast.tut-toast--err i { color: #E60000; }
.tut-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ===== css/oszacujpake/oszacujpake.css ===== */
.package-calc {
    background-color: #050505;
    min-height: 100vh;
    padding: 130px 20px 80px 20px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.calc-bg-elements {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.calc-glow-top {
    position: absolute; top: -10%; right: -5%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(230, 0, 0, 0.15) 0%, transparent 60%);
    filter: blur(80px);
}
.calc-glow-bottom {
    position: absolute; bottom: 10%; left: -10%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 60%);
    filter: blur(80px);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.calc-header { text-align: center; max-width: 800px; margin: 0 auto 50px auto; position: relative; z-index: 2;}
.calc-badges { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; flex-wrap: wrap;}
.header-badge, .rate-badge { display: inline-flex; align-items: center; gap: 8px; background: #1E1E1E; color: #888; border: 1px solid #333; padding: 6px 18px; border-radius: 20px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;}
.rate-badge { color: #ccc; background: rgba(46, 204, 113, 0.05); border-color: rgba(46, 204, 113, 0.3);}
.rate-badge i { color: #2ecc71; font-size: 1rem;}
.header-title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 15px; line-height: 1.1;}
.text-red { color: #E60000; }
.header-subtitle { color: #808080; font-size: 1.1rem; line-height: 1.6;}

.calc-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    max-width: 1300px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 2;
}

.calc-panel {
    background: #121212; border: 1px solid #2C2C2C; border-radius: 24px; padding: 35px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #1E1E1E; padding-bottom: 15px;}
.panel-top h2 { font-size: 1.3rem; margin: 0; display: flex; align-items: center; gap: 10px;}
.panel-top h2 i { color: #E60000; }
.ai-status { font-size: 0.75rem; color: #aaa; background: #1a1a1a; padding: 4px 10px; border-radius: 12px; border: 1px solid #333;}
.text-green { color: #2ecc71; animation: pulseG 2s infinite;}
@keyframes pulseG { 0%, 100% {opacity:1;} 50% {opacity:0.4;}}

.input-wrapper label { display: block; font-size: 0.85rem; color: #888; margin-bottom: 10px; text-transform: uppercase; font-weight: 600;}
.multi-input-box { display: flex; gap: 15px; margin-bottom: 20px;}
.search-input-box { position: relative; margin-bottom: 0 !important; }
.search-input-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #666; font-size: 1.2rem;}
.search-input-box input { width: 100%; background: #0a0a0a; border: 2px solid #222; color: #fff; padding: 20px 20px 20px 50px; border-radius: 16px; font-family: 'Poppins'; font-size: 1.05rem; transition: 0.3s; box-sizing: border-box;}
.search-input-box input:focus { border-color: #E60000; outline: none; box-shadow: 0 0 20px rgba(230,0,0,0.15);}

.item-name-box { flex: 5; }
.item-size-box { flex: 2; }
.item-weight-box { flex: 2; }
.item-weight-box input { border-color: rgba(230,0,0,0.3); background: rgba(230,0,0,0.02); }

@media (max-width: 768px) {
    .multi-input-box { flex-direction: column; gap: 15px; }
}

.qty-and-add { display: flex; gap: 20px; margin-bottom: 25px; margin-top: 15px; }
.qty-selector { display: flex; align-items: center; background: #0a0a0a; border: 1px solid #333; border-radius: 16px; overflow: hidden;}
.qty-selector button { background: transparent; border: none; color: #888; width: 50px; height: 55px; cursor: pointer; transition: 0.2s; font-size: 1.1rem;}
.qty-selector button:hover { background: #1E1E1E; color: #fff;}
.qty-selector input { width: 50px; text-align: center; background: transparent; border: none; color: #fff; font-size: 1.2rem; font-weight: 700; outline: none; font-family: 'Poppins'; pointer-events: none;}

.btn-add-glow { flex: 1; background: #E60000; color: #fff; border: none; border-radius: 16px; font-family: 'Poppins'; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 10px 20px rgba(230,0,0,0.2);}
.btn-add-glow:hover { background: #FF1A1A; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(230,0,0,0.4);}
.btn-add-glow:disabled { background: #555; box-shadow: none; transform: none; cursor: not-allowed;}

.quick-tags { display: flex; flex-wrap: wrap; gap: 10px;}
.q-tag { background: #1E1E1E; border: 1px solid #333; color: #aaa; padding: 6px 14px; border-radius: 8px; font-size: 0.8rem; cursor: pointer; transition: 0.2s;}
.q-tag:hover { background: #E60000; color: #fff; border-color: #E60000;}

.receipt-panel { display: flex; flex-direction: column; background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);}
.receipt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px dashed #2C2C2C; padding-bottom: 20px;}
.receipt-header h2 { font-size: 1.2rem; margin: 0; color: #ddd; display: flex; align-items: center; gap: 10px;}
.agent-brand { height: 28px; opacity: 0.8;}

.cart-container { flex: 1; min-height: 200px; max-height: 350px; overflow-y: auto; padding-right: 5px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;}
.cart-container::-webkit-scrollbar { width: 5px; }
.cart-container::-webkit-scrollbar-track { background: transparent; }
.cart-container::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

.empty-state { text-align: center; color: #555; padding: 50px 0; display: flex; flex-direction: column; align-items: center; gap: 15px;}
.empty-state i { font-size: 3rem; opacity: 0.5;}

.cart-item { background: #1a1a1a; border: 1px solid #222; border-left: 3px solid #E60000; border-radius: 12px; padding: 15px; display: flex; justify-content: space-between; align-items: center; animation: slideIn 0.3s ease;}
@keyframes slideIn { from {opacity:0; transform:translateX(-20px);} to {opacity:1; transform:translateX(0);}}

.ci-left { display: flex; flex-direction: column; gap: 5px; flex: 1;}
.ci-name { font-weight: 600; font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;}
.ci-meta-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ci-source { font-size: 0.7rem; color: #888; display: flex; align-items: center; gap: 5px;}
.ci-source.ai { color: #FFD700; }

.ci-box-btn { 
    background: transparent; border: 1px solid #3498db; color: #3498db; 
    padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; cursor: pointer; 
    transition: 0.2s; display: flex; align-items: center; gap: 4px; font-family: 'Poppins';
}
.ci-box-btn:hover { background: rgba(52, 152, 219, 0.1); }
.ci-box-btn.inactive { border-color: #555; color: #555; text-decoration: line-through; }
.ci-box-btn.inactive:hover { background: rgba(255,255,255,0.05); color: #888; text-decoration: none;}

.ci-box-input {
    background: transparent;
    border: none;
    color: inherit;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: bold;
    width: 32px;
    text-align: right;
    outline: none;
    cursor: text;
    transition: 0.3s;
}
.ci-box-input:focus {
    color: #fff;
    border-bottom: 1px solid #3498db;
}
.ci-box-btn.inactive .ci-box-input {
    pointer-events: none;
}

.ci-mid { display: flex; align-items: center; background: #050505; border: 1px solid #333; border-radius: 8px; overflow: hidden; margin: 0 15px;}
.ci-mid button { background: transparent; border: none; color: #888; width: 28px; height: 28px; cursor: pointer;}
.ci-mid button:hover { color: #fff; background: #222;}
.ci-mid span { width: 30px; text-align: center; font-size: 0.9rem; font-family: monospace; font-weight: bold;}

.ci-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end;}
.ci-trash { background: transparent; border: none; color: #666; font-size: 1.1rem; cursor: pointer; transition: 0.2s;}
.ci-trash:hover { color: #E60000; transform: scale(1.1);}

.ci-weight-editor {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed transparent;
    border-radius: 6px;
    padding: 4px 8px;
    transition: all 0.3s ease;
    cursor: text;
}
.ci-weight-editor:hover, .ci-weight-editor:focus-within {
    border-color: #E60000;
    background: rgba(230, 0, 0, 0.08);
}
.inline-weight-input {
    background: transparent;
    border: none;
    color: #FFF;
    font-size: 1.1rem;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    width: 65px;
    text-align: right;
    outline: none;
    padding: 0;
    margin-right: 5px;
    transition: 0.3s;
}
.inline-weight-input:focus { color: #E60000; }
.weight-unit { color: #888; font-size: 0.9rem; font-weight: 600; }

.receipt-summary { background: #050505; border-radius: 16px; padding: 20px; border: 1px solid #222; margin-bottom: 20px;}
.summary-line { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; color: #888; margin-bottom: 8px;}
.weight-highlight { color: #fff; font-family: monospace; font-size: 1.1rem; background: #1E1E1E; padding: 4px 10px; border-radius: 6px;}

.price-base { font-family: monospace; font-size: 1.05rem; color: #aaa; text-decoration: line-through;}
.discount-line { color: #2ecc71; font-weight: 500; background: rgba(46, 204, 113, 0.05); padding: 5px 10px; border-radius: 6px; margin: 5px -10px;}
.price-discount { font-family: monospace; font-weight: 700; font-size: 1.1rem;}

.total-line { margin-top: 15px; padding-top: 15px; border-top: 1px solid #2C2C2C; align-items: flex-end;}
.price-stack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;}
.price-usd { font-size: 2rem; font-weight: 900; color: #E60000; font-family: 'Poppins';}
.price-pln { font-size: 0.9rem; color: #666; font-weight: 500;}

.referral-banner {
    display: flex; align-items: center; gap: 15px;
    background: linear-gradient(135deg, rgba(230,0,0,0.15) 0%, rgba(255,215,0,0.05) 100%);
    border: 1px solid rgba(230,0,0,0.3); border-radius: 16px;
    padding: 15px 20px; text-decoration: none; color: #fff;
    margin-bottom: 20px; transition: 0.3s;
}
.referral-banner:hover { border-color: #E60000; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(230,0,0,0.2);}
.ref-icon-bg { width: 45px; height: 45px; background: rgba(230,0,0,0.2); border-radius: 12px; display: flex; justify-content: center; align-items: center; color: #E60000; font-size: 1.2rem; flex-shrink: 0;}
.ref-text { display: flex; flex-direction: column; flex: 1;}
.ref-text strong { font-size: 0.95rem; font-weight: 700;}
.ref-text span { font-size: 0.8rem; color: #aaa; margin-top: 3px;}
.referral-banner > i { color: #888; font-size: 1.1rem; transition: 0.2s;}
.referral-banner:hover > i { color: #E60000; transform: translateX(3px) translateY(-3px);}

.receipt-actions { display: flex; gap: 15px;}
.btn-icon { width: 55px; height: 55px; background: #1a1a1a; border: 1px solid #333; border-radius: 14px; color: #888; cursor: pointer; transition: 0.2s; font-size: 1.2rem;}
.btn-icon:hover { background: rgba(230,0,0,0.1); border-color: #E60000; color: #E60000;}
.btn-primary { flex: 1; background: #fff; color: #000; border: none; border-radius: 14px; font-family: 'Poppins'; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px;}
.btn-primary:hover { background: #e0e0e0; transform: translateY(-2px);}

.saved-packages-section {
    width: 100%;
    max-width: 1300px;
    margin: 40px auto 0 auto;
    position: relative;
    z-index: 2;
}

.saved-packages-container {
    background: #121212;
    border: 1px solid #2C2C2C;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.saved-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2C2C2C;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.saved-header h2 { font-size: 1.5rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 12px; color: #fff;}
.saved-header h2 i { color: #E60000; }
.btn-text-danger { background: transparent; border: none; color: #888; font-family: 'Poppins'; text-decoration: underline; cursor: pointer; transition: 0.2s; font-size: 0.95rem; font-weight: 500;}
.btn-text-danger:hover { color: #E60000;}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.pkg-card { background: #0a0a0a; border: 1px solid #222; border-radius: 16px; padding: 25px; transition: 0.3s; position: relative; display: flex; flex-direction: column;}
.pkg-card:hover { border-color: #E60000; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5);}

.pkg-del { position: absolute; top: 15px; right: 15px; background: transparent; border: none; color: #666; font-size: 1.2rem; cursor: pointer; transition: 0.3s;}
.pkg-del:hover { color: #E60000; transform: scale(1.1);}

.pkg-date { font-size: 0.8rem; color: #666; margin-bottom: 15px; display: block;}
.pkg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #222;}
.pkg-weight { font-family: monospace; font-size: 1.2rem; color: #fff; font-weight: bold; background: #1a1a1a; padding: 4px 10px; border-radius: 8px;}
.pkg-price { color: #E60000; font-size: 1.4rem; font-weight: 900;}

.pkg-items { font-size: 0.85rem; color: #aaa; margin-bottom: 20px; flex-grow: 1;}
.pkg-items div { margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pkg-items i { color: #666;}

.pkg-actions { margin-top: auto;}
.pkg-load { width: 100%; background: #1E1E1E; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-family: 'Poppins'; transition: 0.2s; font-weight: 600;}
.pkg-load:hover { background: #fff; color: #000;}

.scroll-anim { opacity: 0; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.scroll-up { transform: translateY(40px); }
.scroll-left { transform: translateX(-40px); }
.scroll-right { transform: translateX(40px); }
.scroll-fade { transform: scale(0.95); }
.scroll-anim.is-in-view { opacity: 1; transform: translate(0) scale(1); }
.delay-1 { transition-delay: 0.2s; }

@media (max-width: 1024px) {
    .calc-grid { grid-template-columns: 1fr; }
    .package-calc { padding-top: 100px; }
}
/* --- NEW COMPACT CARRIERS UI & TOGGLE --- */
.toggle-line {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dashed #222;
    color: #ccc;
    font-size: 0.9rem;
}

/* The Switch - Toggle */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #E60000; }
input:checked + .slider:before { transform: translateX(20px); }

.carriers-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.carrier-card {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: 0.3s;
}
.carrier-card:hover { background: #111; border-color: #333; }
.carrier-card.dhl-card { border-left: 3px solid #D40511; } 
.carrier-card.ems-card { border-left: 3px solid #FF8C00; } 

.carrier-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 8px;
}

.carrier-logo { height: 20px; object-fit: contain; }

.trust-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.trust-badge.safe { background: rgba(46, 204, 113, 0.08); color: #2ecc71; }
.trust-badge.warning { background: rgba(230, 0, 0, 0.08); color: #E60000; }

.carrier-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
}

.c-details { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: #888; }
.c-row { display: flex; justify-content: space-between; gap: 10px;}
.c-row span:last-child { font-family: monospace; font-weight: 600;}
.text-green { color: #2ecc71; }
.price-base { color: #888; text-decoration: line-through; }

.c-final { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.price-usd { font-size: 1.6rem; font-weight: 900; color: #E60000; font-family: 'Poppins'; }
.price-pln { font-size: 0.8rem; color: #666; font-weight: 500; }

/* ==================================================================== */
/*  SILNIK WYSYŁKI v2 — rekomendacja + filtry + ranking przewoźników     */
/* ==================================================================== */
.ship-engine { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }

/* —— NAGŁÓWEK / REKOMENDACJA —— */
.ship-headline {
    background: linear-gradient(135deg, rgba(230,0,0,0.14), rgba(255,215,0,0.05));
    border: 1px solid rgba(230,0,0,0.35); border-radius: 16px; padding: 16px 18px;
}
.ship-headline-empty { color: #777; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; justify-content: center; padding: 6px 0; text-align: center; }
.ship-headline-empty i { color: #E60000; font-size: 1.1rem; }
.ship-headline__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ship-headline__left { display: flex; flex-direction: column; gap: 6px; }
.ship-headline__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px; color: #FFB3B3; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.ship-headline__label i { color: #FFD700; }
.ship-headline__carrier { font-size: 1.02rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ship-headline__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.ship-headline__old { font-size: 0.85rem; color: #888; text-decoration: line-through; font-family: monospace; }
.ship-headline__final { font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
.ship-headline__usd { font-size: 0.78rem; color: #999; font-weight: 600; }
.ship-headline__save { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8rem; color: #2ecc71; background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.25); padding: 5px 11px; border-radius: 8px; }
.ship-headline__save b { color: #fff; }

/* —— FILTRY / SORTOWANIE —— */
.carrier-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-group { display: flex; gap: 7px; flex-wrap: wrap; }
.cf-chip {
    display: inline-flex; align-items: center; gap: 6px; background: #141414; border: 1px solid #2a2a2a;
    color: #aaa; padding: 7px 12px; border-radius: 9px; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: 0.2s; font-family: 'Poppins'; white-space: nowrap;
}
.cf-chip i { font-size: 0.8rem; opacity: 0.8; }
.cf-chip:hover { background: #1d1d1d; color: #fff; border-color: #3a3a3a; }
.cf-chip.active { background: #E60000; color: #fff; border-color: #E60000; box-shadow: 0 4px 12px rgba(230,0,0,0.25); }
.cf-sort-chip.active { background: #fff; color: #000; border-color: #fff; box-shadow: none; }

/* —— LISTA PRZEWOŹNIKÓW (grid 2 kolumny) —— */
.carrier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .carrier-list { grid-template-columns: 1fr; } }
.ccard {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
    background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 12px; padding: 13px 15px; transition: 0.2s;
}
.ccard:hover { background: #111; border-color: #2e2e2e; }
.ccard--best { background: rgba(230,0,0,0.05); border-color: rgba(230,0,0,0.28); }

.ccard-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.ccard-dot--dhl { background: #f5c400; }
.ccard-dot--ems { background: #1f6fb2; }
.ccard-dot--dpd { background: #e0002d; }
.ccard-dot--ups { background: #a07b3c; }
.ccard-dot--buty { background: #9b59b6; }

.ccard-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ccard-name { font-size: 0.9rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.25; }
.ccard-sub { font-size: 0.74rem; color: #888; }
.ccard-flag { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 6px; border-radius: 5px; background: rgba(230,0,0,0.14); color: #ff6b6b; }
.ccard-flag--fast { background: rgba(46,204,113,0.12); color: #2ecc71; }

.ccard-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.ccard-old { font-size: 0.72rem; color: #777; text-decoration: line-through; font-family: monospace; }
.ccard-final { font-size: 1.15rem; font-weight: 800; color: #fff; font-family: 'Poppins'; }
.ccard--best .ccard-final { color: #E60000; }

.carrier-showall { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #111; border: 1px dashed #2c2c2c; color: #aaa; padding: 11px; border-radius: 11px; cursor: pointer; font-family: 'Poppins'; font-size: 0.82rem; font-weight: 600; transition: 0.2s; }
.carrier-showall:hover { background: #161616; color: #fff; border-color: #3a3a3a; }

/* —— LINIA KUPONÓW —— */
.coupon-strip { font-size: 0.8rem; color: #999; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px; }
.coupon-strip i { color: #FFD700; }
.coupon-strip a { color: #E60000; text-decoration: none; font-weight: 600; }
.coupon-strip a:hover { text-decoration: underline; }

/* —— ZNACZNIK PEWNOŚCI AI —— */
.ci-conf { font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 5px; border: 1px solid; }
.ci-conf--high { color: #2ecc71; border-color: rgba(46,204,113,0.3); background: rgba(46,204,113,0.07); }
.ci-conf--medium { color: #e6b800; border-color: rgba(230,184,0,0.3); background: rgba(230,184,0,0.06); }
.ci-conf--low { color: #e07b39; border-color: rgba(224,123,57,0.3); background: rgba(224,123,57,0.06); }

/* —— ETYKIETA PRZEWOŹNIKA W HISTORII —— */
.pkg-carrier { display: block; font-size: 0.74rem; color: #888; margin: -8px 0 14px; }

@media (max-width: 520px) {
    .ccard { grid-template-columns: 24px 1fr auto; gap: 9px; padding: 11px; }
    .ccard-name { font-size: 0.86rem; }
    .ccard-final { font-size: 1.12rem; }
    .ship-headline__final { font-size: 1.7rem; }
    .carrier-filters { gap: 8px; }
}

/* ==================================================================== */
/*  SEKCJA SEO — cennik wysyłki + FAQ                                    */
/* ==================================================================== */
.ep-seo { width: 100%; max-width: 1300px; margin: 50px auto 0; position: relative; z-index: 2; }
.ep-seo__intro { background: rgba(230,0,0,0.04); border: 1px solid rgba(230,0,0,0.15); border-radius: 18px; padding: 26px 30px; }
.ep-seo__intro h2 { font-size: 1.55rem; margin: 0 0 14px; color: #fff; display: flex; align-items: center; gap: 12px; }
.ep-seo__intro h2 i { color: #E60000; }
.ep-seo__intro p { color: #cfcfcf; line-height: 1.75; font-size: 1.02rem; margin: 0; }
.ep-seo__intro strong { color: #fff; }
.ep-seo__intro em { color: #FFD700; font-style: normal; }

.ep-rates { width: 100%; border-collapse: collapse; margin: 26px 0 8px; background: #121212; border: 1px solid #2C2C2C; border-radius: 14px; overflow: hidden; font-size: 0.92rem; }
.ep-rates caption { caption-side: top; text-align: left; padding: 14px 16px; font-weight: 700; color: #fff; background: rgba(230,0,0,0.07); }
.ep-rates caption i { color: #E60000; margin-right: 8px; }
.ep-rates th { background: rgba(255,255,255,0.03); padding: 12px 14px; text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; border-bottom: 1px solid #2C2C2C; }
.ep-rates td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #ccc; }
.ep-rates td:nth-child(n+4) { font-family: monospace; font-weight: 700; color: #fff; text-align: right; }
.ep-rates th:nth-child(n+4) { text-align: right; }
.ep-rates tbody tr:last-child td { border-bottom: none; }
.ep-rates tbody tr:hover td { background: rgba(255,255,255,0.02); }
.ep-rates__best td { background: rgba(46,204,113,0.05); }
.ep-rates__best:hover td { background: rgba(46,204,113,0.08) !important; }
.ep-rates__tag { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; background: rgba(46,204,113,0.14); color: #2ecc71; padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.ep-rates__tag--fast { background: rgba(230,0,0,0.14); color: #ff6b6b; }
.ep-rates__note { font-size: 0.78rem; color: #777; line-height: 1.6; margin: 8px 2px 0; }

.ep-faq { margin-top: 42px; background: #121212; border: 1px solid #2C2C2C; border-radius: 20px; padding: 30px 32px; }
.ep-faq h2 { font-size: 1.55rem; margin: 0 0 22px; color: #fff; display: flex; align-items: center; gap: 12px; }
.ep-faq h2 i { color: #E60000; }
.ep-faq__item { border-bottom: 1px solid #2C2C2C; padding: 16px 0; }
.ep-faq__item:last-child { border-bottom: none; }
.ep-faq__item summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; }
.ep-faq__item summary::-webkit-details-marker { display: none; }
.ep-faq__item summary::after { content: '+'; font-size: 1.5rem; color: #E60000; font-weight: 300; line-height: 1; transition: transform 0.2s; }
.ep-faq__item[open] summary::after { transform: rotate(45deg); }
.ep-faq__item summary:hover { color: #E60000; }
.ep-faq__item p { margin: 12px 0 2px; color: #bbb; line-height: 1.7; font-size: 0.95rem; }
.ep-faq__item a { color: #E60000; text-decoration: none; }
.ep-faq__item a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .ep-seo__intro { padding: 20px; }
    .ep-rates { display: block; overflow-x: auto; white-space: nowrap; }
    .ep-faq { padding: 22px; }
}

/* ==================================================================== */
/*  REDESIGN: kompaktowy wynik w prawym panelu + pełnoszerokie porównanie */
/* ==================================================================== */

/* lewy panel trzyma się w widoku gdy prawa kolumna jest długa */
.input-panel { position: sticky; top: 90px; align-self: start; }

/* —— KOMPAKTOWY WYNIK (prawy panel) —— */
.ship-mini {
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(230,0,0,0.13), rgba(255,215,0,0.04));
    border: 1px solid rgba(230,0,0,0.32); border-radius: 16px; padding: 16px 18px;
}
.ship-mini-empty { color: #777; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; padding: 8px 0; }
.ship-mini-empty i { color: #E60000; }
.ship-mini__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ship-mini__left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ship-mini__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.7px; color: #FFB3B3; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.ship-mini__label i { color: #FFD700; }
.ship-mini__carrier { font-size: 1rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ship-mini__sub { font-size: 0.74rem; color: #9a9a9a; display: inline-flex; align-items: center; gap: 6px; }
.ship-mini__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.ship-mini__old { font-size: 0.82rem; color: #888; text-decoration: line-through; font-family: monospace; }
.ship-mini__final { font-size: 1.85rem; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
.ship-mini__usd { font-size: 0.75rem; color: #999; font-weight: 600; }
.ship-mini__save { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 0.78rem; color: #2ecc71; background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.25); padding: 5px 11px; border-radius: 8px; }
.ship-mini__save b { color: #fff; }
.ship-mini__compare {
    width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 9px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #fff;
    padding: 11px; border-radius: 11px; cursor: pointer; font-family: 'Poppins'; font-size: 0.84rem; font-weight: 700; transition: 0.2s;
}
.ship-mini__compare:hover { background: rgba(230,0,0,0.16); border-color: rgba(230,0,0,0.5); }
.ship-mini__compare .fa-arrow-down { font-size: 0.72rem; opacity: 0.7; }

/* —— PEŁNOSZEROKA SEKCJA PORÓWNANIA —— */
.calc-results {
    width: 100%; max-width: 1300px; margin: 34px auto 0; position: relative; z-index: 2;
    background: #121212; border: 1px solid #2C2C2C; border-radius: 24px; padding: 30px 32px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 16px;
}
.calc-results.is-hidden { display: none; }
.cr-head { border-bottom: 1px solid #1f1f1f; padding-bottom: 16px; }
.cr-head h2 { font-size: 1.5rem; font-weight: 800; margin: 0; color: #fff; display: flex; align-items: center; gap: 12px; }
.cr-head h2 i { color: #E60000; }
.cr-count { font-size: 0.95rem; color: #777; font-weight: 600; }
.cr-sub { margin: 8px 0 0; color: #888; font-size: 0.9rem; line-height: 1.5; }

/* —— BLOK "JAK TO DZIAŁA" (wypełnia lewą kolumnę) —— */
.calc-howto { margin-top: 26px; border-top: 1px dashed #222; padding-top: 22px; }
.calc-howto h3 { font-size: 1.02rem; color: #fff; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.calc-howto h3 i { color: #E60000; }
.calc-howto__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.calc-howto__steps li { display: flex; gap: 13px; align-items: flex-start; }
.calc-howto__steps li > span { flex-shrink: 0; width: 27px; height: 27px; border-radius: 8px; background: rgba(230,0,0,0.13); color: #E60000; font-weight: 800; display: grid; place-items: center; font-size: 0.85rem; border: 1px solid rgba(230,0,0,0.25); }
.calc-howto__steps li b { color: #eee; font-size: 0.93rem; }
.calc-howto__steps li p { margin: 3px 0 0; color: #888; font-size: 0.82rem; line-height: 1.5; }
.calc-howto__facts { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.chf { display: flex; align-items: center; gap: 11px; font-size: 0.82rem; color: #bbb; background: #0a0a0a; border: 1px solid #1c1c1c; border-radius: 9px; padding: 10px 13px; }
.chf i { color: #FFD700; width: 16px; text-align: center; flex-shrink: 0; }

@media (max-width: 1024px) {
    .input-panel { position: static; top: auto; }
    .calc-results { padding: 24px 20px; }
}
/* Szybka odpowiedź pod H1 + tabela wg wagi + czas dostawy (audyt 2026-09-23) */
.ep-answer { margin: 14px auto 0; max-width: 760px; padding: 12px 16px; border-left: 3px solid #E60000; background: rgba(255,255,255,0.03); border-radius: 0 12px 12px 0; color: #cfcfcf; font-size: 0.98rem; line-height: 1.6; text-align: left; }
.ep-answer strong { color: #fff; }
.ep-answer a { color: #ff4d4d; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ep-answer a:hover { text-decoration: underline; }
.ep-seo__h3 { font-size: 1.2rem; color: #fff; margin: 34px 0 6px; }
.ep-seo__p { color: #cfcfcf; line-height: 1.75; font-size: 1.02rem; margin: 10px 0 0; }
.ep-seo__p strong { color: #fff; }
.ep-seo__p a { color: #ff4d4d; }
@media (max-width: 700px) {
    .ep-answer { font-size: 0.92rem; }
    .ep-rates--weight { font-size: 0.8rem; }
    .ep-rates--weight th, .ep-rates--weight td { padding: 9px 8px; }
}

/* ==================================================================== */
/*  REDESIGN 2026-10: kalkulator widać od razu (wcześniej zaczynał się    */
/*  pod pierwszym ekranem). Odpowiedź z cenami zostaje pod H1 (audyt      */
/*  2026-09-23), ogólny opis i „Jak to działa?” są pod kalkulatorem.      */
/* ==================================================================== */
.package-calc { padding-top: 14px; } /* nad main jest już 100px odstępu (css/tutorials/tutorials.css) */
.calc-header { max-width: 880px; margin: 0 auto 26px; }
.calc-badges { gap: 8px; margin-bottom: 14px; align-items: center; }
.header-badge, .rate-badge { gap: 6px; padding: 4px 12px; font-size: 0.66rem; letter-spacing: 0.6px; border-radius: 50px; }
.rate-badge i { font-size: 0.8rem; }
.calc-badges .kf-updated { margin: 0; }
.header-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.12; margin-bottom: 14px; }
.ep-answer { max-width: 820px; margin: 0 auto; padding: 10px 14px; font-size: 0.88rem; line-height: 1.55; }

.calc-grid { gap: 24px; }
.calc-panel { padding: 28px; }
.panel-top { margin-bottom: 20px; }
.qty-and-add { margin-bottom: 18px; }

/* „Jak to działa?” pod kalkulatorem: kroki w rzędzie, fakty w rzędzie */
.ep-guide {
    max-width: 1300px; margin: 34px auto 0; position: relative; z-index: 2;
    background: #101010; border: 1px solid #222; border-radius: 24px; padding: 28px 32px;
}
.ep-guide__lead { max-width: 820px; margin: 0; font-size: 0.98rem; color: #a3a3a3; }
.ep-guide .calc-howto { margin-top: 18px; }
.ep-guide .calc-howto__steps { flex-direction: row; gap: 18px; }
.ep-guide .calc-howto__steps li { flex: 1; }
.ep-guide .calc-howto__facts { flex-direction: row; flex-wrap: wrap; }
.ep-guide .chf { flex: 1 1 260px; }

/* historia paczek pojawia się dopiero po pierwszym zapisie */
.saved-packages-section.is-empty { display: none; }

/* pasek z wynikiem na telefonie (JS: .ep-bar w oszacujpake.js); z prawej miejsce na koło fortuny */
.ep-bar {
    position: fixed; left: 10px; right: 76px; bottom: 12px; z-index: 980;
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
    border-radius: 16px; background: rgba(16,16,16,0.96); border: 1px solid rgba(230,0,0,0.45);
    box-shadow: 0 14px 34px rgba(0,0,0,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transform: translateY(150%); transition: transform 0.3s ease; pointer-events: none;
}
.ep-bar.is-on { transform: none; pointer-events: auto; }
.ep-bar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ep-bar__meta { font-size: 0.68rem; color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-bar__price { font-size: 1.1rem; font-weight: 900; color: #fff; }
.ep-bar__price small { font-size: 0.7rem; font-weight: 600; color: #aaa; margin-right: 5px; }
.ep-bar__btn {
    flex-shrink: 0; height: 40px; padding: 0 14px; border: none; border-radius: 12px; cursor: pointer;
    background: #E60000; color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.82rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 7px;
}
@media (min-width: 1025px) { .ep-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .ep-bar { transition: none; } }

@media (max-width: 900px) {
    .ep-guide .calc-howto__steps { flex-direction: column; }
}
@media (max-width: 768px) {
    .package-calc { padding: 4px 12px 80px; }
    .calc-header { margin-bottom: 16px; }
    .calc-badges { gap: 6px; margin-bottom: 12px; }
    .header-badge, .rate-badge { padding: 3px 10px; font-size: 0.6rem; }
    .header-title { font-size: 1.5rem; margin-bottom: 12px; }
    .ep-answer { font-size: 0.82rem; padding: 9px 12px; }
    .calc-grid { gap: 14px; grid-template-columns: minmax(0, 1fr); }
    .calc-panel { padding: 18px 16px; border-radius: 18px; }
    .panel-top { margin-bottom: 14px; padding-bottom: 12px; }
    /* nazwa na całą szerokość, rozmiar i waga obok siebie */
    .multi-input-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
    .multi-input-box .search-input-box { min-width: 0; }
    .item-name-box { grid-column: 1 / -1; }
    .search-input-box i { left: 14px; font-size: 1rem; }
    .search-input-box input { padding: 14px 12px 14px 40px; font-size: 16px; border-radius: 14px; }
    .qty-and-add { gap: 10px; margin: 10px 0 14px; }
    .qty-selector button { width: 42px; height: 50px; }
    .qty-selector input { width: 36px; }
    .btn-add-glow { font-size: 0.95rem; }
    .ep-guide { padding: 20px 16px; border-radius: 18px; margin-top: 18px; }
}


/* ===== css/shared/fonts.css ===== */
/* KakoFind: lokalny Poppins (SIL OFL 1.1), podzbior latin + latin-ext.
   Generowane skryptem, nie edytowac recznie. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("/font/poppins/poppins-300.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/font/poppins/poppins-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/font/poppins/poppins-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/font/poppins/poppins-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/font/poppins/poppins-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("/font/poppins/poppins-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;src:url("/font/poppins/poppins-900.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* KF-LINE-HEIGHT: Poppins ma line-height "normal" = 1,5, a czcionka zastępcza ok. 1,15. Bez jawnej
   wartości każda linia rosła o 30% w chwili doczytania fontu i układ skakał (CLS). Z Poppins wygląd bez zmian.
   Reguły z innym krojem (monospace) wracają do "normal", żeby zachowały dotychczasowe odstępy. */
html{line-height:1.5}
.link-value,.op-minimal__typing-area,.op-res-value,.lc-result-link,.aa-link,.history-link,.ci-box-input,.ci-mid span,.weight-highlight,.price-base,.price-discount,.pkg-weight,.c-row span:last-child,.ship-headline__old,.ccard-old,.ep-rates td:nth-child(n+4),.ship-mini__old,.loader-status,.avg-calc,.qcx__code,.qc-lb-zoom-badge,.ku-card__code,.ku-dead__code,.code-value,.side-coupon-code,.rn-codes__code,.kupony-summary-table .code-cell,.sp-seo-faq summary::after{line-height:normal}
/* Zastępczy krój o metrykach Poppins (Arial / Arial Bold przeskalowane osobno dla każdej grubości,
   size-adjust zmierzony na polskim tekście): tekst rysowany przed doczytaniem
   Poppins zajmuje tyle samo miejsca, więc podmiana fontu nie przesuwa układu (CLS). */
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:300;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:105.27%;ascent-override:99.74%;descent-override:33.25%;line-gap-override:9.50%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:400;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:106.92%;ascent-override:98.20%;descent-override:32.73%;line-gap-override:9.35%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:500;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:108.76%;ascent-override:96.54%;descent-override:32.18%;line-gap-override:9.19%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:104.14%;ascent-override:100.83%;descent-override:33.61%;line-gap-override:9.60%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:105.40%;ascent-override:99.62%;descent-override:33.21%;line-gap-override:9.49%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:106.49%;ascent-override:98.60%;descent-override:32.87%;line-gap-override:9.39%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:107.56%;ascent-override:97.62%;descent-override:32.54%;line-gap-override:9.30%}


/* ===== css/shared/icons.css ===== */
/* KakoFind: lokalny podzbior ikon Font Awesome 6.4.2 (CC BY 4.0, fontawesome.com).
   Zawiera wylacznie glify faktycznie uzywane w serwisie. Generowane skryptem, nie edytowac recznie. */
@font-face{font-family:"KF Icons";font-style:normal;font-weight:900;font-display:swap;
src:url("/font/fa/fa-solid-900.woff2") format("woff2")}
@font-face{font-family:"KF Icons Brands";font-style:normal;font-weight:400;font-display:swap;
src:url("/font/fa/fa-brands-400.woff2") format("woff2")}

.fa,.fas,.fa-solid,.far,.fa-regular,.fab,.fa-brands{
  -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;
  display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;
  line-height:1;text-rendering:auto}
.fa,.fas,.fa-solid{font-family:"KF Icons";font-weight:900}
.far,.fa-regular{font-family:"KF Icons";font-weight:400}
.fab,.fa-brands{font-family:"KF Icons Brands";font-weight:400}

/* klasy pomocnicze uzywane w serwisie */
.fa-fw{text-align:center;width:1.25em}
.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}
.fa-2x{font-size:2em}.fa-3x{font-size:3em}
.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,linear)}
.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,steps(8))}
.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);
  animation-direction:var(--fa-animation-direction,normal);
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,ease-in-out)}
.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);
  animation-direction:var(--fa-animation-direction,normal);
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}
@keyframes fa-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}
@keyframes fa-bounce{
  0%{transform:scale(1) translateY(0)}
  10%{transform:scale(1.1,.9) translateY(0)}
  30%{transform:scale(.9,1.1) translateY(-.5em)}
  50%{transform:scale(1.05,.95) translateY(0)}
  57%{transform:scale(1) translateY(-.125em)}
  64%{transform:scale(1) translateY(0)}
  100%{transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .fa-spin,.fa-spin-pulse,.fa-beat,.fa-bounce{animation-delay:-1ms;animation-duration:1ms;
    animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}

/* glify */
.fa-alipay::before{content:"\f642"}
.fa-angle-right::before{content:"\f105"}
.fa-angles-down::before{content:"\f103"}
.fa-apple::before{content:"\f179"}
.fa-arrow-down::before{content:"\f063"}
.fa-arrow-down-1-9::before{content:"\f162"}
.fa-arrow-down-9-1::before{content:"\f886"}
.fa-arrow-down-a-z::before{content:"\f15d"}
.fa-arrow-down-wide-short::before{content:"\f160"}
.fa-arrow-left::before{content:"\f060"}
.fa-arrow-right::before{content:"\f061"}
.fa-arrow-right-from-bracket::before{content:"\f08b"}
.fa-arrow-right-long::before{content:"\f178"}
.fa-arrow-right-to-bracket::before{content:"\f090"}
.fa-arrow-rotate-left::before{content:"\f0e2"}
.fa-arrow-trend-down::before{content:"\e097"}
.fa-arrow-trend-up::before{content:"\e098"}
.fa-arrow-up::before{content:"\f062"}
.fa-arrow-up-right-from-square::before{content:"\f08e"}
.fa-arrow-up-wide-short::before{content:"\f161"}
.fa-ban::before{content:"\f05e"}
.fa-battery-full::before{content:"\f240"}
.fa-bitcoin::before{content:"\f379"}
.fa-bolt::before{content:"\f0e7"}
.fa-bolt-lightning::before{content:"\e0b7"}
.fa-book-open::before{content:"\f518"}
.fa-box::before{content:"\f466"}
.fa-box-archive::before{content:"\f187"}
.fa-box-open::before{content:"\f49e"}
.fa-brain::before{content:"\f5dc"}
.fa-building-columns::before{content:"\f19c"}
.fa-bullhorn::before{content:"\f0a1"}
.fa-bullseye::before{content:"\f140"}
.fa-calculator::before{content:"\f1ec"}
.fa-calendar::before{content:"\f133"}
.fa-calendar-check::before{content:"\f274"}
.fa-calendar-days::before{content:"\f073"}
.fa-camera::before{content:"\f030"}
.fa-camera-retro::before{content:"\f083"}
.fa-camera-rotate::before{content:"\e0d8"}
.fa-caret-down::before{content:"\f0d7"}
.fa-cart-flatbed::before{content:"\f474"}
.fa-cart-shopping::before{content:"\f07a"}
.fa-chart-line::before{content:"\f201"}
.fa-chart-pie::before{content:"\f200"}
.fa-check::before{content:"\f00c"}
.fa-check-circle::before{content:"\f058"}
.fa-check-double::before{content:"\f560"}
.fa-chevron-down::before{content:"\f078"}
.fa-chevron-left::before{content:"\f053"}
.fa-chevron-right::before{content:"\f054"}
.fa-chevron-up::before{content:"\f077"}
.fa-circle::before{content:"\f111"}
.fa-circle-check::before{content:"\f058"}
.fa-circle-exclamation::before{content:"\f06a"}
.fa-circle-info::before{content:"\f05a"}
.fa-circle-notch::before{content:"\f1ce"}
.fa-circle-question::before{content:"\f059"}
.fa-clipboard::before{content:"\f328"}
.fa-clipboard-check::before{content:"\f46c"}
.fa-clock::before{content:"\f017"}
.fa-clock-rotate-left::before{content:"\f1da"}
.fa-cloud-arrow-up::before{content:"\f0ee"}
.fa-code::before{content:"\f121"}
.fa-code-compare::before{content:"\e13a"}
.fa-coins::before{content:"\f51e"}
.fa-comment-dots::before{content:"\f4ad"}
.fa-compass::before{content:"\f14e"}
.fa-compress::before{content:"\f066"}
.fa-copy::before{content:"\f0c5"}
.fa-credit-card::before{content:"\f09d"}
.fa-crown::before{content:"\f521"}
.fa-cube::before{content:"\f1b2"}
.fa-database::before{content:"\f1c0"}
.fa-desktop::before{content:"\f390"}
.fa-dice::before{content:"\f522"}
.fa-discord::before{content:"\f392"}
.fa-earth-europe::before{content:"\f7a2"}
.fa-ellipsis::before{content:"\f141"}
.fa-envelope::before{content:"\f0e0"}
.fa-eraser::before{content:"\f12d"}
.fa-expand::before{content:"\f065"}
.fa-eye::before{content:"\f06e"}
.fa-eye-slash::before{content:"\f070"}
.fa-file-contract::before{content:"\f56c"}
.fa-file-excel::before{content:"\f1c3"}
.fa-file-import::before{content:"\f56f"}
.fa-file-invoice-dollar::before{content:"\f571"}
.fa-file-lines::before{content:"\f15c"}
.fa-file-shield::before{content:"\e4f0"}
.fa-filter::before{content:"\f0b0"}
.fa-filter-circle-xmark::before{content:"\e17b"}
.fa-fire::before{content:"\f06d"}
.fa-fire-flame-curved::before{content:"\f7e4"}
.fa-floppy-disk::before{content:"\f0c7"}
.fa-gavel::before{content:"\f0e3"}
.fa-gear::before{content:"\f013"}
.fa-gem::before{content:"\f3a5"}
.fa-ghost::before{content:"\f6e2"}
.fa-gift::before{content:"\f06b"}
.fa-globe::before{content:"\f0ac"}
.fa-google::before{content:"\f1a0"}
.fa-graduation-cap::before{content:"\f19d"}
.fa-grip::before{content:"\f58d"}
.fa-hand-holding-dollar::before{content:"\f4c0"}
.fa-hand-pointer::before{content:"\f25a"}
.fa-handshake::before{content:"\f2b5"}
.fa-headset::before{content:"\f590"}
.fa-heart::before{content:"\f004"}
.fa-heart-crack::before{content:"\f7a9"}
.fa-heart-pulse::before{content:"\f21e"}
.fa-house::before{content:"\f015"}
.fa-id-card::before{content:"\f2c2"}
.fa-image::before{content:"\f03e"}
.fa-images::before{content:"\f302"}
.fa-info::before{content:"\f129"}
.fa-info-circle::before{content:"\f05a"}
.fa-keyboard::before{content:"\f11c"}
.fa-language::before{content:"\f1ab"}
.fa-layer-group::before{content:"\f5fd"}
.fa-leaf::before{content:"\f06c"}
.fa-life-ring::before{content:"\f1cd"}
.fa-lightbulb::before{content:"\f0eb"}
.fa-link::before{content:"\f0c1"}
.fa-link-slash::before{content:"\f127"}
.fa-list::before{content:"\f03a"}
.fa-list-check::before{content:"\f0ae"}
.fa-list-ul::before{content:"\f0ca"}
.fa-location-crosshairs::before{content:"\f601"}
.fa-location-dot::before{content:"\f3c5"}
.fa-lock::before{content:"\f023"}
.fa-lock-open::before{content:"\f3c1"}
.fa-magnifying-glass::before{content:"\f002"}
.fa-magnifying-glass-chart::before{content:"\e522"}
.fa-magnifying-glass-dollar::before{content:"\f688"}
.fa-magnifying-glass-location::before{content:"\f689"}
.fa-magnifying-glass-minus::before{content:"\f010"}
.fa-magnifying-glass-plus::before{content:"\f00e"}
.fa-medal::before{content:"\f5a2"}
.fa-microchip::before{content:"\f2db"}
.fa-minus::before{content:"\f068"}
.fa-mobile-screen::before{content:"\f3cf"}
.fa-mobile-screen-button::before{content:"\f3cd"}
.fa-money-bill-transfer::before{content:"\e528"}
.fa-money-bill-trend-up::before{content:"\e529"}
.fa-money-bill-wave::before{content:"\f53a"}
.fa-network-wired::before{content:"\f6ff"}
.fa-newspaper::before{content:"\f1ea"}
.fa-note-sticky::before{content:"\f249"}
.fa-palette::before{content:"\f53f"}
.fa-paper-plane::before{content:"\f1d8"}
.fa-pause::before{content:"\f04c"}
.fa-paypal::before{content:"\f1ed"}
.fa-pen::before{content:"\f304"}
.fa-pen-to-square::before{content:"\f044"}
.fa-plane::before{content:"\f072"}
.fa-plane-departure::before{content:"\f5b0"}
.fa-play::before{content:"\f04b"}
.fa-plug::before{content:"\f1e6"}
.fa-qrcode::before{content:"\f029"}
.fa-receipt::before{content:"\f543"}
.fa-reddit::before{content:"\f1a1"}
.fa-right-from-bracket::before{content:"\f2f5"}
.fa-right-to-bracket::before{content:"\f2f6"}
.fa-robot::before{content:"\f544"}
.fa-rocket::before{content:"\f135"}
.fa-rotate-left::before{content:"\f2ea"}
.fa-rotate-right::before{content:"\f2f9"}
.fa-ruler::before{content:"\f545"}
.fa-sack-dollar::before{content:"\f81d"}
.fa-satellite-dish::before{content:"\f7c0"}
.fa-scale-balanced::before{content:"\f24e"}
.fa-scale-unbalanced::before{content:"\f515"}
.fa-screwdriver-wrench::before{content:"\f7d9"}
.fa-scroll::before{content:"\f70e"}
.fa-server::before{content:"\f233"}
.fa-share-from-square::before{content:"\f14d"}
.fa-share-nodes::before{content:"\f1e0"}
.fa-shield-halved::before{content:"\f3ed"}
.fa-ship::before{content:"\f21a"}
.fa-shirt::before{content:"\f553"}
.fa-shoe-prints::before{content:"\f54b"}
.fa-shop::before{content:"\f54f"}
.fa-sliders::before{content:"\f1de"}
.fa-snowflake::before{content:"\f2dc"}
.fa-spinner::before{content:"\f110"}
.fa-star::before{content:"\f005"}
.fa-star-half-stroke::before{content:"\f5c0"}
.fa-stop::before{content:"\f04d"}
.fa-store::before{content:"\f54e"}
.fa-table-cells::before{content:"\f00a"}
.fa-table-cells-large::before{content:"\f009"}
.fa-table-list::before{content:"\f00b"}
.fa-tablet-screen-button::before{content:"\f3fa"}
.fa-tag::before{content:"\f02b"}
.fa-tags::before{content:"\f02c"}
.fa-thumbtack::before{content:"\f08d"}
.fa-ticket::before{content:"\f145"}
.fa-tiktok::before{content:"\e07b"}
.fa-toolbox::before{content:"\f552"}
.fa-tower-broadcast::before{content:"\f519"}
.fa-trash::before{content:"\f1f8"}
.fa-trash-can::before{content:"\f2ed"}
.fa-triangle-exclamation::before{content:"\f071"}
.fa-trophy::before{content:"\f091"}
.fa-truck::before{content:"\f0d1"}
.fa-truck-fast::before{content:"\f48b"}
.fa-umbrella::before{content:"\f0e9"}
.fa-up-right-from-square::before{content:"\f35d"}
.fa-upload::before{content:"\f093"}
.fa-user::before{content:"\f007"}
.fa-user-check::before{content:"\f4fc"}
.fa-user-group::before{content:"\f500"}
.fa-user-plus::before{content:"\f234"}
.fa-user-shield::before{content:"\f505"}
.fa-user-slash::before{content:"\f506"}
.fa-user-tie::before{content:"\f508"}
.fa-users::before{content:"\f0c0"}
.fa-users-gear::before{content:"\f509"}
.fa-users-viewfinder::before{content:"\e595"}
.fa-venus-mars::before{content:"\f228"}
.fa-video::before{content:"\f03d"}
.fa-wallet::before{content:"\f555"}
.fa-wand-magic-sparkles::before{content:"\e2ca"}
.fa-warehouse::before{content:"\f494"}
.fa-weight-scale::before{content:"\f496"}
.fa-wine-glass::before{content:"\f4e3"}
.fa-xmark::before{content:"\f00d"}
.fa-youtube::before{content:"\f167"}


/* ===== css/shared/kf-art.css ===== */
/* =========================================================
   ILUSTRACJE PODSTRON (graphics/allseason/web)
   Naklejki z maskotką obok nagłówków podstron.
   - alt="" + aria-hidden: czysta dekoracja, zero wpływu na treść, SEO i tłumaczenia,
   - loading="lazy" + display:none poniżej progu: telefon i mały laptop nic nie pobierają,
   - position:absolute: nic nie przesuwa się w układzie (brak CLS),
   - pliki 1x i 2x przez srcset (webp, robione przez tools/optimize-art.mjs).
   Pozycja: --art-x = odległość od środka nagłówka do bliższej krawędzi grafiki,
            --art-top = środek grafiki w pionie (od góry nagłówka), --art-w = szerokość.
   ========================================================= */

.kf-art {
    display: block;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 16px 30px rgba(230, 0, 0, 0.22));
}

.kf-art--side {
    position: absolute;
    z-index: 0;
    top: var(--art-top, 50%);
    width: var(--art-w);
    transform: translateY(-50%) rotate(var(--art-rot, 0deg));
    animation: kfArtFloat 7s ease-in-out infinite;
}
/* Nagłówki są wyśrodkowane, więc miejsce na grafikę liczymy od środka ekranu.
   Prawa strona kończy się 74px przed krawędzią: tam wisi szyna Discord/Arkusz (.kfw-rail, 59px). */
.kf-art--r {
    left: calc(50% + var(--art-x));
    width: min(var(--art-w), calc(50vw - var(--art-x) - 74px));
}
.kf-art--l {
    right: calc(50% + var(--art-x));
    width: min(var(--art-w), calc(50vw - var(--art-x) - 30px));
    animation-delay: -3.5s;
}

/* grafiki ucięte u dołu (np. nogi) wygaszamy miękko zamiast twardej krawędzi */
.kf-art--fade {
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 97%);
}

@keyframes kfArtFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

/* nagłówki, które dotąd nie były pozycjonowane (brak w nich elementów absolutnych) */
.ku-hero,
.converter-hero,
.qcx__hero,
.kf-imgs__hero,
.tutorial-header,
.kako-support__header,
.dashboard-header .header-container { position: relative; }

/* ---------- ustawienia per strona ----------
   Od 2026-10-03 wszystkie postacie to jedna maskotka (wzorzec graphics/person-graphics/mascot-hero.png,
   pliki w graphics/mascot/web). Jest smukła, więc --art-w jest mniejsze niż przy jesiennych naklejkach,
   a wysokość zostaje podobna (ok. 250-300 px). */
.kf-art--kupony-r     { --art-x: 336px; --art-w: 117px; --art-top: 48%; }
.kf-art--kupony-l     { --art-x: 312px; --art-w: 210px; --art-top: 44%; --art-rot: -6deg; }
.kf-art--converter    { --art-x: 334px; --art-w: 141px; --art-top: 54%; }
.kf-art--estimate-r   { --art-x: 428px; --art-w: 151px; --art-top: 46%; }
.kf-art--estimate-l   { --art-x: 470px; --art-w: 190px; --art-top: 40%; --art-rot: -6deg; }
.kf-art--qc           { --art-x: 430px; --art-w: 189px; --art-top: 52%; }
.kf-art--qcx          { --art-x: 500px; --art-w: 140px; --art-top: 52%; }
.kf-art--faqx         { --art-x: 500px; --art-w: 116px; --art-top: 52%; }
.kf-art--imgs         { --art-x: 528px; --art-w: 128px; --art-top: 150px; }
.kf-art--kategorie    { --art-x: 410px; --art-w: 185px; --art-top: 50%; }
.kf-art--outfits      { --art-x: 470px; --art-w: 207px; --art-top: 310px; }
.kf-art--faq          { --art-x: 430px; --art-w: 116px; --art-top: 250px; }
.kf-art--tutorials    { --art-x: 363px; --art-w: 171px; --art-top: 50%; width: min(171px, calc(50vw - 592px)); } /* treść przesunięta przez sidebar o 148px */
.kf-art--sellers      { --art-x: 350px; --art-w: 186px; --art-top: 290px; }
.kf-art--support      { --art-x: 384px; --art-w: 131px; --art-top: 50%; }
.kf-art--agents       { --art-x: 187px; --art-w: 142px; --art-top: 50%; }

/* Poniżej progu grafika zmalałaby do ~70% projektu, więc jej nie pokazujemy wcale
   (próg = 2 * (--art-x + 74px + 0,7 * --art-w), sprawdzone pomiarem na 1200-1920 px). */
@media (max-width: 1499px) { .kf-art--tutorials { display: none; } }
@media (max-width: 1379px) { .kf-art--outfits { display: none; } }
@media (max-width: 1389px) { .kf-art--imgs { display: none; } }
@media (max-width: 1349px) { .kf-art--qcx { display: none; } }
@media (max-width: 1319px) { .kf-art--faqx { display: none; } }
@media (max-width: 1279px) { .kf-art--qc { display: none; } }
@media (max-width: 1289px) { .kf-art--estimate-r, .kf-art--estimate-l { display: none; } }
@media (max-width: 1229px) { .kf-art--kategorie { display: none; } }
@media (max-width: 1199px) {
    .kf-art--side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kf-art--side { animation: none; }
}

/* ---------- /kupony: baner „Gotowy odebrać wszystkie Kakobuy Kupony?” ---------- */
.ku-cta-banner { position: relative; overflow: hidden; isolation: isolate; }
.ku-cta-banner__art { display: none; }
.ku-cta-banner__gift { display: block; width: 84px; margin: -4px auto 12px; transform: rotate(-6deg); }

@media (min-width: 900px) {
    .ku-cta-banner {
        min-height: 256px;
        padding-right: 340px !important;
        text-align: left !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .ku-cta-banner__gift { display: none; }
    .ku-cta-banner__art {
        display: block;
        position: absolute;
        right: 28px;
        bottom: 13px;
        width: 279px;
        z-index: -1;
        filter: drop-shadow(0 10px 30px rgba(230, 0, 0, 0.25));
    }
}

/* ---------- /favorites: pusty stan ---------- */
.fv-empty__art { width: 101px; margin: 0 auto 14px; }