/* RESET */
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* TYPO / BASE (bez kolorów na stałe) */
body{
  font-family:"Poppins",sans-serif; font-weight:400;
  font-size:12px; line-height:130%; letter-spacing:.1px;
  min-height:100vh; display:flex; flex-direction:column;
  background: var(--site-bg); color: var(--site-text);
}
body.background {

    background-color: var(--bg-darken2);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}
@media (min-width: 992px){
.content {

}
}
.menu-holder {
    background-color: var(--site-bg);
    position: relative;
}
@media (min-width:768px){ body{ font-size:16px; } }
p {
    margin-bottom: 16px;
}
sup {
    line-height: 1;
}
/* A11y utils */
.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; padding:0; }

/* CONTAINERS */
.container{ padding:0 16px; margin:0 auto; width:100%; }
.container-sm{ max-width:980px; }
@media (min-width:768px){ .container{ padding:0 32px; } }
@media (min-width:1360px){ .container{ max-width:1500px; } }
.container-article {
    padding-bottom: 32px;
}
.article-content {
    padding: 16px 8px;
    background: var(--article-content);
    border-radius: 16px;
}
@media (min-width: 768px){
    .article-content {
    padding: 32px;
    }
    .container-article {
    padding-bottom: 64px;
}
}

/* ACCESSIBILITY TOOLS */
.accessibility-tools{
  display:flex; gap:8px; margin-left:auto; align-items:center;
  line-height:1; padding:4px 16px; width:100%; justify-content:flex-end;
  background: var(--acc-bg);
}
.accessibility-tools a{ display:flex; align-items:center; }
.accessibility-tools svg{ width:24px; transition:.3s ease-in-out; fill: var(--acc-icon); }
.accessibility-tools svg:hover{ fill: var(--acc-icon-hover); }
.menu-bar .logo-primary {
    text-align: left;
}
.menu-bar .logo-primary img{ width: 96px; }
/* NAV / MENU */
.menu-bar{ display:flex; width:100%; justify-content:space-between; align-items:center; padding:16px 0; }


@media (min-width: 768px){
    .menu-bar .logo-primary img{ width: 164px; }
}
.page-header {
        padding-top: 32px;
        padding-bottom: 32px;
        margin-bottom: 32px;
    }
@media (min-width: 992px){
    #navToggle {
        display: none;
    }
    .phone-contant {
        display: none;
    }
    .page-header {
        padding-top: 64px;
        padding-bottom: 32px;
        margin-bottom: 64px;
    }
}
.page-header .lead {
    max-width: 620px;
}
@media (max-width:991px){
    /* Przycisk */
    #navToggle {
      position: relative;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: #111;             /* kolor kresek (używamy currentColor niżej) */
    }

    /* Kreski */
    #navToggle span,
    #navToggle span::before,
    #navToggle span::after {
       border-radius: 3px;
      position: absolute;
      left: 50%;
      width: 32px;
      height: 4px;
      background: var(--toggle-bg);
      content: "";
      display: block;
      transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease, background 0.2s ease;
    }

    /* Kreska środkowa */
    #navToggle span {
      top: 50%;
      transform: translate(-50%, -50%);
    }

    /* Górna i dolna */
    #navToggle span::before {
      top: -8px;
      transform: translateX(-50%);
    }

    #navToggle span::after {
      top: 8px;
      transform: translateX(-50%);
    }

    /* Stan aktywny → X */
    #navToggle.active span {
      background: transparent; /* ukryj środkową */
    }

    #navToggle.active span::before {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    #navToggle.active span::after {
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Dostępność: focus outline */
    #navToggle:focus-visible {
      outline: 2px solid #4c9ffe;
      outline-offset: 3px;
    }

    /* Preferencje systemowe: bez animacji */
    @media (prefers-reduced-motion: reduce) {
      #navToggle span,
      #navToggle span::before,
      #navToggle span::after {
        transition: none;
      }
    }

    .phone-contant {
        padding: 16px;
        background-color: var(--phone-contant);
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: center;
        margin-top: 32px;
    }
    .nav-container{
        display:none;
        position: absolute;
        z-index: 3;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--nav-container);
        padding: 16px;
        border-bottom: solid 4px #0B1227;
        justify-content: center;
        flex-direction: column;
    }
    .nav-container a {
        font-size: 16px;
        min-width: 160px;
        text-align: center;
    }
    .nav-container.active {
        display: flex;

    }
    .nav-container.active .mod-menu {
        flex-direction: column;
        align-items: center;
    }
}
.menu-bar .mod-menu{ display:flex; list-style:none; gap:8px; }
.menu-bar .nav-item a{
  padding:12px 16px; display:block; text-decoration:none;
  font-family:"Roboto Condensed",sans-serif; letter-spacing:.2px; font-weight:600;
  transition:.3s ease-in-out; border-radius:4px;
  color: var(--nav-link); background: var(--nav-link-bg);
}
.menu-bar .nav-item a:hover{ background: var(--nav-link-hover-bg); color: var(--nav-link-hover); }
.menu-bar .nav-item.active a{ background: var(--nav-link-active-bg); color: var(--nav-link-active); }

/* LINKS */
a{ color: var(--link); transition:.3s ease-in-out; }
a:hover{ color: var(--link-hover); }

/* FORMS */
label{ font-family:"Roboto Condensed",sans-serif; display:block; font-size:12px; margin-bottom:4px; font-weight:700; }
input{
  width:100%; min-height:44px; padding:8px 16px; font-family:"Poppins",sans-serif; font-size:14px;
  border:1px solid var(--os-border-color); border-radius:4px;
  transition:.3s ease-in-out; outline:2px solid transparent; outline-offset:2px;
  background: var(--os-input-bg); color: var(--os-text);
}
input:focus{ outline-color: var(--os-focus-outline); }
input[aria-disabled="true"]{ background:var(--os-disabled-bg); color:var(--os-disabled-text); cursor:not-allowed; }
input[aria-invalid="true"]{ border-color:var(--os-invalid-border); box-shadow:0 0 0 3px var(--os-invalid-ring); }

button,.btn{
  font-family:"Roboto Condensed",sans-serif; min-height:44px; padding:8px 24px;
  cursor:pointer; font-size:14px; font-weight:500; border-radius:4px; display:inline-flex;
  text-transform:uppercase; align-items:center; text-decoration:none; white-space:nowrap;
  background: var(--btn-bg); color: var(--btn-text); border:2px solid var(--btn-border); transition:.3s ease-in-out;
  line-height: 1;
}
button:hover,.btn:hover{ background: var(--btn-hover-bg); }

/* VARIANTY PRZYCISKÓW */
.btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-border); }
.btn-primary:hover{ background:var(--btn-primary-bg-hover); color:var(--btn-primary-text); }
.btn-secondary{ background:transparent; color:var(--btn-primary-bg); border:1px solid var(--btn-primary-bg); }
.btn-secondary:hover{ background:var(--btn-primary-bg-hover); color:var(--btn-primary-text); }
.btn-outline{ background:transparent; color:var(--btn-outline-text); border:1px solid var(--btn-outline-border); }
.btn-outline:hover{ background:var(--btn-outline-hover-bg); color:var(--btn-outline-hover-text); }
.btn-sm {
    padding: 8px 16px;
    min-height: 32px;
}
.btn-white {
    background-color: var(--site-bg);
    color: var(--link);
    border-width: 1px;
}
.btn-white:hover {
    background-color: var(--acc-bg);
}
/* HEADINGS */
strong{ font-weight:600; }
h1,.h1,h2,.h2,h3,.h3{
  font-family:"Roboto Condensed",sans-serif; font-weight:800; line-height:1.1; color: var(--heading-color);
}
h1,.h1{ font-size:32px; margin-bottom:24px; }
h2,.h2{ font-size:26px; margin-bottom:16px; }
h3,.h3{ font-size:20px; margin-bottom:12px; }
@media (min-width:991px){
  h1,.h1{ font-size:50px; margin-bottom:32px; }
  h2,.h2{ font-size:42px; margin-bottom:32px; }
  h3,.h3{ font-size:28px; margin-bottom:16px; }
}
@media (min-width:1200px){
  h1,.h1{ font-size:58px; }
  h2,.h2{ font-size:52px; }
  h3,.h3{ font-size:32px; }
}

/* LEAD */
.lead{ font-size:16px; line-height:1.2; margin-bottom:16px; }
@media (min-width:768px){ .lead{ font-size:20px; } }

/* HERO */
.mod-hero{
  padding:64px 0; min-height:720px; display:flex; align-items:end;

}
.mod-hero .title-label {
    color: #FFF;
    border-color: #FFF;
}
.mod-hero .title-label span {
    border-color: #FFF;
}
.mod-hero .title-lg {
    color: #FFF;
}
.title-label{
  display:inline-flex; padding:8px 16px 8px 8px; border-radius:32px;
  border:1px solid var(--hero-label-border); font-size:14px; font-weight:600; gap:16px;
  align-items:center; line-height:1; color: var(--hero-label-text); margin-bottom:16px;
}
.title-label span{ display:block; width:16px; height:16px; border:4px solid var(--hero-dot-color); border-radius:32px; }
.title-label.label-net {
    margin-bottom: 0;
    margin-left: 32px;
    background-color: var(--site-bg)
}
.hero-row{ }
.hero-content{ padding-bottom:32px; width:100%; }
.hero-text{ margin-bottom:32px; }
.hero-images{ display:flex; gap:32px; align-items:center; width:100%; }
@media (max-width:767px){ .hero-images{ flex-wrap:wrap; } .hero-image{ width:100%; } }
.hero-image:first-child{ height:260px; align-items:end; }
.hero-image:last-child{ height:260px; align-items:start; }
@media (min-width:768px){ .hero-image{ width:50%; } }
@media (min-width:992px){
  .hero-row{ display:flex; align-items:end; gap:32px; }
  .hero-image:first-child{ height:500px; width:60%; }
  .hero-image:last-child{ height:300px; width:40%; }
}
@media (min-width:1200px){
  .hero-row{ gap:64px; }
  .hero-content{ padding-bottom:64px; max-width:55%; }
  .hero-images{ width:60%; }
}
.hero-images .hero-image{
  border-radius:16px; background-size:cover; background-position:center;
  display:flex; padding:16px 32px 16px 16px;
}
.hero-images .hero-image span{
  display:block; border-radius:8px; padding:16px; font-weight:600;
  background: var(--glass-bg); color: var(--glass-text);
  box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
}

/* OFFERS SEARCH */
.offers-search{
  max-width:max-content; padding:16px; border-radius:16px;
  box-shadow: var(--card-shadow); background: var(--os-bg-invert);
}
@media (min-width:768px){ .offers-search{ padding:32px; } }
.offers-search fieldset{ border:transparent; }
.offers-search legend{ font-size:24px; margin-bottom:16px; color: var(--os-text-invert); }
.offers-search label{ color: var(--os-text-invert); }

/* AUTOCOMPLETE */
.os-suggest-wrap{ position:relative; }
.os-suggest-list{
  position:absolute; left:0; right:0; top:100%; margin-top:4px; border-radius:8px; padding:4px 0;
  border:1px solid var(--os-suggest-border); background: var(--os-bg); box-shadow: var(--os-suggest-shadow);
  max-height:260px; overflow:auto; z-index:9999; font-family:"Poppins",sans-serif; font-size:14px;

}
.os-suggest-item{ padding:8px 10px; cursor:pointer; line-height:1.35; }
.os-suggest-item:hover, .os-suggest-item[aria-selected="true"]{ background: var(--os-suggest-hover); }

/* GLOBAL MESSAGE */
.os-global-msg[hidden]{ display:none!important; }
.os-global-msg{
  margin-top:10px; padding:10px 12px; border-radius:6px; font-size:20px; line-height:1.45;
  border-left:4px solid #FFFFFF; border:1px solid #FFFFFF;
  background:var(--os-alert-bg); color: #FFFFFF;
  margin-bottom: 32px;
  max-width: 840px;
}
.os-global-msg::before{ content:"⚠ "; margin-right:4px; }

/* GRID helper */
.os-grid{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width: 576px){
    .os-grid>div {width: 100%;}
}
/* COUNTERS */
.counters{ display:flex; gap:32px; align-items:end; }
@media (max-width:991px){ .counters{ flex-wrap:wrap; .counters-items {margin: -128px 16px 0 16px;}} }
@media (min-width:768px){
  .counters{ gap:32px; align-items:end; padding:16px; border:1px solid var(--panel-border); border-radius:16px; }
}
.counters-image{ min-width:40%; }
.counters-image img{ border-radius:8px; }
.counters-items{ width:100%; }
@media (max-width:991px){ .counters-items{ display:flex; flex-direction:column; gap:16px; } }
@media (min-width:992px){ .counters-items{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; } }
.counters .counter{
  display:flex; flex-direction:row; padding:16px; gap:8px; border-radius:8px; align-items:center;
  box-shadow: var(--card-shadow); background: var(--card-bg);
}
@media (min-width:992px){ .counters .counter{ flex-direction:column; padding:32px; } }
.counters .counter .count{ font-size:32px; font-weight:800; line-height:1; }
@media (min-width:768px){ .counters .counter .count{ font-size:48px; } }
.counters .counter small{ font-size:16px; }

/* SECTIONS */
.section{ margin:0 0; width:100%; }
/*@media (min-width:992px){ .section{ margin:64px 0; } }
@media (min-width:1200px){ .section{ margin:64px 0; } }*/
.home-contact {
     padding-top: 64px; padding-bottom: 64px
}
/* ABOUT */
.about{ display:flex; gap:32px; padding-top: 64px; padding-bottom: 64px}
@media (max-width: 767px){
    .about-image {display: none;}
}
@media (max-width:1199px){
  .about{ flex-direction:column; }
  .about-image img{ height:260px; width:100%; object-fit:cover; object-position:center; }
}
@media (min-width:1200px){ .about{ gap:64px; } .about-intro{ max-width:50%; } }
.about-image img{ border-radius:16px; }

/* OFFER INTRO + BOXES */
.offer-intro{
   width:100%; justify-content:space-between; align-items:end; margin-bottom:32px;
}
@media (min-width:1200px){ .offer-intro{ display:flex; gap:64px; } }
.offer-intro h2,.offer-intro .lead{ margin-bottom:0; }
.offer-intro>div:nth-child(2) {
    max-width: 720px;
}

.offer-boxes{ display:grid; grid-template-columns: 1fr; gap:32px; min-width:100%; }
@media (min-width:991px){ .offer-boxes{ grid-template-columns: 1fr 1fr 1fr } }
@media (min-width:768px){ .offer-box{ padding:32px; } }


.offer-box{
  padding:16px; min-height:320px; display:flex; align-items:end; position:relative; overflow:hidden;
  border-radius:16px; background-color: var(--offer-box-bg); color: var(--offer-box-text);
  background-size:cover; background-position:center;
}
@media (max-width:767px){ .offer-box{ width:100%; } }
.offer-box::before{
  content:""; position:absolute; inset:0; display:block;
  background-image: var(--offer-box-overlay); /* domyślny overlay */
}
.offer-box > div{
  z-index:3; padding:16px; border-radius:8px;
  background: var(--glass-bg); color: var(--glass-text);
  box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border);
}
.offer-box h3{ color: var(--offer-box-text); }

/* indywidualne tła boxów */
.offer-box:nth-child(1){ background-image: var(--offer-box-1-bg-image); }
.offer-box:nth-child(2){ background-image: var(--offer-box-2-bg-image); }
.offer-box:nth-child(3){ background-image: var(--offer-box-3-bg-image); }
.offer-box:nth-child(2)::before{ background-image: var(--offer-box-2-overlay); }

/* FAQ */
@media (min-width: 768px){
.faq-container{ max-width: 620px; min-width: 620px }
}
.faq-item{ border:1px solid var(--panel-border); border-radius:8px; overflow:hidden; margin-bottom:16px; break-inside:avoid; background-color: var(--site-bg);}
.faq-question{
  font-size:18px; padding:16px 48px 16px 16px; font-weight:500; display:flex;
  margin-bottom:0; position:relative; width:100%; align-items:center;
  color: var(--link);
}
@media (min-width:768px){ .faq-question{ font-size:22px; } }
.faq-question:after{
  content:""; position:absolute; right:8px; width:24px; height:24px;
  background-image: var(--faq-icon); background-repeat:no-repeat; background-position:center; background-size:16px;
  transition: transform .2s ease;
  border-radius: 50%;
  border: solid 1px var(--link);
}
.faq-answer{ padding:16px; display:none; }
.faq-item.is-open .faq-answer{ display:block; }
.faq-question{ cursor:pointer; }
.faq-question:focus-visible{ outline:2px solid var(--faq-focus-outline); outline-offset:2px; }
.faq-item.is-open .faq-question:after{ transform:rotate(45deg); }

/* CONTACT BOXES */
.contact-boxes{ margin-top:32px; }
@media (max-width:991px){ .contact-boxes{ display:flex; flex-direction:column; gap:32px; } }
@media (min-width:768px) and (max-width:991px){ .contact-boxes{ flex-direction:row; } }
@media (min-width:992px){
  .contact-boxes{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; }
}
@media (min-width:1200px){
    .title-container {max-width: 50%}
}
.contact-box{
  padding:16px 8px; border:1px solid var(--panel-border); border-radius:16px; display:flex; gap:16px; background: var(--card-bg); align-items: start; flex-direction: row;
}

@media (min-width: 768px) and (max-width:1199px){ .contact-box{ flex-direction:column; align-items: start } }
@media (min-width: 1199px){
    .contact-box{
        padding:16px;  align-items: center;
      }
}
@media (min-width:1200px){ .contact-boxes{ gap:64px; } }
.contact-icon{
  min-width:64px; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--contact-icon-bg);
}
.contact-box span{
  display:block; font-size:14px; text-transform:uppercase; font-family:"Roboto Condensed",sans-serif; font-weight:700; margin-bottom:8px;
  color: var(--contact-label);
}
.contact-box .contact-data{ font-size:18px; margin-bottom: 0;}
.contact-description p {
    margin-bottom: 0;
}
@media (min-width:768px){ .contact-box .contact-data{ font-size:24px; } }
@media (min-width:1400px){ .contact-box .contact-data{ font-size:32px; } }

/* FOOTER */
.page-footer{
  padding-top:64px; padding-bottom:64px; font-size:13px;
  background: var(--footer-bg); color: var(--footer-text);
}
.copy{ margin-top:16px; text-align:center; font-size:11px; }
.page-footer .row{ display:grid; grid-template-columns:repeat(1,1fr); gap:16px; }
@media (min-width:768px){.page-footer .row{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }}
@media (min-width:992px){ .page-footer .row{ grid-template-columns:repeat(3,1fr); gap:64px; } }
.footer-info{ display:flex; flex-direction:column; gap:16px; }
.footer-info img{ margin-bottom:8px; }
.footer-title{ font-size:18px; font-family:"Roboto Condensed",sans-serif; font-weight:700; margin-bottom:8px; }
.footer-nav ul{ list-style:none; }
.footer-nav ul a{ color: var(--footer-link); text-decoration:none; }
.footer-nav ul a:hover{ color: var(--footer-link-hover); }

/* CTA */
.cta{
  background: var(--cta-bg); padding:16px; color: var(--cta-text);
  display:flex; gap:32px; align-items:end; border-radius:16px; margin-top:32px;
}
.cta .lead{ margin-bottom:0; }
.cta h3{ color: var(--cta-text); }
@media (max-width:767px){ .cta{ flex-direction:column; } }
@media (min-width:768px){ .cta{ padding:32px; } }
@media (min-width:992px){ .cta{ max-width:800px; gap:64px; } }

.footer-contact {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.section.offer {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 0;
    background-color: var(--bg-darken);
}
.section.offer .offers-search {
    margin-top: 32px;
}
ul, ol {
    list-style: none;
}
.list li::before {
    position: absolute;
    left: 0;
    content: "✔";
}
.list li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 16px;
}
.article-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 1200px){
.article-faq-grid {
    gap: 32px;
    flex-direction: row;
}
}
@media (min-width: 1500px){
    .article-faq-grid {
        gap: 64px;
    }
}
.article-col.article-col--content>div {
    padding: 16px;
    background: var(--article-bg);
    border-radius: 16px;
}
@media (min-width: 768px){
    .article-col.article-col--content>div {
        padding: 32px;
    }
}
@media (min-width: 1200px){
    .article-col.article-col--content>div {
        padding: 64px;
    }
}

.page-header h1 small {
    font-size: 24px;
    display: block;
}
.offer-header {
    max-width: 920px;
}
.addr-street {
    white-space: nowrap;
}
.mod-breadcrumbs__wrapper {
    padding-top: 64px;
}
.mod-breadcrumbs {
    display: flex;
    align-items: center;
    font-size: 11px;
    gap: 8px;
    text-transform: uppercase;
    font-family:"Roboto Condensed",sans-serif;
    font-weight: 700;
}
.breadcrumb-item:not(.active):after{
    content: "●";
    margin-left: 8px;
}
.item-image.default img{
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    height: 100%;
    object-fit: cover;
}
@media (min-widt: 1200px){
    .item-image.default img {
        margin-bottom: 64px;
    }
}
.category-hero {
  position: relative;
  background-color: #f5f7fb; /* fallback gdy brak obrazka */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 16px 16px 0 16px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 992px){
.category-hero {
  position: relative;
  background-color: #f5f7fb; /* fallback gdy brak obrazka */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 64px 0;
  min-height: 620px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
}

.category-hero.has-image .category-hero__overlay { opacity: 1; }

@media (min-width: 768px){

}




@media (min-width: 992px){

}


.category-hero .offers-search {
        transform: translateY(64px);
        position: relative;
    }
@media (min-width: 992px){
    .category-hero .offers-search {
        transform: translateY(128px);
        position: relative;
    }
}

.category-hero.has-image, .boks-pagehead-inner { color: #fff; }

.category-hero__title {

}

.category-hero__desc {
  font-size: clamp(16px, 2vw, 20px);
  max-width: 70ch;
}

.category-aftertitle,
.category-aftercontent {
  margin: 12px 0 24px;
}
@media (max-width: 991px){
    .tab-btn {
        display: flex;
        min-width: 100%;
        border-radius: 0;
    }
    .tab-btn.active {
    background-color: var(--tab-active-bg);
    color: var(--tab-active-col);
}
.tab-btn {
    background-color: var(--tab-bg);
}
}
@media (min-width: 992px){
    .tabs-nav {
    display: flex;
    background-color: var(--tab-bg);
    padding: 16px 32px 0 32px;
    border-bottom: solid 3px var(--btn-primary-bg);
    }

    .tab-btn {
        border-radius: 16px 16px 0 0;
        transition: .3s ease-in-out;
        font-size: 20px;
        padding-top: 18px;
        padding-bottom: 18px;
        text-transform: none;
        background-color: transparent;
    }
    .tab-btn.active {
        background-color: var(--tab-active-bg);
        color: var(--tab-active-col);
    }
}


.tabs-container {
    overflow: hidden;
    background-color: var(--article-bg);
    padding: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px;
    border: solid 1px var(--tab-bg);
}
.tab-content {
    display: none;
    flex-direction: column;
    gap: 32px;
    padding: 0 16px 16px 16px;
}
.tab-content.active {
    display: flex;

}
.tab-content>div {
    display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
@media (min-width: 768px){
    .tab-content>div {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (min-width: 1200px){
    .tab-content>div {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
    }
    .tab-content {
        padding: 0 32px 32px 32px;
    }
}
.tab-offer {
        background-color: var(--site-bg);
        padding: 16px;
        border-radius: 8px;
    border: solid 1px transparent;
        transition: .3s ease-in-out
    }
@media (min-width: 992px){
    .tab-offer {
        padding: 32px;
        border-radius: 16px;
    }
}
.tab-offer:hover {
    border-color: #007cbe;
}
.tab-offer .icon, .offer-card-icon{
/*    border-radius: 50%;
    width: 80px;
    height: 80px;
    background-color: #0095D2;
    display: flex;
    align-items: center;
    justify-content: center;*/
    margin-bottom: 16px;
}
.tab-offer .icon img, .offer-grid img {
        height: 64px;
    }
@media (min-width: 992px){
    .tab-offer .icon img, .offer-grid img {
        height: 128px;
    }
}
.tab-offer .offer-desc {
    padding: 16px 0;
    border-top: solid 1px #F4F8FF;
}
.tab-offer .price, .offer-card-price{
    padding: 16px 32px;
    background-color: #0B1227;
    color: #F4F8FF;
    margin-bottom: 32px;
    font-size: 1.6em;
    display: inline-flex;
    border-radius: 32px;
    gap: 2px;
    flex-direction: row;
    align-items: end;
}
.tab-offer .price small, .offer-card-price small {
    font-size: 14px;
}
.tab-offer .offer-chanels small {
    display: block;
    font-weight: 600;
}
.tab-offer .offer-chanels span {
    font-size: 1.4em;
    font-weight: 700;
}
.tab-offer .offer-speed span{
    display: block;
    font-size: 1.4em;
    font-weight: 700;
}
.tab-offer .extra-costs p, .offer-card-extra p{
    font-size: 13px;
    padding: 12px 24px;
    background-color: var(--article-bg);
    line-height: 120%;
    border-radius: 8px;
}
.offer-card-extra p {
    background-color: var(--site-bg);
}
.tab-offer .extra-costs ul, .offer-card-extra ul{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tab-offer .extra-costs ul li, .offer-card-extra ul li {
    padding-left: 24px;
    position: relative;
    font-size: 14px;
}
.tab-offer .extra-costs ul li::before, .offer-card-extra ul li:before {
    position: absolute;
    left: 0px;
    content: "✔";
}
.tab-offer .extra-costs ul li::before, .offer-card-extra ul li:before {
    color: var(--card-item-check);

}
.tab-offer .features, .offer-card-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.tab-offer .features p, .offer-card-benefits p {
    display: inline-block;
    margin: 0;
    padding: 4px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border: solid 1px var(--card-item-label);
    border-radius: 16px;
}


.offer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
   border: solid 1px var(--link);
    border-radius: 16px;
    margin-bottom: 32px;
    background-color: #FFF;
}
@media (min-width: 768px){
    .offer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 32px;
}
}
@media (min-width: 1200px){
    .offer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
        padding: 32px;
        border-radius: 16px;
        margin-bottom: 64px;
        background-color: var(--offer-grid-bg);
    }
}



.offer-card {
    background-color: var(--offer-card-bg);
    padding: 16px;
    border-radius: 8px;
    border: solid 1px transparent;
    transition: .3s ease-in-out
}
@media (min-width: 992px){
    .offer-card {
        padding: 32px;
        border-radius: 16px;
    }

}
.offer-card:hover {
    border-color: #007cbe;
}
.offer-card-title {
    padding-bottom: 16px;
    border-bottom: solid 1px #FFFFFF;
}
.offer-card-title span{
    display: block;
    font-family: "Poppins",sans-serif;
}

.offer-card-title span small {
    font-size: 16px;
}
.offer-card-channels strong {
    font-size: 1.4em;
    font-weight: 700;
}
.offer-card-channels small {
    display: block;
    font-weight: 600;
}

.tab-content>div.boks-grid {
    width: 100%;
    grid-template-columns: 1fr;
    display: grid;
    gap: 16px;
}
.tabs-below-module .boks-grid {
        width: 100%;
        grid-template-columns: 1fr;
        display: grid;
        gap: 16px;
    }
@media (min-width: 568px){
    .tab-content>div.boks-grid {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
    .tabs-below-module .boks-grid {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
}
@media (min-width: 992px){
    .tab-content>div.boks-grid {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
    .tabs-below-module .boks-grid {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
        gap: 32px;
    }
}
@media (min-width: 1200px){
    .tab-content>div.boks-grid {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
    }
    .tabs-below-module .boks-grid {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
    }
}

.tab-content>div.boks-trader {
    width: 100%;
    grid-template-columns: 1fr;
    display: grid;
    gap: 16px;
}

@media (min-width: 568px){
    .tab-content>div.boks-trader {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
}
@media (min-width: 992px){
    .tab-content>div.boks-trader {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 32px;
    }
}
@media (min-width: 1200px){
    .tab-content>div.boks-trader {
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;
    }
}

.alert {
    padding: 32px;
    margin-bottom: 64px;
    font-style: italic;
    font-size: .9em;
    border-radius: 8px;
}
.alert-info {
    border: solid 1px var(--link);
    background-color: var(--alert-bg);
    color: var(--alert-color);
}

.boks-body {
    padding: 16px;
    border: var(--boks-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    background-color: var(--boks-bg);
    height: 100%;
    /*border: solid 1px var(--link)*/
}
.boks-body.ph {
    gap: 16px;
}
.boks-row {
    display: flex;
    flex-direction: column;
    font-size: 17px;
}
.boks-hours-item {
    display: flex;
    justify-content: space-between;
    border-bottom: dotted 1px #FFF;
    font-size: 14px;
}
.boks-misc {
    font-size: 14px;
}
.boks-hours-time {
    min-width: 100px;
}
.boks-hours-h {
    font-size: 14px;
    font-weight: 600;
    color: var(--boks-hours-h);
    margin-bottom: 8px;
}
.boks-hours {
    padding: 16px;
    border: var(--boks-hours-border);
    border-radius: 8px;
    background-color: var(--boks-hours-bg);
}
.boks-title {
    font-size: 22px;
    margin-bottom: 4px;
    line-height: 1;
}
.boks-h .val{
    font-size: 13px;
    margin-bottom: 16px;
}
a.boks-map {
    margin-left: auto;
}
.boks-add {
    text-align: right;
}
.boks-hours-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media (min-width: 992px){
    .boks-pagehead {
        padding-left: 32px;
        padding-right: 32px;
        width: 100%;
    }
}

@media (min-width: 992px){

}


.page-header-inner .lead p:last-child {
    margin-bottom: 0;
}
/*.boks-pagehead-inner {
    display: inline-flex
;
    flex-direction: column;
    position: relative;
    z-index: 1;
    color: #FFF;
    background: var(--glass-bg);
    color: var(--glass-text);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    padding: 32px;
    border-radius: 16px;
    max-width: 720px;
}*/
.boks-pagehead-inner h1 {
    color: #FFF;
}
.boks-pagehead-inner .lead {
    font-size: clamp(16px, 2vw, 20px);
    max-width: 70ch;
    color: #FFF;
}
.download {
    background-color: var(--download-bg);
    padding: 16px;
    border-radius: 8px;
    color: #FFF;
    margin-bottom: 32px;
}
@media (min-width: 768px){
.download {
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 64px;
    max-width: 720px;
}
}
.download h3 {
    color: #FFF;
}
.download ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.download ul li {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    align-items: center;
    border-radius: 8px;
    gap: 8px;
    justify-content: space-between;
    transition: .3s ease-in-out all;
}
@media (min-width: 992px){
    .download ul li {
        gap: 32px;
    }
}
.download ul li:hover {
    background-color: var(--download-item);
}
.article-content ol {
    list-style: decimal;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.article-content ul {
    list-style: circle;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.article-content li::marker {
  color: var(--marker-color);
}
.article-content ol li ol {
    margin-bottom: 0;
}
.ebok {
    padding: 16px;
    border-radius: 8px;
    border: solid 1px var(--footer-border);
    margin-top: 16px;
    max-width: 300px;
}

.tabs-below-module {
    margin-bottom: 32px;
}
@media (min-width:768px){
    .tabs-below-module {
        margin-bottom: 64px;
    }
}
.offer-info {
    font-size: 24px;
    margin-bottom: 64px;
}
.offer-info  p:last-child {
    margin-bottom: 0;
}
.boks-contact-list .lbl {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
}
.rep-areas {

    text-transform: uppercase;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
}
.rep-areas .area {
    padding: 8px;
    border-radius: 8px;
    border: solid 1px #F4F8FF;
        display: flex
;
    flex-wrap: wrap;
    gap: 8px;
}
.rep-areas .area h4{
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

}
.rep-areas .area>div {
    min-width: 100%;
}
.rep-areas p {
    margin: 0;
    padding: 8px 16px;
    border-radius: 32px;
    background-color: var(--areas-bg);
    line-height: 1;
    display: inline-flex;
    font-weight: 600;
     font-size: 12px;
}
.offer-opl {
    border-radius: 16px;
}
.boks-ph {
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.boks-prev-company {
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    min-height: 24px;
}