/* ==========================================================================
   Bella Plast – Newsletter LP
   Style marki nadpisujące Bootstrap 5
   Źródło tokenów: bellaplast.com.pl (Avada / fusion-styles)
   Typografia: Raleway (body + nagłówki), Montserrat (nagłówki stopki)
   ========================================================================== */

:root {
  /* --- Kolory marki Bella Plast --- */
  --bp-red: #e30011;        /* główny kolor marki */
  --bp-red-dark: #c43f3f;   /* przygaszona czerwień */
  --bp-dark: #1d242d;       /* grafit / nagłówki */
  --bp-yellow: #fed03d;     /* akcent */
  --bp-light: #f5f5f5;      /* jasne tło sekcji */
  --bp-gray: #747474;       /* tekst podstawowy (jak na stronie) */
  --bp-gray-dark: #3f3f3f;  /* tekst ciemniejszy / akcenty */
  --bp-white: #ffffff;

  /* --- Fonty (zgodnie z bellaplast.com.pl) --- */
  --bp-font-body: "Raleway", Arial, Helvetica, sans-serif;
  --bp-font-heading: "Raleway", Arial, Helvetica, sans-serif;
  --bp-font-footer-heading: "Montserrat", Arial, Helvetica, sans-serif;

  /* --- Mapowanie na zmienne Bootstrapa --- */
  --bs-primary: var(--bp-red);
  --bs-primary-rgb: 227, 0, 17;
  --bs-dark: var(--bp-dark);
  --bs-dark-rgb: 29, 36, 45;
  --bs-body-color: var(--bp-gray);
  --bs-body-font-family: var(--bp-font-body);
  --bs-body-font-size: 1rem;        /* 16px */
  --bs-body-font-weight: 500;       /* strona używa Raleway 500 */
  --bs-body-line-height: 1.7;
  --bs-link-color: var(--bp-red);
  --bs-link-hover-color: var(--bp-red-dark);
  --bs-border-radius: .25rem;

  /* --- Newsletter --- */
  --bp-container: 1140px;
}

/* --------------------------------------------------------------------------
   Typografia (zgodna z bellaplast.com.pl)
   body: Raleway 500, #747474 • H1 700/36 • H2 700/28 • H3 600/24
   -------------------------------------------------------------------------- */
body {
  font-family: var(--bp-font-body);
  font-weight: 500;
  color: var(--bp-gray);
  background-color: #e9ecef; /* tło "ramki" wokół newslettera */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bp-font-heading);
  color: var(--bp-dark);
  font-weight: 600;
  line-height: 1.3;
}

h1, .h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); } /* ~36px */
h2, .h2 { font-size: clamp(1.5rem, 3vw, 1.75rem); }  /* ~28px */
h3, .h3 { font-size: 1.5rem; font-weight: 500; }     /* 24px */
h4, .h4 { font-size: 1.25rem; font-weight: 500; }    /* 20px */

strong, b { font-weight: 600; }

.text-muted-bp { color: var(--bp-gray) !important; }
.lead { font-size: 1.125rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   Kontener newslettera – maks. 1140px, wycentrowany, biała "kartka"
   -------------------------------------------------------------------------- */
.newsletter {
  max-width: var(--bp-container);
  margin-inline: auto;
  background-color: var(--bp-white);
  box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}

/* domyślny container Bootstrapa również ograniczamy do 1140px */
.container, .container-lg, .container-xl, .container-xxl {
  max-width: var(--bp-container);
}

/* --------------------------------------------------------------------------
   Komponenty
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--bp-red);
  --bs-btn-border-color: var(--bp-red);
  --bs-btn-hover-bg: var(--bp-red-dark);
  --bs-btn-hover-border-color: var(--bp-red-dark);
  --bs-btn-active-bg: var(--bp-red-dark);
  --bs-btn-active-border-color: var(--bp-red-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  padding-inline: 1.75rem;
}

.btn-outline-primary {
  --bs-btn-color: var(--bp-red);
  --bs-btn-border-color: var(--bp-red);
  --bs-btn-hover-bg: var(--bp-red);
  --bs-btn-hover-border-color: var(--bp-red);
  --bs-btn-active-bg: var(--bp-red);
  font-weight: 600;
}

.btn-dark {
  --bs-btn-bg: var(--bp-dark);
  --bs-btn-border-color: var(--bp-dark);
  --bs-btn-hover-bg: #2b343f;
  --bs-btn-hover-border-color: #2b343f;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sekcje */
.section { padding-block: 3rem; }
.section--light { background-color: var(--bp-light); }
.section--dark  { background-color: var(--bp-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* Pasek akcentu marki */
.bp-accent-bar { height: 4px; background-color: var(--bp-red); }

/* Nagłówek newslettera */
.nl-header { padding-block: 1.25rem; }
.nl-header .logo { max-height: 56px; width: auto; }

/* --------------------------------------------------------------------------
   Newsletter – komponenty wzorowane na układzie Villa Nova
   -------------------------------------------------------------------------- */

/* Górny pasek "Zobacz w przeglądarce" */
.nl-preheader {
  font-size: .8125rem;
  padding-block: .75rem;
}
.nl-preheader a { color: var(--bp-gray); text-decoration: underline; }

/* Nawigacja */
.nl-nav { padding-block: .25rem 1.5rem; }
.nl-nav a {
  color: var(--bp-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .95rem;
  font-weight: 500;
}
.nl-nav a:hover { color: var(--bp-red); }

/* Przycisk newslettera – kanciasty, wersaliki, ciemny (jak we wzorcu) */
.btn-nl {
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: .7rem;
  background-color: var(--bp-dark);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-nl:hover { background-color: var(--bp-red); color: #fff; }

/* Nagłówek sekcji + wstęp (wycentrowane) */
.nl-section { padding-block: 2.75rem; }
.nl-heading {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--bp-dark);
  margin-bottom: 1.25rem;
}
.nl-intro {
  text-align: center;
  color: var(--bp-gray-dark);
  max-width: 620px;
  margin: 0 auto 1.5rem;
}

/* Karta produktu (nazwa + typ + przycisk) */
.nl-product-name {
  text-align: center;
  color: var(--bp-red);
  font-weight: 500;
  font-size: 1.375rem;
  margin-bottom: .35rem;
}
.nl-product-type {
  text-align: center;
  color: var(--bp-gray-dark);
  margin-bottom: 1.1rem;
}

/* Podpisy pod zdjęciami */
.nl-caption {
  font-size: .8125rem;
  color: var(--bp-gray);
  margin-top: .6rem;
  margin-bottom: 0;
}

/* Cienki separator sekcji */
.nl-divider {
  border: 0;
  border-top: 1px solid #e2e2e2;
  margin-block: .5rem;
}

/* Galeria "Share Your Projects" – brak odstępów między kafelkami */
.nl-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nl-gallery .col { position: relative; }
.nl-gallery .pin {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; opacity: .9;
}

/* --------------------------------------------------------------------------
   BP15 EXT – komponenty produktowe
   -------------------------------------------------------------------------- */

/* Header – logo (biała płytka) przyklejone do góry na zdjęciu tła */
.nl-masthead {
  --nl-logo-h: 58px;
  --nl-offset: 1rem;
  display: flex;
  align-items: flex-start;        /* logo przyklejone do góry */
  justify-content: center;
  padding-bottom: calc(var(--nl-logo-h) + var(--nl-offset)); /* przestrzeń pod logiem = wysokość logo + offset */
  background-image: url('../images/header_background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.nl-masthead__logo {
  display: inline-block;
  background: #fff;
  padding: .7rem 1.5rem;
}
.nl-masthead__logo img { display: block; max-height: var(--nl-logo-h); width: auto; }

/* Hero – render produktu na całą szerokość; tytuły w rogach po lewej */
.nl-hero {
  --nl-pad-x: clamp(1.75rem, 5vw, 4rem);
  --nl-pad-y: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  background-color: #B7B7B5;
  color: var(--bp-dark);
  overflow: hidden;
}
.nl-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;          /* banner – przycina pusty górny/dolny margines renderu */
  object-fit: cover;
  object-position: center 65%;  /* listwa nieco wyżej w kadrze */
}
/* Eyebrow + tytuł – lewy górny róg */
.nl-hero__head {
  position: absolute;
  top: var(--nl-pad-y);
  left: 0;
  z-index: 2;
  max-width: 52%;
  padding-inline: var(--nl-pad-x);
}
/* Opis – lewy dolny róg */
.nl-hero__subtitle {
  position: absolute;
  bottom: var(--nl-pad-y);
  left: 0;
  z-index: 2;
  max-width: 52%;
  margin: 0;
  padding-inline: var(--nl-pad-x);
  color: var(--bp-gray-dark);
  font-size: 1.125rem;
  font-weight: 700;
}
.nl-hero__eyebrow {
  display: inline-block;
  background: var(--bp-red);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1;
  padding: .4rem .85rem;
  margin-bottom: 1rem;
}
.nl-hero__title {
  color: var(--bp-dark);
  font-weight: 600;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
}
/* Mobile – wyższy kadr i szersza kolumna tytułów */
@media (max-width: 575.98px) {
  .nl-hero__img { aspect-ratio: 4 / 3; }
  .nl-hero__head,
  .nl-hero__subtitle { max-width: 78%; }
}

/* Znak ochrony – wzór użytkowy U.P.R.P. (prawy górny róg hero, przy krawędzi) */
.nl-hero__uprp {
  position: absolute;
  right: 0;
  top: clamp(1rem, 3vw, 2rem);
  z-index: 2;
}
.nl-hero__uprp img {
  display: block;
  width: clamp(190px, 24vw, 270px);
  height: auto;
}
/* Na wąskich ekranach mniejszy, by nie nachodził na treść hero */
@media (max-width: 575.98px) {
  .nl-hero__uprp { top: 1rem; }
  .nl-hero__uprp img { width: 150px; }
}

/* Nadtytuł / eyebrow */
.nl-eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--bp-red);
  margin-bottom: .75rem;
}

/* Badge "Innowacja w standardzie" */
.bp-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: var(--bp-red);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .65rem 1.25rem;
  border-radius: 0;
}
.bp-badge i { font-size: 1rem; }

/* Karta rozmiaru (2 kolumny 4mm / 11mm) */
.size-card {
  border: 1px solid #e2e2e2;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.size-card .size-card__body { padding: 1.5rem; }
.size-card__name {
  color: var(--bp-dark);
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: .25rem;
}
.size-card__tag {
  display: inline-block;
  background-color: var(--bp-light);
  color: var(--bp-gray-dark);
  font-size: .8125rem;
  font-weight: 500;
  padding: .25rem .7rem;
  margin-bottom: 1rem;
}
.spec {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid #eee;
  font-size: .95rem;
}
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--bp-gray); margin: 0; font-weight: 400; }
.spec dd { color: var(--bp-dark); margin: 0; font-weight: 500; text-align: right; }

/* Link do pełnej specyfikacji pod kartą */
.size-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  color: var(--bp-red);
  font-weight: 600;
  font-size: .95rem;
}
.size-card__link:hover { color: var(--bp-red-dark); }
.size-card__link i { transition: transform .15s ease; }
.size-card__link:hover i { transform: translateX(3px); }

/* Zalety (3 kolumny z ikonami) */
.advantage { text-align: center; padding: .5rem; }
.advantage__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--bp-light);
  border-radius: 50%;
  color: var(--bp-red);
  font-size: 1.75rem;
}
.advantage__title {
  font-weight: 600;
  color: var(--bp-dark);
  font-size: 1.125rem;
  margin-bottom: .5rem;
}
.advantage p { color: var(--bp-gray-dark); font-size: .95rem; margin: 0; }

/* Duże zdjęcie kolorystyki – ograniczona wysokość, cover, środek w pionie */
.nl-color-photo {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 420px);
  object-fit: cover;
  object-position: center 63%;
}

/* Kolory listwy */
.color-swatch { text-align: center; }
.color-swatch__chip {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid #e2e2e2;
  margin-bottom: .6rem;
}
.color-swatch__chip--any {
  background: linear-gradient(135deg, #e30011 0%, #fed03d 28%, #3aa856 52%, #2b7cd3 74%, #7d3cc0 100%);
}
.color-swatch__name { font-weight: 500; color: var(--bp-dark); font-size: .95rem; }
.color-swatch__ral { color: var(--bp-gray); font-size: .8125rem; }

/* Sekcja CTA + formularz (na ciemnym tle marki) */
.nl-cta {
  background-color: var(--bp-dark);
  color: #fff;
  padding-block: 3rem;
}
.nl-cta .nl-heading,
.nl-cta .nl-intro { color: #fff; }
.lead-form .form-control,
.lead-form .form-select {
  border: 0;
  border-radius: 0;
  padding: .75rem 1rem;
}
.lead-form .form-control:focus {
  box-shadow: 0 0 0 .2rem rgba(227, 0, 17, .35);
}
.lead-form .form-check-label { font-size: .8125rem; color: #c7ccd2; }
.lead-form .form-check-label a { color: #fff; text-decoration: underline; }
.lead-form .btn-submit {
  background-color: var(--bp-red);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .85rem 2rem;
}
.lead-form .btn-submit:hover { background-color: #fff; color: var(--bp-dark); }
.lead-form__note { color: #aeb4bb; font-size: .8125rem; margin: .9rem 0 0; }

/* Pasek zaufania (certyfikaty) */
.trust-bar { background-color: var(--bp-light); padding-block: 1.5rem; }
.trust-bar .item {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--bp-gray-dark); font-size: .875rem; font-weight: 500;
}
.trust-bar .item i { color: var(--bp-red); font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   Stopka – minimalistyczna
   -------------------------------------------------------------------------- */
.nl-footer {
  background-color: var(--bp-light);
  color: var(--bp-gray);
  font-size: .875rem;
}
.nl-footer__main { padding-block: 2.75rem; }

.nl-footer__logo { max-height: 48px; width: auto; }
.nl-footer__about { color: var(--bp-gray); max-width: 480px; margin: 1rem auto 1.25rem; }

/* Kontakt w jednej linii */
.nl-footer__contact { color: var(--bp-gray); margin-bottom: 1.25rem; }
.nl-footer__contact a { color: var(--bp-gray); text-decoration: none; }
.nl-footer__contact a:hover { color: var(--bp-red); }
.nl-footer__contact .sep { color: #cfcfcf; margin-inline: .55rem; }

/* Social – czyste ikony, bez ramek */
.nl-footer .social a {
  color: var(--bp-gray);
  font-size: 1.2rem;
  margin-inline: .55rem;
  text-decoration: none;
}
.nl-footer .social a:hover { color: var(--bp-red); }

/* Dolny pasek (ciemny, slim) */
.nl-footer__bar {
  background-color: var(--bp-dark);
  color: #aeb4bb;
  font-size: .8125rem;
  padding-block: 1rem;
}
.nl-footer__bar a { color: #fff; text-decoration: none; }
.nl-footer__bar a:hover { color: var(--bp-red); }
.nl-footer__bar .sep { color: #4a525c; margin-inline: .6rem; }