/* ===========================

   PODSTAWOWE USTAWIENIA
   =========================== */

        :root {
            --navy-dark: #003366; /* Główny Granat */
            --blue-accent: #0077b6; /* Akcent Niebieski (Klarowność) */
	    --navy-light: #123b80;
	    --green: #1DB954;
	    --green-dark: #179b46;
        }

        /* Sekcja Logo */
        .header-top {
            padding: 20px 0 10px 0;
        }
        
        .logo a {
            font-size: 32px; 
            font-weight: bold;
            color: var(--navy-dark);
            text-decoration: none;
font-family:'Ubuntu', sans-serif;
        }

.logo a:hover {
  text-decoration: none;
}

	.logo span {
    	    color: var(--blue-accent);
    	/* Używamy innej, zaokrąglonej czcionki dla ".pl" */
	    font-family: 'Ubuntu', sans-serif; 
	}   
.container { max-width: 900px; margin: 0 auto; padding: 0 16px;display:flex;align-items:center;justify-content:space-between;}
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid #e5e7eb;
}



/* ===========================
   PODSTAWOWE USTAWIENIA
   =========================== */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #0f172a; /* ciemny granat */
  background: #f3f4f6;
}

/* Linki */
a {
  color: #0b5ed7; /* granatowy niebieski */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===========================
   LAYOUT STRONY / ARTYKUŁU
   =========================== */

.page {
  padding: 2rem 1rem 1rem;
  background: radial-gradient(circle at top, #e5f3ff 0, #f3f4f6 45%, #f3f4f6 100%);
}

.article {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  padding: 2.5rem 1.75rem 2.5rem;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(15, 23, 42, 0.02);
}

/* ===========================
   NAGŁÓWEK ARTYKUŁU
   =========================== */

.article__header {
  margin-bottom: 1.75rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1.5rem;
}

.article__category {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.article__category a {
  color: #16a34a; /* zielony akcent finansowy */
  font-weight: 700;
}

.article__title {
  margin: 0 0 0.75rem;
  font-size: 1.9rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0b1f3b; /* mocny granat */
  margin-bottom: 1.2rem;
}

.article__meta {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

/* ===========================
   WSTĘP / INTRO
   =========================== */

.article__intro {
  margin-bottom: 1.75rem;
  border-left: 3px solid #16a34a;
  padding-left: 0.9rem;
}

.article__intro p {
  font-size: 1.1rem;
  color: #111827;
  text-align:justify;
  text-indent: 20px;
}

.article__intro p + p {
  margin-top: 0.5rem;
}

/* ===========================
   SPIS TREŚCI
   ===================#174990======== */

.article__toc {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1rem 1.4rem;
  background: #0b1f3b;
  border-radius: 14px;
  border: 1px solid #0f172a;
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.article__toc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(22, 163, 74, 0.25), transparent 55%);
  pointer-events: none;
}

.article__toc h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d1fae5; /* jasna zieleń */
  position: relative;
}

.article__toc ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  position: relative;
}

.article__toc li {
  margin-bottom: 0.35rem;
}

.article__toc a {
  color: #e5e7eb;
}

.article__toc a:hover {
  color: #bbf7d0;
  text-decoration: underline;
}

/* ===========================
   TYPOGRAFIA SEKCJI
   =========================== */

article section {
  margin-bottom: 2rem;
}

article h2 {
  margin: 0 0 0.75rem;
  font-size: 1.45rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0b1f3b;
}

article h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 1.15rem;
  color: #111827;
}

article p {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: #111827;
  text-align:justify;
}

article em {
  color: #16a34a;
  font-style: normal;
  font-weight: 500;
}

article ul,
article ol {
  margin: 0.4rem 0 1rem 1.15rem;
  padding: 0;
}

article li {
  margin-bottom: 0.3rem;
}

/* ===========================
   TABELA PORÓWNAWCZA
   =========================== */

.table,
.table--compare {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.95rem;
}

.table--compare th,
.table--compare td {
  border: 1px solid #e5e7eb;
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.table--compare thead {
  background: linear-gradient(90deg, #0b1f3b, #1d4ed8);
}

.table--compare th {
  font-weight: 600;
  color: #f9fafb;
}

.table--compare tbody tr:nth-child(even) {
  background: #f9fafb;
}

.table--compare tbody tr:nth-child(odd) {
  background: #ffffff;
}


/* Styl dla tabeli 4-kolumnowej */
.table--compare-4cols {
    width: 100%;
    border-collapse: collapse;
    background-color: #f9f9f9; /* tło tabeli */
    border: 1px solid #ddd; /* obramowanie */
}

.table--compare-4cols th, .table--compare-4cols td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd; /* obramowanie komórek */
}

/* Styl dla nagłówków tabeli */
.table--compare-4cols th {
    background-color: #1e3a8a; /* kolor tła nagłówka */
    color: white; /* kolor tekstu w nagłówkach */
    font-weight: bold;
}

/* Styl dla komórek tabeli */
.table--compare-4cols td {
    background-color: #ffffff; /* tło komórek */
}

/* Styl dla tabeli 4-kolumnowej na urządzeniach mobilnych */
@media (max-width: 768px) {
    .table--compare-4cols {
        display: table;
        width: 100%;
        overflow-x: visible;
    }

    .table--compare-4cols th, .table--compare-4cols td {
        display: table-cell;
        width: auto;
        box-sizing: border-box;
    }

    /* Dostosowanie dla komórek */
    .table--compare-4cols td {
        padding: 8px;
    }
}



/* ===========================
   FAQ
   =========================== */

.article__faq {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.article__faq h2 {
  margin-bottom: 1.25rem;
}

.article__faq h3 {
  margin-top: 1.1rem;
}

/* wersja z <details>/<summary> */

.article__faq details {
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f9fafb;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.article__faq details[open] {
  border-color: #16a34a;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  background: #ecfdf3;
}

.article__faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  color: #0b1f3b;
}

.article__faq summary::-webkit-details-marker {
  display: none;
}

/* ===========================
   GALERIA / OBRAZKI
   =========================== */

.article__images {
  margin-top: 2rem;
}

.article__images h2 {
  margin-bottom: 1rem;
}

.image-grid {
  display: grid;
  /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
  grid-template-columns: 1fr;
  gap: 1rem;
}

.image-grid figure {
  margin: 0;
  background: #f9fafb;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.image-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.image-grid figcaption {
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem 0.7rem;
  color: #4b5563;
}

/* ===========================
   CTA / PRZYCISKI
   =========================== */

.cta {
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(135deg, #0b1f3b, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
}

.btn:hover {
  background: linear-gradient(135deg, #082f49, #1d4ed8);
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.45);
  transform: translateY(-1px);
}

.btn.secondary {
  background: #ffffff;
  color: #0b1f3b;
  border-color: #16a34a;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.25);
}

.btn.secondary:hover {
  background: #ecfdf3;
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.35);
}

/* ===========================
   DROBNE DODATKI
   =========================== */

.note {
  font-size: 0.9rem;
  color: #6b7280;
}

.small {
  font-size: 0.85rem;
}

.note.small {
  margin-top: 0.4rem;
}

/* ===========================
   RESPONSYWNOŚĆ (MOBILE)
   =========================== */

@media (max-width: 768px) {
  .page {
    padding: 1.25rem 0.6rem 2rem;
  }

  .article {
    padding: 1.7rem 1.1rem 1.9rem;
    border-radius: 14px;
  }

  .article__title {
    font-size: 1.55rem;
  }

  .article__toc {
    padding: 1rem 0.85rem 1.1rem;
  }

  .image-grid {
    grid-template-columns: 1fr;
  }
}

/* TABLETY / małe laptopy: 2 kolumny */
@media (min-width: 640px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* WIĘKSZE LAPTOPY / DESKTOPY: 3 kolumny */
@media (min-width: 1024px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* MENU */
.menu-toggle{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  width:34px;height:28px;justify-content:center
}
.menu-toggle .bar{
  width:100%;height:4px;
  /* background-color:var(--navy); */
  border-radius:3px;transition:all .3s;
  background-color: #1158d8 !important; /* Deep Blue */
}
.menu-toggle.active .bar:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.menu-toggle.active .bar:nth-child(2){opacity:0}
.menu-toggle.active .bar:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
@media(min-width:900px){.menu-toggle{display:none}}

nav.primary{
  display:none;flex-direction:column;position:absolute;
  top:100%;right:16px;background:#fff;
  border:1px solid #e5e7eb;border-radius:16px;
  padding:12px 18px;box-shadow:0 12px 24px -12px rgba(2,6,23,.2);
  z-index:999;opacity:0;transform:translateY(-8px);
  pointer-events:none;transition:all .25s
}
nav.primary.active{display:flex;opacity:1;transform:translateY(0);pointer-events:auto;color:var(--green)}
nav.primary a{
  display:block;padding:12px 0;text-align:right;
  font-weight:700;color:var(--navy-light);
  border-bottom:1px solid rgba(2,6,23,.08)
}
nav.primary a:last-child{border-bottom:none}


/* Drop start */
@media(min-width:900px){
  nav.primary{
    position:static;
    display:flex !important;
    flex-direction:row;
    gap:24px;
    border:none;
    background:transparent;
    padding:0;
    box-shadow:none;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  /* tylko pozycje główne w menu */
  nav.primary > a,
  nav.primary > .nav-item > a{
    border:0;
    padding:6px 4px;
    text-align:left;
    position:relative;
  }
}

nav.primary a:hover{color:var(--green-dark)}

@media(min-width:900px){
  /* separator dla zwykłych linków */
  nav.primary > a:not(:last-child)::after,
  /* separator dla pozycji z dropdownem (Samochody chińskie) */
  nav.primary > .nav-item:not(:last-child)::after{
    content:"|";
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    color:#a2b4cc;
    opacity:.7;
    line-height:1;
  }
}




/* Dropdown w menu – Samochody chińskie → Hongqi */
nav.primary .nav-item{
  position:relative;
}

/* DESKTOP: dropdown na hover */
@media(min-width:900px){
  nav.primary .submenu{
    position:absolute;
    top:100%;
    left:0;
    min-width:180px;
    background:#ffffff;
    border-radius:12px;
    border:1px solid #e5e7eb;
    box-shadow:0 12px 24px -8px rgba(15,23,42,0.25);
    padding:8px 12px;
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:1000;
  }

  nav.primary .has-submenu:hover .submenu,
  nav.primary .has-submenu:focus-within .submenu{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  nav.primary .submenu a{
    display:block;
    padding:6px 0;
    font-weight:500;
    border-bottom:1px solid rgba(148,163,184,.35);
    text-align:left;
  }

  nav.primary .submenu a:last-child{
    border-bottom:none;
  }
}



/* MOBILE – dopracowany dropdown Samochody chińskie → Hongqi */
@media(max-width:899px){
  /* kontener pozycji z dropdownem – jedna grupa z jedną kreską pod spodem */
  nav.primary .nav-item{
    width:100%;
    border-bottom:1px solid rgba(2,6,23,.08);
    padding-bottom:2px;
    margin-bottom:4px;
  }

  /* główny link z dropdownem – jak inne, ale bez swojej kreski */
  nav.primary .nav-item > a{
    border-bottom:0;          /* żadnej linii pod "Samochody chińskie" */
    padding-bottom:4px;       /* lekko zbliżony do "Hongqi" */
  }

  /* kontener submenu – bez dodatkowych marginesów/ramek */
  nav.primary .submenu{
    position:static;
    margin:0;
    padding:0;
    border-left:0;
  }

  /* "Hongqi" – podpunkt: bliżej nagłówka, mniejsze, do prawej */
  nav.primary .submenu a{
    display:block;
    padding:2px 0;
    font-weight:500;
    font-size:0.95rem;
    text-align:right;         /* wyrównanie jak reszta menu */
    opacity:0.9;
    border-bottom:0;          /* linię daje tylko .nav-item */
  }

  /* po grupie dropdownu następna pozycja (Leasing) zachowuje się normalnie */
  nav.primary .nav-item + a{
    margin-top:0;
  }

  nav.primary .has-submenu > a:active,
  nav.primary .has-submenu > a:focus-visible{
    background: rgba(15,23,42,.04);
  }

}



/* Strzałka przy pozycjach z submenu */
nav.primary .has-submenu > a::after{
  content:"▾";            /* mała strzałka w dół */
  display:inline-block;
  margin-left:6px;
  font-size:0.8em;
  transform:translateY(-1px);
  transition:transform .2s ease;
}

/* Desktop – obrót strzałki przy rozwinięciu */
@media(min-width:900px){
  nav.primary .has-submenu:hover > a::after,
  nav.primary .has-submenu:focus-within > a::after{
    transform:translateY(-1px) rotate(180deg);
  }
}

/* Drop end */




/* ===========================
   STOPKA
   =========================== */

.site-footer {
  padding: 0.2rem 1rem 2rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.site-footer__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.site-footer__copy {
  margin: 0 0 0.35rem;
}

.site-footer__nav {
  display: inline-flex;
  gap: 1.25rem;
}

.site-footer__link {
  text-decoration: none;
  color: #4b5563;
  font-weight: 500;
  position: relative;
}

/* delikatny separator kreską pionową */
.site-footer__link + .site-footer__link::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 1px;
  height: 0.9rem;
  transform: translateY(-50%);
  background: rgba(148, 163, 184, 0.8);
}

.site-footer__link:hover {
  color: #16a34a;             /* zielony akcent jak w nagłówkach */
  text-decoration: underline;
}

/* na bardzo małych ekranach linki pod sobą */
@media (max-width: 240px) {
  .site-footer__nav {
    flex-direction: column;
    gap: 0.4rem;
  }

  .site-footer__link + .site-footer__link::before {
    display: none;
  }
}


/* ===========================
   SŁOWNIK / GLOSSARY
   =========================== */

.glossary-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
}

.glossary-letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #0b1f3b;
  background: #f9fafb;
}

.glossary-letters a:hover {
  border-color: #16a34a;
  color: #16a34a;
  background: #ecfdf3;
  text-decoration: none;
}

.glossary {
  margin-top: 2rem;
}

.glossary__group {
  margin-bottom: 2rem;
  padding: 1.25rem 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f9fafb;
}

.glossary__group h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.glossary__items {
  margin: 0;
}

.glossary__item {
  margin-bottom: 0.8rem;
}

.glossary__item dt {
  font-weight: 700;
  color: #0b1f3b;
  margin-bottom: 0.1rem;
}

.glossary__item dd {
  margin: 0;
  font-size: 0.98rem;
  color: #111827;
}


/* ===========================
   BREADCRUMB
   =========================== */

.breadcrumb {
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
  color: #6b7280;
}

.breadcrumb a {
  color: #4b5563;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #16a34a;
  text-decoration: underline;
}

.breadcrumb__sep {
  margin: 0 0.25rem;
}

/* style dla 2 kolumn tylko w ubezpieczenia.css */

.two-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .two-cols {
    grid-template-columns: 1fr 1fr;
  }
}


/* Tabela OC/AC – próba zmieszczenia bez scrolla na mobile */
@media (max-width: 640px) {
  .table-wrap {
    overflow-x: visible; /* już nie wymuszamy scrola */
  }

  .table--compare {
    width: 100%;
    table-layout: fixed;      /* kolumny dzielą się równo */
    font-size: 0.85rem;       /* trochę mniejsza czcionka */
  }

  .table--compare th,
  .table--compare td {
    padding: 0.35rem 0.25rem; /* mniejsze marginesy w komórkach */
    word-wrap: break-word;
    white-space: normal;      /* pozwól łamać linie */
  }

  .table--compare th:nth-child(1),
  .table--compare td:nth-child(1) {
    width: 40%;               /* "Cecha" */
  }

  .table--compare th:nth-child(2),
  .table--compare td:nth-child(2),
  .table--compare th:nth-child(3),
  .table--compare td:nth-child(3) {
    width: 30%;               /* OC / AC */
  }
}



/* =========================================
   MINI-IKONY W KAFELKACH – CSS ONLY
   ========================================= */

/* Każdy kafelek musi być relative */
.home-tile {
  position: relative;
}

/* Bazowa ikona */
.home-tile::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;

  width: 28px;
  height: 28px;
  border-radius: 50%;

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

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  opacity: 0.85;
}

/* -----------------------------------------
   Ikony per dział
   ----------------------------------------- */

/* UBEZPIECZENIA – tarcza */
.home-tile--ubezpieczenie::before {
  content: "🛡";
  background: rgba(10, 35, 66, 0.12);
  color: #0A2342;
}

/* KREDYT – procent */
.home-tile--kredyt::before {
  content: "%";
  background: rgba(21, 57, 43, 0.12);
  color: #15392B;
}

/* LEASING – dokument */
.home-tile--leasing::before {
  content: "📄";
  background: rgba(74, 42, 18, 0.12);
  color: #4A2A12;
}

/* SAMOCHODY CHIŃSKIE – stylizowane EV / technologia */
.home-tile--online::before {
  content: "⚡";
  background: rgba(46, 27, 79, 0.12);
  color: #2E1B4F;
}

/* -----------------------------------------
   Mobile – ikony trochę mniejsze
   ----------------------------------------- */
@media (max-width: 640px) {
  .home-tile::before {
    width: 24px;
    height: 24px;
    font-size: 13px;
    top: 10px;
    right: 10px;
  }
}

/* Caption w table */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


  /* Zostaw miejsce na dole strony, gdy banner cookies jest widoczny */
  body.has-cookiebar { padding-bottom: var(--cookiebar-padding, 0px); }

  /* warstwa bannera */
  #mf-cookie {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99999;
    padding: 14px 12px;
    background: rgba(255,255,255,.96);
    border-top: 1px solid #e5e7eb;
    backdrop-filter: saturate(120%) blur(6px);
  }
  #mf-cookie .mf-wrap{
    max-width: 960px;
    margin: 0 auto;
    display:flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #mf-cookie .mf-text{
    flex: 1;
    min-width: 260px;
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.45;
  }
  #mf-cookie .mf-text a{
    color: var(--blue-accent);
    text-decoration: underline;
    font-weight: 700;
  }
  #mf-cookie .mf-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  #mf-cookie .btn{ box-shadow: 0 10px 24px rgba(15,23,42,.20); }
  #mf-cookie .btn.secondary{
    border-color: rgba(22,163,74,.65);
    box-shadow: 0 6px 18px rgba(22,163,74,.18);
  }

  /* modal ustawień */
  #mf-cookie-modal{
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15,23,42,.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  #mf-cookie-modal[open]{ display: flex; }

  #mf-cookie-modal .mf-card{
    width: min(720px, 100%);
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    overflow: hidden;
  }
  #mf-cookie-modal .mf-head{
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: radial-gradient(circle at top, rgba(0,119,182,0.10), #fff 60%);
  }
  #mf-cookie-modal .mf-title{
    margin: 0;
    font-size: 1.15rem;
    color: #0b1f3b;
    font-weight: 900;
    letter-spacing: -0.01em;
  }
  #mf-cookie-modal .mf-body{
    padding: 14px 16px 10px;
    color: #111827;
    font-size: 1.0rem;
    line-height: 1.55;
  }
  #mf-cookie-modal .mf-item{
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(15,23,42,0.08);
  }
  #mf-cookie-modal .mf-item:first-child{ border-top: 0; }
  #mf-cookie-modal .mf-item strong{ color: #0b1f3b; }
  #mf-cookie-modal .mf-item small{
    display:block;
    color:#6b7280;
    margin-top: 2px;
  }
  #mf-cookie-modal .mf-foot{
    padding: 12px 16px 16px;
    border-top: 1px solid #e5e7eb;
    display:flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* przełącznik */
  .mf-switch{
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.8);
    background: #f3f4f6;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .mf-switch::after{
    content:"";
    position:absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.10);
    transition: transform .18s ease;
  }
  .mf-switch[aria-checked="true"]{
    background: rgba(22,163,74,.18);
    border-color: rgba(22,163,74,.45);
  }
  .mf-switch[aria-checked="true"]::after{
    transform: translateX(20px);
    border-color: rgba(22,163,74,.35);
  }