/* ========= TOKENS ========= */
:root{
  --bg:#0e1116;
  --panel:#131924cc;
  --card:#151b25;
  --border:#273043;
  --line: var(--border);

  --text:#e6e9f0;
  --muted:#9aa4b2;

  --accent:#7c87ff;
  --accent-weak:#232a3f;
  --accent-green:#34d399;
  --accent-pink:#f472b6;

  --shadow:0 10px 28px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:12px;
  --ring:0 0 0 4px rgba(124,135,255,.22);

  --header-h:64px;
}

/* ========= BASE ========= */
*{box-sizing:border-box}
html,body{margin:0;padding:0; overflow-x:hidden;} /* blok poziomego scrolla */
img{max-width:100%;height:auto;display:block}

html.fs-sm{font-size:15px}
html.fs-md{font-size:16px}
html.fs-lg{font-size:18.5px}

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, #1a2140 0%, transparent 40%),
    radial-gradient(1000px 700px at 90% -20%, #0f2a2a 0%, transparent 45%),
    var(--bg);
  color:var(--text);
}

.wrap{max-width:1180px;margin:0 auto;padding:20px}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:.95rem}
.tiny{font-size:.85rem}

/* ========= HEADER / FOOTER ========= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(19,25,36,.85), rgba(19,25,36,.65));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}

/* Desktop: klasyczny flex */
.header-row{
  display:flex; align-items:center; gap:16px;
}
.header-row > *{ flex:0 0 auto }
.header-spacer{ flex:1 1 auto }

/* Mobile: 3 kolumny – [puste] [logo] [burger] */
@media (max-width:980px){
  .header-row{
    display:grid !important;
    grid-template-columns: 1fr auto 44px;
    align-items:center; gap:8px;
  }
  /* LOGO w centrum z napisem */
  .brand{ grid-column:2; justify-self:center; }
  .brand a{ display:inline-flex; align-items:center; gap:8px; }
  .brand-text{ display:inline !important; }
  .brand-logo{ max-width:36px; min-width:32px; height:36px; object-fit:contain; }

  /* HAMBURGER po prawej i nad wszystkim */
  #navToggle.burger{
    grid-column:3; justify-self:end;
    display:inline-flex !important;
    position:relative; z-index:10002;
  }

  /* narzędzia chowamy */
  .ui-tools{ display:none !important; }
}

/* Brand/Logo */
.brand a{ text-decoration:none; color:var(--text); }
.brand-text{ font-weight:800; font-size:18px; letter-spacing:.2px; }
.brand-logo{ max-width:7%; min-width:28px; height:auto; display:block; object-fit:contain; }
.logo-dark{ display:none; }
:root[data-theme="dark"] .logo-light{ display:none; }
:root[data-theme="dark"] .logo-dark{ display:block; }
@media (max-width:420px){ .brand-text{ display:none; } }

/* Header nav linki (desktop) */
.site-header nav{display:flex;gap:8px;flex-wrap:wrap}
.site-header nav a{
  padding:10px 12px;border-radius:12px;color:var(--muted);text-decoration:none;
  transition: background .2s ease,color .2s ease;
}
.site-header nav a:hover{background:var(--accent-weak);color:var(--accent)}

.site-footer{
  border-top:1px solid var(--border);
  background: rgba(19,25,36,.75);
  margin-top:32px;
}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;padding:18px 20px}

/* ========= FLASH ========= */
.flash{
  margin:12px 0 16px; padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,214,130,.35);
  background: rgba(255,214,130,.12);
  color:#ffe6b3;
}

/* ========= CONTAINERS ========= */
.box{
  border:1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.panel{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.price{font-weight:800}

/* ========= BADGES / TAGS ========= */
.tag{
  display:inline-block; font-size:.8rem; padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); background:#0f141b; margin-left:6px; color:var(--text);
}
.tag-free{
  border-color: rgba(52,211,153,.25);
  color: var(--accent-green);
  background: rgba(52,211,153,.10);
}
.tag-paid{
  border-color: rgba(244,114,182,.25);
  color: var(--accent-pink);
  background: rgba(244,114,182,.12);
}

/* ========= BUTTONS ========= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:#0f141b; color:var(--text); text-decoration:none; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.btn:hover{ box-shadow:0 8px 18px rgba(0,0,0,.45); background:#111825; transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn.primary{
  background:var(--accent); color:#0c0f17; border-color:transparent;
  box-shadow:0 8px 22px rgba(124,135,255,.35);
}
.btn.primary:hover{ filter:brightness(1.05) }
.btn.ghost{ background:transparent }

/* ========= FORMS ========= */
label{font-weight:600; font-size:.95rem; color:#cbd5e1}
input[type="text"], input[type="email"], textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--border); border-radius:12px;
  background:#0f141b; color: var(--text);
  outline:none; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
input:focus, textarea:focus{ box-shadow: var(--ring); border-color: var(--accent) }
.lead-form{display:flex;flex-direction:column;gap:10px}

/* ========= LAYOUT ========= */
.columns{ display:grid; grid-template-columns: minmax(0,1fr); gap:16px }
.cols{ display:grid; grid-template-columns: 1.6fr 1fr; gap:16px; }
@media (max-width: 980px){ .cols{ grid-template-columns:1fr } }

/* ========= SEARCH ========= */
.search-form{display:flex;gap:10px;margin:10px 0}
.search-form input{flex:1}
.search-form button{border:0}

/* ========= RESULTS GRID ========= */
.grid{
  display:grid; gap:14px; margin-top:12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width:1180px){ .grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:860px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr } }

.item{
  border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border); background: var(--card);
  box-shadow: var(--shadow); transition: transform .06s ease, box-shadow .2s ease;
}
.item:hover{ transform: translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.5) }
.item img{width:100%; aspect-ratio: 4/3; object-fit:cover}
.item-body{padding:12px}
.item-title{margin:.1rem 0 .25rem; font-size:1rem; line-height:1.25}

.pager{display:flex;gap:10px;justify-content:center;margin:14px 0}

/* ========= PRICING ========= */
#pricing{ margin-top:18px }
#pricing .pr-wrap{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
#pricing .pr-head{ padding:14px 16px; border-bottom:1px solid var(--line) }
#pricing .pr-head h2{ margin:0 0 6px; font-size:22px }
#pricing .pr-head p{ margin:0; color:var(--muted); font-size:.95rem }

#pricing .pr-grid{
  display:grid; gap:12px; padding:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
#pricing .pr-grid.two-cols{
  grid-template-columns: 1.7fr 1fr;
}
@media (max-width:980px){
  #pricing .pr-grid, #pricing .pr-grid.two-cols{ grid-template-columns:1fr }
}

#pricing .pr-card{
  position:relative; border:1px solid var(--line); border-radius:14px; background:#0f141b;
  display:flex; flex-direction:column; gap:10px; padding:14px; box-shadow:0 4px 14px rgba(0,0,0,.35)
}
#pricing .pr-card.popular{ outline:3px solid rgba(124,135,255,.22) }
#pricing .ribbon{
  position:absolute; top:10px; right:-6px; background:#ffedd5; color:#7a3e11; font-weight:700; font-size:.75rem;
  padding:6px 10px; border-top-left-radius:8px; border-bottom-left-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.25)
}
#pricing .pr-badge{
  position:absolute; top:10px; left:10px; background:#1f2140; color:#cbd5ff; font-weight:700; font-size:.73rem;
  padding:4px 8px; border-radius:999px; border:1px solid var(--line);
}

#pricing .pr-card-top h3{ margin:.2rem 0 .1rem; font-size:1.05rem }
#pricing .pr-pill{
  display:inline-block; font-size:.78rem; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); margin-bottom:6px; background:#0f141b; color:var(--text);
}
#pricing .pr-pill.free{ color:var(--accent-green); border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.10) }
#pricing .pr-pill.paid{ color:var(--accent-pink); border-color: rgba(244,114,182,.25); background: rgba(244,114,182,.12) }

#pricing .pr-price{ display:flex; align-items:baseline; gap:6px }
#pricing .pr-price .now{ font-size:1.5rem; font-weight:800 }
#pricing .pr-price .per{ color:var(--muted) }
#pricing .pr-sub{ color:var(--muted); font-size:.9rem }

#pricing .pr-feats { counter-reset: step; }
#pricing .pr-feats li { position: relative; padding-left: 36px; counter-increment: step; }
#pricing .pr-feats li::before{
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 999px;
  background: var(--step-bg, #0f141b) !important;
  color: var(--step-color, var(--text)) !important;
  border: 1px solid var(--step-border, var(--border)) !important;
  font-weight: 800; font-size: .9rem;
}

/* ========= ACCESSIBILITY ========= */
a:focus, button:focus, .btn:focus, input:focus, textarea:focus{
  outline:none; box-shadow: var(--ring);
}
.accessibility-ico.hlp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:4px; text-decoration:none; cursor:pointer;
  padding:8px 10px; border-radius:12px; border:1px solid var(--border);
  background:#0f141b; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  line-height:1; user-select:none;
}
.accessibility-ico.hlp-btn:hover{
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.45); background:#111825;
}
.accessibility-ico.hlp-btn:active{ transform:none }
#help-txtsize span:first-child{ font-size:1rem; font-weight:800; line-height:1 }
#help-txtsize span:last-child { font-size:.65rem; font-weight:800; line-height:1; margin-left:2px; opacity:.9 }
#help-contrast i.bi{ display:inline-block; width:1em; height:1em; position:relative }
#help-contrast i.bi::before{
  content:""; display:block; width:100%; height:100%; border-radius:50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ============================
   LIGHT THEME OVERRIDES
   ============================ */
html[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffffcc;
  --card:#ffffff;
  --border:#e8ebf2;
  --line:#e8ebf2;

  --text:#111827;
  --muted:#6b7280;

  --accent:#5661ff;
  --accent-weak:#eef2ff;

  --shadow:0 8px 24px rgba(16,24,40,.08);
  --ring:0 0 0 4px rgba(86,97,255,.18);
}
html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 10% -10%, #eef2ff 0%, transparent 45%),
    radial-gradient(800px 500px at 90% -15%, #e8fff7 0%, transparent 50%),
    var(--bg);
}
html[data-theme="light"] .site-header{
  background:linear-gradient(180deg, #ffffffdd, #ffffffc7);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .site-footer{
  background:#fff;
  border-top:1px solid var(--border);
}
html[data-theme="light"] .btn{
  background:#fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(16,24,40,.06);
}
html[data-theme="light"] .btn:hover{ box-shadow:0 8px 18px rgba(16,24,40,.12); background:#f9faff }
html[data-theme="light"] .btn.primary{
  background:var(--accent) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 22px rgba(86,97,255,.28);
}
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] textarea{
  background:#fff; color:var(--text); border-color:var(--border);
}
html[data-theme="light"] .box,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .item{
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}
html[data-theme="light"] .tag{ background:#fff; color:var(--text); border-color:var(--border) }

/* ========= NAV: Mobile drawer ========= */

/* Backdrop */
.nav-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
}
.nav-backdrop[hidden]{ display:none }

/* Drawer (mobile) – domyślnie ukryty i nie łapie klików */
.site-nav{
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh;
  background: var(--card);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .22s ease;
  z-index: 10001;
  display: block;
  -webkit-overflow-scrolling: touch;
}
.site-nav.open{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.site-nav__inner{
  display:flex; flex-direction:column; gap:10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 28px;
  height: 100%;
  overflow: auto;
}

.site-nav a{
  display:block; width:100%;
  padding:16px 14px;
  border-radius:12px;
  font-size:1.05rem;
  color:var(--text);
  background:transparent;
  border:1px solid transparent;
  text-decoration:none;
}
.site-nav a:hover{
  background:var(--accent-weak);
  color:var(--accent);
  border-color:var(--border);
}

/* W jasnym motywie linki w drawerze to białe karty */
@media (max-width:980px){
  html[data-theme="light"] .site-nav a{
    background:#fff; color:#111827; border:1px solid var(--line);
  }
  html[data-theme="light"] .site-nav a:hover{
    background:#f3f4f6; color:#111827;
  }
}

/* DESKTOP: zwykła nawigacja; drawer/backdrop wyłączone */
@media (min-width:981px){
  .site-nav{
    position:static; inset:auto; transform:none; transition:none;
    width:auto; height:auto; background:transparent; z-index:auto; display:flex;
    visibility:visible; pointer-events:auto;
  }
  .site-nav__inner{ display:flex; flex-direction:row; gap:8px; padding:0; height:auto; overflow:visible }
  .site-nav a{ padding:10px 12px; border-radius:12px; border:1px solid transparent; }
  .site-nav a:hover{ background:var(--accent-weak); color:var(--accent); border-color:var(--border) }
  .nav-backdrop{ display:none !important; }
}


/* Na desktopie chowamy linki .hide-desktop */
@media (min-width: 981px){
  .site-nav .hide-desktop{ display:none !important; }
}

/* ===== BURGER ===== */
.burger{
  display:none; width:40px; height:40px; padding:8px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--card); cursor:pointer;
}
.burger span{
  display:block; width:100%; height:2px; margin:5px 0;
  background:var(--text); border-radius:2px;
}
@media (max-width:980px){
  .burger{ display:inline-flex !important; align-items:center; justify-content:center; }
}
@media (min-width:981px){
  .burger{ display:none !important; }
}

/* ====== KONIEC ====== */
/* === [A] LIGHT: białe tło dla kart/pricing (pkt 1) === */
html[data-theme="light"] .panel,
html[data-theme="light"] .box,
html[data-theme="light"] .card,
html[data-theme="light"] #pricing .pr-card{
  background:#fff !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow);
}
/* Drobne kosmetyki dla badge w light */
html[data-theme="light"] #pricing .pr-badge{ background:#eef2ff; color:#374151; border-color:#e8ebf2 }

/* === [B] Ikony dostępności w light (pkt 2 i 3) === */
html[data-theme="light"] .accessibility-ico.hlp-btn{
  background:#fff !important; color: var(--text) !important; border-color: var(--border) !important;
  box-shadow:0 2px 8px rgba(16,24,40,.06) !important;
}
html[data-theme="light"] .accessibility-ico.hlp-btn:hover{
  background:#f8fafc !important; box-shadow:0 8px 18px rgba(16,24,40,.12) !important;
}
/* Pół-księżyc – czytelny w light */
html[data-theme="light"] #help-contrast i.bi::before{
  background: linear-gradient(90deg, var(--text) 50%, transparent 50%) !important;
  box-shadow: inset 0 0 0 1.5px var(--text) !important;
}
/* Ikonka A/A – odziedziczy var(--text), nic nie będzie „czarne” z ciemnego motywu */

/* === [C] Hamburger zawsze klikalny przy otwartym menu (pkt 4) === */
@media (max-width:980px){
  /* Zamiast chować header pod menu – dajemy go NADEMNĄ, ale wyłączamy kliknięcia, oprócz burgera */
  html.nav-open .site-header{
    z-index:10002;                /* nad menu (10001) i backdropem (10000) */
    background:transparent; backdrop-filter:none; pointer-events:none;
  }
  html.nav-open #navToggle.burger{
    position:fixed; top:15px; right:16px;
    pointer-events:auto; z-index:10003;       /* pewność, że jest nad wszystkim */
  }

  /* Warstwy menu */
  .nav-backdrop{ z-index:10000 !important; }
  .site-nav{ z-index:10001 !important; }

  /* Drawer niewidoczny/nieklikalny, dopiero w .open go włączamy */
  .site-nav{ pointer-events:none; visibility:hidden; transform:translateX(100%); }
  .site-nav.open{ pointer-events:auto; visibility:visible; transform:translateX(0); }
}

/* === [D] Burger – paski (na wszelki wypadek) (pkt 3) === */
.burger{ width:40px; height:40px; padding:8px; display:none; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; background:var(--card); cursor:pointer; }
.burger span{ display:block; width:100%; height:2px; margin:5px 0; background:var(--text); border-radius:2px; }
@media (max-width:980px){ .burger{ display:inline-flex !important; } }
@media (min-width:981px){ .burger{ display:none !important; } }

/* === [E] Bez poziomego scrolla i bez „wyglądania” menu z boku (pkt 5 bonus) === */
html, body { overflow-x: hidden !important; }


/* === 1) Desktop: "Szukam Korzeni" obok (po PRAWEJ) logo, nie pod === */
@media (min-width: 981px){
  .brand a{
    display:inline-flex; align-items:center; gap:10px;
    white-space:nowrap;                 /* nie łam tekstu pod logo */
  }
  .brand-logo{
    width:32px; height:32px;            /* stały rozmiar, bez % */
    min-width:32px; object-fit:contain;
  }
}

/* === 2) Light theme: widoczne cyferki/kółka w ofercie === */
/* Używamy zmiennych z reguły #pricing .pr-feats li::before */
html[data-theme="light"]{
  --step-bg:#fff;
  --step-color:#111827;
  --step-border:#e8ebf2;
}
/* (jeśli masz gdzieś inne kółka/badge z cyfrą) */
html[data-theme="light"] #pricing .pr-badge{
  background:#eef2ff; color:#374151; border-color:#e8ebf2;
}

/* === 3) Mobile: menu ma otwierać się POD paskiem nagłówka (nie przykrywać go) === */
@media (max-width:980px){
  /* wysokość paska nagłówka – masz już --header-h:64px w :root */
  .site-header{ position:sticky; top:0; z-index:1002; }

  /* BACKDROP od krawędzi pod headerem */
  .nav-backdrop{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    z-index:1000;
  }

  /* DRAWER pod headerem (czyli nie zakrywa paska z burgerem) */
  .site-nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    height:auto;                         /* wynikowe: 100dvh - header */
    transform:translateX(100%);
    visibility:hidden; pointer-events:none;
    z-index:1001;                         /* pod headerem, nad backdropem */
  }
  .site-nav.open{ transform:translateX(0); visibility:visible; pointer-events:auto; }

  /* treść szuflady – już bez dodatkowego top paddingu pod notcha */
  .site-nav__inner{ padding:12px 16px 28px; }

  /* burger zawsze klikalny */
  html.nav-open #navToggle.burger{
    position:fixed; top:2.5%; right:16px;
    z-index:1003; pointer-events:auto;
  }
}
/* === [1] DESKTOP: menu (nav) ma być po PRAWEJ === */
@media (min-width:981px){
  /* logo+tekst po lewej, NAV wypchnięty w prawo */
  .site-header .site-nav{ margin-left:auto; }
  /* ten „spacer” niepotrzebny na desktopie */
  .header-spacer{ display:none; }
  /* drobna kosmetyka narzędzi przy prawej krawędzi (jeśli używasz) */
  .ui-tools{ margin-left:12px; }
  /* upewnij się, że brand jest w jednej linii */
  .brand a{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
  .brand-logo{ width:32px; height:32px; min-width:32px; object-fit:contain; }
}

/* === [2] LIGHT: „cyferki w ofercie” (kółka przy listach) mają jasne tło i ciemną cyfrę === */
/* Wystarczy poprawić zmienne, bo kółka używają --step-* w #pricing .pr-feats li::before */
html[data-theme="light"]{
  --step-bg:#fff;
  --step-color:#111827;
  --step-border:#e8ebf2;
}

/* Na wszelki wypadek: jeśli gdzieś indziej jest podobny badge */
html[data-theme="light"] #pricing .pr-badge{
  background:#eef2ff; color:#374151; border-color:#e8ebf2;
}

/* === [3] MOBILE: drawer POD paskiem z logo (nie nachodzi na header) === */
/* Ustanawiamy spójny, „kontraktowy” wymiar nagłówka na mobile, aby top:var(--header-h) był prawdziwy */
@media (max-width:980px){
  :root{ --header-h: 72px; }                  /* możesz podbić do 80px, jeśli masz większe logo */

  .site-header{
    position:sticky; top:0; z-index:1002;
    /* zrób nagłówek o dokładnie tej samej wysokości */
    min-height: var(--header-h);
  }
  .site-header .wrap{
    min-height: var(--header-h);
    display:grid !important;
    grid-template-columns: 1fr auto 44px;     /* [pusto] [logo+tekst] [burger] */
    align-items:center; gap:8px;
  }
  /* logo centralnie */
  .brand{ grid-column:2; justify-self:center; }
  .brand a{ display:inline-flex; align-items:center; gap:8px; }
  .brand-text{ display:inline !important; }
  .brand-logo{ width:36px; height:36px; min-width:32px; object-fit:contain; }

  /* burger po prawej, zawsze klikalny */
  #navToggle.burger{
    grid-column:3; justify-self:end;
    display:inline-flex !important;
    position:relative; z-index:1003;          /* nad wszystkim */
  }

  /* BACKDROP i DRAWER startują tuż pod headerem */
  .nav-backdrop{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    z-index:1000;
  }

  .site-nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    height:auto;
    transform:translateX(100%);
    visibility:hidden; pointer-events:none;
    z-index:1001;                             /* pod headerem, nad backdropem */
  }
  .site-nav.open{
    transform:translateX(0);
    visibility:visible; pointer-events:auto;
  }

  /* nie potrzebujemy extra top-paddga pod notcha, bo menu zaczyna się pod headerem */
  .site-nav__inner{ padding:12px 16px 28px; }

  /* narzędzia chowamy na mobile */
  .ui-tools{ display:none !important; }
}
/* ==== MOBILE FIX PACK (menu wysokość, skaczący burger, centrowanie brand) ==== */
@media (max-width:980px){
  /* 1) Stabilny pasek nagłówka + bezpieczny notch */
  :root{
    --safe-top: env(safe-area-inset-top, 0px);
    --header-h: 72px; /* podbij do 80px jeśli masz wyższe logo */
  }
  .site-header{
    position: sticky; top: 0; z-index: 1002;
    height: calc(var(--header-h) + var(--safe-top));
    background: inherit; /* zachowaj gradient */
  }
  .site-header .wrap{
    height: calc(var(--header-h) + var(--safe-top));
    padding-top: var(--safe-top);
    display: grid !important;
    grid-template-columns: 44px 1fr 44px;  /* L | CENTER | R */
    align-items: center; gap: 8px;
  }

  /* 2) Sztuczny „lewy ciężarek”, żeby brand był IDEALNIE NA ŚRODKU */
  .header-row::before{
    content: ""; display: block;
    width: 44px; height: 1px;           /* zajmuje 1. kolumnę */
    grid-column: 1;
  }

  /* 3) Brand idealnie na środku (nie „ucieka” w prawo) */
  .brand{ grid-column: 2; justify-self: center; }
  .brand a{ display:inline-flex; align-items:center; gap:8px; }
  .brand-text{ display:inline !important; }
  .brand-logo{ width:36px; height:36px; min-width:32px; object-fit:contain; }

  /* 4) Burger zawsze w tym samym miejscu (nie skacze) */
  #navToggle.burger{
    grid-column: 3;
    position: fixed;      /* stałe położenie, zero skakania */
    top: calc(var(--safe-top) + 12px);
    right: 16px;
    z-index: 1003;        /* nad menu i backdropem */
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }
  .burger{ width:40px; height:40px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
  .burger span{ display:block; width:100%; height:2px; margin:5px 0; background:var(--text); border-radius:2px; }

  /* 5) Drawer i backdrop POD paskiem nagłówka (nie przykrywają logo) */
  .nav-backdrop{
    position: fixed; top: calc(var(--header-h) + var(--safe-top)); left:0; right:0; bottom:0;
    z-index: 1000;
  }
  .site-nav{
    position: fixed; top: calc(var(--header-h) + var(--safe-top)); left:0; right:0; bottom:0;
    height: auto;
    transform: translateX(100%);
    visibility: hidden; pointer-events: none;
    z-index: 1001;  /* pod headerem, nad backdropem */
    -webkit-overflow-scrolling: touch;
  }
  .site-nav.open{
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
  }

  /* 6) Treść szuflady – bez dodatkowego top-paddga, bo startuje pod headerem */
  .site-nav__inner{ padding: 12px 16px 28px; }

  /* 7) Narzędzia chowamy na mobile, by nie psuły siatki */
  .ui-tools{ display:none !important; }
}

/* ==== DESKTOP: nav po PRAWEJ (logo+tekst po LEWEJ) ==== */
@media (min-width:981px){
  .site-header .site-nav{ margin-left:auto; }
  .header-spacer{ display:none; }
  .brand a{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
  .brand-logo{ width:32px; height:32px; min-width:32px; object-fit:contain; }
}

/* ==== LIGHT: czytelne „cyferki” w kartach ofert ==== */
html[data-theme="light"]{
  --step-bg:#fff;
  --step-color:#111827;
  --step-border:#e8ebf2;
}
/* === FAKTURA (light theme) === */
html[data-theme="light"] .invoice-btn{
  background:#fff !important;
  color: var(--text) !important;         /* #111827 */
  border:1px solid var(--border) !important;  /* #e8ebf2 */
  box-shadow:0 2px 8px rgba(16,24,40,.06) !important;
}
html[data-theme="light"] .invoice-btn:hover{
  background:#f8fafc !important;
  box-shadow:0 8px 18px rgba(16,24,40,.12) !important;
}
html[data-theme="light"] .invoice-btn[aria-pressed="true"]{
  background: var(--accent) !important;  /* niebieski */
  color:#fff !important;
  border-color: transparent !important;
  box-shadow:0 8px 22px rgba(86,97,255,.28) !important;
}

/* panel z danymi FV – jasny w light */
html[data-theme="light"] .invoice-panel{
  background:#fff !important;
  border-color:#e8ebf2 !important;
}

/* focus (a11y) – spójny z resztą */
.invoice-btn:focus-visible{
  outline:none;
  box-shadow: var(--ring) !important;
}


/* ===== UI TOOLS (kontrast + rozmiar czcionki) ===== */
.ui-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

/* wspólna baza przycisków dostępności */
.accessibility-ico.hlp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:40px;
  min-width:40px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0f141b;           /* dark-base */
  color:var(--text);
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  line-height:1;
}
.accessibility-ico.hlp-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  background:#111825;
}
.accessibility-ico.hlp-btn:active{ transform:none }
.accessibility-ico.hlp-btn:focus{ outline:none; box-shadow: var(--ring); }

/* A/A ikonka (rozmiar czcionki) */
#help-txtsize span{
  display:inline-block;
  line-height:1;
  vertical-align:middle;
}
#help-txtsize span:first-child{ font-size:16px; font-weight:800; }
#help-txtsize span:last-child { font-size:11px; font-weight:800; margin-left:2px; opacity:.9; }

/* Pół-księżyc — jeśli używasz Bootstrap Icons, samo i.bi wystarczy;
   poniżej fallback gdyby fontu nie było */
#help-contrast i.bi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  line-height:1;
}
#help-contrast i.bi::before{
  content:"";                     /* fallback „pół-księżyc” */
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Jasny motyw – białe przyciski, ciemny tekst */
html[data-theme="light"] .accessibility-ico.hlp-btn{
  background:#fff !important;
  color:var(--text) !important;           /* #111827 */
  border-color:var(--border) !important;  /* #e8ebf2 */
  box-shadow:0 2px 8px rgba(16,24,40,.06) !important;
}
html[data-theme="light"] .accessibility-ico.hlp-btn:hover{
  background:#f8fafc !important;
  box-shadow:0 8px 18px rgba(16,24,40,.12) !important;
}
/* czytelniejszy pół-księżyc w light */
html[data-theme="light"] #help-contrast i.bi::before{
  background: linear-gradient(90deg, var(--text) 50%, transparent 50%) !important;
  box-shadow: inset 0 0 0 1.5px var(--text) !important;
}

/* (opcjonalnie) schowaj skróty na mobilu */
@media (max-width:980px){
  .ui-tools{ display:none; }
}


/* === BIGGER LOGO (desktop + mobile) === */

/* Desktop: większe logo obok napisu */
@media (min-width: 981px){
  .site-header .brand-logo{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: none !important;   /* nadpisuje wcześniejsze 7% */
    object-fit: contain;
  }
  .site-header .brand-text{
    font-size: 20px;              /* lekko większy napis */
  }
}

/* Mobile: większe logo na środku + wyższy pasek nagłówka */
@media (max-width: 980px){
  :root{ --header-h: 80px; }      /* było ~72px – podbijamy, żeby dać miejsce na większe logo */

  .site-header .brand-logo{
    width: 44px !important;
    height: 44px !important;
    min-width: 40px !important;
    max-width: none !important;
    object-fit: contain;
  }

  /* dopasowanie siatki nagłówka do nowej wysokości */
  .site-header,
  .site-header .wrap{
    min-height: var(--header-h);
  }

  /* jeśli masz „przyklejonego” burgera, niech zostanie w tym samym miejscu */
  #navToggle.burger{
    top: 25%;                     /* zostaje jak było; zwiększyliśmy wysokość paska */
  }
}

/* === BURGER: 3 linie perfekcyjnie wyśrodkowane + solidny X === */
.burger{
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}

.burger span{
  position: absolute;
  left: 50%;
  top: 40%;
  width: 22px;                 /* nieco szersze dla czytelności */
  height: 3px;                 /* GRUBOŚĆ (było 2px) */
  margin-left: -11px;          /* -(width/2) */
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .18s ease, opacity .12s ease;
  will-change: transform, opacity;
}

/* rozstaw równy względem środka – bez "calc", tylko przesunięcie */
.burger span:nth-child(1){ transform: translateY(-7px); }  /* górna */
.burger span:nth-child(2){ transform: translateY(0);    }  /* środkowa */
.burger span:nth-child(3){ transform: translateY(7px);  }  /* dolna */

/* OTWARTE: X wyśrodkowany i „mięsisty” */
.burger[aria-expanded="true"] span{
  width: 24px;                 /* odrobinę szersze w X */
  margin-left: -12px;          /* -(24/2) */
}
.burger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(0) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(0) rotate(-45deg);
}

/* Light theme kontrast */
html[data-theme="light"] .burger{
  background:#fff;
  border-color: var(--border);
}
html[data-theme="light"] .burger span{
  background: var(--text);
}

/* — Loading state na przycisku „Szukaj” — */
.btn-loading { pointer-events: none; opacity: .75; position: relative; }
.btn-loading::after{
  content:"";
  position:absolute; right:-28px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation: skSpin .8s linear infinite;
}
@keyframes skSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* LIGHT: czytelne etykiety i placeholdery w formularzu kwerendy */
html[data-theme="light"] label{
  color: var(--text);            /* #111827 */
}

/* placeholdery w inputach/textarea – trochę ciemniejsze */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color: #6b7280;                /* Tailwind Gray 500 */
  opacity: 1;
}

/* opcjonalnie: same wartości w polach (nie tylko label) trochę mocniejsze */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] textarea{
  color: #111827;
}


.site-nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 1.05em;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: #0077cc; /* główny akcent po najechaniu */
}

.site-nav a::after {
  content: attr(data-info);
  position: absolute;
  left: 50%;
  top: 140%;
  transform: translateX(-50%) translateY(5px);
  font-size: 0.9em;
  color: #fff;
  background: linear-gradient(135deg, #0077cc, #005fa3);
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: none;
}

.site-nav a:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* === FIX: stabilne położenie przycisków A/A i księżyca na mobile === */
@media (max-width:980px){
  /* 1) Wyłącz sztuczny "ciężarek" w 1. kolumnie – robił miejsce, ale teraz je zajmie .ui-tools */
  .header-row::before{ display:none !important; }

  /* 2) Upewnij się, że header ma 3 kolumny: [L | CENTER | R] */
  .site-header .wrap.header-row{
    display:grid !important;
    grid-template-columns: 44px 1fr 44px;
    align-items:center;
    min-height: var(--header-h, 72px);
  }

  /* 3) Rozmieszczenie elementów w siatce */
  .ui-tools{
    display:inline-flex !important;
    grid-column: 1;           /* LEWA kolumna */
    justify-self: start;
    align-self: center;
    gap:6px;
    position: static;         /* żadnego fixed/absolute */
    z-index: 1001;            /* pod burgerem (który ma 1003) */
  }
  .brand{ grid-column: 2; justify-self: center; }
  #navToggle.burger{ grid-column: 3; } /* burger po prawej */

  /* 4) Rozmiar guzików, żeby ładnie siadły w pasku */
  .ui-tools .hlp-btn{
    height:36px; min-width:36px; padding:6px 8px;
  }
}

/* === FIX: przyciski dostępności zawsze w lewym górnym rogu === */
@media (max-width:980px){
  .ui-tools{
    display:flex !important;
    position:fixed;        /* przyklejone do okna */
    top: calc(env(safe-area-inset-top, 0px) + 20px); /* uwzględnia notch */
    left: 10px;
    z-index: 2000;         /* ponad headerem i menu */
    gap:6px;
    background:transparent;
  }
  .ui-tools .hlp-btn{
    height:36px; min-width:36px; padding:8px 10px;
  }
}

/* === FIX: hamburger przyklejony do prawego górnego rogu z safe-area === */
@media (max-width:980px){
  #navToggle.burger{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 20px) !important; /* notch ok */
    right: 16px !important;
    z-index: 12000 !important;  /* ponad headerem, drawerem i backdropem */
  }
  /* gdy menu otwarte też zachowaj tę pozycję i warstwę */
  html.nav-open #navToggle.burger{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
    right: 16px !important;
    z-index: 12000 !important;
  }
}


/* === BURGER: stałe pudełko i paski w 100% w środku === */
.burger{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;         /* zero paddingu = pełna kontrola geometrii */
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  position: relative;
  overflow: hidden;               /* nic nie wyjdzie poza ramkę */
}

/* parametry pasków – możesz dopasować */
.burger{ --bar-w: 22px; --bar-h: 3px; --gap: 6px; }

.burger span{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--bar-w);
  height: var(--bar-h);
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .18s ease, opacity .12s ease, width .18s ease;
}

/* równy rozstaw względem środka */
.burger span:nth-child(1){ transform: translate(-50%, calc(-50% - var(--gap))); }
.burger span:nth-child(2){ transform: translate(-50%, -50%); }
.burger span:nth-child(3){ transform: translate(-50%, calc(-50% + var(--gap))); }

/* stan OTWARTY (X) – dalej w pudełku */
.burger[aria-expanded="true"] span{
  width: calc(var(--bar-w) + 2px);
}
.burger[aria-expanded="true"] span:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3){
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* === BURGER: równe kreski bez „puchnięcia” po obrocie === */
.burger{
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  border:2px solid var(--border) !important;
  border-radius:10px !important;
  background:var(--card) !important;
  position:relative !important;
  overflow:hidden !important;
  -webkit-tap-highlight-color: transparent;
}

/* USTAWIENIA – parzyste wartości -> brak rozmycia */
.burger{ --bar-w: 22px; --bar-h: 2px; --gap: 8px; } /* 22,2,8 = same parzyste */

/* twardy reset i pixel-snap */
.burger span{
  position:absolute !important;
  left:50% !important; top:50% !important;
  width:var(--bar-w) !important;
  height:var(--bar-h) !important;
  margin:0 !important;
  background:var(--text) !important;
  border-radius:2px !important;
  transform:translate3d(-50%,-50%,0) !important; /* snap + brak połówek pikseli */
  transform-origin:center !important;
  transition:transform .18s ease, opacity .12s ease !important;
  will-change: transform;
  backface-visibility: hidden;
}

/* równe odstępy (też parzyste) */
.burger span:nth-child(1){ transform:translate3d(-50%, calc(-50% - var(--gap)), 0) !important; }
.burger span:nth-child(2){ transform:translate3d(-50%, -50%, 0) !important; }
.burger span:nth-child(3){ transform:translate3d(-50%, calc(-50% + var(--gap)), 0) !important; }

/* STAN OTWARTY – bez zmiany szerokości (to powoduje różnice optyczne) */
.burger[aria-expanded="true"] span:nth-child(1){
  transform:translate3d(-50%, -50%, 0) rotate(45deg) !important;
}
.burger[aria-expanded="true"] span:nth-child(2){
  opacity:0 !important;
}
.burger[aria-expanded="true"] span:nth-child(3){
  transform:translate3d(-50%, -50%, 0) rotate(-45deg) !important;
}


/* ——— SEARCH BAR: pełna szerokość + większa wysokość ——— */
#free .search-form > div{
  display:flex;
  gap:10px;
  width:100%;              /* klucz: kontener na input ma zajmować 100% */
}

#free .search-form input[type="text"]{
  flex:1 1 auto;           /* wypełnij całą szerokość wiersza */
  width:100%;
  min-height: 48px;        /* wyższa belka */
  padding: 14px 16px;      /* grubsze „wnętrze” */
  font-size: 1rem;         /* czytelniejszy tekst */
  box-sizing: border-box;
}

/* żeby przycisk wizualnie pasował wysokością, gdy jest w tym samym wierszu */
#free .search-form .btn{
  min-height: 48px;
  align-self: stretch;     /* jeśli dasz kiedyś input+button w jednym wierszu */
}

/* kosmetyka widżetu w obu motywach */
.irp-map-wrap .irp-ui b.irp-year{
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .irp-map-wrap{
  /* nic na siłę – kolory ustawia JS; to tylko fallback */
}