.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); } .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); box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; letter-spacing: 0.5px; } .dcp-ribbon-scam { background: #8A2014; } .dcp-ribbon-popular { background: #166437; } .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:#1A6523; 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; } }