/* ---------- TOKENY (kanon VEBI) ----------
   Prefiks --vbd-, bo :root to jedyny selektor w tym pliku bez kotwicy klasowej
   i siedzi na całym panelu. Nazwy generyczne (--line, --r, --s4) mogłyby zderzyć
   się z properties bootstrap.css albo common_cms.css. */
:root{
  --vbd-navy:#00376C;
  --vbd-navy-deep:#04162c;
  --vbd-blue-600:#1f6cea;      /* tekst i tło przycisku: 4,78:1 na bieli */
  --vbd-blue-700:#1958cf;      /* hover przycisku, linki na jasnym tle: 6,29:1 */
  --vbd-cyan:#36c6ff;
  --vbd-ink:#0c1726;
  --vbd-muted:#5d6b7e;
  --vbd-line:#e6ecf4;          /* WYŁĄCZNIE separatory dekoracyjne (wiersze tabeli, obrys kart) */
  --vbd-line-strong:#7d90aa;   /* granica kontrolek: 3,26:1 na bieli, 3,06:1 na --vbd-bg-soft */
  --vbd-bg-soft:#f4f8fd;
  --vbd-accent-soft:#eaf2fe;
  --vbd-on-dark:#bcd2ec;
  --vbd-on-dark-2:#cfe0f3;
  --vbd-foot-link:#a9bdd6;
  --vbd-foot-desc:#90a6c4;

  --vbd-shadow-card:0 18px 44px rgba(0,40,90,.10);
  --vbd-shadow-btn:0 8px 20px rgba(47,125,246,.28);

  --vbd-r-sm:12px; --vbd-r:16px; --vbd-r-xl:28px; --vbd-r-full:999px;

  --vbd-s3:12px; --vbd-s4:16px; --vbd-s5:24px; --vbd-s6:32px; --vbd-s7:48px; --vbd-s8:80px;

  /* Fonty: stos systemowy przyjęty Z GÓRY jako plan bazowy, bez webfontów. */
  --vbd-font-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --vbd-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* =======================================================================
   [TPL] SZABLON HRD: przemalowanie cudzego markupu.
   Lista selektorów zamknięta, patrz PROJEKT-SPEC 4.2. Nic poza tą listą.
   ======================================================================= */
nav.navbar-default .navbar-brand{display:flex;align-items:baseline;gap:1.6px;font-family:var(--vbd-font-display);
  font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--vbd-navy);text-decoration:none}
/* width:auto zdejmuje 8,33% z .col-md-1. Nasza pigulka koszyka ma 110 px, a kolumna
   dawala 95 px, wiec koszyk wystawal 5 px poza ekran i robil poziomy pasek przewijania
   (zmierzone na /pl/page/wyszukiwarka: bez arkusza prawa krawedz 1210, z arkuszem 1285).
   Element ma pull-right, wiec shrink-to-fit trzyma go przy prawej krawedzi kontenera. */
.top-cart-icon-box{display:flex;align-items:center;gap:var(--vbd-s4);flex-wrap:wrap;width:auto}
a.circle{display:inline-flex;align-items:center;gap:6.4px;font-size:13px;font-weight:600;
  color:var(--vbd-muted);text-decoration:none;padding:12px 4px}  /* padding = cel dotykowy 45 px, zmierzone */
a.circle:hover{color:var(--vbd-blue-600)}
a.circle:focus-visible{outline:3px solid var(--vbd-blue-600);outline-offset:2px;border-radius:4px}
#top-cart{display:inline-flex;align-items:center;gap:6.4px;min-height:44px;font-size:13px;font-weight:600;
  color:var(--vbd-ink);text-decoration:none;border:1px solid var(--vbd-line-strong);border-radius:var(--vbd-r-full);
  padding:6.4px 12.8px}
#top-cart:focus-visible{outline:3px solid var(--vbd-blue-600);outline-offset:2px}
#top_cart_text{color:var(--vbd-navy)}

/* UWAGA: id-ki w0, w1, w2 sa generowane przez Yii i ZMIENIAJA SIE miedzy podstronami
   (strona glowna nav=w0/menu=w1, cennik nav=w1/menu=w2, wyszukiwarka nav=w15/menu=w16).
   Dlatego celujemy w klasy, nie w id. Sprawdzone na czterech podstronach 2026-08-26:
   page-top-menu i navbar-default wystepuja dokladnie raz na stronie. */
nav.navbar-default{background:#fff;border-bottom:1px solid var(--vbd-line)}
/* DO SPRAWDZENIA W ŹRÓDLE STRONY (WDROZENIE.md, lista po wklejeniu): jeśli między
   nav#w0 a ul#w1 stoi div.container, to max-width i padding niżej dokładają drugi
   padding 15 px i menu wsunie się względem logo oraz stopki. Wtedy zostawiamy
   z tej reguły wyłącznie list-style, display i flex-wrap. W podglądzie kontenera
   nie było, bo atrapa paska nie miała .container. */
ul.page-top-menu{max-width:1170px;margin:0 auto;padding:0 15px;list-style:none;display:flex;
  flex-wrap:wrap;gap:0}
/* Szablon ma na tym ul klasy "navbar-nav nav-justified nav". nav-justified daje
   li{width:1%}, co przy display:table znaczy "podziel rowno", ale nasz ul jest flexem,
   wiec 1% liczy sie doslownie: pozycje menu dostaja 11 px i napisy nachodza na siebie.
   Zmierzone na produkcji 2026-08-26, po pierwszym wklejeniu. */
ul.page-top-menu > li{width:auto;float:none;display:block}
nav.navbar-default ul.page-top-menu > li > a{display:block;padding:13.6px 16px;font-size:14px;font-weight:600;color:var(--vbd-ink);
  text-decoration:none;border-bottom:2px solid transparent}
nav.navbar-default ul.page-top-menu > li > a:hover{color:var(--vbd-blue-600)}
ul.page-top-menu a:focus-visible{outline:3px solid var(--vbd-blue-600);outline-offset:-3px}
nav.navbar-default ul.page-top-menu > li.active > a{color:var(--vbd-blue-600);border-bottom-color:var(--vbd-blue-600)}
ul.page-top-menu ul.dropdown-menu{border:1px solid var(--vbd-line);border-radius:var(--vbd-r-sm);box-shadow:var(--vbd-shadow-card)}

/* Szablonowa ramka wyszukiwarki */
.well.no_borders.domain-search-box{background:linear-gradient(135deg,#04162c 0%,#002a53 55%,#0a4f95 100%);
  padding:40px 0;border:0;border-radius:0;margin:0}
.row.domain-search.domain-search-home{max-width:760px;margin:0 auto;display:flex;align-items:center;
  gap:9.6px;flex-wrap:nowrap}
/* Dziecmi tego wiersza NIE sa pole i przycisk, tylko kolumny .col-md-2/7/3, a pole
   siedzi jeszcze w zagniezdzonym .row > .col-md-12 (sprawdzone w zrodle produkcji).
   Bez neutralizacji ich procentowych szerokosci i paddingu suma kolumn przekracza
   max-width wiersza i przycisk zawija sie do drugiej linii.
   Selektory .col-* nie sa na zamknietej liscie z PROJEKT-SPEC 4.2, ale kazdy z nich
   jest zakotwiczony w tym jednym wierszu, wiec nie wychodza poza pas wyszukiwarki. */
.row.domain-search.domain-search-home>[class*="col-"]{float:none;width:auto;padding:0}
.row.domain-search.domain-search-home>.col-md-2,
.row.domain-search.domain-search-home>.col-md-3{flex:0 0 auto}
.row.domain-search.domain-search-home>.col-md-7{flex:1 1 auto;min-width:0}
.row.domain-search.domain-search-home>.col-md-7>.row{margin:0}
.row.domain-search.domain-search-home>.col-md-7>.row>[class*="col-"]{float:none;width:100%;padding:0}
.search-label{display:block;color:var(--vbd-on-dark-2);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding-bottom:8px}
input.form-control.search-input{flex:1 1 260px;min-width:0;height:56px;border:2px solid transparent;
  border-radius:var(--vbd-r-sm);padding:0 16px;font-family:var(--vbd-font-body);font-size:17px;
  color:var(--vbd-ink);background:#fff;box-shadow:none}
input.form-control.search-input::placeholder{color:var(--vbd-muted)}
input.form-control.search-input:focus{outline:none;border-color:var(--vbd-cyan);box-shadow:0 0 0 4px rgba(54,198,255,.25)}
/* bez tej reguły outline:none wyżej zabija wskaźnik focusu z klawiatury (WCAG 2.4.7) */
input.form-control.search-input:focus-visible{outline:2px solid #fff;outline-offset:2px}
button.btn.btn-darkgrey.search-btn{flex:0 0 auto;min-height:56px;padding:0 28px;border:0;border-radius:var(--vbd-r-sm);
  background:var(--vbd-blue-600);color:#fff;font-family:var(--vbd-font-body);font-size:15px;font-weight:600;
  cursor:pointer;text-shadow:none}
button.btn.btn-darkgrey.search-btn:hover{background:var(--vbd-blue-700);color:#fff}

/* Stopka szablonu */
footer.footer{background:var(--vbd-navy-deep);color:var(--vbd-foot-link);padding:var(--vbd-s7) 0 var(--vbd-s5)}
.footer-menu p b{display:block;font-family:var(--vbd-font-body);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0 0 var(--vbd-s3)}
.footer-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-menu a{display:inline-block;padding-block:9.6px;color:var(--vbd-foot-link);text-decoration:none;
  font-size:15px}   /* padding-block = cel dotykowy 43 px, zmierzone */
.footer-menu a:hover{color:#fff;text-decoration:underline}
.footer-menu a:focus-visible{outline:3px solid var(--vbd-cyan);outline-offset:2px;border-radius:4px}
.footer-menu address{font-style:normal;color:var(--vbd-foot-desc);font-size:15px;line-height:1.7}

/* =======================================================================
   [VBD] NASZA TREŚĆ: wszystko zakotwiczone w .vbd-root
   Korzeń na produkcji: <div class="col-xs-12 vbd-root">, a treść CMS siedzi
   w section.wrap > div.container > div.row (sprawdzone w źródle strony
   głównej 2026-08-26). .row ma margin 0 -15px, więc padding 15 px kolumny
   MUSI zostać - inaczej sekcje wychodzą na 1170 px i wystają po 15 px
   z każdej strony poza pasek górny i stopkę (te mają 1140 px).
   Zmierzone: z paddingiem sekcja 1140 px, bez niego 1170 px.
   Zerujemy tylko pion. Sekcje .vbd nie dostają własnej szerokości.
   ======================================================================= */
.vbd-root{padding-top:0;padding-bottom:0;font-family:var(--vbd-font-body);font-size:16px;line-height:1.6;color:var(--vbd-ink)}
.vbd-root img{max-width:100%;height:auto}
.vbd-root a{color:var(--vbd-navy)}
.vbd-root a:hover{color:var(--vbd-blue-700)}
/* bez border-radius: ta reguła jest (0,2,0) i celuje w KAŻDEGO potomka, więc
   zaokrągliłaby na sztywno chipy (12px) i pigułki rozszerzeń (999px) w momencie
   złapania focusu z klawiatury. outline-offset i tak odsuwa obwódkę od krawędzi. */
.vbd-root :focus-visible{outline:3px solid var(--vbd-blue-600);outline-offset:2px}
.vbd-root #cennik{scroll-margin-top:24px}
.vbd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.vbd-sec{padding-block:var(--vbd-s8)}
.vbd-sec--tight{padding-block:var(--vbd-s7)}
.vbd h1,.vbd h2,.vbd h3{font-family:var(--vbd-font-display);margin:0}
.vbd h1{font-size:48px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.vbd h2{font-size:38px;font-weight:700;line-height:1.12;letter-spacing:-.02em}
.vbd h3{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.vbd h1 em,.vbd h2 em{font-style:normal;color:var(--vbd-blue-600)}
.vbd p{margin:0}
/* Reguła wyżej ma specyficzność (0,1,1) i biła margines KAŻDEJ klasy jednoklasowej
   na akapicie (lede, kicker, hint, fine, hint formularza, odstępy w .vbd-stack).
   Dlatego te klasy stoją z prefiksem .vbd-root: (0,2,0) wygrywa z (0,1,1).
   Ta sama pułapka dotyczy LINKÓW i NAGŁÓWKÓW, nie tylko akapitów. .vbd-root a
   to (0,1,1) i biło kolor przycisków .vbd-btn--* (0,1,0), a .vbd h2 (0,1,1)
   biło margines .vbd-faq-h (0,1,0). Obie rodziny stoją niżej z prefiksem. */
.vbd-root .vbd-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--vbd-blue-600);display:flex;align-items:center;gap:7.2px;margin-bottom:var(--vbd-s3)}
.vbd-root .vbd-lede{font-size:18px;line-height:1.55;color:var(--vbd-muted);max-width:60ch;margin-top:var(--vbd-s4)}
.vbd-prose{max-width:64ch;color:var(--vbd-muted)}
.vbd-root .vbd-stack>*+*{margin-top:var(--vbd-s4)}
.vbd-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* przyciski */
.vbd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 24px;border-radius:var(--vbd-r-sm);border:1px solid transparent;
  font-family:var(--vbd-font-body);font-size:15px;font-weight:600;line-height:1;text-decoration:none;
  cursor:pointer;transition:background .15s,color .15s,transform .1s}
/* Prefiks .vbd-root jest tu obowiązkowy: bez niego .vbd-root a (0,1,1) bije
   color:#fff z (0,1,0) i napis na niebieskim przycisku wychodzi granatowy
   (2,49:1, twardy fail WCAG 1.4.3), a na hoverze znika całkiem (1,00:1). */
.vbd-root .vbd-btn--primary{background:var(--vbd-blue-600);color:#fff;box-shadow:var(--vbd-shadow-btn)}
.vbd-root .vbd-btn--primary:hover{background:var(--vbd-blue-700);color:#fff}
.vbd-root .vbd-btn--primary:active{transform:translateY(1px);box-shadow:none}
.vbd-root .vbd-btn--ghost{background:#fff;color:var(--vbd-navy);border-color:var(--vbd-line-strong)}
.vbd-root .vbd-btn--ghost:hover{border-color:var(--vbd-blue-600);color:var(--vbd-blue-600)}
.vbd-btns{display:flex;flex-wrap:wrap;gap:var(--vbd-s3)}

/* ---- S1 HERO ---- */
.vbd-hero{padding-top:var(--vbd-s7);padding-bottom:var(--vbd-s6)}
.vbd-root .vbd-hint{display:flex;gap:8.8px;align-items:flex-start;background:var(--vbd-bg-soft);
  border:1px solid var(--vbd-line);border-radius:var(--vbd-r-sm);padding:12px 16px;color:var(--vbd-muted);
  font-size:15px;max-width:760px;margin-bottom:var(--vbd-s6)}
.vbd-hint svg{flex:0 0 auto;color:var(--vbd-blue-600);font-size:18px;margin-top:2.4px}
.vbd-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vbd-s3);
  margin-top:var(--vbd-s5);padding:0;list-style:none}
.vbd-chip{display:block;height:100%;text-decoration:none;background:#fff;border:1px solid var(--vbd-line-strong);
  border-radius:var(--vbd-r-sm);padding:11.2px 16px;transition:border-color .15s,transform .1s}
.vbd-chip:hover{border-color:var(--vbd-blue-600);transform:translateY(-1px)}
.vbd-chip b{display:block;font-family:var(--vbd-font-display);font-size:17px;font-weight:700;
  color:var(--vbd-ink);letter-spacing:-.01em}
.vbd-chip .vbd-chip__now{display:block;font-family:var(--vbd-font-display);font-size:20px;font-weight:700;
  color:var(--vbd-navy);margin-top:2.4px}
.vbd-chip .vbd-chip__ren{display:block;font-size:14px;color:var(--vbd-muted);margin-top:3.2px}
.vbd-trust{display:flex;flex-wrap:wrap;gap:var(--vbd-s5) var(--vbd-s6);margin-top:var(--vbd-s6);padding:0;list-style:none;
  border-top:1px solid var(--vbd-line);padding-top:var(--vbd-s5)}
.vbd-trust li{display:flex;gap:8.8px;align-items:center;font-size:15px;color:var(--vbd-ink)}
.vbd-trust svg{color:var(--vbd-blue-600);font-size:20px;flex:0 0 auto}

/* Karta własnego formularza (wariant 2) NIE stoi w tym pliku. W iteracji 1
   na stronie jest jeden formularz, szablonowy, więc .vbd-form* i .vbd-field
   byłyby martwym kodem na całym panelu. Komplet reguł czeka w podglad.html,
   razem z HTML-em z PROJEKT-SPEC 4.3, i wraca dopiero z iteracją 2. */

/* ---- S2 CENNIK ---- */
.vbd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--vbd-s5);flex-wrap:wrap;
  margin-bottom:var(--vbd-s5)}
/* :not(.vbd-kicker), bo inaczej ta reguła (0,1,1) przemalowuje kicker na szaro
   i dokłada mu margines. Jeden selektor prosty w :not(), bezpieczne od IE9. */
.vbd-head p:not(.vbd-kicker){max-width:56ch;color:var(--vbd-muted);margin-top:var(--vbd-s3)}
.vbd-card{border:1px solid var(--vbd-line);border-radius:var(--vbd-r);background:#fff;box-shadow:var(--vbd-shadow-card);
  overflow:hidden}
.vbd-tablewrap{overflow-x:auto}
table.vbd-price{width:100%;border-collapse:collapse;font-size:15px}
table.vbd-price th{font-family:var(--vbd-font-body);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--vbd-muted);text-align:left;padding:16px 20px;border-bottom:1px solid var(--vbd-line);
  background:var(--vbd-bg-soft)}
table.vbd-price th.vbd-r,table.vbd-price td.vbd-r{text-align:right}
table.vbd-price td{padding:16px 20px;border-bottom:1px solid var(--vbd-line);vertical-align:middle}
table.vbd-price tr:last-child td{border-bottom:0}
table.vbd-price tbody tr:hover{background:var(--vbd-bg-soft)}
.vbd-tld{font-family:var(--vbd-font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--vbd-ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vbd-tld small{display:block;width:100%;font-family:var(--vbd-font-body);font-size:14px;font-weight:400;
  color:var(--vbd-muted);letter-spacing:0;margin-top:2.4px}
.vbd-now{font-family:var(--vbd-font-display);font-size:19px;font-weight:700;color:var(--vbd-navy);
  letter-spacing:-.02em;white-space:nowrap}
.vbd-ren{font-family:var(--vbd-font-display);font-size:19px;font-weight:500;color:var(--vbd-ink);
  letter-spacing:-.02em;white-space:nowrap}
.vbd-gross{display:block;font-family:var(--vbd-font-body);font-size:14px;font-weight:400;color:var(--vbd-muted);
  margin-top:1.6px}
.vbd-tfoot{background:var(--vbd-bg-soft);border-top:1px solid var(--vbd-line);padding:16px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:var(--vbd-s4);flex-wrap:wrap}
.vbd-tfoot p{font-size:14px;color:var(--vbd-muted);line-height:1.5;max-width:62ch}

/* ---- S3 PAS UCZCIWOŚCI (panel w kontenerze, bez 100vw) ---- */
.vbd-band{background:linear-gradient(135deg,#04162c 0%,#00376C 60%,#0a4f95 100%);color:#fff;
  border-radius:var(--vbd-r-xl);padding:var(--vbd-s7) var(--vbd-s6)}
.vbd-band h2{color:#fff}
.vbd-band p{color:var(--vbd-on-dark);max-width:52ch;margin-top:var(--vbd-s4)}
.vbd-band ul{list-style:none;margin:var(--vbd-s6) 0 0;padding:0;display:grid;gap:var(--vbd-s4);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.vbd-band li{display:flex;gap:12px;color:var(--vbd-on-dark-2);font-size:15px;line-height:1.55}
.vbd-band li svg{color:var(--vbd-cyan);font-size:22px;flex:0 0 auto;margin-top:1.6px}
.vbd-band li b{display:block;color:#fff;font-weight:600}

/* ---- S4 TRANSFER ---- */
.vbd-2col{display:grid;gap:var(--vbd-s6);grid-template-columns:1fr 1fr;align-items:start}
.vbd-steps{counter-reset:vbdstep;list-style:none;margin:0;padding:0;background:#fff;
  border:1px solid var(--vbd-line);border-radius:var(--vbd-r);box-shadow:var(--vbd-shadow-card);padding:var(--vbd-s5)}
.vbd-steps li{counter-increment:vbdstep;position:relative;padding-left:52px;padding-bottom:var(--vbd-s5)}
.vbd-steps li:last-child{padding-bottom:0}
.vbd-steps li::before{content:counter(vbdstep,decimal-leading-zero);position:absolute;left:0;top:-.16px;
  width:34px;height:34px;border-radius:var(--vbd-r-full);background:var(--vbd-accent-soft);color:var(--vbd-navy);
  font-family:var(--vbd-font-display);font-size:14px;font-weight:700;display:flex;align-items:center;
  justify-content:center}
.vbd-steps li::after{content:"";position:absolute;left:16px;top:34px;bottom:5.6px;width:2px;
  background:var(--vbd-line)}
.vbd-steps li:last-child::after{display:none}
.vbd-steps b{display:block;font-weight:600}
.vbd-steps span{color:var(--vbd-muted);font-size:15px}
.vbd-root .vbd-fine{margin-top:var(--vbd-s4);font-size:14px;color:var(--vbd-muted)}

/* ---- S5 KAFELKI ---- */
.vbd-grid4{display:grid;gap:var(--vbd-s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.vbd-tile{background:#fff;border:1px solid var(--vbd-line);border-radius:var(--vbd-r);padding:var(--vbd-s5);
  transition:transform .15s,box-shadow .15s}
.vbd-tile:hover{transform:translateY(-2px);box-shadow:var(--vbd-shadow-card)}
.vbd-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  margin-bottom:var(--vbd-s4);background:var(--vbd-accent-soft);border-radius:var(--vbd-r-sm);font-size:24px;
  color:var(--vbd-blue-600)}
.vbd-tile p{margin-top:9.6px;font-size:15px;color:var(--vbd-muted)}

/* ---- S6 NOWE ROZSZERZENIA ---- */
.vbd-soft{background:var(--vbd-bg-soft);border-radius:var(--vbd-r-xl);padding:var(--vbd-s7) var(--vbd-s6)}
.vbd-soft p+p{margin-top:12px}
.vbd-tags{display:flex;flex-wrap:wrap;gap:8px;margin:var(--vbd-s5) 0;padding:0;list-style:none}
.vbd-tags a{display:inline-flex;align-items:center;min-height:44px;background:#fff;
  border:1px solid var(--vbd-line-strong);border-radius:var(--vbd-r-full);
  padding:6.4px 14.4px;font-family:var(--vbd-font-display);font-size:15px;font-weight:700;color:var(--vbd-navy);
  text-decoration:none}
.vbd-tags a:hover{border-color:var(--vbd-blue-600);color:var(--vbd-blue-600)}

/* ---- S7 FAQ ---- */
.vbd-faq{max-width:820px}
/* prefiks .vbd-root, bo .vbd h1,.vbd h2,.vbd h3{margin:0} to (0,1,1) i bije (0,1,0) */
.vbd-root .vbd-faq-h{margin-bottom:var(--vbd-s5)}
.vbd-faq details{border-bottom:1px solid var(--vbd-line)}
/* summary zostaje blokiem; flex siedzi w wewnętrznym spanie, bo display:flex
   na <summary> w starszych Safari psuje marker i klikalność */
.vbd-faq summary{list-style:none;cursor:pointer;display:block;padding:18.4px 0}
.vbd-faq summary::-webkit-details-marker{display:none}
.vbd-faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--vbd-s4);
  font-family:var(--vbd-font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--vbd-ink)}
.vbd-faq summary:hover .vbd-faq__q{color:var(--vbd-blue-600)}
.vbd-chev{flex:0 0 auto;color:var(--vbd-muted);font-size:20px;margin-top:2.4px;transition:transform .15s}
.vbd-faq details[open] .vbd-chev{transform:rotate(180deg)}
.vbd-faq details p{padding:0 0 20px;color:var(--vbd-muted);max-width:68ch}

/* ---- S8 KONTAKT ---- */
.vbd-final{background:linear-gradient(160deg,var(--vbd-accent-soft),var(--vbd-bg-soft));border:1px solid var(--vbd-line);
  border-radius:var(--vbd-r-xl);padding:var(--vbd-s7) var(--vbd-s6);display:grid;gap:var(--vbd-s6);
  grid-template-columns:1.15fr .85fr;align-items:center}
/* kicker w tym panelu idzie na navy: --blue-600 na tle gradientu daje 4,24-4,48:1, czyli poniżej progu */
.vbd-final .vbd-kicker{color:var(--vbd-navy)}
.vbd-final .vbd-stack p:not(.vbd-kicker){color:var(--vbd-muted);max-width:56ch}
.vbd-vcard{background:#fff;border:1px solid var(--vbd-line);border-radius:var(--vbd-r);padding:var(--vbd-s5);
  display:grid;gap:var(--vbd-s3)}
.vbd-vcard div{display:flex;gap:10.4px;align-items:flex-start;font-size:15px}
.vbd-vcard svg{color:var(--vbd-blue-600);font-size:18px;flex:0 0 auto;margin-top:2.4px}
.vbd-vcard a{color:var(--vbd-navy);font-weight:600}

/* =======================================================================
   BREAKPOINTY (te same progi co Bootstrap 3.3.7: 768 / 992 / 1200)
   ======================================================================= */
@media (max-width:1199px){
  .vbd h1{font-size:42px}
}
@media (max-width:991px){
  .vbd-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbd-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbd-2col{grid-template-columns:1fr;gap:var(--vbd-s5)}
  .vbd-final{grid-template-columns:1fr}
  .vbd-band ul{grid-template-columns:1fr}
}
@media (max-width:767px){
  .vbd-sec{padding-block:56px}
  .vbd-sec--tight{padding-block:40px}
  .vbd h1{font-size:34px}
  .vbd h2{font-size:28px}
  .vbd-grid4{grid-template-columns:1fr}
  .vbd-band,.vbd-soft,.vbd-final{padding:var(--vbd-s6) var(--vbd-s5);border-radius:var(--vbd-r)}

  /* Oś główna pionowa: bez tego flex-basis 260px rozciąga WYSOKOŚĆ pola do 260 px */
  .row.domain-search.domain-search-home{flex-direction:column;align-items:stretch}
  input.form-control.search-input{flex:0 0 auto;width:100%;height:56px}
  button.btn.btn-darkgrey.search-btn{width:100%}

  .vbd-btn{min-height:48px;width:100%}
  .vbd-btns .vbd-btn{width:auto;flex:1 1 200px}

  /* TABELA -> KARTY. thead chowany clip-path (nie display:none), etykiety z data-label.
     Role ARIA są wpisane w HTML, bo display:block kasuje domyślne role tabeli. */
  .vbd-tablewrap{overflow-x:visible}
  table.vbd-price,table.vbd-price tbody,table.vbd-price tr,table.vbd-price td{display:block;width:100%}
  table.vbd-price thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
  table.vbd-price tr{border-bottom:1px solid var(--vbd-line);padding:16px 20px}
  table.vbd-price tr:last-child{border-bottom:0}
  table.vbd-price td{border-bottom:0;padding:5.6px 0;display:flex;align-items:baseline;
    justify-content:space-between;gap:var(--vbd-s4);text-align:right}
  table.vbd-price td::before{content:attr(data-label);font-size:14px;font-weight:500;color:var(--vbd-muted);
    text-align:left;flex:0 0 auto}
  table.vbd-price td.vbd-tldcell{display:block;text-align:left;padding-bottom:12px;
    border-bottom:1px solid var(--vbd-line);margin-bottom:8px}
  table.vbd-price td.vbd-tldcell::before{content:none}
  .vbd-tld{font-size:21px}
  .vbd-gross{display:inline;margin-left:6.4px}
}
@media (max-width:400px){
  .vbd h1{font-size:30px}
  .vbd-chips{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  /* !important, bo bije deklaracje transition zapisane w regułach .vbd-* wyżej (WCAG 2.3.3).
     Selektor zawężony do naszego korzenia: animacje panelu HRD nie są naszą sprawą. */
  .vbd-root,.vbd-root *{transition:none!important;animation:none!important}
}

/* ---------- 1. KONTENER TABELY GRUPY ----------
   border-collapse:separate jest tu warunkiem koniecznym: przy collapse
   (ustawia je goła reguła bootstrapa na table) border-radius nie ma czego
   zaokrąglić. border-spacing:0 przywraca stykające się komórki.
   Specyficzność: (0,2,2) bije .table (0,1,0) i table (0,0,1). */
.pricing-lists table.pricelist{
  border-collapse:separate;border-spacing:0;
  border:1px solid var(--vbd-line);border-radius:var(--vbd-r);background:#fff;
  margin-bottom:var(--vbd-s5);
  font-family:var(--vbd-font-body);font-size:15px;line-height:1.5;color:var(--vbd-ink)}

/* ---------- 2. NAGŁÓWEK KOLUMNY ----------
   Bez prefiksu thead, bo szablonu nie kontrolujemy i nie mamy pewności, czy
   drukuje thead. Reguła (0,2,2) bije .table > thead > tr > th (0,1,3)
   i .table-condensed > thead > tr > th (0,1,3), bo liczy się liczba klas.
   Zaokrąglenie górnych rogów: tło nagłówka jest inne niż tło tabeli, więc
   bez tego wystawałoby poza obrys. */
.pricing-lists table.pricelist th{
  padding:14px 16px;vertical-align:bottom;text-align:left;
  font-family:var(--vbd-font-body);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--vbd-muted);
  background:var(--vbd-bg-soft);border:0;border-bottom:1px solid var(--vbd-line)}
.pricing-lists table.pricelist th:first-child{border-top-left-radius:var(--vbd-r)}
.pricing-lists table.pricelist th:last-child{border-top-right-radius:var(--vbd-r)}

/* Trzy kolumny cenowe do prawej, tak jak kwoty pod nimi.
   :not() z jednym selektorem prostym w środku, bezpieczne od IE9. */
.pricing-lists table.pricelist th:not(:first-child){text-align:right}

/* Podpisy w nagłówku: "Abonament roczny" (.small) i "ceny netto (bez VAT)"
   (.smaller). Bootstrap daje im 85%, common_cms 60% i obie zostają w linii,
   przez co nagłówek jest nieczytelny. Robimy z nich osobne wiersze.
   Wielkości w px, bo procent liczy się od naszego zmniejszonego nagłówka.
   Specyficzność (0,3,2) bije .small i .smaller (0,1,0). */
.pricing-lists table.pricelist th .small,
.pricing-lists table.pricelist th .smaller{
  display:block;font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--vbd-muted);margin-top:3px}
.pricing-lists table.pricelist th .smaller{font-size:11px}

/* ---------- 3. WIERSZE ----------
   Paski bootstrapa (.table-striped > tbody > tr:nth-of-type(odd)) mają
   specyficzność (0,2,2). Nasza reguła (0,2,3) je zdejmuje bez !important. */
.pricing-lists table.pricelist tbody tr{background:#fff}
.pricing-lists table.pricelist tbody tr:hover{background:var(--vbd-bg-soft)}

/* Kreski: bootstrap rysuje border-top na każdej komórce (0,1,3), my
   przenosimy linię na dół komórki, żeby nie dublowała się z obrysem tabeli. */
.pricing-lists table.pricelist td{
  padding:14px 16px;vertical-align:middle;
  border:0;border-bottom:1px solid var(--vbd-line)}
.pricing-lists table.pricelist tbody tr:last-child td{border-bottom:0}

/* Nazwa końcówki jak .vbd-tld w naszych tabelach. */
.pricing-lists table.pricelist tbody td:first-child{
  font-family:var(--vbd-font-display);font-size:16px;font-weight:700;
  letter-spacing:-.01em;color:var(--vbd-ink)}

/* Kwoty: do prawej, cyframi tabelarycznymi, bez łamania w środku kwoty.
   Dzięki tnum przecinki dziesiętne stoją w jednej kolumnie i da się porównać
   99,00 z 47,25 wzrokiem, a o to w tej tabeli chodzi. */
.pricing-lists table.pricelist tbody td:not(:first-child){
  text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* Ostatnia kolumna to odnowienie, czyli kwota płacona co roku i teza całej
   strony. Dostaje wyróżnienie kolorem, nie wielkością, żeby nie przykryć
   ceny rejestracji. Stoi PO regule wyżej, bo obie mają (0,3,3) i przy remisie
   wygrywa późniejsza. */
.pricing-lists table.pricelist tbody td:last-child{
  font-weight:600;color:var(--vbd-navy)}

/* Stopka z przyciskiem "Pokaż kolejne z tej grupy" (tylko przy grupie
   "Domeny narodowe z Europy"). Zostaje biała: komórka ma colspan="3" przy
   czterech kolumnach, więc tło inne niż reszta obnażyłoby ten błąd szablonu. */
.pricing-lists table.pricelist tfoot td{
  padding:12px 16px;background:#fff;border:0;border-top:1px solid var(--vbd-line)}

/* ---------- 4. PRZYCISK "POKAŻ KOLEJNE Z TEJ GRUPY" ----------
   span.btn.btn-primary.pull-left.allButton. Kotwica .pricing-lists jest tu
   obowiązkowa, patrz nagłówek pliku. (0,2,0) bije .btn i .btn-primary (0,1,0),
   a wersja z :hover (0,3,0) bije .btn-primary:hover (0,2,0).
   float:left z .pull-left zostawiamy: przycisk ma stać przy lewej krawędzi
   komórki i nie ma powodu walczyć z !important bootstrapa. */
.pricing-lists .allButton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;cursor:pointer;
  background:#fff;color:var(--vbd-navy);
  border:1px solid var(--vbd-line-strong);border-radius:var(--vbd-r-sm);
  font-family:var(--vbd-font-body);font-size:14px;font-weight:600;line-height:1;
  text-shadow:none;box-shadow:none}
.pricing-lists .allButton:hover{border-color:var(--vbd-blue-600);color:var(--vbd-blue-600)}

/* ---------- 5. PRZEŁĄCZNIK BRUTTO / NETTO ----------
   div.btn-group > span.btn.pull-left.grossButton + span.btn.pull-left.netButton.
   display:inline-flex na grupie załatwia dwie rzeczy naraz: unieważnia float
   z .pull-left (float nie działa na elementach flex, więc nie potrzeba tu
   ani jednego !important) i pozwala rodzicowi .text-center wyśrodkować grupę.
   Kształt pigułki: bootstrap sam zeruje wewnętrzne rogi w grupie przycisków,
   my dokładamy tylko rogi zewnętrzne. */
.pricing-lists .btn-group{display:inline-flex}
.pricing-lists .grossButton,
.pricing-lists .netButton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;cursor:pointer;
  background:#fff;color:var(--vbd-navy);
  border:1px solid var(--vbd-line-strong);
  font-family:var(--vbd-font-body);font-size:14px;font-weight:600;line-height:1;
  text-shadow:none;box-shadow:none}
.pricing-lists .grossButton{border-top-left-radius:var(--vbd-r-full);border-bottom-left-radius:var(--vbd-r-full);padding-left:24px}
.pricing-lists .netButton{border-top-right-radius:var(--vbd-r-full);border-bottom-right-radius:var(--vbd-r-full);padding-right:24px}
.pricing-lists .grossButton:hover,
.pricing-lists .netButton:hover{color:var(--vbd-blue-600);border-color:var(--vbd-blue-600)}
/* Stan aktywny: (0,3,0) bije common_cms (.netButton.active, 0,2,0) i bootstrapowy
   .btn.active z cieniem wewnętrznym. Kolor tła to --vbd-blue-600, na którym
   biały tekst ma 4,78:1, czyli przechodzi WCAG 1.4.3 dla tego rozmiaru. */
.pricing-lists .grossButton.active,
.pricing-lists .netButton.active{
  background:var(--vbd-blue-600);color:#fff;border-color:var(--vbd-blue-600);box-shadow:none}

/* ---------- 6. PODMENU CENNIKÓW ----------
   div.col-centered.col-md-6.submenu. Klasa col-centered NIE JEST zdefiniowana
   w żadnym z trzech arkuszy, które strona ładuje, więc nie centruje niczego,
   a col-md-6 spycha podmenu do lewej połowy. (0,2,0) bije .col-md-6 (0,1,0)
   z media query bootstrapa, bo media query nie podnosi specyficzności.
   Wnętrza (ul.nav-justified) nie ruszamy: tam li jest komórką tabeli, więc
   bootstrapowe width:1% działa zgodnie z zamysłem. Pułapka z menu górnego,
   gdzie nasz display:flex zamienił 1% w 11 px, tu nie występuje. */
.pricing-lists .submenu{float:none;margin-left:auto;margin-right:auto}
.pricing-lists .submenu a{
  font-family:var(--vbd-font-body);font-size:14px;font-weight:600;
  color:var(--vbd-ink);text-decoration:none;border-radius:var(--vbd-r-sm)}
.pricing-lists .submenu a:hover{color:var(--vbd-blue-600);background:var(--vbd-accent-soft)}
.pricing-lists .submenu a:focus-visible{outline:3px solid var(--vbd-blue-600);outline-offset:-3px}
.pricing-lists .submenu .active a{color:var(--vbd-blue-600)}


/* =========================================================================
   BREAKPOINT (ten sam próg co bootstrap 3.3.7 i co cms.css)
   Cztery kolumny przy 360 px dziś po prostu wystają poza ekran. Kart z tabeli
   nie zrobimy, bo karty wymagają atrybutów data-label na komórkach, a markupu
   nie kontrolujemy. Zostaje zmniejszenie tekstu i marginesów plus zapasowy
   pas przewijania na elemencie, który trzyma tabelę.

   DLACZEGO PAS PRZEWIJANIA MA DWIE REGUŁY, A NIE JEDNĄ. Szablon używa dwóch
   różnych zagnieżdżeń pod tą samą nazwą klasy:
     /pl/page/cennik, /pl/page/cennik-domeny
        div.row.price-switcher > div.col-md-12 > table.pricelist
     /pl/page/cennik-nowe-domeny-globalne
        div.col-md-12.price-switcher > table.pricelist
   Na drugiej stronie price-switcher i col-md-12 to TEN SAM element, a selektor
   potomka nie łapie samego siebie. Jedyny col-md-12 wewnątrz tamtego kontenera
   to pasek przycisków Brutto/Netto, czyli nie tabela. Dlatego niżej stoją dwie
   reguły: jedna na kolumnę wewnątrz wiersza, druga na sam kontener. Na stronach
   z pierwszego układu ta druga trafia w div.row, który i tak niczego nie przycina.
   ========================================================================= */
@media (max-width:767px){
  .pricing-lists table.pricelist{font-size:13px}
  .pricing-lists table.pricelist th{font-size:11px;padding:10px 8px;letter-spacing:.04em}
  .pricing-lists table.pricelist th .small{font-size:11px}
  .pricing-lists table.pricelist th .smaller{font-size:10px}
  .pricing-lists table.pricelist td{padding:10px 8px}
  .pricing-lists table.pricelist tbody td:first-child{font-size:14px}
  /* Selektory .col-* nie są na zamkniętej liście z PROJEKT-SPEC 4.2, ale ten
     jeden jest zakotwiczony podwójnie: .pricing-lists i .price-switcher
     występują wyłącznie na trzech stronach cennikowych, więc nie dotyka
     siatki reszty panelu. To samo odstępstwo, co przy pasie wyszukiwarki
     (PROJEKT-SPEC 16.3). Jeśli szablon kiedyś zmieni zagnieżdżenie, reguła
     po prostu przestanie trafiać i zostanie samo zmniejszenie tekstu. */
  .pricing-lists .price-switcher .col-md-12{overflow-x:auto}
  /* Druga gałąź zagnieżdżenia, patrz nagłówek breakpointu: na
     /pl/page/cennik-nowe-domeny-globalne kontenerem tabeli jest sam
     div.col-md-12.price-switcher, więc reguła wyżej go nie łapie.
     Ta trafia w oba układy: tam w kontener tabeli, na pozostałych dwóch
     stronach w div.row.price-switcher, który niczego nie przycina. */
  .pricing-lists .price-switcher{overflow-x:auto}
}