.verified-badge{
    font-size:11px;
    color:#16803c;
    background:#e8f7ed;
    padding:2px 6px;
    border-radius:10px;
    margin-right:5px;
    white-space:nowrap;
}
.comment-product-image-box,
.comment-avatar-box{
    position:relative;
    display:inline-block;
}

.item-id,
.user-id{
    position:absolute;
    bottom:-2px;
    right:-5px;
    font-size:9px;
    background:#eee;
    color:#555;
    padding:1px 3px;
    border-radius:3px;
    direction:ltr;
}

.user-id{
    background:#f5f5f5;
}
.comment-item{
    position:relative;
    padding-bottom:40px;
}

.comment-vote{

    position:absolute;

    left:15px;
    bottom:12px;

    display:flex;
    gap:12px;

    direction:ltr;
}

.vote-btn{

    background:none;
    border:none;

    padding:0;

    cursor:pointer;

    font-size:13px;
    color:#777;

    display:flex;
    align-items:center;
    gap:4px;

    transition:.2s;
}

.like-btn:hover{
    color:#28a745;
}

.dislike-btn:hover{
    color:#dc3545;
}

.vote-btn span{
    font-weight:bold;
}
.comment-product-card{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
    padding:8px;
    border:1px solid #e8e8e8;
    border-radius:10px;
    background:#fafafa;
}

.comment-product-image{
    width:70px;
    height:70px;
    object-fit:contain;
    border-radius:8px;
    border:1px solid #ddd;
    background:#fff;
}

.comment-product-info{
    display:flex;
    flex-direction:column;
}

.comment-product-title{
    font-weight:bold;
    color:#0b63ce;
    text-decoration:none;
    margin-bottom:4px;
}

.comment-product-title:hover{
    text-decoration:underline;
}

.comment-product-type{
    font-size:12px;
    color:#777;
}	
/*==================================================
      انتخاب وضعیت نظر مدیر
==================================================*/
.btn-delete{
    background:#dc3545 !important;
    color:#fff;
}

.btn-delete:hover{
    background:#bb2d3b !important;
}

.status-selector{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin:18px 0;
}

/* رادیوها از صفحه خارج شوند ولی فعال بمانند */
.status-selector input[type="radio"]{
    position:fixed;
    left:-9999px;
    opacity:0;
}

/* دکمه ها */

.status-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:95px;
    padding:8px 18px;
    border:2px solid #ccc;
    border-radius:25px;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    transition:all .25s ease;
    user-select:none;
    pointer-events:auto;
}

/* Hover */

.status-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* ---------- رنگ معمولی ---------- */

.status-btn.pending{
    background:#fff9df;
    border-color:#d6b03c;
    color:#b8860b;
}

.status-btn.approved{
    background:#eefcf2;
    border-color:#2eaf58;
    color:#198754;
}

.status-btn.rejected{
    background:#fff2f2;
    border-color:#dc3545;
    color:#dc3545;
}

.status-btn.spam{
    background:#f2f2f2;
    border-color:#777;
    color:#555;
}

/* ---------- رنگ انتخاب شده ---------- */

.status-selector input[type="radio"]:checked + .pending{
    background:#e6a400;
    color:#fff;
    border-color:#e6a400;
}

.status-selector input[type="radio"]:checked + .approved{
    background:#28a745;
    color:#fff;
    border-color:#28a745;
}

.status-selector input[type="radio"]:checked + .rejected{
    background:#dc3545;
    color:#fff;
    border-color:#dc3545;
}

.status-selector input[type="radio"]:checked + .spam{
    background:#6c757d;
    color:#fff;
    border-color:#6c757d;
}

/* فوکوس */

.status-selector input[type="radio"]:focus + .status-btn{
    box-shadow:0 0 0 3px rgba(13,110,253,.25);
}
.user-status-box {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-right: 4px solid #007bff;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.user-status-box .badge-admin {
    background: #dc3545;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.user-status-box .badge-user {
    background: #6c757d;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

/* ===== دکمه پاسخ مدیریت ===== */
.admin-reply-btn {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.admin-reply-btn:hover {
    background: #c82333;
}

/* ===== فرم پاسخ مدیریت ===== */
.admin-reply-form {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background: #f0f7ff;
    border-radius: 8px;
    border: 1px solid #d4e6ff;
}

.admin-reply-form.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-reply-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    height: 50px;
}

.admin-reply-form .reply-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.admin-reply-form .btn-send {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 8px 25px;
    border-radius: 6px;
    cursor: pointer;
}

.admin-reply-form .btn-cancel {
    background: #6c757d;
    color: #fff;
    border: none;
    padding: 8px 25px;
    border-radius: 6px;
    cursor: pointer;
}

/* ===== پاسخ‌ها ===== */
.reply-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:12px;
    padding:12px;
    background:#f5f8ff;
    border-radius:8px;
    border-right:3px solid #0d6efd;
}

.reply-item .comment-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.reply-content{
    flex:1;
    text-align:right;
}

.reply-content strong{
    display:block;
    margin-bottom:4px;
}

.reply-content .comment-date{
    font-size:12px;
    color:#888;
    margin-bottom:6px;
}

.reply-content .comment-text{
    line-height:1.8;
}

/* ===== استایل‌های اصلی ===== */
.comments-section {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.comments-header h3 {
    margin: 0;
    color: #333;
    font-size: 20px;
}

.comments-stats {
    display: flex;
    gap: 20px;
    font-size: 15px;
}

.rating-display {
    color: #f5a623;
    font-weight: bold;
    font-size: 18px;
}

.count-display {
    color: #666;
}

.comment-form-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border: 1px solid #e9ecef;
}

.comment-form .form-row {
    margin-bottom: 12px;
}

.comment-form .form-row:last-child {
    margin-bottom: 0;
}

.comment-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: #495057;
}

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;
}

.star-rating{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:4px;
}

.star-rating input{
    display:none;
}

.star-rating label{
    font-size:30px;
    color:#ccc;
    cursor:pointer;
    transition:.2s;
    user-select:none;
}

/* هنگام بردن موس */
.star-rating label:hover,
.star-rating label:hover ~ label{
    color:#ffc107;
}

/* بعد از انتخاب */
.star-rating input:checked + label,
.star-rating input:checked + label ~ label{
    color:#ffc107;
}

.comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
    height: 50px;
}

.comment-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.btn-submit {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #0056b3;
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-message {
    margin-right: 15px;
    font-size: 14px;
}

.form-message.success {
    color: #28a745;
}

.form-message.error {
    color: #dc3545;
}

.login-required {
    background: #fff3cd;
    padding: 12px 18px;
    border-radius: 6px;
    color: #856404;
    margin: 0;
    text-align: center;
}

.login-required a {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
}

.login-required a:hover {
    text-decoration: underline;
}

.comments-list {
    margin-top: 10px;
}

.no-comment {
    color: #999;
    text-align: center;
    padding: 30px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed #ddd;
}

.comment-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 18px 0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-meta{
    display:flex;
    align-items:flex-start;
    gap:15px;
    direction:rtl;
}

.comment-avatar{
    width:35px;
    height:35px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #ddd;
    flex-shrink:0;
}

.comment-user{
    flex:1;
    display:flex;
    flex-direction:column;
    text-align:right;
}

.comment-user strong{
    font-size:15px;
    color:#222;
    margin-bottom:4px;
}

.comment-date{
    font-size:12px;
    color:#888;
    margin-bottom:6px;
}

.comment-rating{
    margin-bottom:6px;
}

.comment-text{
    margin-right:70px;
    margin-top:10px;
    line-height:2;
    text-align:right;
}

.admin-badge{
    background:#dc3545;
    color:#fff;
    padding:2px 8px;
    border-radius:12px;
    font-size:11px;
    margin-left:6px;
}

@media (max-width: 768px) {
    .comments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .comments-stats {
        width: 100%;
        justify-content: flex-start;
    }
    
.comment-meta{
        flex-direction:row;
    }

    
    .star-rating label {
        font-size: 25px;
    }
}