/* ==========================================================================
   GRAF-5000 / KRD - Formularz zgłoszeniowy (wersja pod iframe, grid 12 kol.)

   Założenia wg wytycznych KRD:
   - szerokość 100% dostępnej szerokości strony (minus marginesy boczne),
     zakres 360 px - 1920 px,
   - układ oparty na 12-kolumnowym gridzie,
   - brak tła, ramki i przycisku zamykania (koduje je KRD wokół iframe),
   - html / body bez height / min-height,
   - pozycjonowanie statyczne; wysokość formularza nie zmienia się przy
     interakcji użytkownika (komunikaty walidacji - absolutnie,
     pełna treść klauzuli - popup),
   - brak poziomych pasków przewijania.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: transparent;
}

body {
  margin: 0;
  background: transparent;
  color: #000;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; border: 0; }

/* --------------------------------------------------------------------------
   Sekcja + kontener (min 360 px / max 1920 px)
   -------------------------------------------------------------------------- */

.lp {
  position: relative;      /* kotwica popupu; element pozostaje w normalnym flow */
  max-width: 1920px;
  min-width: 360px;
  margin: 0 auto;
  padding: 0 0 60px;
}

.container {
  width: 100%;
  max-width: 1648px;       /* 1600 px treści + 2 x 24 px marginesu bocznego */
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Grid 12-kolumnowy
   -------------------------------------------------------------------------- */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}

/* --------------------------------------------------------------------------
   Nagłówek + lead
   -------------------------------------------------------------------------- */

.lp-title {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 100%;
  margin: 0;
  padding: 0 0 4px;
  border-bottom: 1px solid #E40421;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: #000;
  text-align: center;
}

.lp-lead {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 1160px;
  margin: 23px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Karty - po 6 kolumn
   -------------------------------------------------------------------------- */

.card {
  grid-column: span 6;
  min-width: 0;
  margin-top: 0;
  padding: 32px;
  border-radius: 32px;
}

.card-form {
  background: #E30421;
  background: linear-gradient(119deg, #E30421 0%, #C9021C 100%);
  color: #fff;
}

.card-call {
  background: #F8F8F8;
}

/* --------------------------------------------------------------------------
   Karta z formularzem
   -------------------------------------------------------------------------- */

.card-title {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  color: #fff;
}

.card-sub {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.form { margin: 0; }

/* pola - po 4 kolumny wewnętrznego gridu 12-kolumnowego */
.fields {
  column-gap: 16px;
  margin-top: 24px;
}

.field {
  position: relative;      /* kotwica dla komunikatu walidacji */
  grid-column: span 4;
  min-width: 0;
}

.field-input {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 9px;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 46px;
  font-weight: 400;
  color: #232323;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.field-input::-webkit-input-placeholder { color: #767676; opacity: 1; }
.field-input::-moz-placeholder { color: #767676; opacity: 1; }
.field-input:-ms-input-placeholder { color: #767676; opacity: 1; }
.field-input::placeholder { color: #767676; opacity: 1; }

.field-input.valid-error { border-color: #fff; }

/* Komunikaty walidacji - pozycjonowane absolutnie, nie zmieniają wysokości formularza.
   Odstępy pod polami i między zgodami mają 24 px, komunikat (16 px) jest w nich
   wyśrodkowany, więc nie styka się ani z polem nad, ani z elementem pod nim.
   z-index gwarantuje, że komunikat nie chowa się pod kolejnym polem. */
.txt-error {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  line-height: 16px;
  pointer-events: none;
}

.txt-error:empty { display: none; }

/* --- zgody --- */

.consent {
  position: relative;      /* kotwica dla komunikatu walidacji */
  margin-top: 24px;
}

.consent + .consent { margin-top: 24px; }   /* miejsce na komunikat walidacji */

.consent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.consent-cb {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.consent-cb:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23E40421' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2 4.4 8.6 11 1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}

.consent-txt {
  font-size: 11px;
  line-height: 16px;
  color: #fff;
}

/* --- przycisk --- */

.btn-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.btn {
  display: block;
  width: 210px;
  max-width: 100%;
  height: 56px;
  padding: 0;
  background: #202020;
  border: 0;
  border-radius: 8px;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 56px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.btn:hover { background: #000; }

/* --------------------------------------------------------------------------
   Karta kontaktowa
   -------------------------------------------------------------------------- */

.call-head {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.call-icon {
  flex: 0 0 auto;
  width: 95px;
  height: 95px;
  margin: 38px 0 0 4px;
}

.call-col { min-width: 0; }

.call-title {
  margin: 10px 0 0;
  font-size: 31px;
  line-height: 42px;
  font-weight: 400;
  color: #232323;
}

.phone-box {
  display: inline-block;
  max-width: 100%;
  margin-top: 9px;
  padding: 8px 11px;
  border: 2px solid #E40421;
  border-radius: 4px;
  font-size: 31px;
  line-height: 34px;
  font-weight: 700;
  color: #E40421;
  text-decoration: none;
  white-space: nowrap;
}

.call-hours {
  margin: 11px 0 0;
  font-size: 15.4px;
  line-height: 30px;
  color: #232323;
}

.br-mobile { display: none; }

/* --- klauzula informacyjna --- */

.legal { margin-top: 31px; }

.legal-title {
  margin: 0;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  color: #000;
}

.legal-text {
  margin-top: 8px;
  font-size: 10px;
  line-height: 16px;
  color: #6D6D6D;
}

.legal-text-short { display: none; }

.legal-link {
  color: #6D6D6D;
  text-decoration: underline;
}

.legal-more {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 16px;
  color: #E40421;
  text-align: right;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Popup z pełną treścią klauzuli
   -------------------------------------------------------------------------- */

.modal {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
}

.modal.is-open {
  display: flex;
  align-items: flex-end;   /* popup przy dole sekcji - tam gdzie odnosnik "Rozwin" */
  justify-content: center;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 24px 24px;
  background: #fff;
  border-radius: 16px;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 26px;
  line-height: 32px;
  color: #232323;
  cursor: pointer;
}

.modal-title {
  margin: 0 32px 8px 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: #000;
}

.modal-text {
  font-size: 12px;
  line-height: 18px;
  color: #6D6D6D;
}

.modal-text a { color: #6D6D6D; text-decoration: underline; }

/* --------------------------------------------------------------------------
   RWD - widok mobilny wg projektu (360 px - 991 px)
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

  .lp { padding: 0 0 24px; }

  .lp-title { padding-bottom: 8px; }

  /* karty na pełne 12 kolumn */
  .card { grid-column: 1 / -1; }

  .card-form { margin-top: 0; }

  /* odstęp między kartami przy układzie jedna pod drugą */
  .card-call { margin-top: 24px; }

  /* pola jedno pod drugim - każde na pełne 12 kolumn.
     Odstęp 24 px (zamiast 16 px z projektu) daje miejsce na komunikat walidacji,
     który jest pozycjonowany absolutnie i nie może zmieniać wysokości formularza. */
  .fields { row-gap: 24px; }

  .field { grid-column: 1 / -1; }

  .btn-wrap { display: block; }

  .btn { width: 100%; }

  .call-head { display: block; }

  .call-icon {
    display: block;
    width: 85px;
    height: 85px;
    margin: 19px 0 0 6px;
  }

  .call-title { margin-top: 28px; }

  .phone-box { margin-top: 10px; }

  .call-hours { margin-top: 10px; font-size: 15px; line-height: 30px; }

  .br-mobile { display: inline; }

  .legal { margin-top: 29px; }

  /* skrócona treść klauzuli + odnośnik do popupu */
  .legal-text-short { display: block; }
  .legal-text-full { display: none; }

  .legal-more { display: block; }
}