/*
 * content.css — страницы с текстом: страница из раздела «Страницы»,
 * отзывы о магазине, статьи блога, 404.
 *
 * app.css не правим. Порядок подключения относительно app.css не задан,
 * поэтому правила, которые должны его перебить, начинаются с html.
 */

/* ── Выравнивание в тексте страниц: стояло <style> перед текстом каждой
      страницы прежнего сайта — перенесено без изменений ── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Картинки в тексте страниц не шире колонки (сертификаты — 970 px) */
.block__content img { max-width: 100%; height: auto; }
/* Блок «Доставка и оплата» внутри текста страницы: значки задают свою высоту
   (height="30"), правило выше растянуло бы SVG на всю ширину */
.block__content .category__ship-info img { width: auto; height: 30px; }
.block__content iframe { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Отзывы о магазине — стили виджета отзывов прежнего сайта
   (kdreviews/css/reviews.css), перенесены без изменений. Переменные
   с :root перенесены на сам виджет, чтобы не задевать остальную тему.
   ═══════════════════════════════════════════════════════════════ */
.testimonials-widget-wrapper {
    --borderColor: #c8cadd;
    --borderColor2: #dbdcee;
    --colorTheme: #39aa25;
    --colorName: #7f7f7f;
    --colorDisabled: #a1a1a1;
    --bordo: #af1919;
    --font-color: #505471;
    --thumb-bg: #f8fafb;
    --placeholder-color: #9597af;
}

.testimonials-widget-wrapper {
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.testimonials-widget-header {
    background: #fff;
    border-bottom: 1px solid var(--borderColor2);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html .testimonials-widget-header h2 {
    font-size: 20px;
    color: var(--font-color);
    font-weight: 600;
    margin: 0;
}

.testimonials-widget-stats { display: flex; align-items: center; gap: 15px; }
.testimonials-rating-average { font-size: 24px; font-weight: 700; color: var(--colorTheme); }
.testimonials-stars-display { display: inline-flex; gap: 3px; }
.testimonials-star-icon { color: #ffd700; font-size: 18px; }
.testimonials-star-icon.testimonials-star-empty { color: var(--borderColor); }
.testimonials-total-count { font-size: 13px; color: var(--colorName); }

.testimonials-widget-body { padding: 30px; }

.testimonials-add-button {
    width: 100%;
    padding: 14px;
    background: var(--colorTheme);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.testimonials-add-button:hover { background: #329520; }

.testimonials-form-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.testimonials-form-wrapper.testimonials-form-active { max-height: 1000px; }

.testimonials-form-block {
    background: var(--thumb-bg);
    padding: 25px;
    border-radius: 6px;
    border: 1px solid var(--borderColor2);
    margin-top: 24px;
}

.testimonials-field-group { margin-bottom: 20px; }

.testimonials-field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--font-color);
    font-size: 14px;
}

.testimonials-field-group input,
.testimonials-field-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--borderColor);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    background: #fff;
    color: var(--font-color);
}
.testimonials-field-group input::placeholder,
.testimonials-field-group textarea::placeholder { color: var(--placeholder-color); }
.testimonials-field-group input:focus,
.testimonials-field-group textarea:focus { outline: none; border-color: var(--colorTheme); }
.testimonials-field-group textarea { resize: vertical; min-height: 100px; }

.testimonials-rating-selector { display: flex; gap: 6px; font-size: 28px; }
.testimonials-rating-selector .testimonials-star-selectable {
    cursor: pointer;
    color: var(--borderColor);
    transition: color 0.2s ease;
}
/* Наведение у прежнего виджета красило звёзды цветом #878cb5 из скрипта —
   здесь тот же цвет классом */
.testimonials-rating-selector .testimonials-star-selectable.is-hover { color: #878cb5; }
.testimonials-rating-selector .testimonials-star-selectable.testimonials-star-selected { color: var(--colorTheme); }

.testimonials-form-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.testimonials-form-actions .testimonials-button { width: auto; }

.testimonials-button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--colorTheme);
    color: #fff;
    margin-top: 16px;
    width: 100%;
}
.testimonials-button:disabled { opacity: .6; cursor: default; }
.testimonials-button-submit { background: var(--colorTheme); color: #fff; }
.testimonials-button-submit:hover { background: var(--font-color); }
.testimonials-button-cancel { background: var(--borderColor2); color: var(--font-color); }
.testimonials-button-cancel:hover { background: var(--borderColor); }

.testimonials-items-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }

.testimonials-single-item {
    padding: 20px;
    background: var(--thumb-bg);
    border: 1px solid var(--borderColor2);
    border-radius: 6px;
    transition: all 0.2s ease;
}
.testimonials-single-item:hover { border-color: var(--borderColor); }
.testimonials-single-item.is-hidden { display: none; }

.testimonials-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.testimonials-author-block { display: flex; align-items: center; gap: 12px; }
.testimonials-author-avatar {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--colorTheme);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}
html .testimonials-author-details h4 {
    font-size: 15px;
    color: var(--font-color);
    margin: 0 0 3px;
    font-weight: 600;
}
.testimonials-publish-date { font-size: 13px; color: var(--colorName); }
.testimonials-item-rating { display: flex; gap: 3px; }
.testimonials-item-rating .testimonials-star-icon { font-size: 16px; }

.testimonials-item-title { color: var(--font-color); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.testimonials-item-content {
    color: var(--font-color);
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 14px;
    overflow-wrap: anywhere;
}
/* Что покупатель брал — подпись под отзывом */
.testimonials-item-product { color: var(--colorName); font-size: 13px; }

/* Ответ магазина под отзывом — как у прежнего виджета отзывов */
.testimonials-admin-response {
    margin-top: 16px;
    padding: 16px;
    background: #fff;
    border-left: 3px solid var(--colorTheme);
    border-radius: 4px;
}
.testimonials-admin-response-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.testimonials-admin-label {
    background: var(--colorTheme);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.testimonials-admin-response-content { color: var(--font-color); line-height: 1.6; font-size: 14px; }

.testimonials-empty-state { text-align: center; padding: 60px 20px; color: var(--colorDisabled); }
.testimonials-empty-state p { font-size: 15px; margin: 0; }

.testimonials-load-more-container[hidden] { display: none; }

.testimonials-form-response {
    width: 100%;
    display: none;
    padding: 15px 20px;
    margin-top: 15px;
    border-radius: 8px;
    background-color: #d4edda;
    color: #155724;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.testimonials-form-response.show { display: block; }
.testimonials-form-response.is-error { background-color: #ffdbdb; color: var(--bordo); }

@media (max-width: 768px) {
    .testimonials-widget-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .testimonials-widget-body { padding: 20px; }
    .testimonials-item-top { flex-direction: column; gap: 10px; }
    .testimonials-form-actions { flex-direction: column; }
    .testimonials-form-actions .testimonials-button,
    .testimonials-button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Статьи блога — в виде страниц магазина. Белые блоки, заголовки и
   абзацы оформляет app.css (.block__content .block__page …); здесь —
   только то, чего у страниц не было: карточка статьи, дата, обложка,
   оглавление, метки, номера страниц.
   ═══════════════════════════════════════════════════════════════ */
.content__lead { font-size: 14px; margin: 0 0 20px; }
.content__banner { display: block; width: 100%; border-radius: 6px; margin-bottom: 20px; }

/* Разделы блога — кнопками .links из app.css; открытый закрашен */
html .block__content .links a.is-active { background-color: #036b97; color: #fff; }
html .block__content .links a:hover { background-color: #036b97; color: #fff; }

/* Статья в ленте */
.content__post { display: flex; gap: 20px; align-items: flex-start; }
.content__post-image { flex: 0 0 200px; display: block; border-radius: 4px; overflow: hidden; }
.content__post-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.content__post-body { flex: 1 1 auto; min-width: 0; }
html .block__content .block__page .content__post-title { margin-bottom: 6px; }
.content__post-title a { color: inherit; text-decoration: none; }
.content__post-title a:hover { color: #036b97; }
html .block__content .block__page .content__post-summary { margin: 10px 0; }
.content__post-more { color: #036b97; font-size: 13px; text-decoration: underline; }
.content__post-more:hover { text-decoration: none; }

/* Дата, время чтения, раздел */
.content__post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: #777;
    font-size: 12px;
}
.content__article > .content__post-meta { margin: -10px 0 20px; }
.content__post-meta a { color: #036b97; text-decoration: underline; }
.content__post-meta a:hover { text-decoration: none; }

/* Страница статьи */
.content__cover { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 4px; margin-bottom: 20px; }
.content__text::after { content: ""; display: table; clear: both; }
html .block__content .block__page .content__text h2,
html .block__content .block__page .content__text h3 { margin-top: 20px; }
html .block__content .block__page .content__text > :first-child { margin-top: 0; }
.content__text ul, .content__text ol { font-size: 13px; padding-left: 20px; }
.content__text li { margin-bottom: 4px; }
.content__text a { color: #036b97; text-decoration: underline; }
.content__text a:hover { text-decoration: none; }
.content__text blockquote { margin: 0 0 1rem; padding: 10px 15px; background: #f3f7fc; border-radius: 4px; color: #036b97; font-size: 13px; }
.content__text table { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: 1rem; }
.content__text td, .content__text th { border: 1px solid #eee; padding: 6px; }

.content__toc { background: #f3f7fc; border-radius: 4px; padding: 12px 15px; margin-bottom: 20px; font-size: 13px; }
.content__toc-title { font-weight: 500; margin-bottom: 6px; }
.content__toc ol { margin: 0; padding-left: 20px; }
.content__toc li { margin-bottom: 3px; }
.content__toc a { color: #036b97; }

.content__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; font-size: 13px; }
.content__tags a { color: #036b97; text-decoration: none; }
.content__tags a:hover { text-decoration: underline; }

html .content__back a { margin-bottom: 0; }

.content__products, .content__related { margin-top: 30px; }

.content__related-list { list-style: none; margin: 0; padding: 0; }
.content__related-list li {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
}
.content__related-list li:first-child { padding-top: 0; }
.content__related-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.content__related-list a { color: #036b97; text-decoration: underline; }
.content__related-list a:hover { text-decoration: none; }
.content__related-list time { color: #777; white-space: nowrap; }

/* Номера страниц — стиль списка страниц прежнего сайта
   (ul.menu-h из блока page.reviews), без изменений */
.content__pager { margin: 10px 0 30px; }
.menu-h { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; gap: 7px 0; }
.menu-h li { margin-right: 7px; }
.menu-h li.selected a { background-color: #036b97; color: #fff; }
.menu-h li span,
.menu-h li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 4px;
    color: #000;
    background-color: #fff;
    width: 32px;
    height: 32px;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

@media (max-width: 767px) {
    .content__post { flex-direction: column; gap: 12px; }
    .content__post-image { flex: none; width: 100%; }
    .content__related-list li { flex-direction: column; gap: 2px; }
    .content__pager { margin-bottom: 20px; }
}

/* ── 404 ── */
.content__error-search { display: flex; gap: 10px; max-width: 480px; margin: 20px 0; }
.content__error-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid #c8cadd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}
.content__error-search input:focus { outline: none; border-color: #39aa25; }
.content__error-search .theme-btn { flex: none; border: 0; cursor: pointer; }