/* استایل‌های اصلی سیستم مقایسه‌گر */
.dcp-wrapper { display: flex; direction: rtl; gap: 20px; font-family: Tahoma, Arial, sans-serif; align-items: flex-start; }
.dcp-sidebar { width: 25%; background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; position: sticky; top: 20px; }
.dcp-results { width: 75%; }

.dcp-filter-group { border-bottom: 1px solid #eee; margin-bottom: 10px; }
.dcp-filter-group:last-child { border-bottom: none; }
.dcp-filter-header { font-size: 14px; padding: 10px 0; margin: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #333; user-select: none; transition: 0.2s; }
.dcp-filter-header:hover { color: #3498db; }
.dcp-filter-header::after { content: "▼"; font-size: 10px; transition: transform 0.3s; color: #999; }
.dcp-filter-header.active::after { transform: rotate(180deg); color: #3498db; }
.dcp-filter-body { padding-bottom: 15px; display: none; max-height: 200px; overflow-y: auto; padding-right: 5px; }
.dcp-filter-body label { display: block; font-size: 13px; margin-bottom: 5px; cursor: pointer; }

.dcp-mobile-btn { display: none; width: 100%; background: #34495e; color: #fff; padding: 12px; border: none; border-radius: 8px; margin-bottom: 15px; cursor: pointer; font-weight: bold; transition: 0.3s; text-align: center; }

/* کارت‌های نتایج */
.dcp-card { 
    position: relative; 
    overflow: hidden; /* این خط لبه‌های اضافی روبان را می‌برد تا دقیقاً گوشه کارت شکل بگیرد */
    background:#fff; 
    border:1px solid #ddd; 
    padding:15px; 
    border-radius:8px; 
    margin-bottom:15px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:15px; 
    transition:0.3s; 
    box-shadow:0 2px 4px rgba(0,0,0,0.02); 
}
.dcp-card:hover { border-color:#ccc; box-shadow:0 4px 10px rgba(0,0,0,0.06); }

/* ✨ استایل روبان مورب (Ribbon) دقیقاً مثل عکس شماره ۲ ✨ */
.dcp-ribbon { 
    position: absolute; 
    top: 22px; 
    right: -45px; /* قرارگیری در گوشه راست */
    width: 170px;
    padding: 5px 0; 
    color: #fff; 
    font-size: 12px; 
    font-weight: bold; 
    text-align: center; 
    transform: rotate(45deg); /* چرخش 45 درجه برای گوشه راست */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    z-index: 10; 
    letter-spacing: 0.5px; 
}
.dcp-ribbon-scam { background: #e74c3c; } /* رنگ قرمز برای کلاهبردار */
.dcp-ribbon-popular { background: #27ae60; } /* رنگ سبز برای محبوب */

.dcp-col-brand { display:flex; align-items:center; gap:15px; flex:2; min-width:200px; z-index: 1; }
.dcp-col-brand img { width:70px; height:70px; object-fit:contain; border:1px solid #eee; border-radius:8px; padding:5px; background:#fff; }
.dcp-col-brand h3 { margin:0 0 5px; font-size:16px; color:#333; }
.dcp-col-brand .dcp-rating { color:#f39c12; font-weight:bold; font-size:14px; }

.dcp-col-info { flex:1.5; font-size:13px; line-height:1.8; color:#555; min-width:150px; z-index: 1; }

.dcp-col-action { flex:1; display:flex; flex-direction:column; gap:8px; min-width:140px; z-index: 1; }

/* دکمه‌ها (رنگ متن سفید اجباری شد) */
.dcp-btn { padding:10px; border-radius:5px; text-align:center; text-decoration:none !important; color:#fff !important; font-weight:bold; font-size:13px; transition:0.2s; }
.dcp-btn-green { background:#2ecc71; } .dcp-btn-green:hover { background:#27ae60; color:#fff !important; }
.dcp-btn-blue { background:#3498db; } .dcp-btn-blue:hover { background:#2980b9; color:#fff !important; }

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
    .dcp-wrapper { flex-direction: column; }
    .dcp-sidebar, .dcp-results { width: 100%; }
    .dcp-sidebar { display: none; position: static; margin-bottom: 20px; }
    .dcp-mobile-btn { display: block; }
    
    .dcp-card { flex-direction:column; text-align:center; padding-top: 45px; } /* فاصله از بالا برای اینکه روبان روی لوگو نیفتد */
    .dcp-col-brand { flex-direction:column; width:100%; } 
    .dcp-col-action { width:100%; } 
    .dcp-btn { width:100%; box-sizing:border-box; }
    
    /* تنظیم سایز روبان در موبایل */
    .dcp-ribbon { top: 20px; right: -50px; font-size: 11px; width: 160px; }
}