/* ================================
   COMMENTS MODULE (COMPLETO)
   ================================ */

:root {
    --c-bg: #fff;
    --c-surface: #fafafa;
    --c-border: #e6e6e6;
    --c-border-strong: #d7d7d7;
    --c-text: #232323;
    --c-text-soft: #666;
    --c-primary: #222;
    --c-primary-contrast: #fff;
    --c-accent: #8a489f;
    /* roxo */
    --c-accent-20: rgba(138, 72, 159, .20);
    --c-accent-10: rgba(138, 72, 159, .10);
    --c-card-bg: #f7f7f8;
    /* fundo cinza claro do card */
    --radius: 14px;
    --shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.comment-form .col-lg-6 {

    width: 100%;
}

/* Container geral */
.blog-details-comment {
    margin-top: 48px;
    padding: 32px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Título */
.blog-details-comment .comment-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--c-text);
}

/* Lista raiz */
.blog-details-comment .comment-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0
}

/* Card do comentário – Borda roxa + fundo cinza */
.blog-details-comment .comment-list>.comment.sc-card,
.blog-details-comment .comment-list>.pingback,
.blog-details-comment .comment-list>.trackback {
    margin: 0 0 16px;
    border: 1.5px solid var(--c-accent-20);
    border-radius: 12px;
    background: var(--c-card-bg);
    overflow: hidden;
}

/* Corpo */
.blog-details-comment .comment-body {
    padding: 22px;
    position: relative
}

/* Header: avatar + autor + data */
.sc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap
}

.sc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: 0 0 64px;
    border: 2.5px solid var(--c-accent);
    background: #fff
}

.sc-authorbox {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sc-name {
    font-weight: 700;
    color: var(--c-text)
}

.sc-date a,
.sc-date time {
    font-size: .92rem;
    color: #7a7a7a;
    text-decoration: none
}

.sc-date a:hover {
    text-decoration: underline
}

/* Conteúdo */
.sc-content {
    color: var(--c-text);
    line-height: 1.65;
    margin: 8px 0 16px
}

.sc-content p {
    margin: 0 0 10px
}

/* Barra de resposta (input fake + botão roxo) */
.sc-replybar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px
}

.sc-reply-input {
    flex: 1 1 auto;
    height: 42px;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    color: #8c8c8c
}

.sc-reply-input::placeholder {
    color: #9aa0a6
}

.sc-reply-btn,
.sc-replybar .comment-reply-link {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--c-accent);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease
}

.sc-reply-btn:hover,
.sc-replybar .comment-reply-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(138, 72, 159, .35)
}

/* Children – recuo + linha roxa */
.blog-details-comment .children {
    list-style: none;
    margin: 0 0 0 26px;
    padding: 0 0 0 18px;
    border-left: 2px dashed var(--c-accent-20)
}

.blog-details-comment .children>.comment.sc-card {
    margin-top: 16px;
    border-color: var(--c-accent-20);
    background: var(--c-card-bg)
}

/* Estado: aguardando moderação */
.blog-details-comment .comment-awaiting-moderation {
    display: inline-block;
    font-size: .875rem;
    color: #9a6e00;
    background: #fff7df;
    border: 1px solid #ffe9b5;
    padding: 6px 10px;
    border-radius: 8px;
    margin-top: 6px
}

/* Navegação */
.comment-navigation {
    display: flex;
    justify-content: space-between;
    margin: 18px 0 28px
}

.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    color: var(--c-text)
}

.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover {
    border-color: var(--c-accent)
}

/* ===== FORM DE COMENTÁRIOS ===== */
.blog-details-comment .blog-details-form {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border)
}

.blog-details-comment .details-form-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--c-text)
}

.blog-details-comment .comment-form {
    display: grid;
    gap: 14px
}

.blog-details-comment .comment-form .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

@media (min-width:768px) {

    .blog-details-comment {

        margin-top: 0;
    }

    .blog-details-comment .comment-form .row {
        grid-template-columns: 1fr 1fr
    }
}

.blog-details-comment .comment-form .form-group {
    margin: 0
}

.blog-details-comment .comment-form .form-control,
.blog-details-comment .comment-form input[type="text"],
.blog-details-comment .comment-form input[type="email"],
.blog-details-comment .comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    color: var(--c-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-size: 1rem
}

.blog-details-comment .comment-form textarea {
    min-height: 140px;
    resize: vertical
}

.blog-details-comment .comment-form .form-control:focus,
.blog-details-comment .comment-form input:focus,
.blog-details-comment .comment-form textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-10)
}

/* Botão "Publicar" alinhado à direita */
.blog-details-comment .comment-form .form-submit {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 0
}

.blog-details-comment .comment-form .form-btn,
.blog-details-comment .comment-form #submit,
.blog-details-comment .comment-form input[type="submit"] {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 999px;
    border: none;
    background: var(--c-accent);
    color: var(--c-primary-contrast);
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    line-height: 1;
    vertical-align: middle
}

.blog-details-comment .comment-form .form-btn:hover,
.blog-details-comment .comment-form #submit:hover,
.blog-details-comment .comment-form input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(138, 72, 159, .35)
}

.blog-details-comment .comment-form .form-btn:disabled,
.blog-details-comment .comment-form #submit:disabled,
.blog-details-comment .comment-form input[type="submit"]:disabled {
    opacity: .6;
    cursor: not-allowed
}

/* Placeholder + acessibilidade */
.blog-details-comment .comment-form ::placeholder {
    color: #9aa0a6
}

.blog-details-comment a:focus,
.blog-details-comment button:focus,
.blog-details-comment input:focus,
.blog-details-comment textarea:focus {
    outline: 2px dashed var(--c-accent);
    outline-offset: 2px
}

/* Responsivo do botão (opcional) */
@media (max-width:480px) {
    .blog-details-comment .comment-form .form-submit {
        justify-content: stretch
    }

    .blog-details-comment .comment-form .form-btn,
    .blog-details-comment .comment-form #submit,
    .blog-details-comment .comment-form input[type="submit"] {
        width: 100%;
        text-align: center
    }
}

/* Dark mode opcional */
@media (prefers-color-scheme:dark) {
    :root {
        --c-bg: #111214;
        --c-surface: #16181c;
        --c-border: #262a31;
        --c-border-strong: #303542;
        --c-text: #eaecef;
        --c-text-soft: #b7bcca;
        --c-primary: #eaecef;
        --c-primary-contrast: #0e0f12;
        --c-card-bg: #15171b;
        --shadow: 0 10px 25px rgba(0, 0, 0, .35)
    }

    .blog-details-comment .reply a:hover {
        background: var(--c-surface)
    }

    .blog-details-comment .comment-form .form-control,
    .blog-details-comment .comment-form input[type="text"],
    .blog-details-comment .comment-form input[type="email"],
    .blog-details-comment .comment-form textarea {
        background: #0f1114;
        border-color: var(--c-border);
        color: var(--c-text)
    }

    .blog-details-comment .comment-form .form-control:focus,
    .blog-details-comment .comment-form input:focus,
    .blog-details-comment .comment-form textarea:focus {
        box-shadow: 0 0 0 4px rgba(138, 72, 159, .22)
    }
}

/* ===== Share bar ===== */
.sc-sharebar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--c-border, #e6e6e6);
}

.sc-sharebar-title {
    font-weight: 700;
    color: var(--c-text, #232323);
    margin-right: .25rem;
}

/* Botões (padrão: roxo do tema) */
.sc-share {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--c-accent, #8a489f);
    color: #fff !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.sc-share:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.sc-share:focus {
    outline: 2px dashed var(--c-accent, #8a489f);
    outline-offset: 2px;
}

/* Tamanhos/responsivo */
@media (max-width:480px) {
    .sc-share {
        padding: 10px 16px;
        width: 100%;
        justify-content: center
    }
}

/* ===== (Opcional) cores por marca ===== */
/* Use adicionando a classe .sc-sharebar--brand no container */
.sc-sharebar.sc-sharebar--brand .sc-facebook {
    background: #1877F2;
}

.sc-sharebar.sc-sharebar--brand .sc-twitter {
    background: #000000;
}

/* X */
.sc-sharebar.sc-sharebar--brand .sc-linkedin {
    background: #0A66C2;
}

.sc-sharebar.sc-sharebar--brand .sc-whatsapp {
    background: #25D366;
    color: #0b2114 !important;
}

/* Hover igual para todas */
.sc-sharebar.sc-sharebar--brand .sc-share:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* Dark mode opcional */
@media (prefers-color-scheme:dark) {
    .sc-sharebar {
        border-top-color: rgba(255, 255, 255, .12);
    }
}