/* WAAM Courses – Frontend Styles */
:root {
    --waam-primary: #2563eb;
    --waam-bg: #f8fafc;
    --waam-border: #e2e8f0;
    --waam-text: #1e293b;
    --waam-muted: #64748b;
    --waam-radius: 10px;
}

.waam-wrap { max-width: 1100px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; direction: rtl; }

/* Notices */
.waam-notice { padding: 12px 16px; border-radius: var(--waam-radius); margin-bottom: 20px; }
.waam-notice-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.waam-notice-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

/* Login form */
.waam-login-wrap { max-width: 420px; }
.waam-login-wrap h2 { margin-bottom: 20px; color: var(--waam-text); }
.waam-form label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--waam-muted); }
.waam-form input[type=email],
.waam-form input[type=password],
.waam-form input[type=text] {
    display: block; width: 100%; padding: 10px 14px; margin-top: 4px;
    border: 1px solid var(--waam-border); border-radius: 8px;
    font-size: 15px; color: var(--waam-text); box-sizing: border-box;
    transition: border-color .2s;
}
.waam-form input:focus { outline: none; border-color: var(--waam-primary); }
.waam-btn {
    display: block; width: 100%; padding: 12px; border: none; border-radius: 8px;
    background: var(--waam-primary); color: #fff; font-size: 16px; font-weight: bold;
    cursor: pointer; transition: opacity .2s; margin-top: 6px;
}
.waam-btn:hover { opacity: .88; }
.waam-btn-secondary { background: #64748b; }
.waam-forgot-link { margin-top: 14px; text-align: center; }
.waam-forgot-link a { color: var(--waam-primary); text-decoration: none; font-size: 14px; }
#waam-forgot h3 { margin: 0 0 12px; font-size: 16px; }

/* Topbar */
.waam-topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--waam-primary); color: #fff; border-radius: var(--waam-radius); margin-bottom: 24px; }
.waam-logout { color: #fff; text-decoration: none; font-size: 14px; opacity: .85; }
.waam-logout:hover { opacity: 1; }

/* Course layout */
.waam-course-layout { display: flex; gap: 24px; }

/* Sidebar */
.waam-sidebar { width: 280px; flex-shrink: 0; background: #fff; border: 1px solid var(--waam-border); border-radius: var(--waam-radius); padding: 20px; }
.waam-sidebar h3 { margin: 0 0 16px; font-size: 16px; color: var(--waam-text); border-bottom: 2px solid var(--waam-primary); padding-bottom: 10px; }
.waam-lesson-list { list-style: none; margin: 0; padding: 0; }
.waam-lesson-list li { margin-bottom: 4px; }
.waam-lesson-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--waam-text); text-decoration: none; font-size: 14px; transition: background .15s; }
.waam-lesson-list a:hover { background: var(--waam-bg); }
.waam-lesson-list li.active a { background: #eff6ff; color: var(--waam-primary); font-weight: bold; }
.waam-lesson-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--waam-border); color: var(--waam-muted); font-size: 12px; flex-shrink: 0; }
li.active .waam-lesson-num { background: var(--waam-primary); color: #fff; }

/* Player */
.waam-player { flex: 1; }
.waam-player h2 { margin: 0 0 16px; color: var(--waam-text); font-size: 20px; }
.waam-video-container { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--waam-radius); overflow: hidden; background: #000; }
.waam-video-container iframe,
.waam-video-container video { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.waam-lesson-desc { margin-top: 20px; padding: 16px; background: #fff; border: 1px solid var(--waam-border); border-radius: var(--waam-radius); color: var(--waam-muted); line-height: 1.7; }

/* Progress bar */
.waam-progress-wrap { display:flex; align-items:center; gap:12px; margin-top:14px; }
.waam-progress-standalone { margin-bottom:20px; }
.waam-progress-bar { flex:1; height:10px; background:#e2e8f0; border-radius:99px; overflow:hidden; }
.waam-progress-fill { height:100%; background:var(--waam-primary); border-radius:99px; transition:width .4s ease; }
.waam-progress-label { font-size:13px; color:var(--waam-muted); white-space:nowrap; }

/* Lesson actions bar */
.waam-lesson-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; flex-wrap:wrap; }
.waam-nav-btns { display:flex; gap:8px; }
.waam-btn-nav {
    display:inline-block; padding:9px 18px; border-radius:8px;
    background:#f1f5f9; color:var(--waam-text); text-decoration:none;
    font-size:14px; font-weight:bold; border:1px solid var(--waam-border);
    transition:background .15s;
}
.waam-btn-nav:hover { background:#e2e8f0; }
.waam-btn-next { background:var(--waam-primary); color:#fff; border-color:var(--waam-primary); }
.waam-btn-next:hover { opacity:.88; background:var(--waam-primary); color:#fff; }
.waam-btn-complete {
    padding:9px 20px; border-radius:8px; border:2px solid var(--waam-primary);
    background:#fff; color:var(--waam-primary); font-size:14px; font-weight:bold;
    cursor:pointer; transition:all .15s;
}
.waam-btn-complete:hover { background:#eff6ff; }
.waam-btn-complete.completed { background:var(--waam-primary); color:#fff; }

/* Sidebar done state */
.waam-lesson-list li.done .waam-lesson-num { background:#16a34a; color:#fff; }
.waam-lesson-list li.done a { color:#16a34a; }
.waam-course-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--waam-border);
    border-radius: var(--waam-radius);
    padding: 24px;
    margin-bottom: 24px;
}
.waam-course-cover {
    flex-shrink: 0;
    width: 220px;
}
.waam-course-cover img {
    width: 100%;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}
.waam-course-meta { flex: 1; }
.waam-course-title {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--waam-text);
}
.waam-course-description {
    color: var(--waam-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
}
.waam-course-stats {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--waam-muted);
}

@media (max-width: 680px) {
    .waam-course-layout { flex-direction: column-reverse; }
    .waam-sidebar { width: 100%; }
    .waam-course-header { flex-direction: column; }
    .waam-course-cover { width: 100%; }
}

/* ── Modules sidebar ── */
.waam-sidebar-module { margin-bottom: 4px; }
.waam-sidebar-module-title {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; background: #f1f5f9; border-radius: 8px;
    font-size: 13px; font-weight: 700; color: #374151;
    cursor: pointer; user-select: none; transition: background .15s;
}
.waam-sidebar-module-title:hover { background: #e5e7eb; }
.waam-sidebar-module-open .waam-sidebar-module-title { background: #dbeafe; color: #1d4ed8; }
.waam-module-arrow { transition: transform .2s; font-size: 12px; }
.waam-sidebar-module-open .waam-module-arrow { transform: rotate(180deg); }
.waam-module-lessons { display: none !important; margin: 4px 0 0 0; padding-right: 8px; }
.waam-sidebar-module-open .waam-module-lessons { display: block !important; }

/* ── Lesson files ── */
.waam-lesson-files { margin-top:24px; padding:16px 20px; background:#f8fafc; border-radius:10px; border:1px solid #e5e7eb; }
.waam-lesson-files h4 { margin:0 0 12px; font-size:14px; font-weight:700; color:#374151; }
.waam-lesson-files ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.waam-lesson-files li a { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#2563eb; text-decoration:none; transition:background .15s; }
.waam-lesson-files li a:hover { background:#eff6ff; border-color:#bfdbfe; }