/**
 * Premium VOX – globalne style
 * Menu, linki, tekst i layout używane w całej aplikacji.
 */

/* === Fonty Uniform (skopiuj pliki .woff2 do public/fonts/) === */
@font-face {
  font-family: 'Uniform Pro Con';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/uniformprocon-reg-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Uniform Pro Con Medium';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/uniformprocon-med-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'Uniform Pro X Con Medium';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/uniformproxcon-med-webfont.woff2') format('woff2');
}

/* === Zmienne (strona główna, hero, menu) === */
:root {
  --beige-300: #F6F5F3;
  --menu-shadow: linear-gradient(180deg, rgba(25, 25, 25, 0.20) 0%, rgba(25, 25, 25, 0.00) 100%);
  --neutral-white: #FFF;
  --dark-grey-700: #373737;
  --dark-grey-500: #5C5C5C;
  --light-grey-300: #F2F2F2;
  --light-grey-400: #969696;
  --light-grey-500: #E1E1E1;
  /* Fonty Uniform */
  --font-uniform: 'Uniform Pro Con', system-ui, sans-serif;
  --font-uniform-medium: 'Uniform Pro Con Medium', system-ui, sans-serif;
  --font-uniform-x-medium: 'Uniform Pro X Con Medium', system-ui, sans-serif;
  /* Font-size: px -> vw (baza 100vw) */
  --fs-12: 0.625vw;
  --fs-14: 0.729vw;
  --fs-15: 0.781vw;
  --fs-16: 0.833vw;
  --fs-17: 0.885vw;
  --fs-20: 1.042vw;
  --fs-23: 1.198vw;
  --fs-24: 1.25vw;
  --fs-32: 1.667vw;
  --fs-38: 1.979vw;
  --fs-40: 2.083vw;
  --fs-42: 2.188vw;
  --fs-45: 2.344vw;
  --fs-62: 3.229vw;
  --fs-132: 6.875vw;
}

html {
  /* Opcja 3: globalne skalowanie `rem` jak px->vw dla fontów:
     1rem=16px przy bazie 1920px -> 16/1920*100 = 0.8333vw
     clamp chroni przed zbyt małymi fontami na bardzo wąskich ekranach. */
  font-size: clamp(12px, 0.8333vw, 16px);
}
h1,h2,p{
  margin: 0;
  padding: 0;
}
/* === Reset / bazowe === */
* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: white;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* === Layout === */
.container { 
  max-width: 100%; margin: 0 auto; padding: 0 1rem; 
}
.page-register, .page-login {
  max-width: 62.5vw; margin: 0 auto; padding: 0 1rem; 
}
.page-login{
  max-width: 26.042vw;
}
main {
  padding: 0;
  padding-top: 5.208vw;
  min-height: 60vh;
  flex: 1 0 auto;
}
body.page-home main { padding-top: 0; min-height: 0; }
.page-content { max-width: 46.875vw; margin: 0 auto; }

/* === Stopka – globalna === */
.site-footer {
  display: flex;
  width: 100%;
  padding: 0 4.167vw;
  flex-direction: column;
  align-items: center;
  background: var(--light-grey-500, #E1E1E1);
}
.site-footer-inner {
  display: flex;
  padding: 3.333vw 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.site-footer-copyright {
  margin: 0;
  font-size: 0.9rem;
  color: var(--dark-grey-700, #373737);
}
.site-footer-social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.site-footer-social-link {
  color: var(--dark-grey-700, #373737);
  text-decoration: none;
  line-height: 0;
  transition: opacity 0.2s;
}
.site-footer-social-link:hover {
  opacity: 0.7;
  color: var(--dark-grey-700, #373737);
}
.site-footer-icon {
  width: 1.25vw;
  height: 1.25vw;
  display: block;
}

/* === Nawigacja (menu) – globalna === */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: 5.208vw;
  padding: 0 4.167vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--menu-shadow);
  background-blend-mode: multiply;
  border-bottom: none;
}
.site-nav .container {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  align-items: center;
}
.site-nav a {
  color: var(--neutral-white);
  text-decoration: none;
}
.site-nav a:hover {
  text-decoration: none;
  color: var(--neutral-white);
  opacity: 0.9;
}
.site-nav .nav-logo {
  display: inline-block;
  color: var(--neutral-white);
  text-decoration: none;
}
.site-nav .nav-logo:hover {
  color: var(--neutral-white);
  text-decoration: none;
  opacity: 0.9;
}
.site-nav .nav-logo img {
  display: block;
  height: auto;
  max-width: 5.469vw;
  width: auto;
}
.site-nav .nav-logo span {
  display: inline-block;
  background: #c00;
  color: #fff;
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
/* Logo (lewa) */
.site-nav .nav-left {
  display: flex;
  width: 5.469vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.417vw;
  flex-shrink: 0;
}
/* Menu środkowe */
.site-nav .nav-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.156vw;
  align-self: stretch;
  flex: 1;
}
/* Twoje konto (prawa) */
.site-nav .nav-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.156vw;
  align-self: stretch;
}
.site-nav .nav-right-buttons,
.site-nav .nav-center-buttons {
  display: flex;
  height: 2.865vw;
  padding-top: 0.365vw;
  align-items: flex-start;
  gap: 2.083vw;
  align-self: stretch;
  justify-content: center;
}
.site-nav .nav-right-buttons a,
.site-nav .nav-center-buttons a {
  display: flex;
  padding: 0.104vw 0 0.156vw 0;
  flex-direction: column;
  align-items: flex-start;
  color: var(--neutral-white);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.083vw;
  text-transform: uppercase;
}
.site-nav .nav-center-buttons a {
  position: relative;
}
.site-nav .nav-center-buttons a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.208vw;
  height: 0.052vw;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-nav .nav-center-buttons a:hover::before {
  opacity: 1;
}
/* .nav-center-buttons a:hover{
  color: red !important;
} */
.site-nav .nav-right-buttons a {
  flex-direction: row;
  align-items: center;
  gap: 0.417vw;
}
/* Linki w menu środkowym/prawym bez .nav-*-buttons (fallback) */
.site-nav .nav-center > a,
.site-nav .nav-right > a {
  display: flex;
  padding: 0.104vw 0 0.156vw 0;
  flex-direction: column;
  align-items: flex-start;
  color: var(--neutral-white);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.083vw;
  text-transform: uppercase;
}

/* Strona główna – napisy w menu białe (domyślnie w .site-nav) */
body.page-home .site-nav a,
body.page-home .site-nav .nav-logo { color: var(--neutral-white); }
/* body.page-home .site-nav a:hover { color: var(--neutral-white); opacity: 0.9; } */

/* Strona /zaloguj-sie – font w menu czarny */
body.navi-reverse .site-nav {
  background: rgba(255, 255, 255, 0.95);
  background-blend-mode: normal;
  border-bottom: 0.052vw solid var(--light-grey-300, #F2F2F2);
}
body.navi-reverse .site-nav a,
body.navi-reverse .site-nav .nav-logo,
body.navi-reverse .site-nav .nav-right-buttons a,
body.navi-reverse .site-nav .nav-center-buttons a,
body.navi-reverse .site-nav .nav-center > a,
body.navi-reverse .site-nav .nav-right > a {
  color: var(--dark-grey-700);
}
/* body.navi-reverse .site-nav a:hover {
  color: var(--dark-grey-700);
  opacity: 0.8;
} */

.nav-right-buttons-user {
  display: flex;
  align-items: center;
  gap: 0.417vw;
}
.nav-right-buttons-user svg {
  width: 1.25vw;
  height: auto;
  margin-top: -0.781vw;
}
.nav-right-buttons-user span {
  font-size: var(--fs-16);
  font-weight: 500;
  font-family: var(--font-uniform-medium);
  color: var(--dark-grey-700);
  letter-spacing: 0.083vw;
  text-transform: uppercase;
  line-height: 140%;
  margin: 0;
}
.nav-right-buttons-user span.white {
  color: var(--neutral-white);
}
.nav-right-buttons-user span.black {
  color: var(--dark-grey-700);
}
/* === Linki / tekst – globalne === */
a { color: inherit; }
/* Dodatkowe klasy linków w treści można dopisać poniżej */

/* === Komunikaty (flash) === */
.flash-success { background: #d4edda; color: #155724; padding: 0.75rem; margin-bottom: 1rem; border-radius: 0.208vw; }
.flash-error { background: #f8d7da; color: #721c24; padding: 0.75rem; margin-bottom: 1rem; border-radius: 0.208vw; }

/* === Formularze === */
form div { margin-bottom: 0.75rem; }
form label { display: block; margin-bottom: 1rem; font-weight: 600; }
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form select { width: 100%; max-width: 100%; padding: 0.5rem; }

/* === Przyciski === */
/* button,
.btn { display: inline-block; padding: 0.5rem 1rem; background: #007bff; color: #fff; border: none; border-radius: 0.208vw; cursor: pointer; text-decoration: none; font-size: 1rem; }
button:hover, .btn:hover { background: #0056b3; color: #fff; }
.btn-secondary { background: #6c757d; }
.btn-secondary:hover { background: #545b62; }
.btn-white { background: #fff; color: #333; }
.btn-white:hover { background: #eee; color: #333; } */

/* === Tabele === */
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 0.5rem; text-align: left; border-bottom: 0.052vw solid #ddd; }
th { background: #eee; }

/* === Strona główna – główny widok === */
.main-home {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--beige-300);
  width: 100%;
}
.main-home .view-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: var(--beige-300);
}

/* Górna część – zdjęcie na całą wysokość ekranu + menu u góry */
.hero-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero {
  position: relative;
  min-height: 50vw;
  width: 100%;
  background: #1a1a1a url("/images/home.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.about-hero {
  position: relative;
  width: 100%;
  background: #1a1a1a url("/images/topups.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 40.52vw;
}
.topups-hero {
  background: #1a1a1a url("/images/topups.jpg") no-repeat center center;
  background-size: cover;
  /* min-height: 85vh; */
  min-height: 40.52vw;
}
.hero-content {
  display: flex;
  padding: 0 11.927vw;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.083vw;
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  z-index: 1;
}
.hero-content-only-image {
  width: 100%;
  height: 100%;
}
.hero-text {
  display: flex;
  width: 31.25vw;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.083vw;
}
.hero-title {
  color: var(--neutral-white);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-132);
  font-style: normal;
  font-weight: 500;
  line-height: 96%;
  margin: 0;
}
.hero-tagline {
  color: var(--neutral-white);
  font-feature-settings: 'liga' off, 'clig' off;
  text-shadow: 0 0 5.208vw #000;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-24);
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  margin: 0;
}
.hero-text-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.833vw;
}
.btn-hero {
  display: flex;
  padding: 0.521vw 1.25vw 0.469vw 1.25vw;
  justify-content: center;
  align-items: center;
  gap: 0.521vw;
  background: var(--neutral-white);
  color: var(--dark-grey-700);
  text-align: center;
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.052vw;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-hero:hover {
  background: #f0f0f0;
  color: var(--dark-grey-700);
  text-decoration: none;
}

/* === Strona główna – druga sekcja (1 blok szeroki + 3 karty) === */
.home-section-2,.home-section-3 {
  display: flex;
  width: 100%;
  height: 29.7vw;
  padding: 0 4.167vw;
  flex-direction: column;
  align-items: flex-start;
  aspect-ratio: 64/19;
  margin-top: 4.167vw;
}
.home-section-3 {
  margin-top: 1.25vw;
}
.home-block-wide {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}
.home-block-wide-media {
  display: flex;
  height: 29.7vw;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  aspect-ratio: 88/57;
}
.home-block-wide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-block-wide-content {
  display: flex;
  height: 29.7vw;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  /* aspect-ratio: 88/57; */
  background: var(--dark-grey-500);
  position: relative;
}
.home-block-wide-content-inner{
  display: flex;
  padding: 4.167vw 22.66vw 4.167vw 4.167vw;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.667vw;
  flex: 1 0 0;
  align-self: stretch;
}
.home-block-wide-txt{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25vw;
  align-self: stretch;
}
.home-block-wide-title {
  color: var(--neutral-white, #FFF);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-40);
  font-style: normal;
  font-weight: 500;
  line-height: 96%; /* 2vw */
  margin: 0;
}
.home-block-wide-text {
  color: var(--neutral-white, #FFF);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 1.167vw */
  letter-spacing: 0.083vw;
  margin: 0;
}
.home-block-wide-content .btn-hero {
  margin-top: 0.25rem;
}
.home-block-label {
  position: absolute;
  right: -0.833vw;
  top: 2.708vw;
  transform: translateY(0) rotate(-90deg);
  white-space: nowrap;
  pointer-events: none;
  color: var(--neutral-white, #FFF);
  text-align: center;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 0.875vw */
  letter-spacing: 0.031vw;
  background: var(--dark-grey-700, #373737);
  padding: 0.208vw 0.417vw 0.104vw 0.417vw;
}
.home-blocks-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw;
  width: 100%;
  height: 29.688vw;
}
.home-block-card {
  position: relative;
  display: block;
  min-height: 14.583vw;
  padding: 1.25vw;
  text-decoration: none;
  color: var(--neutral-white);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0.104vw 0.625vw rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 1.667vw 1.354vw 1.667vw 2.083vw;
}
/* .home-block-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
} */
.home-block-card:hover {
  transform: translateY(-0.208vw);
  box-shadow: 0 0.417vw 1.25vw rgba(0, 0, 0, 0.12);
  color: var(--neutral-white);
}
/* .home-block-card .home-block-label {
  top: auto;
  bottom: 50%;
  right: 0.833vw;
  transform: translateY(50%) rotate(-90deg);
  font-size: 0.65rem;
} */
.home-block-card-title {
  position: absolute;
  bottom: 1.25vw;
  left: 1.25vw;
  right: 2.5vw;
  color: var(--neutral-white, #FFF);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-40);
  font-style: normal;
  font-weight: 400;
  line-height: 96%; /* 2vw */
  letter-spacing: 0.05em;
}
.home-block-card-arrow {
  position: absolute;
  bottom: 1.25vw;
  right: 1.25vw;
  z-index: 1;
  line-height: 0;
}
.home-block-card-arrow-icon {
  display: block;
  width: 2.083vw;
  height: 2.083vw;
}
.home-block-card { background-color: var(--dark-grey-500); }
.home-block-card--1 { background-image: url('/images/home_section_2_page.png'); }
.home-block-card--2 { background-image: url('/images/home_section_2_cash.png'); }
.home-block-card--3 { background-image: url('/images/home_section_2_news.png'); }

/* === Strona „Zaloguj się” (wybór: logowanie / rejestracja) === */
.page-login-choice { 
  display: flex;
  padding: 4.531vw 10.156vw 6.042vw 10.156vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.083vw;
  align-self: stretch;
}
.login-choice-title { 
  color: var(--dark-grey-700, #373737);
  text-align: center;

  /* Heading EC/H1 Desktop */
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-40);
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 2.292vw */
  letter-spacing: 0.104vw;
  text-transform: uppercase;
  width: 100%;
}
.login-choice-cards { 
  display: flex;
  width: 79.635vw;
  height: 20.625vw;
  align-items: flex-start;
  gap: 1.25vw;
}
.login-card-login { 
  display: flex;
  width: 23.021vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25vw;
  flex-shrink: 0;
  align-self: stretch;
}
.login-card-login-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  border: 0.052vw solid var(--light-grey-300, #F2F2F2);
}
.title-label {
  display: flex;
  padding: 2.083vw 2.083vw 1.25vw 2.083vw;
  align-items: flex-start;
  gap: 2.083vw;
  align-self: stretch;
}
.title-label-text {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
}

.title-label-text h2 {
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-24);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.content{
  display: flex;
  padding: 0 2.083vw 2.083vw 2.083vw;
  justify-content: center;
  align-items: flex-start;
  gap: 2.083vw;
  flex: 1 0 0;
  align-self: stretch;
  flex-direction: column;
}
.content-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}
.content-text-subtitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.833vw;
  align-self: stretch;
}
.content-text-subtitle p {
  color: var(--dark-grey-700, #373737);

  /* Text/Text */
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 1.167vw */
}
.btn-normal {
  display: flex;
  padding: 0.417vw 1.25vw 0.313vw 1.25vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--dark-grey-700, #373737);
  border: 0.052vw solid var(--dark-grey-700, #373737);
  cursor: pointer;
}
.btn-white {
  background: var(--neutral-white, #FFF);
  border: 0.052vw solid var(--dark-grey-700, #373737);
}
.btn-white .btn-normal-content {
  color: var(--dark-grey-700, #373737);
}
button,
.btn-normal-content {
  color: var(--neutral-white, #FFF);
  text-align: center;

  /* Special/Subtitle */
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 1.167vw */
  letter-spacing: 0.042vw;
  text-decoration: none;
  cursor: pointer;
}
button{
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
}
.login-card-btn { display: inline-block; padding: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 600; border-radius: 0.208vw; }
.login-card-btn-dark { background: #4a4a4a; color: #fff; }
.login-card-btn-outline { background: #fff; color: #1a1a1a; border: 0.052vw solid #1a1a1a; }
.login-card-register { 
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}
.login-card-register-content {
  border: 0.052vw solid var(--light-grey-300, #F2F2F2);
  display: flex;
  width: 23.021vw;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.login-card-register-image { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}
.login-card-register-image img { width: 100%; height: 100%; object-fit: cover; }
/* === Strony formularzy (logowanie, rejestracja) – układ jak „Dodaj adres” === */
.form-page { display: flex; min-height: 60vh; margin: 0 -1rem; }
.form-page-empty { flex: 0 0 28%; min-width: 0; }
.form-page-content { max-width: 36.458vw; margin: 0 auto; background: #fff; padding: 2.5rem 3rem; }
.form-page-title { font-size: 1.15rem; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 1.75rem; }
.form-page-form .form-row { margin-bottom: 1rem; }
.form-page-form .form-row-inline { display: flex; gap: 1rem; }
.form-page-form .form-row-inline .form-row { flex: 1; margin-bottom: 0; }
.form-page-form input.form-input,
.form-page-form .form-input { width: 100%; padding: 0.6rem 0.75rem; border: 0.052vw solid #ccc; background: #fff; font-size: 1rem; border-radius: 0.104vw; font-family: inherit; }
.form-page-form input.form-input::placeholder,
.form-page-form .form-input::placeholder { color: #999; }
.form-page-form input.form-input:focus,
.form-page-form .form-input:focus { outline: none; border-color: #888; }
.form-page-form select.form-input:disabled { background: #f5f5f5; color: #666; cursor: not-allowed; opacity: 1; }
/* Pole daty: szary tekst gdy puste (jak placeholder), czarny gdy wybrano datę */
.form-page-form input[type="date"].form-input { color: #333; }
.form-page-form input[type="text"].form-input[data-date-placeholder] { color: inherit; }
.form-page-form input[type="text"].form-input[data-date-placeholder]::placeholder { color: #999; }
.form-page-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.form-page-actions .btn-ghost { 
  border: 0.052vw solid var(--dark-grey-700, #373737);
  display: flex;
  padding: 0.417vw 1.25vw 0.313vw 1.25vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-uniform);
  cursor: pointer;
  text-decoration: none;
}
.form-page-actions .btn-ghost:hover { background: #f5f5f5; border-color: #999; color: #333; }
.form-page-actions .btn-solid { background: #4a4a4a; color: #fff; border: none; padding: 0.5rem 1.25rem; cursor: pointer; font-size: 0.95rem; }
.form-page-actions .btn-solid:hover { background: #333; color: #fff; }
.form-page-link { margin-top: 1rem; font-size: 0.95rem; }
.form-page-link a { color: #4a4a4a; text-decoration: underline; }
.form-page-intro { margin: 0 0 1.25rem; color: #666; font-size: 0.95rem; }

/* Grupy pól (rejestracja) */
.form-group { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 0.052vw solid #eee; }
.form-group:last-of-type { border-bottom: none; }
.form-group-legend{
  margin-bottom: 1.25vw;
}
.form-group-legend-text { 
  color: var(--dark-grey-700, #373737);

  /* Text/Small Text */
  font-family: var(--font-uniform);
  font-size: var(--fs-24);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 1.021vw */ 
  letter-spacing: 0.05em;
}
.form-group-no-legend .form-group-legend { display: none; }
.form-group-info { font-size: 0.9rem; color: #555; margin: 0 0 0.75rem; }
.form-page-form .form-row.form-row-checkbox { 
  display: flex;
align-items: center;
gap: 0.417vw;
margin-bottom: 0.833vw;
 }
.form-row-checkbox label { font-weight: 400; cursor: pointer; margin-bottom: 0.25rem; }
.form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.95rem;
}
.form-checkbox-label input[type="checkbox"] {
  color: var(--dark-grey-700, #373737);

  /* Text/Small Text */
  font-family: var(--font-uniform);
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 1.021vw */
  margin: 0;
}
.form-checkbox-label span, .income-option-radio span { 
  color: var(--dark-grey-700, #373737);

  /* Text/Small Text */
  font-family: var(--font-uniform);
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; 
}
.form-cards-list { margin-bottom: 0.75rem; }
.form-cards-item { margin-bottom: 1rem; }
.btn-add-card { 
  display: flex;
  padding: 0.417vw 1.25vw 0.313vw 1.25vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--neutral-white, #FFF);
  border: 0.052vw dashed var(--dark-grey-700, #373737);
  font-family: var(--font-uniform);
  cursor: pointer;
  text-decoration: none;
  color: var(--dark-grey-700, #373737);
}
.form-page-link a:hover { color: #333; }
.form-page-content-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.833vw;
  align-self: stretch;
  margin-bottom: 2.083vw;
}
.form-page-content-title-text {
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-40);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 110%;
  margin: 0;
}
.form-group-legend-intro {
  color: var(--light-grey-400 , #969696);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
  padding-left: 0.26vw;
}
.form-group-legend-icon {
  color: var(--light-grey-400, #969696);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.form-group-legend-icon svg {
  width: 0.677vw;
  height: 0.677vw;
}
.form-group-no-legend{
  border-bottom: none;
  margin-bottom: 1.25vw;     
}

.income-section .income-option {
  margin-bottom: 0;
}
.income-option-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-uniform);
  font-size: var(--fs-14);
  color: var(--dark-grey-700, #373737);
  margin-bottom: 0.625vw;
}
.income-option-radio input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}
.income-option-panel {
  /* padding-left: 1.5rem; */
  margin-top: 0.417vw;
}
.income-option-panel-row {
  margin-bottom: 0.417vw;
}
.tax-office-autocomplete {
  position: relative;
}
.tax-office-autocomplete__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: #fff;
  border: 0.052vw solid #ccc;
  border-radius: 0.104vw;
  box-shadow: 0 0.417vw 1.25vw rgba(0, 0, 0, 0.08);
}
.tax-office-autocomplete__item {
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  color: #333;
}
.tax-office-autocomplete__item:hover {
  background: #f5f5f5;
}
.income-info {
  display: flex;
  align-items: flex-start;
  gap: 0.417vw;
  margin: 0.417vw 0 0;
  padding-left: 1.5rem;
  color: var(--light-grey-400, #969696);
  font-family: var(--font-uniform);
  font-size: var(--fs-12);
  line-height: 140%;
}
.income-info-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 0.1em;
}
.income-info-icon svg {
  width: 0.677vw;
  height: 0.677vw;
  min-width: 12px;
  min-height: 12px;
}
.about-section-1 {
  display: flex;
  padding-bottom: 6.042vw;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: #F6F5F3;
}
.about-section-1-content {
  display: flex;
  max-width: 63.438vw;
  width: 100%;
  padding: 4.51vw 8.02vw 0 8.02vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25vw;
}

/* About CMS content (dozwolone tagi: h1, h2, p, span, ul, li) */
.about-section-1-content h1,
.about-section-1-content h2,
.about-section-1-content p,
.about-section-1-content span,
.about-section-1-content ul,
.about-section-1-content li {
  margin: 0;
  color: var(--dark-grey-700, #373737);
}
.about-section-1-content h1 {
  width: 100%;
  text-align: center;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.104vw;
  text-transform: uppercase;
  margin-bottom: 0.833vw;
}
.about-section-1-content h2 {
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1;
  margin-top: 0.063vw;
  text-align: left;
}
.about-section-1-content p {
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.7;
  color: #5a5a5a;
  text-align: left;
}
.about-section-1-content ul {
  list-style: disc;
  padding-left: 1.4rem;
  text-align: left;
}
.about-section-1-content li {
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.7;
  color: #5a5a5a;
  margin-bottom: 0.313vw;
  text-align: left;
}
.about-section-1-content span {
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.7;
  color: #5a5a5a;
  text-decoration: underline;
}
.about-section-1-content a {
  text-decoration: underline;
  cursor: pointer;
}

/* === Topups / konto === */
.topups-section-1 {
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--beige-300);
  padding: 3.75vw 1.25vw 6.042vw;
}
.topups-section-1-content {
  width: 100%;
  max-width: 63.438vw;
  display: flex;
  flex-direction: column;
  gap: 0.729vw;
}
.topups-title {
  margin: 0 0 0.521vw;
  text-align: center;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-42);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.topups-total-box {
  background: #ffffff;
  min-height: 4.479vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topups-total-value {
  margin: 0;
  color: #e10f0f;
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-62);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
.topups-grid {
  display: inline-grid;
row-gap: 1.25vw;
column-gap: 1.25vw;
align-self: stretch;
grid-template-rows: repeat(3,fit-content(100%));
grid-template-columns: repeat(3,minmax(0,1fr));
}
.topups-card {
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  width: 20.313vw;
  height: 7.656vw;
}
.topups-brand {
  color: #3f3f3f;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-23);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: flex;
  padding: 1.25vw 2.083vw;
  justify-content: center;
  align-items: center;
  gap: 0.417vw;
  flex: 1 0 0;
  align-self: stretch;
  width: 10.156vw;
}
.topups-brand-logo {
  display: block;
  width: 5.781vw;
  height: 5.156vw;
  object-fit: contain;
}
.topups-brand-name {
  display: block;
  max-width: 100%;
  text-align: center;
  font-size: var(--fs-18);
  line-height: 1.15;
  word-break: break-word;
}
.topups-amount {
  color: #e10f0f;
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-45);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  width: 10.156vw;
  text-align: center;
  height: 100%;
  align-content: center;
}
/* Delikatne dopasowania „logo-like” bez obrazków */
.topups-brand--quickstep { font-size: var(--fs-20); color: #2c3f9f; }
.topups-brand--erkado { color: #b12424; }
.topups-brand--porta { color: #2f6f5a; }
.topups-brand--kaindl { color: #8f8f8f; }

/* === Produkty premiowane (2 duze bloki) === */
.products-section {
  width: 100%;
  background: var(--beige-300);
  padding: 3.75vw 1.25vw 5vw;
  display: flex;
  flex-direction: column;
  gap: 0.938vw;
}
.products-section-title {
  margin: 0 0 0.521vw;
  text-align: center;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-42);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.products-block-wide {
  width: min(93.75vw, 100%);
  margin: 0 auto;
  min-height: 27.083vw;
}
.products-block-wide-media,
.products-block-wide-content {
  height: 27.083vw;
}
.products-block-wide-content {
  background: #7a777c;
}
/* .products-block-wide .home-block-wide-title {
  font-size: 3.021vw;
}
.products-block-wide .home-block-wide-text {
  font-size: 0.938vw;
  letter-spacing: 0.04em;
}
.products-block-wide .btn-hero {
  margin-top: 0.208vw;
} */

/* === Products tables (doors/floors) === */
.products-table-section {
  background: var(--beige-300);
  padding: 2.5vw 1.25vw 5vw;
  width: 62.5vw;
  margin: 0 auto;
}
.products-table-header {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25vw;
}
.products-table-title {
  margin: 0;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-38);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.products-filters {
  width: 100%;
  margin: 0 auto 0.833vw;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.625vw;
  align-items: center;
}
.products-filter-input {
  width: 100%;
  min-height: 2.396vw;
  border: 0.052vw solid #d7d7d7;
  background: #fff;
  padding: 0.521vw 0.729vw;
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
}
.products-filter-btn {
  min-height: 2.396vw;
  padding: 0 1.146vw;
}
.products-table-wrap {
  max-width: 36.458vw;
  /* margin: 0 auto; */
  background: #fff;
  border: 0.052vw solid #e3e3e3;
  overflow-x: auto;
}
.products-table-section .products-table-wrap {
  max-width: 100%;
}
.products-table {
  width: 100%;
  border-collapse: collapse;
}
.products-table th,
.products-table td {
  border-bottom: 0.052vw solid #ededed;
  text-align: left;
  padding: 0.729vw 0.833vw;
  vertical-align: top;
}
.products-table th {
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-15);
  color: var(--dark-grey-700, #373737);
  background: #f5f5f5;
}
.products-table td {
  font-family: var(--font-uniform);
  font-size: var(--fs-15);
  color: #4e4e4e;
  line-height: 1.4;
}
.products-table tbody tr:hover {
  background: #fafafa;
}
.products-archive-action {
  max-width: 62.5vw;
  margin: 0.833vw auto 0;
}
.topups-sync-action
{
    max-width: max-content;
    margin: 0;
}
.products-archive-btn, .topups-sync-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.292vw;
  padding: 0.417vw 0.938vw;
  text-transform: lowercase;
}
.products-archive-empty, .topups-sync-empty {
  display: inline-block;
  color: #6b6b6b;
  font-family: var(--font-uniform);
  font-size: var(--fs-14);
}

/* === Do pobrania === */
.downloads-section {
  background: var(--beige-300);
  padding: 2.917vw 1.25vw 5vw;
  margin-top: 4.167vw;
}
.downloads-title {
  margin: 0;
  text-align: center;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-40);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.downloads-subtitle {
  margin: 0.521vw 0 1.25vw;
  text-align: center;
  color: #666;
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
}
.downloads-grid {
  max-width: 62.5vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.833vw;
}
.downloads-card {
  background: #fff;
  border: 0.052vw solid #e5e5e5;
  padding: 1.042vw;
  display: flex;
  flex-direction: column;
  gap: 0.521vw;
}
.downloads-card-title {
  margin: 0;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.2;
}
.downloads-card-text {
  margin: 0;
  color: #5f5f5f;
  font-family: var(--font-uniform);
  font-size: var(--fs-15);
  line-height: 1.5;
  min-height: 3.438vw;
}
.downloads-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* === Konto (układ na bazie styli rejestracji) === */
.account-form-page {
  margin: 0;
  min-height: 29.167vw;
  background: #fff;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  /* border: 0.052vw solid #e7e7e7; */
}
.account-form-page-menu {
  border-right: 0.052vw solid #e2e2e2; /* linia oddzielajaca menu od zawartosci */
  display: flex;
  padding: 4.531vw 2.083vw 6.042vw 10.156vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.667vw;
  flex: 1 0 0;

}
.account-form-page-nav {
  display: flex;
  flex-direction: column;
  gap: 1.042vw;
  width: 100%;
}
.account-form-page-link {
  display: inline-block;
  width: fit-content;
  text-decoration: none;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform);
  font-size: var(--fs-17);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0;
  line-height: 140%;
  position: relative;
}
.account-form-page-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.208vw;
  height: 0.052vw;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.account-form-page-link:hover {
  color: #111;
}
.account-form-page-link:hover::before {
  opacity: 1;
}
.account-form-page-link.is-active::before {
  opacity: 1;
}
.account-form-page-logout {
  margin-top: 3.333vw;
  border: 0.052vw solid var(--dark-grey-700, #373737);
  display: inline-flex;
  padding: 0.417vw 1.25vw 0.313vw 1.25vw;
  justify-content: center;
  align-items: center;
  color: var(--dark-grey-700, #373737);
  text-decoration: none;
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  line-height: 1;
  text-transform: lowercase;
}
.account-form-page-logout:hover {
  background: #f5f5f5;
  border-color: #999;
  color: #333;
  text-decoration: none;
}
.account-form-page-nav-line {
  width: 100%;
  height: 0.052vw;
  background: #e2e2e2;
}
.account-form-page-content {
  display: flex;
  padding: 4.531vw 0 6.042vw 9.323vw;
  flex-direction: column;
  align-items: flex-start;
  max-width: 66.771vw;
  width: 100%;
}
.account-panel-title {
  margin: 0 0 1.146vw;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-x-medium);
  font-size: var(--fs-42);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.account-fields .form-input[readonly] {
  color: #666;
  background: #fff;
}
.account-fields .form-page-actions {
  margin-top: 1.25rem;
}
.account-topups-total {
  margin: 0 0 0.833vw;
  color: #4d4d4d;
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-20);
}
.account-topups-total strong {
  color: #1a1a1a;
}
.account-topups-list {
  margin-top: 0.625vw;
}
.account-cards-list {
  margin-top: 0.521vw;
}
.account-subtitle {
  margin: 1.25vw 0 0.625vw;
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform-medium);
  font-size: var(--fs-24);
  font-weight: 500;
}
.account-add-card-form .form-page-actions {
  margin-top: 0.75rem;
}
.account-form-page-email-label {
  color: var(--dark-grey-300, #969696);

  /* Text/Small Text */
  font-family: var(--font-uniform);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 140%;
}
.account-form-page-email {
  color: var(--dark-grey-700, #373737);
  font-family: var(--font-uniform);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.account-form-page-logout svg {
  margin-right: 0.833vw;
}

.account-fields.form-page-form {
  width: 26.042vw;
}
.form-page-form.account-add-card-form {
  width: 23.958vw;
}

.home-block-wide-media-1024{
  display: none;
}
.home-block-wide-media-desktop{
  display: block;
}

/* === Strona prac serwisowych (bez menu) === */
body.page-maintenance {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.page-maintenance main.main-home {
  flex: 1 0 auto;
  display: flex;
}
body.page-maintenance .view-wrap,
body.page-maintenance .hero-wrap {
  flex: 1 0 auto;
  width: 100%;
  height: 100%;
}
.maintenance-hero {
  min-height: calc(100vh - 8vw);
  justify-content: center;
  align-items: center;
}
.maintenance-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25vw;
  padding: 2vw 4vw;
  max-width: 50vw;
}
.maintenance-hero__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-uniform-medium);
  font-size: 4vw;
  font-weight: 500;
  line-height: 110%;
  text-shadow: 0 0 2.5vw #000;
}
.maintenance-hero__text {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-uniform-medium);
  font-size: 2vw;
  font-weight: 500;
  line-height: 150%;
  text-shadow: 0 0 2.5vw #000;
}

/* === Banner cookies (kontrakt 1:1) === */
.cookies-settings-text form {
  display: inline-block;
  clear: both;
}
.cookies-settings-text label { line-height: 25px; }
.cookies-settings-text input[type="checkbox"],
.cookies-settings-text label {
  float: left;
  display: inline-block;
  width: auto;
  cursor: pointer;
}
.cookies-settings-text label,
.cookies-settings-text input[type="checkbox"] {
  margin-left: 25px;
}
.cookies-settings-text { display: none; }
.cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  visibility: hidden;
  border-top: 1px solid #eee;
  font-family: var(--font-uniform, sans-serif);
  font-size: var(--fs-16);
}
.cookies > .wrawpper {
  max-width: 1280px;
  margin: 0 auto;
}
.cookies p {
  padding: 16px 24px;
  line-height: 16px;
}
.cookies-close,
.cookies-reject,
.cookies-settings {
  color: #fff;
  display: block;
  cursor: pointer;
  float: right;
  margin: 10px 0 10px 0;
  background-color: #e3001b;
  border: 1px solid #e3001b;
  text-transform: uppercase;
  font-size: var(--fs-16);
  line-height: 1.0;
  transition: background ease-in 0.3s, color ease-in 0.3s;
  border-radius: 0 !important;
  padding: 0.417vw 1.25vw 0.313vw 1.25vw;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  user-select: none;
  font-family: var(--font-uniform);
}
.cookies-reject {
  color: #e3001b;
  background-color: transparent;
  margin-right: 10px;
}
.cookies-reject:hover {
  background-color: #e3001b;
  color: #fff;
}
.cookies-settings { margin-right: 10px; }
.cookies--open { visibility: visible; }
.cookies > .wrawpper::after {
  content: "";
  display: table;
  clear: both;
}