/**
 * QA UI fixes — раздел 1 (визуал) и связанные CSS-правки.
 */

/* --- #1, #4: обложки --- */
.book-cover,
.listing__cover,
.book-cover-wrap,
.book-card-item .w300b,
.book-card-item .ptr {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.book-cover img,
.cover img,
.listing__cover img,
.book-cover-link img,
.book-cover-wrap img,
.book-card-item .w300b img,
.book-card-item .ptr img,
.bookinfo .w300b picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
    max-width: 100%;
}

.book-cover-wrap .book-cover-link picture,
.book-card-item .w300b picture,
.book-card-item .ptr picture {
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    max-width: 100%;
}

/* --- #2: кнопки входа поверх баннеров --- */
.header__buttons {
    position: relative;
    z-index: 100;
}

.header__main .header__hotlinks-row,
.header__main .header__search-row {
    z-index: 90;
}

/* --- #3: текст книги --- */
.book-text,
.chapter-content,
.reader-text,
.reader__text,
.reader__content,
.popup-reader__content {
    white-space: pre-wrap;
}

.book-text p,
.chapter-content p,
.reader-text p,
.reader__text p,
.reader__content p {
    margin-bottom: 1em;
}

/* --- #5: горизонтальный скролл при переполнении --- */
html,
body {
    overflow-x: auto;
}

.main-site-wrapper,
.cntl-wrapper,
.page-container {
    overflow-x: auto;
    max-width: 100%;
}

/* --- #6, #12: тёмная тема — оглавление и читалка --- */
html.z-night-mode .toc,
html.z-night-mode .contents,
html.z-night-mode .reader__toc,
html.z-night-mode .popup-pages,
html.z-night-mode .popup-pages__inner {
    color: #e8e8e8;
    background-color: #2a2a2a;
}

html.z-night-mode .toc a,
html.z-night-mode .contents a,
html.z-night-mode .reader__toc a {
    color: #e8e8e8;
}

html.z-night-mode .reader-text,
html.z-night-mode .reader__text,
html.z-night-mode .reader__content,
html.z-night-mode .chapter-content {
    color: #e0e0e0;
}

/* --- #7: быстрый поиск --- */
.header-search-suggestions,
.search-suggestions {
    min-width: 400px;
    max-height: 400px;
    overflow-y: auto;
}

@media (max-width: 480px) {
    .header-search-suggestions,
    .search-suggestions {
        min-width: min(400px, calc(100vw - 24px));
    }
}

/* --- #8: счётчик прогресса чтения --- */
#bookpg2,
.reader__pages,
.reader__nav-progress,
.progress-percent,
.reading-progress {
    display: inline !important;
    visibility: visible !important;
}

.reader__pages #bookpg2 {
    font-weight: 600;
}

/* --- #10: регистрация --- */
#popup-register.popup-enter_active,
#popup-register {
    z-index: 10001 !important;
}

#popup-register .popup-enter__inner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10002;
}

/* --- #11: рамки и уведомления --- */
.notice,
.info-box,
.bordered,
.notice-box,
.book-read-login-notice,
.pc-contest-notice {
    font-size: 14px;
}

@media (max-width: 767px) {
    .notice,
    .info-box,
    .bordered,
    .notice-box,
    .book-read-login-notice,
    .pc-contest-notice {
        font-size: max(12px, 14px);
    }
}

/* --- #13: z-index иерархия --- */
.main-site-wrapper,
.cntl-wrapper,
main,
.page-container {
    position: relative;
    z-index: 1;
}

.header__main {
    z-index: 100;
}

.popup-enter,
.popup-enter_active,
.modal,
.modal.show {
    z-index: 1000;
}

#popup-register,
#popup-login {
    z-index: 10001 !important;
}

/* --- #15: комиксы — масштаб по умолчанию --- */
.comic-page img,
.comic-reader img,
.reader__vertical-canvas,
.reader__vertical-page img,
.pc-comic-page img {
    width: 100%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
}

/* --- #16: выравнивание текста под обложкой --- */
.book-card-mini .toptile,
.book-card-layout-wrapper,
.bookinfo-top__row,
.page_wrapper {
    align-items: flex-start;
}

.book-card-mini .textcenter,
.bookinfo-top__meta,
.book-desc-desktop,
.book-desc-mobile {
    margin-left: 0;
}

/* --- #18: хлебные крошки --- */
.breadcrumb,
.breadcrumbs,
.path,
.book-breadcrumbs,
.author_breadcrumbs {
    padding: 8px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-breadcrumbs__list {
    padding: 0 16px;
}

/* --- #22: бейдж «Активный» --- */
.badge-active,
.status-badge.active-label,
.active-label,
.homepage-author-activity__badge,
.concurs_status-badge--active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    overflow: visible;
    clip-path: none;
}

/* --- #23: статы симулятора --- */
:root {
    --stat-value-color: #333;
}

#game-container .stat-card__value,
#game-container .stat-card-money .stat-card__value,
#game-container .stat-card-skill .stat-card__value,
#game-container .stat-card-popularity .stat-card__value,
.skill-level .value,
.money .value,
.popularity .count {
    color: var(--stat-value-color);
}

.skill-level .suffix,
#skill-level-badge {
    color: var(--stat-value-color);
}

/* --- #24: «Всего заработано» --- */
.history-stat span:has(#history-total-income) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    font-size: 1.35em;
}

#history-total-income {
    font-size: inherit;
    font-weight: inherit;
}

/* --- #25: счётчик заполнения полей профиля --- */
[data-profile-privacy-percent],
.settings_privacy-level strong {
    font-family: inherit;
    font-size: inherit;
    font-variant-numeric: normal;
}

/* --- #43: кнопки «Спасибо» / «Не согласен» --- */
.review-thanks-actions,
.thanks-actions,
.forum-thanks-row,
.author_message .flex.space-between {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review-thanks-actions.text-right,
.thanks-actions.justify-end {
    justify-content: flex-end;
}

/* --- #32: способы оплаты — fallback --- */
.payment-method,
.pay-method,
.checkout-payment__item,
.payment_way_item--method .left {
    min-height: 48px;
    min-width: 80px;
}

.payment_way_item--method .left img {
    display: block;
    max-width: 120px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.payment-method:empty::after,
.pay-method:empty::after {
    content: attr(data-label);
    font-size: 12px;
    color: #666;
}

/* --- юридические документы --- */
.legal-section,
.viewdoc > p,
.viewdoc > h2,
.viewdoc > h3 {
    padding-left: 20px;
}

.legal-doc-list li {
    display: list-item;
    margin-bottom: 0.5em;
}

.viewdoc p.legal-section {
    margin-bottom: 0.75em;
    white-space: normal;
}

.viewdoc ul li:last-child {
    margin-bottom: 0;
}