/**
 * Comments Styling
 * 
 * Styles for comment display and forms
 * 
 * @package PicostrapChild
 */

/* Comments Section */
.comments-area {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid var(--bs-gray-300);
}

.comments-title {
    margin-bottom: 2rem;
    color: var(--bs-gray-800);
}

/* Comment List */
.comments-list {
    margin-bottom: 3rem;
}

/* Individual Comments */
.comment-item {
    position: relative;
    margin-bottom: 1rem;
}

.comment-child {
    position: relative;
}

/* Nested comment visual connection */
.comment-child::before {
    content: "";
    position: absolute;
    left: -15px;
    top: -10px;
    height: calc(100% + 10px);
    width: 2px;
    background-color: var(--bs-gray-300);
}

.comment-child .comment-content {
    border-left-color: var(--bs-primary) !important;
}

/* Comment Content */
.comment-content {
    background-color: var(--bs-white);
    transition: box-shadow 0.2s ease;
}

.comment-content:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

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

.comment-author {
    color: var(--bs-gray-800);
}

.comment-time {
    font-size: 0.8125rem;
}

.comment-text {
    color: var(--bs-gray-700);
    line-height: 1.6;
}

.comment-text p:last-child {
    margin-bottom: 0;
}

/* Reply Button */
.reply-button {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
}

/* Pending Comments */
.pending-comment .comment-content {
    opacity: 0.85;
}

.pending-comments-notice {
    margin-top: 2rem;
}

/* Comment Form */
.comment-form-wrapper {
    background-color: var(--bs-gray-100);
    padding: 2rem;
    border-radius: 0.375rem;
    margin-top: 2rem;
}

.comment-form-title {
    margin-bottom: 1.5rem;
    color: var(--bs-gray-800);
}

/* Form Validation Styles */
.comment-form .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.comment-form .is-valid {
    border-color: var(--bs-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.comment-form .is-invalid {
    border-color: var(--bs-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Character Counter */
.form-text.text-danger {
    font-weight: 500;
}

/* Reply Notice */
#reply-notice {
    font-size: 0.9375rem;
}

#reply-notice .btn-close {
    width: 0.75rem;
    height: 0.75rem;
}

/* Submit Button */
#submit-comment {
    min-width: 150px;
}

/* Toast Notifications */
.toast {
    min-width: 300px;
}

.toast.bg-success .btn-close,
.toast.bg-danger .btn-close,
.toast.bg-info .btn-close {
    filter: invert(1);
}

/* Honeypot Field */
.d-none {
    position: absolute !important;
    left: -9999px !important;
}

/* Moderator Comments */
.moderator-comment .comment-content {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary) !important;
}

.moderator-comment .comment-content.border-primary {
    border-width: 2px !important;
}

.moderator-comment .comment-author {
    color: var(--bs-primary);
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .comment-child {
        margin-left: 20px !important;
    }

    .comment-child::before {
        left: -10px;
    }

    .comment-form-wrapper {
        padding: 1.5rem;
    }

    .comments-area {
        margin-top: 2rem;
        padding-top: 2rem;
    }
}