.rr-category-card { 
    display: block; text-decoration: none; color: inherit; height: 100%;
    transition: 0.3s; border-radius: 16px;
}
.rr-card-inner {
    background: #fff; padding: 30px 20px; text-align: center;
    border-radius: 16px; height: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid #eef2f7; transition: 0.3s;
}
.rr-category-card:hover .rr-card-inner {
    transform: translateY(-5px); 
    box-shadow: 0 10px 30px rgba(26, 115, 232, 0.12);
    border-color: #1a73e8;
}
.rr-card-icon { width: 60px; height: 60px; margin: 0 auto 15px; }
.rr-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.rr-card-title { font-size: 18px; font-weight: 700; color: #0c3c6b; margin-bottom: 10px; }
.rr-card-btn { font-size: 13px; color: #1a73e8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.rr-card-btn i { transition: 0.3s; }
.rr-category-card:hover .rr-card-btn i { transform: translateX(4px); }

/* ===== COURSE LISTING ===== */
.rr-list-area { background: #f8fafc; min-height: 80vh; }
.rr-header h2 { font-size: 26px; font-weight: 800; color: #0c3c6b; margin-top: 8px; }
.rr-badge { background: linear-gradient(135deg, #1a73e8, #0c3c6b); color: #fff; padding: 5px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

.rr-course-card {
    background: #fff; border-radius: 12px; overflow: hidden; height: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid #eef2f7;
    transition: 0.3s; display: flex; flex-direction: column;
}
.rr-course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.rr-card-img { position: relative; height: 160px; overflow: hidden; background: #f1f5f9; }
.rr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.rr-course-card:hover .rr-card-img img { transform: scale(1.05); }
.rr-discount-tag { position: absolute; top: 10px; right: 10px; background: #ff6b00; color: #fff; padding: 4px 10px; border-radius: 5px; font-size: 11px; font-weight: 700; }

.rr-card-body { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.rr-card-body h4 { font-size: 16px; font-weight: 700; color: #0c3c6b; margin-bottom: 6px; line-height: 1.4; }

/* Description line clamping (2 lines only) */
.rr-desc {
    font-size: 13px; color: #64748b; margin-bottom: 12px; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.5;
}

.rr-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e2e8f0; }
.rr-price del { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 2px; }
.rr-price strong { font-size: 20px; color: #1a73e8; }

.rr-action-row { display: flex; gap: 8px; margin-top: auto; }
.rr-action-row .btn { flex: 1; }

/* ===== BUTTONS ===== */
.btn.rr-btn-primary { background: #1a73e8; color: #fff; border-radius: 6px; padding: 9px 10px; font-size: 13px; font-weight: 600; transition: 0.3s; border: none; }
.btn.rr-btn-primary:hover { background: #0c3c6b; color: #fff; transform: translateY(-1px); }

.btn.rr-btn-buy { background: #ff6b00; color: #fff; border-radius: 6px; padding: 9px 10px; font-size: 13px; font-weight: 600; transition: 0.3s; border: none; }
.btn.rr-btn-buy:hover { background: #e65a00; color: #fff; transform: translateY(-1px); }

.btn.rr-btn-outline { background: #fff; color: #1a73e8; border: 1.5px solid #1a73e8; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; display: block; width: 100%; margin-bottom: 8px; transition: 0.3s; }
.btn.rr-btn-outline:hover { background: #eaf3ff; }

.btn.rr-btn-success { background: #28a745; color: #fff; border-radius: 6px; padding: 9px 10px; font-size: 13px; font-weight: 600; text-decoration: none; border: none; }
.btn.rr-btn-success:hover { background: #218838; color: #fff; }

/* ===== DETAILS PAGE ===== */
.rr-details-header h1 { font-size: 26px; font-weight: 800; color: #0c3c6b; line-height: 1.3; }
.rr-details-content { background: #fff; padding: 25px; border-radius: 12px; border: 1px solid #eef2f7; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.rr-details-content h3 { font-size: 18px; color: #0c3c6b; margin-bottom: 12px; border-bottom: 2px solid #1a73e8; display: inline-block; padding-bottom: 4px; }

.rr-sidebar { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.06); position: sticky; top: 90px; border: 1px solid #eef2f7; }
.rr-sidebar img { width: 100%; height: 280px; object-fit: fill; border-radius: 10px; margin-bottom: 15px; }
.rr-sidebar-price { text-align: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; }
.rr-sidebar-price del { display: block; font-size: 14px; color: #94a3b8; margin-bottom: 2px; }
.rr-sidebar-price span { font-size: 26px; font-weight: 800; color: #1a73e8; }