/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* =====================================================================
   Macierz ocen 1-7 ("Array flexible labels", typ F)
   Cel: 13 wierszy x 7 punktow ma byc czytelne - bez "sciany kropek".
   Dotyczy pytan: reklama1rating, reklama2rating, hyb_rating.
   ===================================================================== */

/* Obramowanie i zaokraglenie calej tabeli */
table.table-array-radio {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dfe6e2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* Szersza, czytelna kolumna ze stwierdzeniami */
table.table-array-radio > colgroup > col.col-answers {
  width: 42% !important;
}

/* Naglowek skali 1..7 */
table.table-array-radio thead th {
  background: #eef4f0;
  color: #1e1e1e;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 6px;
  border: 0;
  border-bottom: 2px solid #14AE5C;
  white-space: nowrap;
  vertical-align: middle;
}
table.table-array-radio thead th.answertext {
  text-align: left;
  padding-left: 16px;
}

/* Tresc stwierdzenia */
table.table-array-radio tbody th.answertext {
  padding: 14px 20px 14px 16px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  color: #1e1e1e;
  text-align: left;
  vertical-align: middle;
}

/* Komorki z odpowiedziami */
table.table-array-radio tbody td.radio-item {
  padding: 14px 6px;
  text-align: center;
  vertical-align: middle;
  border: 0;
  border-left: 1px solid #eef2f0;
  transition: background-color .12s ease;
}

/* Naprzemienne tlo wierszy - latwiej sledzic wiersz na calej szerokosci */
table.table-array-radio tbody tr.ls-odd > th,
table.table-array-radio tbody tr.ls-odd > td { background-color: #f7faf8; }
table.table-array-radio tbody tr.ls-even > th,
table.table-array-radio tbody tr.ls-even > td { background-color: #ffffff; }

/* Podswietlenie wiersza pod kursorem */
table.table-array-radio tbody tr:hover > th,
table.table-array-radio tbody tr:hover > td {
  background-color: #ecf6f0 !important;
  box-shadow: none;
}

/* Podswietlenie wybranej odpowiedzi */
table.table-array-radio tbody td.radio-item:has(input[type=radio]:checked) {
  background-color: #d6f0e0 !important;
}

/* Separatory miedzy wierszami */
table.table-array-radio tbody tr + tr > th,
table.table-array-radio tbody tr + tr > td {
  border-top: 1px solid #e7ece9;
}

/* Wieksze, lepiej rozdzielone kropki (pierscien + wypelnienie) */
table.table-array-radio .radio-item label.ls-label-xs-visibility {
  width: 32px;
  height: 32px;
  text-indent: 44px;
}
table.table-array-radio .radio-item label.ls-label-xs-visibility::before {
  left: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0;
}
table.table-array-radio .radio-item label.ls-label-xs-visibility::after {
  left: 11px;
  top: 11px;
  width: 10px;
  height: 10px;
  margin: 0;
}

/* Na waskich ekranach motyw sam uklada tabele pionowo - nie wymuszamy szerokosci */
@media only screen and (max-width: 760px) {
  table.table-array-radio {
    border-radius: 10px;
  }
  table.table-array-radio > colgroup > col.col-answers {
    width: auto !important;
  }
  table.table-array-radio tbody th.answertext {
    padding: 10px 12px;
  }
}

/* =====================================================================
   Tytul ankiety na ekranie powitalnym (h1.survey-name / .large-heading)
   Motyw renderuje go czcionka szeryfowa (IBMPlexSerif), przez co odroznia
   sie od reszty tresci (IBMPlexSans). Wymuszamy te sama czcionke co reszta
   tekstu, zachowujac dotychczasowy rozmiar naglowka.
   ===================================================================== */
#welcome-container .survey-name {
  font-family: inherit;
}

/* =====================================================================
   Lista radiobuttonow (typ "List (radio)")
   Cel: karta z obramowaniem/zaokragleniem, separatory i zebra jak w tabeli
   macierzy (wybor punktowy), plus wieksze kropki radio.
   ===================================================================== */

/* Wiekszy odstep miedzy pytaniami */
.question-container {
  margin-bottom: 44px;
  padding: 18px 0;
}

/* Info "Wymagane": mala gwiazdka + slowo, wyswietlane POD trescia pytania.
   Szablon asterisk.twig wstawia je na poczatku .question-title-container,
   wiec przestawiamy kolejnosc (question-text najpierw, znacznik potem). */
.question-container .question-title-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.question-container .question-title-container > .question-text {
  order: 1;
  flex: 0 0 100%;
}
.question-container .question-title-container > .asterisk {
  order: 2;
}
.question-container .question-title-container > .ls-question-mandatory {
  order: 3;
}
.question-container .asterisk {
  font-size: 0.7rem;
  line-height: 1;
}
.question-container .ls-question-mandatory {
  display: inline;
  font-size: 0.7rem;
  line-height: 1;
  color: #6E748C;
  margin-top: 2px;
}

/* Lista odpowiedzi jako karta - jak tabela macierzy */
.question-container .ls-answers.radio-list {
  margin: 0 0 0 16px;
  padding: 0;
  width: 50%;
  border: 1px solid #dfe6e2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.question-container .ls-answers.radio-list .answer-item.radio-item {
  margin: 0;
  padding: 14px 16px 14px 44px;
  border-top: 1px solid #e7ece9;
  transition: background-color .12s ease;
  display: flex;
  align-items: center;
}
.question-container .ls-answers.radio-list .answer-item.radio-item:first-child {
  border-top: 0;
}
.question-container .ls-answers.radio-list .answer-item.radio-item:nth-child(even) {
  background-color: #f7faf8;
}
.question-container .ls-answers.radio-list .answer-item.radio-item:hover {
  background-color: #ecf6f0;
}
.question-container .ls-answers.radio-list .answer-item.radio-item:has(input[type=radio]:checked) {
  background-color: #d6f0e0;
}

/* Wieksze, lepiej rozdzielone kropki - spojnie z tabela macierzy.
   Wycentrowane w pionie wzgledem tekstu odpowiedzi. */
.question-container .ls-answers.radio-list .radio-item label::before {
  width: 28px;
  height: 28px;
  margin-left: -28px;
  top: 50%;
  transform: translateY(-50%);
}
.question-container .ls-answers.radio-list .radio-item label::after {
  width: 14px;
  height: 14px;
  left: 7px;
  margin-left: -28px;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%) scale(0, 0);
}
.question-container .ls-answers.radio-list .radio-item input[type=radio]:checked + label::after {
  transform: translateY(-50%) scale(1, 1);
}

/* Na waskich ekranach karta na pelna szerokosc */
@media only screen and (max-width: 760px) {
  .question-container .ls-answers.radio-list {
    width: 100%;
  }
}