/* file: styles.css | ver: 2025-09-13 a3 | owner: Anigmatic | note: force sticky/fixed over inline position */
body {
  background-color: #fffdf7;
  color: #1b1b32;
  font-family: Nunito, Helvetica;
  margin: 0;
  /* tło przenosimy do pseudoelementu */
}

/* stałe tło bez użycia background-attachment: fixed */
body::before{
  content:"";
  position: fixed;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  z-index: -1;            /* pod całą stroną */
  background-image: url("src/img/tlo_lucusitata.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


/* Każdy element liczy padding/border do szerokości */
*, *::before, *::after { box-sizing: border-box; }

/* Awaryjnie ucinamy ewentualny poziomy scroll, gdy coś się wysunie 1–2px */
html, body { max-width: 100%; overflow-x: hidden; }

h1, h2 {
  font-family: Nunito, Verdana, Tahoma;
}

h1 {
  font-size: 2rem;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}

h2 {
  font-size: 1.3rem;
  margin-top: 30px;
  margin-bottom: 10px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}
p {
  margin: 10px 0;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.5;
}
ul {
  padding-left: 25px;
  margin: 10px 0 10px 0;
}

li {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.4;
}


.nav-am {
  color: #004466;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.nav-am:hover {
  background-color: #f0f0f0;
  color: #00bcd4;
}

.navbar-margin {
  margin: 10px;
  background-color: #ffffff;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  border-radius: 40px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

/* rozkład jak justify-between i avatar po prawej */
.site-nav .nav-icons { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.nav-user { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
.nav-avatar { width:50px; height:50px; border-radius:50%; object-fit:cover; display:inline-block; }

/* layout nie może być ograniczany przez globalne style */
main.layout {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* dzieci siatki nie mogą wymuszać szerszej kolumny */
.layout > * { min-width: 0; }

footer {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  color: #343434;
}

address {
  text-align: center;
  padding: 0.3em;
}

.subwidget-main {
  width: 95%;
  max-width: 800px;
  text-align: center;
  padding: 20px;
  margin: 20px auto;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* Nowe kolory dla ebooka */

.product-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #fffdf7;
  border: 4px solid #b2ebf2;
  border-radius: 20px;
  padding: 20px;
  margin: 12px auto;
  max-width: 900px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  gap: 20px;
}

.product-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-info {
  flex: 1;
  min-width: 250px;
}

.product-info h3 {
  font-size: 1.8rem;
  color: #00acc1;
  margin-bottom: 10px;
}

.product-info p {
  font-size: 1rem;
  margin: 5px 0;
  color: #333;
}

.buy-button {
  display: inline-block;
  margin-top: 10px;
  background-color: #00acc1;
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.buy-button:hover {
  background-color: #00697c;
}
ul {
  padding-left: 25px;
  margin: 10px 0;
  list-style: none; /* ukryj domyślne kropki */
}

ul li::before {
  content: "+"; /* dowolna ikonka emoji – np. gwiazdka */
  color: #00acc1; /* turkusowy akcent */
  font-size: 1.1em;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
}
.disabled-button {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  text-align: center;
  opacity: 0.6;
}

.product-details {
  text-align: left;
  margin-top: 15px;
  padding-left: 0;
  list-style: none;
}

.product-details li {
  font-size: 15px;
  margin-bottom: 6px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 4px;
}

/* === CORE: baner obrazkowy + sticky navbar z ikonami + helpery === */
:root{
  --navH: 64px;
  --sideW: clamp(150px, 14vw, 190px);
}

.hero{ position:relative; border-bottom:1px solid #eef2f6; }
.hero picture,.hero img{ display:block; width:100%; height:auto; }


/* POZYCJE 3 PRZYCISKÓW NA BANERZE (dopasuj % w razie potrzeby) */
.cta-karty{     left:38%; top:60%; width:18%; }
.cta-ksiazki{   left:76%; top:58%; width:15%; }
.cta-lamiglowki{left:32%; top:78%; width:20%; }

/* NAVBAR: jest POD hero; przykleja się dopiero gdy dojedzie do górnej krawędzi */
.site-nav{
  position: sticky !important;
  top: 0;
  z-index: 1100;
  min-height: var(--navH);
  display: flex;
  align-items: center;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #eef2f6;
  background-color: #ffffffd8;
  backdrop-filter: saturate(180%) blur(4px);
  padding: 4px 8px;
}

.site-nav.shadow{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }

/* gdy JS doda .is-fixed – pasek faktycznie „przyklejony” */
.site-nav.is-fixed{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1200;
}

/* navbar: środkowy blok (social) */
.nav-icons{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 8px;
}

.nav-icon-link{ display:flex; justify-content:center; align-items:center; min-width:0; }
.nav-icon{ height: clamp(24px, 4.2vw, 40px); width:auto; display:block; }

/* Burger na mobile: zostaje */
.nav-burger{ display:none; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid #dfe3e8; border-radius:10px; padding:6px 10px; font-size:18px; z-index: 5; }
@media (max-width:820px){
  .nav-burger{ display:inline-block; z-index: 5; }
  .nav-icons{ padding-left: 52px; } /* miejsce na burgera */
}

/* drawer (bez zmian funkcjonalnych) */
.mobile-drawer{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1200; }
.mobile-drawer[hidden]{ display:none !important; }
.mobile-drawer-inner{
  position:absolute; left:0; top:0; bottom:0; width:80vw; max-width:320px;
  background:#fff; padding:16px; box-shadow:3px 0 18px rgba(0,0,0,.18);
}
.mobile-drawer h3{ margin:6px 0 10px; font-family:"Baloo 2",cursive; }
.mobile-drawer ul{ list-style:none; padding:0; margin:0; }
.mobile-drawer li{ margin:8px 0; }
.mobile-drawer a{ color:#1b1b32; text-decoration:none; }
.mobile-drawer a:hover{ color:#2e7dd7; }
.drawer-close{ position:absolute; right:10px; top:6px; font-size:26px; text-decoration:none; color:#666; }

/* ===== 3 kolumny: 20% / 60% / 20% ===== */
:root{
  --navH: 64px;
}

/* kontener siatki */
.layout{
  display: grid;
  gap: 20px;
  /* proporcje 2 : 6 : 2 ≈ 20/60/20 + minimalne szerokości boków */
  grid-template-columns: minmax(140px, 2fr) minmax(0, 6fr) minmax(140px, 2fr);
  padding: 0 12px 20px 0;   /* lewy padding = 0, żeby lewa „przylegała” do krawędzi */
  margin: 0;
}

/* asides = rozciągnij do wysokości wiersza siatki (to klucz dla sticky) */
.left-rail, .right-rail{
  align-self: stretch;   /* było: start */
  overflow: visible;     /* zostawiamy – nie blokuje sticky dziecka */
}

/* rodzic siatki nie może ucinać sticky */
.layout{ overflow: visible; }
.layout > * { min-width: 0; }

/* STICKY tylko tu (bez overflow!) */
.side-stick{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: calc(var(--navH) + 8px);
}

/* SCROLLOWANIE zawartości tylko tu (wewnątrz) */
.side-scroll{
  max-height: calc(100vh - var(--navH) - 16px);
  overflow: auto;
}

/* stała wysokość paska oraz „antyskokowy” spacer */
:root { --navH: 64px; } /* możesz to zmienić na 60/56 jeśli chcesz niższy pasek */

.site-nav{
  position: sticky !important;
  top: 0;
  z-index: 1100;
  min-height: var(--navH);
  display: flex;
  align-items: center;
}

.site-nav.is-fixed{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1200;
}

/* Spacer pod navem – pojawia się tylko, gdy nav jest fixed */
.nav-spacer{ display:none; height: var(--navH); }
.site-nav.is-fixed + .nav-spacer{ display:block; }

/* boczne szyny „doklejone” do paska */
.side-stick{
  position: sticky; top: calc(var(--navH) + 8px);
}

/* duże ikony na pasku (prawie wysokość paska) */
.nav-icon{ height: calc(var(--navH) - 16px); width: auto; }
.nav-avatar{ height: calc(var(--navH) - 10px); width: calc(var(--navH) - 10px); border-radius: 50%; object-fit: cover; }

.nav-icon-link--account{
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.nav-account-label{
  font-size: 0.75rem;
  margin-top: 2px;
  color: #1b1b32;
}

.nav-icon-link--account:hover .nav-account-label{
  color: #00697c;
}

/* na mobile napis chowamy, żeby pasek nie był za szeroki */
@media (max-width: 820px){
  .nav-account-label{ display: none; }
}

/* środkowa kolumna (po prostu kontener) */
.center-col { min-width: 0; }

/* Mobile: 1 kolumna; lewa znika; prawa spada pod środek (w kolejności DOM) */
@media (max-width: 820px){
  .layout{
    grid-template-columns: 1fr;   /* jedna kolumna */
    gap: 12px;
    padding: 0 8px 14px 8px;
  }
  .left-rail{ display: none; }    /* lewa chowamy (i tak masz ją w burgerze) */
  .right-rail{
    display: block;               /* prawa ma być widoczna */
    position: static;             /* już nie sticky na mobile */
    margin-top: 8px;              /* wpadnie POD listę produktów */
  }
  .center-col{ padding: 0 10px; }  /* oddech lewo/prawo tylko na mobile */

}

/* „przezroczysty” box, ale tekst nie klei się do krawędzi */
.side-card{
  background: #ffffffd8;
  border: none;
  padding: 8px 10px 8px 12px;
}

/* Drzewko: foldery i podfoldery */
.tree ul{ list-style:none; margin:0; padding:0; }
.tree > ul > li{ margin:4px 0; }
.tree li{ position:relative; }

.tree a{
  display:block;
  padding:4px 8px;
  border-radius:8px;
  text-decoration:none;
  color:#1b1b32;
  transition: background-color .35s ease, color .15s ease;
}

/* tło przy hover: „pojawia się” lekko */
.tree a:hover{
  background: rgba(46,125,215,.10);
}

/* wcięcia podfolderów + pionowa linia, która daje „strukturę” */
.tree ul ul{
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px dashed rgba(0,0,0,.18);
}
.tree ul ul li{ margin:2px 0; }

.account-link { justify-self: end; }
.avatar-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width: clamp(28px, 4.2vw, 40px); height: clamp(28px, 4.2vw, 40px);
  border-radius:50%; background:#00acc1; color:#fff; font-weight:700;
  font-family: Nunito, Helvetica, Arial, sans-serif;
}

/* === UI polish for forms inside .product-card === */
.product-card--narrow { max-width: 720px; }             /* węższe karty do formularzy */
.product-card--tight   { gap: 14px; padding: 18px; }

.ui-form { width: 100%; }
.ui-field { margin: 10px 0 14px; text-align: left; }
.ui-field label {
  display: block; font-weight: 700; margin-bottom: 6px; color: #1b1b32;
}
.ui-input, .ui-select, .ui-textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 2px solid #b2ebf2; background: #fff; font-size: 16px;
}
.ui-textarea { min-height: 120px; resize: vertical; }

.ui-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ui-hint { font-size: 14px; color: #555; }

.ui-msg { padding: 10px 12px; border-radius: 12px; background: #f7ffff; border: 2px solid #b2ebf2; }
.ui-msg--error { background: #fff6f6; border-color: #ffb3b3; color: #7a0000; }

/* listy w kartach (np. zamówienia) */
.order-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.order-list li { 
  padding: 10px 0; border-bottom: 1px dashed #dbeff2; display:flex; gap:10px; 
  align-items:center; justify-content: space-between; flex-wrap: wrap;
}
.order-meta { font-size: 14px; color: #444; }
.order-badge { font-size: 12px; padding: 4px 8px; border-radius: 10px; background: #e6f7f9; border:1px solid #b2ebf2; }
.order-amount { font-weight: 700; }

/* małe link-przyciski */
.btn-link {
  display:inline-block; padding: 10px 14px; border-radius: 12px; border:2px solid #b2ebf2;
  text-decoration:none; color:#00697c; background:#f7ffff; font-weight:700; font-size: 0.95rem;
}
.btn-link:hover { background:#e6f7f9; }

/* dopasowanie kart z samą treścią (bez obrazka) */
.product-card .product-info { width: 100%; }

/* --- NAV: stała wysokość i spacer anty-skok --- */
:root{ --navH: 64px; } /* zmień np. na 56px, jeśli chcesz niższy pasek */

.site-nav{
  position: sticky !important;
  top: 0;
  z-index: 1100;
  height: var(--navH);            /* stała wysokość */
  display: flex;
  align-items: center;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #eef2f6;
  background-color: #ffffffd8;
  backdrop-filter: saturate(180%) blur(4px);
  padding: 0 8px;                 /* bez dodatkowej wysokości z paddingu pionowego */
}

.site-nav.shadow{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }

.site-nav.is-fixed{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1200;
}

/* Spacer pokazujemy gdy nav jest fixed.
   Używamy selektora ~ (dowolny następny), żeby działało nawet jeśli
   między <nav> a spacerem jest drawer. */
.nav-spacer{ display:none; height: var(--navH); }
.site-nav.is-fixed ~ .nav-spacer{ display:block; }

/* upewniamy się, że nav to flex z trzema „kolumnami” */
.site-nav{
  display: flex;
  align-items: center;
}

/* dzieci w nav: burger lewo, social środek, konto prawo */
.nav-burger{
  display: none;
  background:#fff;
  border:1px solid #dfe3e8;
  border-radius:10px;
  padding:6px 10px;
  font-size:18px;
  z-index: 5;
}

.nav-icons--center{
  flex: 1;
}

.nav-icon-link--account{
  margin-left: auto;
}

@media (max-width: 820px){
  .nav-burger{ display:inline-block; }
  .nav-icons{ padding:0 8px; } /* środek */
}

/* Ikony ≈ wysokość paska */
.nav-icon  { height: calc(var(--navH) - 12px); width:auto; display:block; }
.nav-avatar{ height: calc(var(--navH) - 8px);  width: calc(var(--navH) - 8px); border-radius:50%; object-fit:cover; }

/* --- SIDEBARS: doklejone do paska --- */
/* przenosimy sticky na ASIDE (stabilniej w CSS Grid) */
.left-rail, .right-rail{
  position: sticky;
  top: calc(var(--navH) + 8px);
  align-self: start;   /* ważne dla sticky w gridzie */
}

/* a wrapper wewnątrz asidów niech już NIE będzie sticky,
   żeby nie mieszać dwóch sticky naraz */
.side-stick{
  position: static !important;
}

/* (opcjonalnie) gdy pasek wysoki na mobile – kolumny też korygują offset */
@media (max-width: 820px){
  .left-rail{ display:none; }
  .right-rail{ position: static; }
}

/* Stopka – social */
.footer-social{ display:flex; gap:10px; justify-content:center; margin:6px 0 14px; }
.footer-social .soc{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:8px; background:#fff; border:1px solid #dbeff2; }
.footer-social .soc:hover{ background:#f7ffff; }
.footer-social svg{ width:18px; height:18px; fill:#00697c; }
.footer-social .soc img{ display:block; height:28px; width:auto; }


/* Cookie overlay */
.ccovl{ position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5);
        display:flex; align-items:center; justify-content:center; padding:16px; }
.ccovl__panel{ width: min(680px, 92vw); background: #fff; border-radius: 16px;
               box-shadow: 0 20px 50px rgba(0,0,0,.3); padding: 22px; text-align: left; }
.ccovl__panel h3{ margin: 0 0 8px; font-family: "Baloo 2", cursive; font-size: 1.4rem; }
.ccovl__panel p{ margin: 0 0 16px; }
.ccovl__actions{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ccbtn{ border: 2px solid #b2ebf2; background: #f7ffff; color: #00697c; font-weight: 700;
        border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.ccbtn--primary{ background: #00acc1; color:#fff; border-color:#00acc1; }
.ccbtn--primary:hover{ filter: brightness(.95); }
.cclnk{ color:#00697c; text-decoration: none; }
.cclnk:hover{ text-decoration: underline; }

/* Cookie Overlay with image */
.ccovl{position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px;}
.ccovl__panel{background:#fff; border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.25); width:min(900px, 94vw); display:grid; grid-template-columns: 220px 1fr; gap:16px; padding:18px;}
.ccovl__media{display:flex; align-items:center; justify-content:center;}
.ccovl__img{max-width:200px; width:100%; height:auto; object-fit:contain;}
.ccovl__content h3{margin:0 0 8px;}
.ccovl__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.ccbtn{padding:10px 14px; border-radius:10px; border:2px solid #b2ebf2; background:#f7ffff; font-weight:700; color:#00697c;}
.ccbtn--primary{border:0; background:#00acc1; color:#fff;}
.cclnk{align-self:center; color:#00697c; text-decoration:none;}
@media (max-width: 720px){
  .ccovl__panel{grid-template-columns: 1fr; text-align:left;}
  .ccovl__media{order:-1; margin:-6px 0 4px;}
  .ccovl__img{max-width:160px;}
}

.ui-actions label { display:flex; gap:6px; align-items:center; }
.ui-select { min-width: 160px; }

/* Tight spacing tylko w drzewku w lewym railu */
.tree ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.tree li { margin: 0 !important; padding: 0 !important; }
.tree li::before { content: none !important; }          /* wyłącz globalny '+' */
.tree a {
  display: block;
  padding: 4px 8px;                                     /* ciaśniej */
  line-height: 1.2;
  border-radius: 8px;
  text-decoration: none;
  color: #1b1b32;
  background: transparent;
  transition: background-color .25s ease;               /* ładne „wygaszanie” */
}
.tree a:hover { background: rgba(46,125,215,.10); }
.tree ul ul { margin-left: 12px !important; padding-left: 10px !important; border-left: 1px dashed rgba(0,0,0,.18); }

.side-social{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.side-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* wyłącz podświetlanie tła z .tree a:hover dla sociali */
.tree .side-social a{
  padding: 0;
  background: none;
}

.tree .side-social a:hover{
  background: none;
}

.buy-button--ghost {
  background: #f7ffff;
  color: #00697c;
  border: 2px solid #b2ebf2;
}
.buy-button--ghost:hover { background: #e6f7f9; }

.buy-button--disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: .7;
  pointer-events: none;
}

.stock-label {
  font-weight: 600;
  margin-left: 4px;
}

.stock-label--ok {
  color: #16a34a; /* zielony */
}

.stock-label--low {
  color: #16a34a; /* też zielony, ale tekst już mówi „mała ilość” */
}

.stock-label--warning {
  color: #ea580c; /* pomarańcz */
}

.stock-label--last {
  color: #dc2626; /* czerwony */
}

.stock-label--none {
  color: #dc2626; /* czerwony */
  text-transform: uppercase;
}


.qty-input {
  width: 80px;
  padding: 8px 10px;
  margin-right: 8px;
  border: 2px solid #b2ebf2;
  border-radius: 10px;
  font-size: 1rem;
}

.notify-box {
  margin-top: 16px;
  padding: 12px;
  border: 2px dashed #b2ebf2;
  border-radius: 12px;
  background: #f7ffff;
}
.notify-link {
  display: inline-block;
  margin-left: 8px;
  font-weight: 700;
  color: #00697c;
  text-decoration: none;
}
.notify-link:hover { text-decoration: underline; }

.account-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  border-bottom:1px solid #eee;
}
.account-tab-link {
  border:none;
  background:none;
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
  font-size:0.95rem;
  border-bottom:3px solid transparent;
}
.account-tab-link.active {
  border-color:#ff9800;
  color:#ff9800;
}
.account-tab-pane { display:none; margin-top:8px; }
.account-tab-pane.active { display:block; }
.account-avatar {
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  margin-right:16px;
}
.account-flex {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
}
.account-form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px 16px;
  margin-top:12px;
}
.account-form-grid label {
  font-size:0.85rem;
  font-weight:600;
  display:block;
  margin-bottom:4px;
}
.account-form-grid input,
.account-form-grid select {
  width:100%;
}
.account-section-title {
  margin-top:0;
}
.account-muted {
  font-size:0.85rem;
  color:#666;
}
.ui-msg.ui-msg--ok {
  background:#e8f5e9;
  border:1px solid #a5d6a7;
  padding:8px 12px;
  border-radius:8px;
  margin-bottom:12px;
}
.order-tag {
  font-size:0.75rem;
  padding:2px 6px;
  border-radius:10px;
  background:#f5f5f5;
}

/* --- NAVBAR: konto użytkownika --- */
.nav-icon-link--account {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* domyślna pigułka (np. dla Zaloguj) */
.nav-account-label {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #b2ebf2;
  background: #f7ffff;
  color: #00697c;
  white-space: nowrap;
  margin-left: 6px;
}

/* wersja overlay dla zalogowanych – na avatarze, mniejsza */
.nav-icon-link--account--logged-in .nav-account-label {
  position: absolute;
  bottom: -2px;
  right: -4px;
  margin: 0;
  font-size: 0.65rem;
  padding: 2px 6px;
}

/* hover – tylko kolor, bez zwiększania rozmiaru */
.nav-icon-link--account:hover .nav-account-label {
  background: #00acc1;
  color: #fff;
  border-color: #00acc1;
}

/* --- NAVBAR: social media --- */
.nav-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nav-social-icons .nav-social-icon {
  height: 24px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
  transition: transform 0.15s ease;
}

.nav-social-icons a:hover .nav-social-icon {
  transform: translateY(-1px);
}

/* --- NAVBAR: layout --- */
.site-nav {
  display: flex;
  align-items: center;
}

/* Lewy link: Strona główna (desktop) */
.nav-home-link {
  margin-right: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: #00697c;
  white-space: nowrap;
}
.nav-home-link:hover {
  text-decoration: underline;
}

/* Środek: social media */
.nav-icons.nav-icons--center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Prawa strona: konto */
.nav-icon-link--account {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Burger – domyślnie ukryty (desktop) */
.nav-burger {
  display: none;
  background:#fff;
  border:1px solid #dfe3e8;
  border-radius:10px;
  padding:6px 10px;
  font-size:18px;
}

/* Mobile: burger LEWO, social ŚRODEK, konto PRAWO, bez linku Strona główna */
@media (max-width: 820px) {
  .nav-home-link {
    display: none;
  }

  .nav-burger {
    display: inline-block;
    margin-right: 8px;
  }

  .nav-icons.nav-icons--center {
    flex: 1;
    justify-content: center;
  }
  /* nav-icon-link--account zostaje z margin-left:auto – trzyma się prawej krawędzi */
}

/* --- NAVBAR: label na avatarze --- */
.nav-account-label {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #b2ebf2;
  background: #f7ffff;
  color: #00697c;
  white-space: nowrap;
  margin-left: 6px;
}

/* zalogowany: label jako mały overlay, nie powiększa paska */
.nav-icon-link--account--logged-in .nav-account-label {
  position: absolute;
  bottom: -2px;
  right: -4px;
  margin: 0;
  font-size: 0.65rem;
  padding: 2px 6px;
}

/* hover – tylko kolor */
.nav-icon-link--account:hover .nav-account-label {
  background: #00acc1;
  color: #fff;
  border-color: #00acc1;
}

.social-links{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Bazowy "badge" */
.social-link{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* domyślnie: tło w kolorze marki, ikonka biała */
  background: var(--brand-bg);
  color: #fff;
  border: 1px solid transparent;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  text-decoration:none;
}

.social-link svg{
  width:20px;
  height:20px;
  fill: currentColor;
}

/* Hover: odwrócenie (białe tło + kolor marki na ikonie + obramowanie) */
.social-link:hover,
.social-link:focus-visible{
  background: #fff;
  color: var(--brand-border);
  border-color: var(--brand-border);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  outline: none;
}

/* Facebook – prosto */
.social-link--fb{
  --brand-bg: #1877F2;
  --brand-border: #1877F2;
}

/* Instagram – gradient jako tło (najczęściej spotykane), a kolor na hover jako „instagramowy” róż */
.social-link--ig{
  --brand-bg: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --brand-border: #E1306C;
}

.social-link--reddit{
  --brand-bg: #FF4500;
  --brand-border: #FF4500;
}