@charset "UTF-8";
.main-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 500px));
  grid-auto-rows: minmax(200px, 400px);
  grid-gap: 50px;
  justify-content: center;
}
.main-items > * {
  overflow: hidden; /* Скрыть содержимое, которое выходит за пределы */
}
@media (max-width: 850px) {
  .main-items {
    grid-template-columns: repeat(1, minmax(300px, 450px));
    grid-auto-rows: minmax(100px, auto);
    justify-content: center;
  }
  .main-items > * {
    height: auto;
    max-height: 400px;
  }
}

.top-left-section .picture-book {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  object-fit: cover;
}
.top-left-section .img-book {
  height: 100%;
  width: auto;
  max-width: 90%;
  border-radius: 10px;
}

.top-right-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 850px) {
  .top-right-section {
    gap: 20px;
    justify-content: unset;
    max-height: 600px;
  }
  .top-right-section h2, .top-right-section h4, .top-right-section h5 {
    text-align: center;
  }
}
.top-right-section .title-book {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* Ограничиваем заголовок 2 строками */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Позволяем перенос слов */
  word-break: break-word; /* Перенос длинных слов */
  font-size: 28px;
}
@media (max-width: 850px) {
  .top-right-section .title-book {
    -webkit-line-clamp: 7; /* Ограничиваем заголовок 2 строками */
  }
}
.top-right-section .authors-book {
  font-size: 22px;
}
.top-right-section .stat-book {
  width: 100%;
  height: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: left;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 550px) {
  .top-right-section .stat-book {
    justify-content: center;
  }
}
.top-right-section .rating-book {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  gap: 8px;
  box-sizing: border-box;
  background-color: transparent;
  border: none;
}
.top-right-section .rating-book:hover {
  cursor: pointer;
}
.top-right-section .rating-book:focus {
  outline: none;
}
@media (max-width: 550px) {
  .top-right-section .rating-book {
    max-width: 100%;
  }
}
.top-right-section .rating-stars-book {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.top-right-section .rating-stars-book .c-rate {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.top-right-section .rating-stars-book .c-rate .c-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-right-section .count-rating-users {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  overflow: hidden;
  box-sizing: border-box;
}
.top-right-section .count-rating-users span {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* Ограничиваем заголовок 1 строками */
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-right-section .count-correct-answers-book-wrapper {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  width: 100%;
  justify-content: end;
  height: 0;
  padding-right: 10px;
  padding-left: 10px;
}
.top-right-section .count-correct-answers-book-wrapper .count-correct-answers-book {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  height: 30px;
  align-items: center;
  color: white;
}
.top-right-section .count-correct-answers-book-wrapper .count-correct-answers-book span {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* Ограничиваем заголовок 1 строками */
  text-overflow: ellipsis;
}
.top-right-section .progressbar {
  background-color: #ADCBB5;
  border-radius: 20px;
  height: 30px;
  width: 100%;
}
.top-right-section .progressbar .progressbar-user-progress {
  background-color: #62A77C;
  border-radius: 20px;
  height: 100%;
  width: 0;
}
.top-right-section .btn-start-continue-test {
  background-color: #248046;
  border: none;
  border-radius: 44px;
  height: 60px;
  width: 270px;
}
.top-right-section .btn-start-continue-test:focus {
  outline: none;
}
.top-right-section .btn-start-continue-test:hover {
  background-color: rgba(21, 54, 38, 0.8);
}
.top-right-section .btn-start-continue-test:active {
  background-color: rgb(21, 54, 38);
}
.top-right-section .block-btns-all-test {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.top-right-section .btn-start-all-test {
  background-color: transparent;
  border-radius: 44px;
  border: 2px solid #2B6D44;
}
.top-right-section .btn-start-all-test:hover {
  background-color: rgba(122, 130, 138, 0.15);
}
.top-right-section .btn-start-all-test:active {
  background-color: rgba(122, 130, 138, 0.3);
}

.bottom-left-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 850px) {
  .bottom-left-section h3 {
    text-align: center;
  }
}
.bottom-left-section .description {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: justify;
  transition: max-height 0.5s ease;
  height: 100%;
}
@media (max-width: 850px) {
  .bottom-left-section .description {
    max-height: 100px;
    overflow-y: hidden;
  }
  .bottom-left-section .description.collapsed {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
}
.bottom-left-section .description.expanded {
  max-height: 260px;
  overflow-y: auto;
}
.bottom-left-section .description p {
  margin-top: 10px;
  margin-bottom: 5px;
  text-indent: 1.5em;
}
.bottom-left-section .toggle-button {
  display: none;
  justify-content: center;
  width: 100%;
  height: 30px;
  background-color: transparent;
  border: none;
}
.bottom-left-section .toggle-button.visible {
  display: flex;
}
.bottom-left-section .toggle-button:focus {
  outline: none;
}
.bottom-left-section .toggle-button img {
  height: 100%;
  width: auto;
  transition: transform 0.3s ease;
}
.expanded .bottom-left-section .toggle-button img {
  transform: rotate(180deg);
}

.bottom-right-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 850px) {
  .bottom-right-section h3 {
    text-align: center;
  }
}
.bottom-right-section .list-chapters-book {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border-radius: 10px;
  border: none;
  box-sizing: border-box;
}
@media (max-width: 850px) {
  .bottom-right-section .list-chapters-book {
    overflow-y: auto;
    max-height: 250px;
  }
}
.bottom-right-section .divider-chapters-book {
  background-color: rgba(21, 54, 38, 0.34);
  height: 1px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.bottom-right-section .chapters-book {
  display: flex;
  flex-direction: column;
  padding-left: 3px;
  gap: 4px;
}
.bottom-right-section .chapter-book {
  width: 100%;
  height: 40px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  text-align: start;
  padding-left: 5px;
  transition: transform 0.3s ease;
}
.bottom-right-section .chapter-book .chapter-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bottom-right-section .chapter-book:not(.premium-locked):hover {
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(-4px);
}
.bottom-right-section .chapter-book:not(.premium-locked):active {
  background: rgb(173, 203, 181);
}
.bottom-right-section .chapter-book:not(.premium-locked):focus {
  outline: none;
}
.bottom-right-section .chapter-book.premium-locked {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.62);
  padding-right: 8px;
}
.bottom-right-section .chapter-book.premium-locked img {
  width: 24px;
  height: 24px;
}
.bottom-right-section .subsections {
  padding-left: 10px;
}
.bottom-right-section .subsections .subsections {
  padding-left: 15px;
}
.bottom-right-section .subsections .subsections .subsections {
  padding-left: 20px;
}
.bottom-right-section .subsections .subsections .subsections .subsections {
  padding-left: 25px;
}
.bottom-right-section .chapter-book:not(.premium-locked):hover + .subsections {
  background: rgba(173, 203, 181, 0.15);
  transition: background-color 0.3s ease;
}
.bottom-right-section .chapter-book:not(.premium-locked):active + .subsections {
  background: rgb(173, 203, 181);
}

/*Стили для звездочек в форме для оценки*/
.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}
.rating input {
  display: none; /* Скрываем радиокнопки */
}
.rating label {
  font-size: 30px;
  color: #6c6962;
  cursor: pointer;
  transition: color 0.2s;
}
.rating label:before {
  content: "★";
}
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
  color: #fece3c;
}

.chapter-book {
  position: relative;
}
.chapter-book::after, .chapter-book::before {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.chapter-book::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 13px;
  z-index: 10;
}
.chapter-book::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #222;
  z-index: 10;
}
.chapter-book.premium-locked .lock-icon {
  position: relative;
  cursor: pointer;
}
.chapter-book.premium-locked .lock-icon:hover, .chapter-book.premium-locked .lock-icon:focus {
  pointer-events: all;
}
.chapter-book.premium-locked.tooltip-active::after, .chapter-book.premium-locked.tooltip-active::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}