/* PK LP Bridge — Plugin-specific styles (design system base is in pk-design-system.css) */

.pk-courses-wrap { margin: 20px 0; }

.pk-section-title {
    font-size: 1.4em; margin-bottom: 15px;
    border-bottom: 2px solid var(--pk-primary, #6366f1);
    padding-bottom: 8px;
    font-family: var(--pk-font-sans, 'Inter', sans-serif);
    color: var(--pk-text, #1e293b);
}

/* ── Course card ─────────────────────────────────────────── */
.pk-courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.pk-course-card { overflow: hidden; }
.pk-course-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.pk-course-body { padding: 16px; }
.pk-course-title { margin: 0 0 8px; font-size: 1em; }
.pk-course-title a { color: var(--pk-primary, #6366f1); text-decoration: none; }
.pk-course-title a:hover { text-decoration: underline; }
.pk-course-excerpt { color: var(--pk-text-secondary, #64748b); font-size: .88em; margin: 0 0 12px; }
.pk-course-meta { margin-bottom: 12px; }
.pk-course-price { font-weight: bold; color: var(--pk-success, #10b981); font-size: .95em; }

/* ── Enroll button states ───────────────────────────────── */
.pk-btn-enroll { background: var(--pk-success, #10b981); color: #fff; display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--pk-radius, 8px); text-decoration: none; font-weight: 500; font-size: 14px; transition: background var(--pk-transition, 200ms); }
.pk-btn-enroll:hover { background: #059669; color: #fff; }
.pk-btn-enrolled { background: #7c3aed; color: #fff; display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--pk-radius, 8px); text-decoration: none; font-weight: 500; font-size: 14px; }

/* ── Search bar ─────────────────────────────────────── */
.pk-course-search-wrap { margin-bottom: 20px; }
.pk-course-search-wrap .pk-input { max-width: 400px; }
/* ── Enroll button loading ──────────────────────────── */
.pk-btn-enroll.pk-loading { opacity: .7; pointer-events: none; }
.pk-btn-enroll.pk-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: pk-spin 1s linear infinite; margin-left: 8px; }
@keyframes pk-spin { to { transform: rotate(360deg); } }

/* ── My Learning dashboard (tabbed) ─────────────────────── */
.pk-my-learning-wrap { margin: 20px 0; }
.pk-ml-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--pk-border, #e2e8f0); margin-bottom: 20px; }
.pk-ml-tab { background: none; border: none; padding: 10px 16px; font-size: .9em; font-weight: 600; color: var(--pk-text-secondary, #64748b); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.pk-ml-tab:hover { color: var(--pk-primary, #6366f1); }
.pk-ml-tab-active { color: var(--pk-primary, #6366f1); border-bottom-color: var(--pk-primary, #6366f1); }
.pk-ml-panel { display: none; }
.pk-ml-panel-active { display: block; }
.pk-ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pk-ml-card { border: 1px solid var(--pk-border, #e2e8f0); border-radius: 8px; padding: 14px; background: var(--pk-surface, #fff); }
.pk-ml-card h4 { margin: 0 0 8px; font-size: .98em; }
.pk-ml-meta { font-size: .82em; color: var(--pk-text-secondary, #64748b); margin: 0 0 8px; }
.pk-ml-empty { color: var(--pk-text-muted, #94a3b8); text-align: center; padding: 30px 0; }
.pk-ml-assignment-card textarea { width: 100%; margin-top: 8px; }
.pk-ml-table { width: 100%; border-collapse: collapse; }
.pk-ml-table th, .pk-ml-table td { padding: 10px 14px; border: 1px solid var(--pk-border, #e2e8f0); text-align: left; font-size: .9em; }
.pk-ml-table th { background: var(--pk-primary, #6366f1); color: #fff; }

/* ── Course reviews ──────────────────────────────────────── */
.pk-course-reviews-wrap { margin: 24px 0; max-width: 640px; }
.pk-review-item { border-bottom: 1px solid var(--pk-border, #e2e8f0); padding: 12px 0; }
.pk-review-stars { color: #f59e0b; letter-spacing: 2px; }
.pk-star-rating { font-size: 1.5em; letter-spacing: 4px; cursor: pointer; }
.pk-star { color: var(--pk-border, #e2e8f0); transition: color .1s; }
.pk-star-selected { color: #f59e0b; }
.pk-review-form-card { margin-top: 16px; }