/* ==========================================================================
   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);
}


/* --- 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: 24px 32px;
  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); 
}

.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;
}