/* PLIK GENEROWANY: node tools/build-css.mjs. Nie edytować ręcznie. */
/* Strona: pages/szukanie-po-zdjeciu.html | arkuszy w paczce: 9 */

/* ===== 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; }
.nav-chip--promocje { --chip-accent: #FF3B3B; --chip-accent-soft: rgba(255, 59, 59, .18); }
.nav-chip--promocje .nav-chip__ico { color: #ff8a8a; }

.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); }

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


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


/* ===== css/index/floating-social.css ===== */
/* ================= FLOATING SOCIAL - NEW PREMIUM ================= */

.floating-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
      padding: 1.2vw 0.8vw;
    gap: 0.8vw;
    border-top-left-radius: 1.6vw;
    border-bottom-left-radius: 1.6vw;

    background: rgba(20, 0, 0, 0.75);
    backdrop-filter: blur(1.2vw);

    border-left: 0.2vw solid #E60000;


    box-shadow: -1vw 0 2vw rgba(230, 0, 0, 0.25);

    z-index: 999;
}

/* IKONY - TERAZ KWADRATOWE */

.social-icon {
   width: 2.8vw;
    height: 2.8vw;
    font-size: 1.05vw;
    border-radius: 0.7vw;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        145deg,
        #1a0000,
        #330000
    );

    border: 0.1vw solid rgba(255, 26, 26, 0.3);

    color: #FF1A1A;
    font-size: 1.2vw;

    text-decoration: none;

    transition: 0.35s ease;
}

/* Hover bardziej elegancki - przesunięcie */

.social-icon:hover {
    transform: translateX(-0.5vw);
    background: #8A0000;
    color: #fff;
}

/* ================= CENA - WYSUNIĘTY BADGE ================= */

.social-price {
    position: relative;

    padding: 0.6vw 1vw;
    margin-top: 0.8vw;
    font-size: 0.85vw;
    border-radius: 1.6vw 0 0 1.6vw;
    font-weight: 600;
    letter-spacing: 0.05vw;

    color: white;
    text-decoration: none;


    background: linear-gradient(
        90deg,
        #FF4081,
        #E60000
    );

    box-shadow: -0.5vw 0 1.5vw rgba(230, 0, 0, 0.5);

    transition: 0.35s ease;
}

.social-price:hover {
    transform: translateX(-0.5vw);
    box-shadow: -0.8vw 0 2vw rgba(255, 64, 129, 0.7);
}



/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - FLOATING SOCIAL
   ========================================== */

/* 1. TABLETY (do 1024px) */
@media (max-width: 1024px) {
    .floating-social {
        padding: 15px 10px;
        gap: 12px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-left: 3px solid #E60000;
        box-shadow: -5px 0 15px rgba(230, 0, 0, 0.3);
    }

    .social-icon {
        width: 55px;
        height: 55px;
        border-radius: 12px;
        font-size: 20px; /* Rozmiar samej ikony */
        border-width: 1px;
    }

    .social-price {
        padding: 8px 14px;
        margin-top: 10px;
        font-size: 14px;
        border-radius: 20px 0 0 20px;
        box-shadow: -5px 0 15px rgba(230, 0, 0, 0.4);
    }

    /* Przejście z hoverów vw na px */
    .social-icon:hover, .social-price:hover {
        transform: translateX(-5px);
    }
}

/* 2. TELEFONY (do 768px) */
@media (max-width: 768px) {
    .floating-social {
        /* Na małym ekranie możemy go lekko podnieść, żeby nie zasłaniał środka */
        top: 60%; 
        padding: 10px 8px;
        gap: 10px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .social-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 18px;
    }

    .social-price {
        padding: 6px 10px;
        margin-top: 8px;
        font-size: 12px;
        border-radius: 15px 0 0 15px;
    }

    /* Na telefonach nie ma najechania myszką (hover), ale dla wciśnięcia palcem warto to zmniejszyć */
    .social-icon:hover, .social-price:hover {
        transform: translateX(-3px);
    }
}

/* 3. BARDZO MAŁE TELEFONY (do 480px) */
@media (max-width: 480px) {
    .floating-social {
        padding: 8px 6px;
        gap: 8px;
        border-left-width: 2px;
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
        border-radius: 8px;
    }

    .social-price {
        font-size: 11px;
        padding: 5px 8px;
    }
}

/* ===== 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}


/* ===== 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/imgsearch/imgsearch.css ===== */
/* Strona /szukanie-po-zdjeciu: landing wyszukiwarki obrazem. */

.kf-imgs {
    padding: clamp(28px, 6vw, 68px) 16px 64px;
    color: #f2f2f2;
}

.kf-imgs__wrap {
    max-width: 1020px;
    margin: 0 auto;
}

.kf-imgs__hero {
    text-align: center;
    margin-bottom: clamp(22px, 4vw, 34px);
}

.kf-imgs__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(230, 0, 0, .12);
    border: 1px solid rgba(230, 0, 0, .32);
    color: #ff6b6b;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kf-imgs__title {
    margin: 18px 0 14px;
    font-size: clamp(1.7rem, 4.6vw, 2.6rem);
    line-height: 1.18;
    font-weight: 800;
    color: #fff;
}

.kf-imgs__lead {
    max-width: 66ch;
    margin: 0 auto;
    font-size: clamp(.98rem, 2.2vw, 1.06rem);
    line-height: 1.7;
    color: #c9c9c9;
}

/* ---- pole na zdjecie ---- */
.kf-imgs__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 210px;
    padding: 28px 20px;
    border: 2px dashed #333;
    border-radius: 20px;
    background: linear-gradient(180deg, #141414 0%, #0f0f0f 100%);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.kf-imgs__drop:hover,
.kf-imgs__drop:focus-visible,
.kf-imgs__drop.is-over {
    border-color: #E60000;
    background: linear-gradient(180deg, #1a1111 0%, #111 100%);
    transform: translateY(-2px);
    outline: none;
}

.kf-imgs__drop-icon {
    font-size: 2.2rem;
    color: #E60000;
}

.kf-imgs__drop-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
}

.kf-imgs__drop-sub {
    font-size: .84rem;
    color: #8f8f8f;
    max-width: 44ch;
}

/* ---- kroki ---- */
.kf-imgs__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: kfimgs;
}

.kf-imgs__steps li {
    counter-increment: kfimgs;
    position: relative;
    padding: 16px 16px 16px 52px;
    border: 1px solid #232323;
    border-radius: 14px;
    background: #111;
}

.kf-imgs__steps li::before {
    content: counter(kfimgs);
    position: absolute;
    left: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #E60000;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.kf-imgs__steps strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: .95rem;
}

.kf-imgs__steps span {
    font-size: .86rem;
    line-height: 1.6;
    color: #a8a8a8;
}

/* ---- karty ---- */
.kf-imgs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.kf-imgs__card {
    background: linear-gradient(180deg, #141414 0%, #101010 100%);
    border: 1px solid #232323;
    border-radius: 18px;
    padding: clamp(18px, 3vw, 26px);
}

.kf-imgs__card h2 {
    margin: 0 0 12px;
    font-size: clamp(1.03rem, 2.3vw, 1.2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}

.kf-imgs__card p,
.kf-imgs__card li {
    font-size: .93rem;
    line-height: 1.72;
    color: #c2c2c2;
}

.kf-imgs__card p { margin: 0; }

.kf-imgs__card ul {
    margin: 0;
    padding-left: 1.15rem;
}

.kf-imgs__card li { margin-bottom: 8px; }

.kf-imgs__h2 {
    margin: 34px 0 10px;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 700;
    color: #fff;
}

.kf-imgs__p {
    margin: 0;
    max-width: 72ch;
    font-size: .95rem;
    line-height: 1.75;
    color: #c2c2c2;
}

/* ---- linki ---- */
.kf-imgs__links {
    margin-top: clamp(26px, 5vw, 44px);
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid #232323;
    border-radius: 18px;
    background: #101010;
}

.kf-imgs__links h2 {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.kf-imgs__links ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kf-imgs__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    color: #cfcfcf;
    font-size: .92rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.kf-imgs__links a::before {
    content: "\f105";
    font-family: "KF Icons";
    font-weight: 900;
    color: #E60000;
    font-size: .8em;
}

.kf-imgs__links a:hover {
    color: #fff;
    border-bottom-color: #E60000;
}

@media (max-width: 560px) {
    .kf-imgs__grid { grid-template-columns: 1fr; }
}