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

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


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

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

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

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


/* ===== css/porownywarka-index-i-comprasion/porownywarka.css ===== */
/* Poppins leci z wlasnej domeny (css/shared/fonts.css). Wczesniej byl tu @import do Google Fonts,
   ktory szeregowal pobieranie i blokowal renderowanie. */
/* =========================================
   1. ZMIENNE I FONTY (PALETA 1 + KAKOFIND)
   ========================================= */
:root {
    /* Paleta 1 */
    --bg-dark: #050505;       /* Główne tło */
    --card-bg: #121212;       /* Karty */
    --card-hover: #1E1E1E;    /* Hover */
    --border: #2C2C2C;        /* Linie */
    --text-muted: #808080;    /* Tekst pomocniczy */
    
    --red-primary: #E60000;   /* Przyciski, Logo */
    --red-hover: #FF1A1A;     /* Hover, Badges */
    --red-dark: #8A0000;      /* Active state */
    --error: #FF4081;         /* Błędy */
    
    /* Dodatkowe */
    --text-white: #ffffff;
    --success-green: #00E676;
    --support-blue: #2979FF;  /* Kolor Supportu */
    --gold: #FFD700;
    --silver: #E0E0E0;
    --bronze: #CD7F32;
    
    /* Fonty */
    --font-heading: 'Poppins', sans-serif;
    --font-ui: 'Poppins', sans-serif;
}



/* =========================================
   2. GLOBALNE USTAWIENIA & ANIMACJE
   ========================================= */
body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    margin: 0;
    font-family: var(--font-ui);
    overflow-x: hidden;
}

main#app {
    padding-top: 140px; 
    padding-bottom: 100px;
    min-height: 100vh;
    transition: opacity 0.8s ease;
}

/* Animacja Scroll Reveal */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

h1, h2, h3, h4, strong { color: #fff !important; font-family: var(--font-heading) !important; }
.text-red { color: var(--red-primary) !important; }
.text-green { color: var(--success-green) !important; }

/* Tło ambientowe */
.ambient-glow {
    position: fixed; width: 600px; height: 600px; 
    background: radial-gradient(circle, rgba(230,0,0,0.08) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.glow-top-left { top: -250px; left: -200px; }
.glow-bottom-right { bottom: -250px; right: -200px; }

/* =========================================
   3. LOADER (SPEED BAR)
   ========================================= */
.loader-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-dark); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}
.loader-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-content-speed { width: 100%; max-width: 500px; padding: 0 40px; display: flex; flex-direction: column; align-items: center; }
.loader-brand-simple { width: 60px; height: auto; margin-bottom: 30px; animation: fadePulse 1s infinite alternate; }

.speed-bar-track {
    width: 100%; height: 6px; background: #1a1a1a; border-radius: 10px;
    position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.speed-bar-glow {
    position: absolute; top: 0; left: 0; height: 100%; background: var(--red-primary);
    width: 0%; border-radius: 10px; box-shadow: 0 0 15px var(--red-primary);
    animation: speedLoad 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.loader-status {
    width: 100%; display: flex; justify-content: space-between;
    margin-top: 10px; font-family: ui-monospace, 'Poppins', monospace; font-size: 0.75rem; color: #555; font-weight: 600;
}

@keyframes speedLoad { 0% { width: 0%; } 40% { width: 70%; } 100% { width: 100%; } }
@keyframes fadePulse { from { opacity: 0.6; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }

/* =========================================
   4. HEADER
   ========================================= */
.dashboard-header { display: flex; justify-content: center; margin-bottom: 20px; padding: 40px 20px; }
.header-container {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; max-width: 1100px; padding-bottom: 25px; border-bottom: 1px solid var(--border);
}
.brand-box { display: flex; align-items: center; gap: 15px; }
.brand-logo { width: 45px; height: auto; filter: drop-shadow(0 0 10px rgba(230,0,0,0.3)); }
.brand-text h1 { font-size: 1.8rem; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -0.5px; }
.brand-sub { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 2px; font-weight: 600; text-transform: uppercase; margin-top: 4px; }
.header-stat { text-align: right; font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }

/* =========================================
   5. PODIUM TOP 3 (KARTY) - ZMNIEJSZONE
   ========================================= */
.top3-section { max-width: 1050px; /* Zmniejszono z 1200 */ margin: 0 auto 60px; padding: 0 20px; }
.podium-container { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; /* Zmniejszono gap */ align-items: start; }

.podium-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
    padding: 25px 15px; /* Zmniejszono padding */ text-align: center; position: relative; 
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex; flex-direction: column;
}
.podium-card:hover { 
    transform: translateY(-8px); border-color: #444; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.4); background-color: var(--card-hover);
}

.rank-1 {
    background: linear-gradient(180deg, #1a0505 0%, var(--card-bg) 100%);
    border: 2px solid var(--red-primary); padding-bottom: 30px;
    box-shadow: 0 0 50px rgba(230,0,0,0.15); transform: scale(1.02); /* Zmniejszono skalę */ z-index: 5;
}
.rank-1:hover { transform: scale(1.04) translateY(-8px); }

.podium-img-wrapper {
    width: 60px; height: 60px; margin: 0 auto 12px; 
    background: #000; border-radius: 50%; border: 1px solid #333;
    display: flex; align-items: center; justify-content: center; 
}
.rank-1 .podium-img-wrapper { width: 80px; height: 80px; border-color: var(--red-primary); box-shadow: 0 0 20px rgba(230,0,0,0.2); }
.podium-img-wrapper img { width: 100%; height: 100%; object-fit: contain; }

.crown-icon { font-size: 1.8rem; color: var(--gold); margin-bottom: 8px; display: block; }
.rank-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    padding: 4px 12px; border-radius: 20px; font-weight: 800; font-size: 0.65rem; 
    text-transform: uppercase; letter-spacing: 1px; color: #000; font-family: var(--font-heading);
}
.gold { background: var(--gold); } .silver { background: var(--silver); } .bronze { background: var(--bronze); }

/* Meta Dane */
.meta-stats-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; justify-content: center; }

/* TRUST PILL */
.trust-pill { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #000; color: var(--text-muted); border: 1px solid #333; }
.trust-high { color: var(--success-green); border-color: rgba(0, 230, 118, 0.2); background: rgba(0, 230, 118, 0.05); }

/* SUPPORT PILL - NOWOŚĆ */
.support-pill {
    display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    background: rgba(41, 121, 255, 0.05); color: var(--support-blue); border: 1px solid rgba(41, 121, 255, 0.2);
}

.exchange-badge {
    font-size: 0.65rem; font-weight: 700; background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px;
    color: #ccc; display: flex; align-items: center; gap: 5px;
}
.exchange-badge strong { color: var(--success-green) !important; }

/* Badges & Ceny */
.marketing-badge { display: inline-block; font-size: 0.6rem; padding: 3px 8px; border-radius: 5px; margin-bottom: 10px; font-weight: 600; border: 1px solid transparent; }
.red-glow { background: rgba(230, 0, 0, 0.1); color: #ff4d4d; border-color: rgba(230,0,0,0.3); }
.purple-glow { background: rgba(157, 0, 255, 0.1); color: #d480ff; border-color: rgba(157, 0, 255, 0.3); }
.blue-glow { background: rgba(0, 140, 255, 0.1); color: #66b3ff; border-color: rgba(0, 140, 255, 0.3); }

.price-block { margin: 8px 0; }
.highlight-block { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.price-row { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.old-price { font-size: 0.8rem; color: #666; text-decoration: line-through; margin-bottom: 2px; height: 16px; visibility: hidden; }
.new-price { font-size: 1.6rem; font-weight: 800; color: #fff; }
.big-price { font-size: 2.2rem; color: var(--red-primary); text-shadow: 0 0 30px rgba(230,0,0,0.2); }
.coupon-tag { font-size: 0.6rem; background: var(--success-green); color: #000; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 6px; font-weight: 700; }
.shipping-line { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
.avg-calc { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; font-family: ui-monospace, 'Poppins', monospace; margin-bottom: 12px; }

/* PRZYCISKI - NOWY UKŁAD */
.card-actions-group {
    display: flex; gap: 8px; justify-content: center; width: 100%; margin-top: 10px;
}

.btn-payment-toggle {
    flex: 1; 
    background: rgba(255,255,255,0.05); 
    border: 1px solid #333; 
    color: #ccc; 
    padding: 8px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 0.7rem; 
    font-weight: 600;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--font-ui);
}
.btn-payment-toggle:hover { background: #fff; color: #000; border-color: #fff; }

/* Mały przycisk akcji */
.btn-compact {
    flex: 1.5;
    display: flex; align-items: center; justify-content: center;
    padding: 8px; border-radius: 8px; text-decoration: none;
    font-weight: 700; font-size: 0.75rem; transition: 0.3s;
}
.btn-outline { border: 1px solid #444; color: #fff; background: transparent; }
.btn-outline:hover { background: #fff; color:#000; }
.btn-primary { background: var(--red-primary); color: #fff; border: none; }
.btn-primary:hover { background: var(--red-hover); box-shadow: 0 0 25px rgba(230,0,0,0.4); }

/* --- SEKCJA PŁATNOŚCI (DROPDOWN) --- */
.payment-dropdown-content {
    display: none; 
    background: #080808; 
    border: 1px solid #222;
    border-radius: 12px;
    margin-top: 12px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    animation: fadeInSlide 0.3s ease-out;
}

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

.pay-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid #1a1a1a;
    font-size: 0.7rem;
}
.pay-row:last-child { border-bottom: none; }

.pay-info { display: flex; align-items: center; gap: 8px; color: #ccc; font-weight: 500; }
.pay-info i { width: 20px; text-align: center; color: #888; } 

.pay-cost { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.fee-tag { font-size: 0.6rem; margin-bottom: 2px; }
.total-cost { font-weight: 700; color: #fff; font-size: 0.75rem; }

/* Kolory opłat */
.cost-low { color: var(--success-green); }
.cost-mid { color: var(--gold); }
.cost-high { color: var(--error); }

/* =========================================
   6. PANEL STEROWANIA
   ========================================= */
.controls-container { margin: 0 auto 80px; padding: 0 20px; display: flex; justify-content: center; }
.glass-panel {
    background: var(--card-bg); border: 1px solid var(--border); padding: 30px 40px;
    border-radius: 20px; width: 100%; max-width: 800px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.control-row { width: 100%; }
.control-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.control-header label { font-size: 0.9rem; color: #fff; font-weight: 700; letter-spacing: 1px; }
.weight-display { background: #000; padding: 6px 14px; border-radius: 8px; border: 1px solid #333; }
#weightVal { font-size: 1.2rem; font-weight: 800; color: var(--red-primary); }
.unit { font-size: 0.8rem; color: #666; margin-left: 2px; font-weight: 600; }

.slider-wrapper { position: relative; padding: 20px 0 30px; }
.custom-range {
    -webkit-appearance: none; width: 100%; height: 6px; background: #222; border-radius: 3px; outline: none;
    background-image: linear-gradient(90deg, var(--red-primary), var(--red-primary));
    background-size: 0% 100%; background-repeat: no-repeat; cursor: pointer;
}
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none; height: 22px; width: 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--red-primary); cursor: pointer;
    box-shadow: 0 0 15px rgba(230,0,0,0.6); transition: transform 0.2s; margin-top: -8px;
}
.custom-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

.slider-ticks-precise { position: relative; width: 100%; height: 20px; margin-top: 10px; }
.slider-ticks-precise span {
    position: absolute; top: 0; transform: translateX(-50%);
    font-size: 0.75rem; color: var(--text-muted); font-family: 'Poppins', sans-serif; font-weight: 600; white-space: nowrap;
}
.slider-ticks-precise span::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 1px; height: 5px; background: #444; }

.divider { height: 1px; background: #222; margin: 10px 0 25px; width: 100%; }
.actions-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

.currency-box { display: flex; align-items: center; gap: 10px; }
.currency-tabs { display: flex; background: #000; border-radius: 8px; padding: 4px; border: 1px solid #333; }
.curr-btn {
    background: transparent; border: none; color: #888; padding: 6px 12px; border-radius: 6px;
    cursor: pointer; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; transition: 0.3s;
}
.curr-btn.active { background: var(--red-dark); color: #fff; box-shadow: 0 2px 10px rgba(138, 0, 0, 0.3); }
.curr-btn:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); }

.control-label { margin-right: 5px; color: #888; font-size: 0.85rem; font-weight: 600; }
.rate-disclaimer { width: 100%; text-align: center; font-size: 0.65rem; color: #555; margin-top: 15px; font-style: italic; }

.toggle-wrapper {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    background: #000; padding: 8px 16px; border-radius: 30px; border: 1px solid #333; transition: all 0.3s;
}
.toggle-wrapper:hover { border-color: #555; background: #161616; }
.toggle-switch { width: 36px; height: 20px; background: #333; border-radius: 20px; position: relative; transition: 0.3s; }
.toggle-knob { width: 16px; height: 16px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: 0.3s; }
.toggle-wrapper.active .toggle-switch { background: var(--success-green); }
.toggle-wrapper.active .toggle-knob { transform: translateX(16px); }
.toggle-label { font-size: 0.85rem; font-weight: 600; color: #ccc; user-select: none; }

.sort-box { display: flex; align-items: center; }
.sort-dropdown {
    background: #000; color: #fff; border: 1px solid #333; padding: 8px 12px;
    border-radius: 8px; outline: none; cursor: pointer; font-family: var(--font-ui); font-size: 0.85rem; transition: border 0.3s;
}
.sort-dropdown:hover { border-color: #555; }

/* =========================================
   7. LISTA AGENTÓW (GRID + HOVER FIX)
   ========================================= */
.agents-list-section { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.list-header-simple { margin-bottom: 25px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
.list-header-simple h3 { margin: 0; font-size: 1.1rem; color: var(--text-muted) !important; font-family: var(--font-heading); }

.list-item {
    display: grid;
    grid-template-columns: 70px 1.2fr 2.5fr 1fr 140px; 
    gap: 25px; align-items: center;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 16px; padding: 25px; margin-bottom: 20px;
    position: relative; z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.list-item:hover {
    background: var(--card-hover); border-color: #444444;
    transform: translateY(-6px); box-shadow: 0 15px 40px rgba(0,0,0,0.5); z-index: 10;
}

.list-logo { width: 60px; border-radius: 10px; }
.list-name { display: flex; flex-direction: column; }
.list-name h4 { margin: 0 0 6px 0; font-size: 1.15rem; font-weight: 700; transition: color 0.3s; }
.list-item:hover .list-name h4 { color: var(--red-primary); }

.list-item .meta-stats-row { justify-content: flex-start; margin-bottom: 0; gap: 8px; }

.item-cost-info { font-size: 0.65rem; color: #666; margin-top: 6px; font-weight: 500; }

.warning-note { 
    font-size: 0.65rem; color: #fff; margin-top: 6px; display: inline-block; font-weight: 800; 
    background: var(--error); padding: 3px 8px; border-radius: 4px;
    border: 1px solid rgba(255, 64, 129, 0.3); text-transform: uppercase;
    animation: pulse-danger 2s infinite;
}
@keyframes pulse-danger {
    0% { box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 64, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 64, 129, 0); }
}

.shipping-details-col { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.shipping-row {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 8px;
    font-size: 0.85rem; border: 1px solid transparent; transition: background 0.2s;
}
.shipping-row:hover { background: rgba(255,255,255,0.06); border-color: #333; }

.ship-name { color: #ccc; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.line-rank { font-size: 0.7rem; color: #555; font-weight: 800; margin-right: 8px; }

.ship-pricing { display: flex; align-items: center; gap: 10px; text-align: right; }
.price-group { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.row-new-price { font-weight: 700; color: #fff; font-size: 0.95rem; }
.row-old-price { font-size: 0.7rem; color: #555; text-decoration: line-through; }
.row-coupon {
    font-size: 0.65rem; color: var(--success-green); background: rgba(0, 230, 118, 0.1);
    padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(0, 230, 118, 0.2); font-weight: 600;
}

.list-stat { text-align: right; }
.price-col strong { font-size: 1.5rem; display: block; font-weight: 800; }

.action-col { text-align: right; }
.btn-sm {
    display: flex; width: 100%; height: 45px; align-items: center; justify-content: center;
    border: 1px solid #444; border-radius: 10px; color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600;
    transition: all 0.2s ease-in-out; background: transparent;
}
/* INTERAKTYWNY HOVER DLA PRZYCISKU OPŁATY */
.btn-fees-interactive:hover { 
    background: #fff !important; 
    color: #000 !important; 
    border-color: #fff !important;
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
    transform: translateY(-2px);
}
.btn-sm:hover:not(.btn-fees-interactive) {
    background: #fff; color: #000; border-color: #fff;
}

/* RWD */
@media (max-width: 900px) {
    .header-container { flex-direction: column; align-items: flex-start; gap: 15px; }
    .header-stat { text-align: left; }
    .podium-container { grid-template-columns: 1fr; gap: 50px; }
    .rank-1 { order: -1; }
    .agents-list-section { padding: 0 12px; }
    .list-item {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "shipping" "price" "action";
        gap: 20px;
        padding: 18px;
    }
    /* pozwól elementom gridu zwężać się poniżej szerokości treści (bez tego
       długie nazwy linii wysyłki rozpychają kartę i stronę) */
    .list-item > * { min-width: 0; }
    .list-name { grid-area: header; text-align: center; }
    .meta-stats-row { justify-content: center; }
    .shipping-details-col { grid-area: shipping; }
    .list-stat { grid-area: price; text-align: center !important; }
    .action-col { grid-area: action; }
    .row-coupon { display: none; }
    .actions-row { flex-direction: column; gap: 15px; align-items: stretch; }
    .toggle-wrapper, .sort-box, .sort-dropdown, .currency-box { width: 100%; justify-content: center; }
}
/* Tekst „Jaki agent do itemów w 2026?” + FAQ pod rankingiem (2026-10-13): linki miały
   domyślny granat przeglądarki (#0000ee) na czarnym tle, praktycznie nieczytelny. */
.aw-seo a { color: #ff5a5a; text-decoration: underline; text-underline-offset: 2px; }
.aw-seo a:hover { color: #fff; }
.aw-seo h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; color: #fff; }


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

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

a{

    text-decoration: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


/* ===== css/index/wheel.css ===== */
/* ==========================================
   KAKOBUY WHEEL OF FORTUNE - PREMIUM REDESIGN
   Logika (prize'y, szanse) nietknięte. Tylko CSS.
   ========================================== */

/* ==========================================
   1. FAB + Tooltip
   ========================================== */
.kako-wheel-tooltip {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #E60000, #8A0000);
    color: white;
    padding: 11px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(230, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.kako-wheel-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #E60000;
}

.kako-wheel-tooltip.show-tooltip {
    opacity: 1;
    visibility: visible;
    animation: pulseTooltip 2.2s infinite alternate;
}

@keyframes pulseTooltip {
    0% { transform: translateY(-50%) scale(1); }
    100% { transform: translateY(-50%) scale(1.06); box-shadow: 0 12px 30px rgba(230, 0, 0, 0.65); }
}

@media (max-width: 400px) {
    .kako-wheel-tooltip { display: none; }
}

.kako-wheel-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 88px;
    height: 88px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9990;
    animation: premiumFloat 3.2s ease-in-out infinite;
    filter: drop-shadow(0 8px 18px rgba(230, 0, 0, 0.35));
    transition: filter .35s ease;
}
.kako-wheel-fab:hover {
    filter: drop-shadow(0 12px 28px rgba(255, 26, 26, 0.6));
}

.wheel-svg-icon {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(230, 0, 0, 0.75));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rotating-wheel-part {
    animation: spinWheel 8s linear infinite;
    transform-origin: center;
}

.kako-wheel-fab:hover .wheel-svg-icon {
    transform: scale(1.18);
    filter: drop-shadow(0 0 28px rgba(255, 20, 20, 1));
}
.kako-wheel-fab:hover .rotating-wheel-part {
    animation: spinWheel 1.8s linear infinite;
}

@keyframes spinWheel {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes premiumFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ==========================================
   2. MODAL OVERLAY - GLASSMORPHISM PREMIUM
   ========================================== */
.kako-wheel-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(230,0,0,0.15) 0%, rgba(0,0,0,0.85) 70%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    z-index: 100000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
    padding: 20px;
}

.kako-wheel-overlay.show {
    opacity: 1; visibility: visible;
    transition: opacity .4s ease;
}

.kako-wheel-box {
    background: linear-gradient(180deg, rgba(20, 15, 15, 0.92) 0%, rgba(10, 5, 5, 0.95) 100%);
    border: 1px solid rgba(230, 0, 0, 0.18);
    width: 95%;
    max-width: 560px;
    border-radius: 32px;
    padding: 2.5rem 2rem 2rem;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(230, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 60px rgba(230, 0, 0, 0.04);
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    transform: scale(0.92) translateY(30px);
    opacity: 0;
    transition: all 0.55s cubic-bezier(0.18, 0.9, 0.32, 1.2);
    overflow: hidden;
}
/* Subtelny pattern w tle */
.kako-wheel-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.kako-wheel-overlay.show .kako-wheel-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close button */
.kako-wheel-close {
    position: absolute; top: 18px; right: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    width: 38px; height: 38px; border-radius: 50%;
    color: #aaa; font-size: 1rem; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.kako-wheel-close:hover {
    background: #E60000;
    border-color: #FF1A1A;
    color: white;
    transform: rotate(90deg);
    box-shadow: 0 6px 16px rgba(230, 0, 0, 0.4);
}

/* Header */
.kako-wheel-header { text-align: center; margin-bottom: 2rem; position: relative; z-index: 2; }
.kako-wheel-header h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    margin: 0 0 0.6rem 0;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(120deg, #fff 0%, #FFD7D7 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kako-wheel-header p {
    color: #b0a8a8; font-size: 0.92rem; margin: 0 auto;
    max-width: 88%; line-height: 1.55;
}

/* ==========================================
   3. WIN ANIMATION
   ========================================== */
#wheelDesc strong {
    display: inline-block;
    color: #FF1A1A !important;
    font-size: 1.55rem !important;
    font-weight: 900;
    text-shadow: 0 0 25px rgba(230, 0, 0, 0.7), 0 0 50px rgba(230, 0, 0, 0.3);
    animation: epicWinPop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    letter-spacing: 0.5px;
}

@keyframes epicWinPop {
    0% { transform: scale(0.3) translateY(20px); opacity: 0; filter: brightness(2.2); }
    50% { transform: scale(1.25) translateY(-6px); filter: brightness(1.6); }
    100% { transform: scale(1) translateY(0); filter: brightness(1); opacity: 1; }
}

/* ==========================================
   4. THE WHEEL — premium look
   ========================================== */
.kako-wheel-container {
    position: relative;
    width: 360px;
    height: 360px;
    margin-bottom: 2.2rem;
    border-radius: 50%;
    z-index: 2;
}

/* Glowing aura - więcej warstw dla głębi */
.kako-wheel-container::before {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(230,0,0,0.05) 0%,
        rgba(255,40,40,0.45) 25%,
        rgba(230,0,0,0.05) 50%,
        rgba(255,40,40,0.45) 75%,
        rgba(230,0,0,0.05) 100%);
    animation: spinWheel 5s linear infinite;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.85;
}
/* Drugi pierścień blasku - powolny w przeciwną stronę */
.kako-wheel-container::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, transparent, rgba(255,215,0,0.18), transparent, rgba(255,40,40,0.2), transparent);
    animation: spinWheelReverse 8s linear infinite;
    z-index: -1;
    filter: blur(8px);
}
@keyframes spinWheelReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Arrow — premium pointer */
.kako-wheel-arrow {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 42px;
    color: #FF1A1A;
    z-index: 20;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7)) drop-shadow(0 0 8px rgba(255,26,26,0.6));
    animation: arrowBop 2s infinite ease-in-out;
    text-shadow: 0 0 14px rgba(230, 0, 0, 0.6);
}

@keyframes arrowBop {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
}

/* Wheel core */
.kako-wheel {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 8px solid #1a1010;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.7),
        inset 0 0 30px rgba(0,0,0,0.85),
        inset 0 0 0 2px rgba(230, 0, 0, 0.25),
        0 0 60px rgba(230, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a0808 0%, #0a0303 100%);
    transition: transform 6.5s cubic-bezier(0.15, 0.85, 0.15, 1);
}

/* Central hub - złoty środek koła */
.kako-wheel::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE066 0%, #FFB800 40%, #B8860B 100%);
    box-shadow:
        0 0 20px rgba(255,184,0,0.6),
        inset 0 -3px 6px rgba(0,0,0,0.35),
        inset 0 3px 6px rgba(255,255,255,0.45);
    z-index: 15;
    pointer-events: none;
}

.wheel-slice span {
    position: absolute;
    transform: rotate(18deg) translateY(-115px);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.8);
    text-align: center;
    width: 80px;
}

@media (max-width: 500px) {
    .kako-wheel-container { width: 280px; height: 280px; }
    .kako-wheel-header h2 { font-size: 1.55rem; }
    .wheel-slice span { transform: rotate(18deg) translateY(-85px); font-size: 0.72rem; }
    .kako-wheel::after { width: 42px; height: 42px; }
    .kako-wheel-arrow { font-size: 36px; top: -14px; }
    .kako-wheel-box { padding: 2rem 1.2rem 1.5rem; border-radius: 24px; }
}

/* ==========================================
   5. SPIN BUTTON + TIMER
   ========================================== */
.wheel-spin-btn {
    width: 88%;
    padding: 18px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #E60000 0%, #B30000 100%);
    color: white;
    border: 1px solid #FF1A1A;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 2;
    box-shadow:
        0 10px 26px rgba(230, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transition: all 0.3s cubic-bezier(0.18, 0.9, 0.32, 1.2);
    font-family: 'Poppins', sans-serif;
}

.wheel-spin-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -120%; width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.wheel-spin-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #FF1A1A 0%, #E60000 100%);
    box-shadow:
        0 14px 32px rgba(230, 0, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.wheel-spin-btn:hover:not(:disabled)::before {
    left: 120%;
}

.wheel-spin-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(230, 0, 0, 0.3);
}

.wheel-spin-btn:disabled {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #666;
    border-color: rgba(255,255,255,0.05);
    box-shadow: none;
    text-align: center;
    cursor: not-allowed;
}

/* Timer */
.wheel-timer {
    color: #FF6B6B;
    font-size: 0.88rem;
    margin-top: 1.4rem;
    font-weight: 600;
    min-height: 20px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(230, 0, 0, 0.08);
    border: 1px solid rgba(230, 0, 0, 0.18);
    padding: 9px 22px;
    border-radius: 12px;
    margin-left: auto; margin-right: auto;
    max-width: 92%; line-height: 1.45;
    letter-spacing: 0.3px;
}

/* ==========================================
   MOBILE RESPONSIVENESS - FAB
   ========================================== */
@media (max-width: 1024px) {
    .kako-wheel-fab { width: 72px; height: 72px; bottom: 25px; right: 25px; }
}

@media (max-width: 768px) {
    .kako-wheel-fab { width: 58px; height: 58px; bottom: 20px; right: 15px; }
    .kako-wheel-tooltip { display: none !important; }
    @keyframes premiumFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    .kako-wheel-fab:hover .wheel-svg-icon {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(230, 0, 0, 0.8));
    }
}

@media (max-width: 480px) {
    .kako-wheel-fab { width: 50px; height: 50px; bottom: 14px; right: 10px; }
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ===== css/porownywarka-index-i-comprasion/agent-info.css ===== */
/* ==========================================
   1. PRZYCISK INFO (W KARCIE PODIUM)
   ========================================== */
.btn-info-toggle {
    flex: 0 0 45px; /* Stała szerokość, żeby był kwadratowy */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    color: #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-info-toggle:hover {
    background: #E60000;
    color: #fff;
    border-color: #E60000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
}

/* ==========================================
   2. OVERLAY (TŁO MODALA)
   ========================================== */
.info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000; /* Nad wszystkim innym na stronie */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.info-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================
   3. GŁÓWNY BOKS MODALA
   ========================================== */
.info-modal-box {
    background: #121212;
    border: 1px solid #2C2C2C;
    border-radius: 16px;
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    transform: translateY(40px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 20px rgba(230,0,0,0.1);
}

.info-modal-overlay.active .info-modal-box {
    transform: translateY(0) scale(1);
}

/* PRZYCISK ZAMKNIĘCIA "X" */
.info-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    color: #888;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.info-modal-close:hover {
    background: rgba(230, 0, 0, 0.1);
    color: #E60000;
    border-color: #E60000;
    transform: rotate(90deg);
}

/* ==========================================
   4. HEADER MODALA (LOGO I TYTUŁ)
   ========================================== */
.info-modal-header {
    padding: 24px;
    border-bottom: 1px solid #1E1E1E;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, #161616 0%, #121212 100%);
    border-radius: 16px 16px 0 0;
}

.info-modal-header img {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background: #050505;
    border: 1px solid #333;
    object-fit: contain;
    padding: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.info-modal-header h2 {
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.info-modal-badge {
    font-size: 0.7rem;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(46, 204, 113, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================
   5. BODY (SCROLLOWANA ZAWARTOŚĆ)
   ========================================== */
.info-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom Scrollbar */
.info-modal-body::-webkit-scrollbar { width: 6px; }
.info-modal-body::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.info-modal-body::-webkit-scrollbar-thumb:hover { background: #555; }
.info-modal-body::-webkit-scrollbar-track { background: #050505; }

/* Wiersze informacyjne generowane przez JS */
.info-data-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #0a0a0a;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #1E1E1E;
    transition: all 0.2s ease;
}

.info-data-row:hover {
    border-color: #444;
    background: #0d0d0d;
    transform: translateX(4px); /* Lekki wjazd w prawo */
}

/* Ikonka dla danej kategorii (Cena, Czas, itp.) */
.info-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(230, 0, 0, 0.05);
    color: #E60000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid rgba(230, 0, 0, 0.1);
}

.info-text-content {
    flex: 1;
}

.info-label {
    font-size: 0.75rem;
    color: #808080;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: block;
}

.info-value {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

.info-value strong {
    color: #fff !important;
    font-weight: 700;
}

/* Formaty wyrożnień w tekście JS */
.info-highlight { color: #E60000; font-weight: 700; }
.info-green { color: #2ecc71; font-weight: 700; }

/* ==========================================
   6. FOOTER
   ========================================== */
.info-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #1E1E1E;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    border-radius: 0 0 16px 16px;
}

.info-modal-footer p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==========================================
   7. RESPONSIVE (MOBILE)
   ========================================== */
@media (max-width: 768px) {
    .info-modal-box {
        width: 95%;
        max-height: 90vh;
    }
    
    .info-modal-header {
        flex-direction: column;
        text-align: center;
        padding-top: 30px; /* Miejsce na X */
    }
    
    .info-modal-close {
        top: 12px;
        right: 12px;
    }
    
    .info-data-row {
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }
    
    .info-icon-box {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .info-label { font-size: 0.7rem; }
    .info-value { font-size: 0.9rem; }
}

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

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

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

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

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

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

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

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

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

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

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


/* ===== css/shared/kf-updated.css ===== */
/* Widoczna data aktualizacji (<p class="kf-updated">, stemplowana przez tools/stamp-dates.mjs).
   Ta sama reguła jest w css/index.css; ten plik dostają paczki stron bez index.css
   (agent-comparison, link-converter). */
.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; }