/* ==========================================================================
   EKO-OKNA S.A. | MASTER THEME & COMPONENTS
   Plik uzupełniający dla: bootstrap-grid_eko.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (Zmienne systemowe)
   Zmieniasz kolor tutaj, zmienia się na całej stronie.
   -------------------------------------------------------------------------- */
:root {
  /* Paleta kolorów */
  --eko-sys-color-primary: #005CA9;       /* Główny niebieski Eko-Okna */
  --eko-sys-color-primary-hover: #004580; /* Ciemniejszy niebieski (hover) */
  --eko-sys-color-navy: #112337;          /* Granatowy korporacyjny */
  --eko-sys-color-slate: #4D5A61;         /* Szary tekst (opisy) */
  --eko-sys-color-bg-light: #F1F4F8;      /* Jasnoszary (tła boksów, formularzy) */
  --eko-sys-color-bg-accent: #E4ECF0;     /* Akcent (np. tło zaznaczonej komórki w tabeli) */
  --eko-sys-color-border: #CED8DE;        /* Subtelne ramki */

  /* Typografia i kształty */
  --eko-sys-font-main: 'Montserrat', system-ui, -apple-system, sans-serif;
  --eko-sys-radius-sm: 4px;
  --eko-sys-radius-md: 8px;
  --eko-sys-transition: all 0.2s ease-in-out;
}

/* --------------------------------------------------------------------------
   2. GLOBAL OVERRIDES (Sprzątanie starych klas "ze śmietnika")
   Używamy wysokiej specyficzności, aby nadpisać stare !important
   -------------------------------------------------------------------------- */

/* Tła i boksy ze starych plików (np. article_eko.css) */
html body .ekopage .bg-l-grey_eko,
html body .ekopage .box-grey_eko,
html body .ekopage .art-box_eko {
  background-color: var(--eko-sys-color-bg-light) !important;
  border-radius: var(--eko-sys-radius-md) !important;
}

/* Kolorystyka starych tekstów */
html body .ekopage .d-grey_eko { color: var(--eko-sys-color-navy) !important; }
html body .ekopage .l-grey_eko { color: var(--eko-sys-color-bg-light) !important; }

/* --------------------------------------------------------------------------
   3. NOWE KOMPONENTY (Szablony na przyszłość do nowych wdrożeń)
   -------------------------------------------------------------------------- */

/* --- TABELE (Uniwersalny szablon np. dla INFINITI) --- */
.table-wrapper_eko {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border-radius: var(--eko-sys-radius-sm);
  box-shadow: 0 0 0 1px var(--eko-sys-color-border); /* Subtelna ramka zewnętrzna */
}

.table_eko {
  width: 100%;
  min-width: 750px;
  border-collapse: collapse;
  font-family: var(--eko-sys-font-main);
  font-size: 1rem;
  color: var(--eko-sys-color-navy);
  background-color: #ffffff;
  margin: 0;
}

.table_eko th,
.table_eko td {
  padding: 16px;
  border: 1px solid var(--eko-sys-color-border);
  vertical-align: middle;
}

.table_eko thead th {
  background-color: var(--eko-sys-color-bg-light);
  font-weight: 700;
  text-align: center;
}

/* Podświetlenie wiersza przy najechaniu (UX) */
.table_eko tbody tr:hover {
  background-color: #fcfcfc;
}

/* Inteligentne tło dla komórek zawierających nasz ptaszek (Checkmark) */
.table_eko td:has(.check-icon_eko) {
  background-color: var(--eko-sys-color-bg-accent);
  text-align: center;
}

/* Wizualny feedback (UX): płynne ściemnienie komórki z ptaszkiem po najechaniu */
.table_eko tbody td:has(.check-icon_eko):hover {
  background-color: var(--eko-sys-color-border) !important; /* Ściemnienie do #CED8DE */
  transition: var(--eko-sys-transition); /* Płynne, eleganckie przejście tonalne */
  cursor: pointer; /* Zmiana kursora sugeruje interaktywność i skupia uwagę */
}

/* Sama ikona ptaszka */
.check-icon_eko {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--eko-sys-color-navy);
}

/* LOGOTYPY W TABELACH */
.logo-table_eko {
  max-width: 140px; /* Optymalna szerokość dla czytelności na mobile i desktop */
  height: auto;
  object-fit: contain;
  margin: 0 auto; /* Centrowanie awaryjne */
}


/* --- PRZYCISKI (Uniwersalne warianty) --- */
.btn_eko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--eko-sys-font-main);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none !important;
  border-radius: var(--eko-sys-radius-sm);
  transition: var(--eko-sys-transition);
  cursor: pointer;
  border: 2px solid transparent;
}

/* Wariant 1: Główny przycisk (Primary) */
.btn--primary_eko {
  background-color: var(--eko-sys-color-primary);
  color: #ffffff !important;
}
.btn--primary_eko:hover {
  background-color: var(--eko-sys-color-primary-hover);
}

/* Wariant 2: Przycisk z ramką (Outline) */
.btn--outline_eko {
  background-color: transparent;
  border-color: var(--eko-sys-color-primary);
  color: var(--eko-sys-color-primary) !important;
}
.btn--outline_eko:hover {
  background-color: var(--eko-sys-color-bg-light);
}

/* Wariant 3: Przycisk wyglądający jak tekstowy link (np. odśwież stronę) */
.btn--link_eko {
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin: 0;
  color: var(--eko-sys-color-primary);
  font-family: var(--eko-sys-font-main);
  font-weight: 600; /* Półgruby dla lepszej czytelności */
/*  font-size: 16px;*/
  cursor: pointer;
  text-decoration: none;
  transition: var(--eko-sys-transition);
  box-shadow: none;
}

/* Interakcja (UX) - podkreślenie i ciemniejszy kolor przy najechaniu */
.btn--link_eko:hover,
.btn--link_eko:focus {
  color: var(--eko-sys-color-primary-hover);
  text-decoration: underline;
  outline: none;
}

/* --- KARTY / BOKSY INFORMACYJNE --- */
.card_eko {
  background-color: var(--eko-sys-color-bg-light);
  border-radius: var(--eko-sys-radius-md);
  padding: 24px;
  font-family: var(--eko-sys-font-main);
  color: var(--eko-sys-color-slate);
}

.card_eko h2, 
.card_eko h3 {
  color: var(--eko-sys-color-navy);
  margin-top: 0;
}

/* --- DOSTĘPNOŚĆ (WCAG) --- */
.visually-hidden_eko {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*    KARTY  */
.card-bordered_eko {
  background-color:  var(--eko-sys-color-bg-light);
  border: 1px solid var(--eko-sys-color-border);
  border-radius: var(--eko-sys-radius-sm);
  padding: 16px;
  margin-bottom: 24px;
  font-family: var(--eko-sys-font-main);
  color: var(--eko-sys-color-navy);
  box-shadow: 0 2px 4px rgba(17, 35, 55, 0.02); 
}

/* Zwiększenie paddingu dla tabletów i desktopów (od 768px w górę) */
	@media (min-width: 768px) {
	  .card-bordered_eko {
		padding: 24px 32px;
	  }
	}

.card-bordered_eko h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.card-bordered_eko ul {
  margin: 0;
  padding-left: 24px;
  color: var(--eko-sys-color-slate);
}

.card-bordered_eko li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.card-bordered_eko li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   KOMPONENT: CATALOG PILLS (Sekcja pobierania katalogów)
   ========================================================================== */

/* Tytuł sekcji (wykorzystuje font i kolor z master-theme) */
.catalog-section-title_eko {
  color: var(--eko-sys-color-navy);
  font-family: var(--eko-sys-font-main);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.6rem;
}

/* Grupa flex dla pigułek - grid bootstrapa nie ma klas 'gap', więc dodajemy własną */
.catalog-pill-group_eko {
  gap: 10px;
}

/* Standardowy katalog (Pill) - biały na szarym tle kontenera card-bordered */
.catalog-pill_eko {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-family: var(--eko-sys-font-main);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--eko-sys-color-navy);
  background-color: #ffffff;
  border: 1px solid var(--eko-sys-color-border);
  border-radius: 50px;
  text-decoration: none;
  transition: var(--eko-sys-transition);
}

/* Interakcja (UX) - subtelne nawiązanie do marki przy najechaniu */
.catalog-pill_eko:hover,
.catalog-pill_eko:focus {
  background-color: var(--eko-sys-color-bg-accent);
  color: var(--eko-sys-color-primary);
  border-color: var(--eko-sys-color-primary);
  outline: none;
  text-decoration: none!important;
}

/* Wyróżniony katalog (Główny oraz dopasowany do kontekstu strony, np. Synego = PVC) */
.catalog-pill--featured_eko {
  color: var(--eko-sys-color-primary);
  border: 2px solid var(--eko-sys-color-primary);
}

.catalog-pill--featured_eko:hover,
.catalog-pill--featured_eko:focus {
  background-color: var(--eko-sys-color-primary);
  color: #ffffff;
}

/* Ukrywanie komunikatu o rotacji na ekranach desktopowych (>1024px) */
@media screen and (min-width: 1025px) {
  .display-mobile-only_eko {
    display: none !important; /* !important jest konieczny, aby nadpisać inline style="display:flex" */
  }
}

/*Responsywnosc --- https://ekookna.pl/ekopl/guardian-configurator*/
@media (max-width: 780px) {
    .ekopage .news-content.news-short .guardian-glass-customizer_container_eko iframe {
        max-width: 100% !important;
        max-height: 10000px !important;
    }

}

/* Strony kategorii produktowych */

.products-title.products-title-center {
	line-height: 50px;
}

.ekopage .products-listing .products-intro {
	padding-bottom: 30px;
	margin: 0 0 38px 0;
}

.products-intro-text {
	font-size: 18px;
	line-height: 30px;
	color: #596574;
}

.products-compare-box {
	margin: 0 0 40px 0;
}

.products-compare-box > ul > li {
	height: 70px;
}

.products-list li a {
	padding: 40px 50px 50px 50px;
	color: #596574;
}

.products-list li p {
	color: #596574;
}

.products-list li a .pic {
	display: flex;
    align-items: center;
}

.products-list li a h2 {
	margin: 10px 0;
}

.products-list li a .products-tech-details {
	margin: 0 0 6px 0;
}

.products-tech-details li p {
	grid-template-columns: 55px 1fr;
}

.products-tech-details li p b {
	font: normal normal 600 16px / 24px Montserrat;
}

.products-list li a .products-desc {
	margin-bottom: 0px;
}

.products-list li a .products-tech-details li {
	margin-bottom: 10px;
}

.fast-navi .container {
	padding: 0;
}

.why-list.why-list-seo {
	color: #596574;	
}

.why-list.why-list-seo h5 {
	color: #222222;	
}

.products-listing-seo {
	color: #596574;
}

.products-listing-seo h2, .products-listing-seo h3, .products-listing-seo h4 {
	color: #222222;
}

/*Responsywnosc */
@media (max-width: 780px) {
	
	.products-title.products-title-center {
		font: normal normal bold 36px / 46px Montserrat;
	}
	
	.products-intro-text {
	font-size: 16px;
	line-height: 26px!important;
}
	
	.products-list li a {
		padding: 40px 20px 30px 20px;
	}
	
	.fast-navi {
		display: none;
	}
	
}

/* EDN --- Strony kategorii produktowych */