/* Header */
header[id] { scroll-margin-top: 78px; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(13,32,35,.97); backdrop-filter:blur(8px); color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
/* Scoped pod .site-header (a nie goly ".header-inner") - konfigurator.blade.php
   ma WLASNY naglowek ("header.top") ktory przypadkiem reuzywa tej samej nazwy
   klasy dla zupelnie innego (pionowego) ukladu. Bez tego scope'owania ta
   regula (display:flex + justify-content:space-between) wyciekala na kazda
   strone i psula uklad naglowka konfiguratora - zobacz commit naprawiajacy
   regresje z 2026-09-12. .logo-mark celowo NIE jest tu scope'owany pod
   .site-header, bo jest reuzywany takze w stopce (footer) index/awarie
   - to jest zamierzone, jeden globalny wyglad logo wszedzie. */
.site-header .header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; max-width:1320px; margin:0 auto; gap:14px; }
.logo-mark { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.logo-mark img { height:32px; width:auto; }
/* <picture> jest teraz elementem flex — bez tego img leży na linii bazowej
   tekstu i dokłada kilka pikseli pustego miejsca pod logo */
.logo-mark picture { display:flex; align-items:center; }
.logo-text { font-weight:800; font-size:18px; letter-spacing:.01em; white-space:nowrap; }
nav.main-nav { display:flex; align-items:center; gap:1px; flex-wrap:nowrap; }
nav.main-nav > a, .nav-drop > button {
  color:rgba(255,255,255,.8); font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:8px;
  background:none; border:none; font-family:"Inter",sans-serif; cursor:pointer;
  display:flex; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0;
  position:relative; transition:color .15s ease, background .15s ease;
}
nav.main-nav > a::after {
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; background:var(--gold);
  transform:scaleX(0); transition:transform .18s ease; transform-origin:center; border-radius:2px;
}
nav.main-nav > a:hover::after { transform:scaleX(1); }
nav.main-nav > a:hover, .nav-drop > button:hover { background:rgba(255,255,255,.07); color:#fff; }
.chevron { width:10px; height:10px; flex-shrink:0; transition:transform .18s ease; }
.nav-drop:hover .chevron, .nav-drop.open .chevron { transform:rotate(180deg); }
.nav-drop { position:relative; }
.nav-drop-menu { position:absolute; top:calc(100% + 10px); left:0; background:#fff; border-radius:12px; box-shadow:0 20px 44px rgba(15,37,40,.25); padding:8px; min-width:246px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s ease; }
.nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop-menu a { display:block; padding:10px 12px; border-radius:8px; color:var(--navy); font-size:13.5px; font-weight:600; white-space:nowrap; }
.nav-drop-menu a:hover { background:var(--blue-light); color:var(--blue); }
.header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:9px; font-size:13px; font-weight:700; font-family:"Montserrat",sans-serif; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.header-btn:hover { transform:translateY(-1px); }
.header-btn.primary { background:var(--gold); color:var(--navy); box-shadow:0 4px 14px rgba(224,167,46,.32); }
.header-btn.primary:hover { box-shadow:0 8px 20px rgba(224,167,46,.42); }
.header-btn.secondary { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); }
.header-btn.secondary:hover { background:rgba(255,255,255,.18); }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:11px; flex-shrink:0; }
.hamburger span { display:block; width:22px; height:2px; background:#fff; margin:5px 0; border-radius:2px; }
.mobile-nav { display:none; position:fixed; inset:0; background:var(--navy); z-index:200; padding:20px 24px; overflow-y:auto; }
.mobile-nav.open { display:block; }
.mobile-nav-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mobile-nav a, .mobile-nav .m-group-title { display:block; color:#fff; font-size:16px; font-weight:700; padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.1); font-family:"Montserrat",sans-serif; }
.mobile-nav .m-sub a { font-size:14.5px; font-weight:500; padding-left:16px; color:rgba(255,255,255,.8); }
.mobile-nav .close-btn { background:none; border:none; color:#fff; font-size:26px; cursor:pointer; }

.cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:9999; background:var(--navy); color:#fff; padding:16px 20px; box-shadow:0 -6px 24px rgba(0,0,0,.18); transform:translateY(110%); transition:transform .4s ease; }
.cookie-banner.visible { transform:translateY(0); }
.cookie-banner .wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; max-width:1180px; }
.cookie-banner p { margin:0; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.88); flex:1 1 380px; min-width:0; }
.cookie-banner a { color:var(--gold); text-decoration:underline; }
.cookie-banner .cookie-actions { display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto; margin-left:auto; }
.cookie-banner button { border:none; border-radius:999px; padding:10px 22px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.cookie-banner .cookie-accept { background:var(--gold); color:var(--navy); }
.cookie-banner .cookie-accept:hover { background:#eab84a; }
.cookie-banner .cookie-decline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35) !important; }
.cookie-banner .cookie-decline:hover { background:rgba(255,255,255,.08); }
@media (max-width:640px){
  .cookie-banner { padding:14px 16px; }
  .cookie-banner .wrap { gap:12px; }
  .cookie-banner .cookie-actions { margin-left:0; width:100%; }
  .cookie-banner .cookie-accept, .cookie-banner .cookie-decline { flex:1 1 auto; }
}

/* Dawne atrybuty style= (CSP bez unsafe-inline). !important zachowuje pierwszeństwo,
   jakie miał styl w atrybucie. */
.logo-text-menu { color:#fff !important; font-weight:800 !important; font-size:18px !important; }
.m-nav-link-zloty { color:var(--gold) !important; }
.logo-stopka { height:30px !important; }