.comment {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #9be0f5;
    border-radius: 4px;
    background-color: #cbeef8;
}

.comment h3{     
    font-size: 1.2rem;   
    font-style:italic;
    text-decoration: underline; 
    color: #364fc7;     
}
.comment:focus-within {
    outline: 2px solid #4c6ef5;
}

.comment-content {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.comment-meta {
    font-size: 0.875rem;
    color: #666;
}

.comment-form {
    margin-top: 2rem;
}

.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

.comment-form textarea:focus {
    outline: 2px solid #4c6ef5;
    border-color: #4c6ef5;
}

.comment-form button {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #4c6ef5;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.comment-form button:hover {
    background-color: #3b5bdb;
}

.comment-form button:focus {
    outline: 2px solid #364fc7;
}

.comment-form button:disabled {
    background-color: #adb5bd;
    cursor: not-allowed;
}

/* Add keyboard focus styling */
:focus {
    outline: 2px solid #4c6ef5;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .comment {
        border: 1px solid CanvasText;
    }
    
    .comment-form button:disabled {
        opacity: 0.5;
    }
}