/* =================================================================================================
   KALKULATOR OSZCZĘDNOŚCI — ODBIORCA PRZEMYSŁOWY (30.08.2026)
   Wygląd wzięty Z ISTNIEJĄCEJ sekcji formularza (formularz/formularz.css), żeby to nie wyglądało
   jak wklejka z innego serwisu, tylko jak kolejny nasz moduł:
     karta 1035 px, promień 10 px, cień 0 19px 38px rgba(0,0,0,.16),
     pas tytułu granat rgb(35,32,57), tytuł Lato 32 px waga 300, odstęp liter 1 px, kolor 246,247,248,
     wnętrze białe, wyściółka 30/41/41 px, pola 44 px wysokości, obramowanie 1 px #ccc, tekst 14 px.
   Nic tu nie jest wymyślone „na oko" — to te same liczby, co w formularzu obok.
   ================================================================================================= */

.kop {
  /* Ta sama sztuczka co w `.cco-form`: shortcode jest zwykłym blokiem w treści, więc WordPress
     narzuca mu szerokość kolumny tekstu. `!important` jest konieczne — reguła układu celuje
     w dzieci `.wp-block-post-content` i wygrywa ze zwykłym selektorem klasowym. */
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* ⚠️ 01.09.2026 (Pio): „kalkulator do góry, o mniej więcej połowę wysokości granatowego nagłówka,
     bliżej tekstu «Czy chcesz ograniczyć koszty energii…»". Zmierzony nagłówek karty ma 86 px na
     desktopie, więc górny odstęp schodzi z 61 px o ~43 px. Ruszamy TYLKO górę — dolny odstęp
     oddziela kalkulator od sekcji „Jak możemy Ci pomóc?" i ma zostać. */
  padding: 18px 0 50px;
}
.kop__karta {
  width: 1035px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  background: rgb(35, 32, 57);
  border-radius: 10px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, .16);
  overflow: hidden;
}
.kop__tytul {
  margin: 0;
  padding: 21px 41px 20px;
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.4;
  text-align: center;
  color: rgb(246, 247, 248);
}
.kop__tresc {
  background: #fff;
  padding: 30px 41px 41px;
  font-family: Lato, Helvetica, Arial, sans-serif;
  color: rgb(18, 19, 21);
}
.kop__wstep { margin: 0 0 26px; font-size: 17px; font-weight: 300; line-height: 1.6; }
.kop__wstep b { font-weight: 700; }

/* --- pola ------------------------------------------------------------------------------------ */
.kop__pola { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
.kop__pole { display: block; }
.kop__pole--szerokie { grid-column: 1 / -1; }
.kop__etykieta {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35;
}
.kop__opc { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #8a8f98; margin-left: 4px; }
.kop__select,
.kop__input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: rgb(18, 19, 21);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.kop__select { padding-right: 34px; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.kop__select:focus,
.kop__input:focus { outline: none; border-color: rgb(35, 32, 57); box-shadow: 0 0 0 3px rgba(35, 32, 57, .12); }
/* Jednostka wpisana W POLE, nie obok: „10000" bez „MWh/rok" tuż przy liczbie czyta się jak cena. */
.kop__zjednostka { position: relative; display: block; }
.kop__zjednostka .kop__input { padding-right: 96px; }
.kop__jednostka {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: #8a8f98; pointer-events: none;
}
.kop__podpis { display: block; margin-top: 6px; font-size: 13px; font-weight: 300; line-height: 1.45; color: #6b7076; }

/* --- wynik ------------------------------------------------------------------------------------ */
/* Granat na białym wnętrzu: wynik ma być JEDYNYM miejscem, w które wpada wzrok po wpisaniu liczb. */
.kop__wynik {
  margin-top: 30px;
  padding: 26px 30px;
  background: rgb(35, 32, 57);
  border-radius: 10px;
  color: rgb(246, 247, 248);
}
.kop__suma { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.kop__sumaEtykieta { font-size: 16px; font-weight: 300; letter-spacing: .5px; opacity: .82; }
.kop__sumaKwota {
  font-size: 44px; font-weight: 300; letter-spacing: .5px; line-height: 1.1;
  font-variant-numeric: tabular-nums;                 /* liczby nie „skaczą" przy przeliczaniu */
}
.kop__sumaOkres { font-size: 16px; font-weight: 300; opacity: .82; }
.kop__rozbicie {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(246, 247, 248, .18);
}
.kop__poz { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kop__pozNazwa { font-size: 15px; font-weight: 300; opacity: .82; }
.kop__pozKwota { font-size: 17px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kop__ostroznie {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(246, 247, 248, .18);
  font-size: 14px; font-weight: 300; line-height: 1.55; opacity: .88;
}
.kop__ostroznie b { font-weight: 700; }
.kop__zastrzezenie { margin: 18px 0 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: #6b7076; }

/* --- telefon ----------------------------------------------------------------------------------- */
@media (max-width: 780px) {
  /* ⚠️ Na telefonie nagłówek karty łamie się na dwie linie i ma 101 px — połowa tego (51 px) jest
     większa niż cały tamtejszy odstęp (40 px). Schodzimy więc do 14 px zamiast wchodzić w minus,
     bo ujemny margines nasunąłby kartę na listę pytań nad nią. */
  .kop { padding: 14px 0 34px; }
  .kop__karta { max-width: calc(100% - 24px); }
  .kop__tytul { padding: 18px 20px 16px; font-size: 24px; }
  .kop__tresc { padding: 24px 20px 28px; }
  .kop__pola { grid-template-columns: 1fr; gap: 18px; }
  .kop__wynik { padding: 20px 18px; }
  .kop__sumaKwota { font-size: 34px; }
  .kop__rozbicie { grid-template-columns: 1fr; }
}