.comments{
    margin-top:1.5rem;
}

.comments-accordion{
    width:100%;
    margin-top:1rem;
}

.comments-accordion summary{
    display:none;
}

.comments-section{
    width:100%;
}

.comments h4{
    text-align:center;
    font-family:"horror-hustle", monospace;
    color: #9b1740;
    margin: .25rem;
    font-size: 60px !important; 
    font-weight: normal !important;
}

.comment{
    background:#111;
    
    border-top:1px dashed rgba(128, 0, 32, 0.6);
    padding:1rem;
    margin-top:1rem;
    color:#fff;
}

.comment strong{
    display: block;
color: #9b1740;
 font-family:"horror-hustle", monospace;
 font-size: 30px;
text-align: center;
}

.comment small{
    display:block;
    color: #fff;
    font-family:"courier", monospace;
    font-size:.75rem;
    margin-top:.2rem;
}

.comment p{
    color:#fff;
    margin-bottom:0;
}

.comment-form{
    margin-top:1.5rem;
    text-align:center;
}

.comment-form label{
    display:block;
    margin-bottom:.5rem;
 font-family:"horror-hustle", monospace;
    color: #9b1740;
    margin: .5rem;
    font-size: 60px !important; 
    font-weight: normal !important;
}

.comment-form textarea{
    width:100%;
    min-height:100px;
    padding:.85rem 1rem;

    border-radius:14px;
    border:1px solid rgba(128, 0, 32, 0.6);

    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color:#fff;
    font-family:"courier", monospace;
    font-size:14px;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.6),
        0 0 0 rgba(128, 0, 32, 0);

    transition: all .2s ease;
}

.comment-form textarea:focus,
.comment-form textarea:focus-visible{
    outline:none;
    border-color:#8b1236;

    background:rgba(30, 10, 15, 0.72);

    box-shadow:
        inset 0 0 14px rgba(0,0,0,.85),
        0 0 0 3px rgba(139,18,54,.22),
        0 0 18px rgba(139,18,54,.45);

    animation: commentPulse 1.4s ease-in-out infinite alternate;
}

@keyframes commentPulse{
    from{
        box-shadow:
            inset 0 0 14px rgba(0,0,0,.85),
            0 0 0 3px rgba(139,18,54,.18),
            0 0 12px rgba(139,18,54,.28);
    }

    to{
        box-shadow:
            inset 0 0 16px rgba(0,0,0,.9),
            0 0 0 3px rgba(139,18,54,.28),
            0 0 24px rgba(139,18,54,.55);
    }
}

.comment-form button{
    border-radius:999px;
    border:1px solid rgba(128, 0, 32, 0.7);

    background: rgba(122, 16, 47, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color:#fff;
    font-family:"courier", monospace;
    font-size:13px;
    letter-spacing:.05em;

    cursor:pointer;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.6),
        0 0 0 rgba(122, 16, 47, 0);

    transition: all .2s ease;
}

.comment-form button:hover{
    background: rgba(122, 16, 47, 0.6);

    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.7),
        0 0 10px rgba(122, 16, 47, 0.4);

    transform: translateY(-1px);
}

.comment-form button:active{
    transform: translateY(0);
    box-shadow:
        inset 0 0 12px rgba(0,0,0,0.9);
}

.comments-accordion summary{
    display:flex;
    align-items:center;      /* horizontal center */
    justify-content:center;  /* vertical center */
    text-align:center;
    gap:.35rem;
    margin-top: 2rem;
}

.comment-icon{
    font-size:1.6rem; /* adjust this up/down */
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transform:translateY(1px);
}

/* optional: make it feel alive */
.comments-accordion summary:hover .comment-icon{
    transform:scale(1.15) translateY(1px);
    transition:transform .25s ease;
}

.no-comments,
.login-to-comment{
    text-align:center;
}

.comment-login-link{
    font-family:'courier', serif;
    text-decoration:none;
    padding:.4rem 1rem;
    border-radius:999px;
    backdrop-filter:blur(8px);
    transition:all .25s ease;
    color:#fff;
    font-size: 1rem;
    margin: .25rem;
    background:rgba(160, 20, 45, .45);
    border: #fff;
}

.comment-login-link:hover{
    color:#fff;
    background:rgba(160, 20, 45, .45);
    border-color:rgba(255,255,255,.2);
}

.delete-comment-form{
    text-align:right;
    margin-top:.25rem;
}

.delete-comment-btn{
    background:none;
    border:none;
    color:#d8a3b3;
    font-size:14px;
    cursor:pointer;
    padding:0;
}

.delete-comment-btn:hover{
    color:#ff6b81;
}