@charset "UTF-8";

:where(.app-comments, .app-comment-form-section) {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 1rem auto;
    padding: 1.25rem;
}

:where(.app-comments h2, .app-comment-form-section h2) {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

:where(.app-comment-summary, .app-comment-meta, .app-comment-pagination) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

:where(.app-comment-card) {
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0;
}

:where(.app-comment-card:first-child) {
    border-top: 0;
}

:where(.app-comment-rating) {
    color: #b45309;
    font-weight: 700;
}

:where(.app-comment-body, .app-comments-empty, .app-comment-message) {
    line-height: 1.8;
}

:where(.app-comment-admin-reply) {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    margin-top: .9rem;
    padding: .9rem 1rem;
}

:where(.app-comment-admin-reply-title) {
    color: #1d4ed8;
    font-weight: 700;
    margin-bottom: .35rem;
}

:where(.app-comment-admin-reply p) {
    margin: 0;
}

:where(.app-comment-admin-reply-date) {
    color: #6b7280;
    display: inline-block;
    font-size: .85rem;
    margin-top: .5rem;
}

:where(.app-comment-replies) {
    border-left: 3px solid #d1d5db;
    margin: .9rem 0 0 1rem;
    padding-left: 1rem;
}

:where(.app-comment-reply) {
    background: #f9fafb;
    border-radius: 8px;
    margin-top: .75rem;
    padding: .8rem;
}

:where(.app-comment-reply-form-wrap) {
    margin-top: .9rem;
}

:where(.app-comment-reply-form-wrap summary) {
    color: #2563eb;
    cursor: pointer;
    font-weight: 700;
}

:where(.app-comment-reply-form) {
    margin-top: .75rem;
}

:where(.app-comment-page-status) {
    color: #6b7280;
}

:where(.app-comment-pagination) {
    border-top: 1px solid #e5e7eb;
    margin-top: 1rem;
    padding-top: 1rem;
}

:where(.app-comment-pagination a, .app-comment-pagination span) {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #2563eb;
    display: inline-block;
    min-width: 2.4rem;
    padding: .45rem .7rem;
    text-align: center;
    text-decoration: none;
}

:where(.app-comment-pagination span) {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 700;
}

:where(.app-comment-form) {
    display: grid;
    gap: .85rem;
}

:where(.app-comment-form label) {
    display: grid;
    gap: .35rem;
}

:where(.app-comment-form input, .app-comment-form select, .app-comment-form textarea) {
    box-sizing: border-box;
    width: 100%;
}

:where(.app-comment-form textarea) {
    min-height: 8rem;
}

:where(.app-comment-form button) {
    justify-self: start;
}

:where(.hp-field) {
    left: -9999px;
    position: absolute;
}