.about_q_b img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about_q_b {
     width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    /* Эффект размытия */
    filter: blur(4px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overflow: hidden;
}

.about_q_b::before {
  /* Заставляем элемент рендериться */
  content: "";

  /* Применяем фоновое изображение */
  background-image: url(../images/background/glass.webp);
  background-repeat: repeat;
  background-size: 750px;

  /* Регулируем яркость */
  opacity: 0.3;

  /* Заполняем фоновое пространство */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;

  /* Рендерим за другими дочерними элементами */
  /* z-index: -1; */

  /* Исправляем отражение в экран */
  background-attachment: fixed;
}









/* Основной макет страницы */
.test-page-layout {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

/* ЛЕВАЯ КОЛОНКА — узкая, фиксированная ширина */
.test-sidebar {
    width: 350px;
    background: white;
    border-radius: 20px;
    padding: 14px 20px;
    box-shadow: 0 4px 20px rgba(50, 38, 89, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: max-content ;
}

.test-sidebar .test-title {
    text-align: center;
    font-size: 22px;
    margin: 0 0 0px 0;
    color: #322659;
}

.test-sidebar .test-meta {
    display: flex;
    /* gap: 8px; */
    flex-wrap: wrap;
    /* justify-content:start */
    /* margin: 0 0 16px 0; */
    font-size: 13px;
    color: #666;
}

.test-sidebar .test-cover {
    max-width: 100%;
    margin: 0;
}

.test-sidebar .test-cover img {
    max-width: 100%;
    max-height: 250px;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.test-sidebar .btn {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    background-color: #38B2AC;
    text-align: center;
    color: white;
}

/* ПРАВАЯ КОЛОНКА — широкая, занимает оставшееся пространство */
.test-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: max-content;
}

/* Блок описания */
.test-description {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(50, 38, 89, 0.1);
}

.test-description h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: #322659;
}

.test-description p {
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}

/* Блок метрик */
.test-stats {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 6px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f5f0ff;
    border: 1.5px solid transparent;
    transition: all .15s;
    flex-shrink: 1;
    min-width: 0;
}

.stat-item i {
    font-size: 16px;
    color: #9F7AEA;
}

.stat-item--vote {
    cursor: pointer;
}
.stat-item--vote:hover {
    background: #ede9f8;
    border-color: #9F7AEA;
}
.stat-item--vote.active-like {
    background: #dcfce7;
    border-color: #22c55e;
    color: #15803d;
}
.stat-item--vote.active-like i { color: #22c55e; }
.stat-item--vote.active-dislike {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}
.stat-item--vote.active-dislike i { color: #ef4444; }

/* Блок отзывов */
.reviews-section {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(50, 38, 89, 0.1);
}

.reviews-section h3 {
    font-size: 20px;
    margin-bottom: 16px;
    color: #322659;
}

#reviews-list {
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.review-item {
    padding: 15px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.review-item .review-author {
    font-weight: 600;
    color: #322659;
    display: block;
    margin-bottom: 4px;
}

.review-item .review-date {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* Форма отзыва */
.review-form {
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.review-form h4 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #322659;
}

.review-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: vertical;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
}

.review-form .btn {
    width: 100%;
    max-width: 150px;
    margin: 0;
    padding: 12px;
    font-size: 16px;
}

/* Адаптивность — на мобильных устройствах делаем одну колонку */
@media (max-width: 992px) {
    .test-page-layout {
        flex-direction: column;
    }

    .test-sidebar {
        width: 100%;
        padding: 20px;
    }

    .test-content {
        padding: 0;
    }

    .test-sidebar .test-title {
        font-size: 24px;
    }

    .test-stats {
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .stat-item {
        padding: 5px 8px;
        font-size: 12px;
        gap: 4px;
    }
    .stat-item i { font-size: 14px; }
    .stat-item__label { display: none; }
}

@media (max-width: 576px) {
    .test-sidebar .btn {
        max-width: 100%;
    }

    .test-stats .stat-item {
        justify-content: center;
    }

    .review-form textarea {
        font-size: 14px;
    }
}

/* ===== Likes ===== */
.like-row { display:flex;gap:10px;margin:16px 0; }
.like-btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;border:2px solid #e9e5f5;border-radius:10px;
    background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;
}
.like-btn:hover { border-color:#9F7AEA; }
.like-btn.active-like    { background:#dcfce7;border-color:#22c55e;color:#15803d; }
.like-btn.active-dislike { background:#fee2e2;border-color:#ef4444;color:#b91c1c; }
.like-btn:disabled { opacity:.5;cursor:not-allowed; }

/* ===== Comments (about_quiz) ===== */
.comments-section { box-shadow: 0 4px 20px rgba(50, 38, 89, 0.1); margin-top:20px;padding-top:28px;border-top:1px solid #ede9f8; background-color: white; padding: 20px; border-radius: 20px }
.comments-section h3 { font-size:18px;font-weight:700;color:#322659;margin-bottom:16px; }
.comment-form { margin-bottom:24px; }
.comment-form textarea {
    width:100%;min-height:80px;border:1px solid #e9e5f5;border-radius:10px;
    padding:12px;font-size:14px;color:#322659;resize:vertical;box-sizing:border-box;
    font-family:inherit;
}
.comment-form textarea:focus { outline:none;border-color:#9F7AEA; }
.comment-submit {
    margin-top:8px;background:#9F7AEA;color:#fff;border:none;
    padding:10px 24px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;
}
.comment-submit:hover { background:#7c5dc9; }
.comment-submit:disabled { opacity:.6;cursor:not-allowed; }
.comment-login-prompt { padding:14px;background:#faf5ff;border-radius:10px;font-size:14px;color:#666; }
.comment-login-prompt a { color:#9F7AEA;font-weight:600; }
.comment-item { display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #f5f0ff; }
.comment-item:last-child { border-bottom:none; }
.comment-avatar {
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#9F7AEA,#38B2AC);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:700;color:#fff;
}
.comment-body { flex:1;min-width:0; }
.comment-meta { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
.comment-author { font-weight:700;font-size:13px;color:#322659;text-decoration:none; }
.comment-author:hover { text-decoration:underline; }
.comment-date { font-size:11px;color:#bbb; }
.comment-text { font-size:14px;color:#444;line-height:1.5;word-break:break-word; }
.comment-delete { background:none;border:none;cursor:pointer;color:#ccc;font-size:13px;margin-left:auto;padding:2px 6px;border-radius:4px; }
.comment-delete:hover { color:#e53e3e;background:#fee2e2; }
.comments-empty { text-align:center;color:#bbb;font-size:14px;padding:24px 0; }
.comments-loading { text-align:center;color:#bbb;padding:20px 0;font-size:14px; }

/* ===== Author card ===== */
.author-card {
    display:flex;align-items:center;gap:10px;
    background:#faf5ff;border-radius:12px;padding:10px 12px;
    text-decoration:none;color:inherit;transition:background .15s;
    border:1px solid #ede9f8;
    width: 100%;
}
.author-card:hover { background:#f0ebff; }
.author-card .gt-avatar-wrap { width:32px;height:32px;flex-shrink:0; }
.author-card .gt-avatar-initial { font-size:13px;font-weight:700; }
.author-card .gt-avatar-wrap img { width:32px;height:32px;object-fit:cover; }
.author-info { display:flex;flex-direction:column;gap:1px; flex:1; }
.author-info__label { font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:.4px; }
.author-info__name  { font-size:13px;font-weight:700;color:#322659; }
.author-card__arrow { font-size:14px;color:#bbb;margin-left:auto;flex-shrink:0; }

/* ===== Category badge ===== */
.test-category-badge {
    display:inline-flex;align-items:center;gap:4px;
    padding:4px 12px;border-radius:20px;
    background:#f0ebff;color:#7c3aed;
    font-size:12px;font-weight:600;
}