/* ── My Courses / Student Dashboard ─────────────────────── */

.sb-mycourses-section { padding: 2.5rem 0 5rem; }

/* Dashboard header */
.sb-dashboard-header {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid var(--sb-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.sb-dashboard-header__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--sb-primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.sb-dashboard-header__info h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .2rem;
    color: var(--sb-heading);
}
.sb-dashboard-header__info p { font-size: .85rem; color: var(--sb-muted); }
.sb-dashboard-header__actions { display: flex; gap: .6rem; align-items: center; }

.sb-btn--outline {
    background: transparent;
    border: 2px solid var(--sb-primary);
    color: var(--sb-primary);
    font-weight: 600;
}
.sb-btn--outline:hover { background: var(--sb-primary); color: #fff; }
.sb-btn--sm { padding: .4rem 1rem; font-size: .82rem; }

/* Section heading */
.sb-mycourses-section__heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.sb-mycourses-section__heading h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sb-heading);
}
.sb-badge-count {
    background: var(--sb-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* Courses grid */
.sb-mycourses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.sb-mycourse-card {
    background: #fff;
    border: 1px solid var(--sb-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}
.sb-mycourse-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1); transform: translateY(-2px); }

.sb-mycourse-card__media {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.sb-mycourse-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sb-mycourse-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
}
.sb-mycourse-card__badge {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--sb-accent, #f59e0b);
    color: #fff; font-size: .72rem; font-weight: 700;
    padding: .2rem .6rem; border-radius: 99px; text-transform: uppercase;
}
.sb-mycourse-card__enrolled-badge {
    position: absolute; bottom: .75rem; right: .75rem;
    background: #d1fae5; color: #065f46;
    font-size: .72rem; font-weight: 700;
    padding: .2rem .6rem; border-radius: 99px;
}

.sb-mycourse-card__body { padding: 1rem 1.1rem; flex: 1; }
.sb-mycourse-card__body h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: var(--sb-heading); }
.sb-mycourse-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.sb-mycourse-card__meta span { font-size: .78rem; color: var(--sb-muted); }

.sb-mycourse-card__footer {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--sb-border, #e2e8f0);
    display: flex;
    gap: .6rem;
}
.sb-btn--whatsapp-sm {
    background: #22c55e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    padding: .4rem .85rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background .15s;
}
.sb-btn--whatsapp-sm:hover { background: #16a34a; color: #fff; }

/* Purchase history table */
.sb-order-history { margin-top: 3rem; }
.sb-order-history h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--sb-heading); }
.sb-order-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--sb-border, #e2e8f0); }
.sb-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    background: #fff;
}
.sb-order-table thead { background: var(--sb-bg-light, #f8fafc); }
.sb-order-table th, .sb-order-table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--sb-border, #e2e8f0);
}
.sb-order-table thead th { font-weight: 700; color: var(--sb-muted); font-size: .78rem; text-transform: uppercase; }
.sb-order-table tbody tr:last-child td { border-bottom: none; }
.sb-order-table tbody tr:hover { background: var(--sb-bg-light, #f8fafc); }

.sb-status-badge {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 700;
}
.sb-status-badge--completed { background: #d1fae5; color: #065f46; }
.sb-status-badge--pending   { background: #fef3c7; color: #92400e; }
.sb-status-badge--failed    { background: #fee2e2; color: #991b1b; }

/* Responsive */
@media (max-width: 768px) {
    .sb-dashboard-header { grid-template-columns: 56px 1fr; }
    .sb-dashboard-header__actions { grid-column: 1 / -1; flex-wrap: wrap; }
    .sb-mycourses-grid { grid-template-columns: 1fr; }
}