/* =============================================================================
   AlphaLearn LMS — Front-end stylesheet  (alms-frontend.css)
   All selectors are prefixed with .alms- to prevent conflicts with theme CSS.
   No CSS framework dependency; no !important unless absolutely required.
   ============================================================================= */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --alms-primary:        #1f4f7b;
    --alms-primary-dark:   #173c5f;
    --alms-primary-light:  #d9e6f2;

    /* Semantic states */
    --alms-success:        #00a32a;
    --alms-success-bg:     #edfaef;
    --alms-success-text:   #1a5631;
    --alms-error:          #d63638;
    --alms-error-bg:       #fef2f2;
    --alms-error-text:     #7a1a1a;
    --alms-warning:        #dba617;
    --alms-warning-bg:     #fffbe6;
    --alms-warning-text:   #6b4c00;

    /* Text scale */
    --alms-text:           #1d2327;
    --alms-text-strong:    #111827;
    --alms-text-body:      #374151;
    --alms-text-secondary: #344054;
    --alms-text-muted:     #646970;

    /* Links */
    --alms-link:           #0f3556;
    --alms-link-hover:     #0a2740;

    /* Detail-link pill (orders table) */
    --alms-detail-link:              #123a5e;
    --alms-detail-link-bg:           #f4f9ff;
    --alms-detail-link-border:       #c6d9ea;
    --alms-detail-link-hover:        #0d2f4c;
    --alms-detail-link-hover-bg:     #e7f2ff;
    --alms-detail-link-hover-border: #abc9e3;

    /* Surfaces */
    --alms-border:           #d5dbe1;
    --alms-border-light:     #e9edf1;
    --alms-bg:               #f3f5f7;
    --alms-white:            #ffffff;
    --alms-table-header-bg:  #f8fafc;
    --alms-table-hover-bg:   #f8fbff;

    /* Layout */
    --alms-header-height: 86px;   /* override per-theme: --alms-header-height: 60px; */

    /* Misc */
    --alms-radius:         10px;
    --alms-radius-sm:      4px;
    --alms-shadow:         0 1px 3px rgba(15,23,42,.08);
    --alms-shadow-md:      0 10px 28px rgba(15,23,42,.12);
    --alms-font:           inherit;
    --alms-font-mono:      "SF Mono", "Consolas", "Liberation Mono", monospace;
    --alms-transition:     .15s ease;
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.alms-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.alms-wrap {
    margin-inline: auto;
    padding: 24px;
    font-family: var(--alms-font);
    color: var(--alms-text);
    box-sizing: border-box;
    /* background: linear-gradient(180deg, #fafbfc 0%, #f4f7fa 100%); */
    border-radius: 12px;
}

/* Form-page wrappers: centred, capped width, minimal padding (card provides depth) */
.alms-login-wrap,
.alms-forgotpw-wrap,
.alms-setpw-wrap {
    max-width: 480px;
    padding: 32px 16px 48px;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.alms-register-wrap {
    max-width: 580px;
    padding: 32px 16px 48px;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* ── Form card ───────────────────────────────────────────────────────────── */
.alms-form-card {
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06);
    padding: 40px 40px 36px;
}
@media (max-width: 520px) {
    .alms-form-card { padding: 28px 20px 24px; }
}

/* ── Form header (icon + title + subtitle) ───────────────────────────────── */
.alms-form-header {
    text-align: center;
    margin-bottom: 28px;
}
.alms-form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--alms-primary-light);
    color: var(--alms-primary);
    margin-bottom: 18px;
}
.alms-form-icon svg { display: block; }
.alms-form-title {
    font-size: 1.45rem !important;
    font-weight: 800;
    color: var(--alms-text);
    margin: 0 0 6px;
    line-height: 1.25;
}
.alms-form-subtitle {
    font-size: .9375rem !important;
    color: var(--alms-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Form divider before alt link ────────────────────────────────────────── */
.alms-form-divider {
    border: none;
    border-top: 1px solid var(--alms-border-light);
    margin: 8px 0 0;
}

.alms-section-title {
    font-size: 1.6rem !important;
    font-weight: 800;
    color: var(--alms-text);
    margin: 0 0 24px;
    line-height: 1.3;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.alms-link {
    color: var(--alms-primary);
    text-decoration: none;
}
.alms-link:hover,
.alms-link:focus {
    color: var(--alms-primary-dark);
    text-decoration: underline;
}
.alms-back-link {
    font-size: .875rem !important;
    color: var(--alms-text-muted);
}
.alms-back-link:hover { color: var(--alms-primary); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.alms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 22px;
    font-size: .9375rem !important;
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--alms-transition),
                border-color var(--alms-transition),
                color var(--alms-transition),
                box-shadow var(--alms-transition),
                transform var(--alms-transition),
                opacity var(--alms-transition);
    white-space: nowrap;
}
.alms-btn:hover,
.alms-btn:focus,
.alms-btn:active,
.alms-btn:visited {
    text-decoration: none;
}
.alms-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}
.alms-btn-primary {
    background: var(--alms-primary);
    border-color: var(--alms-primary);
    color: var(--alms-white);
    box-shadow: 0 4px 14px rgba(23,60,95,.22);
}
.alms-btn-primary:hover:not(:disabled) {
    background: var(--alms-primary-dark);
    border-color: var(--alms-primary-dark);
    color: var(--alms-white);
    box-shadow: 0 6px 20px rgba(23,60,95,.30);
    transform: translateY(-1px);
    text-decoration: none;
}
.alms-btn-full { width: 100%; }
.alms-btn-sm   { padding: 8px 14px; font-size: .8125rem !important; }

/* ── Forms — shared structure ────────────────────────────────────────────── */
.alms-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.alms-form-intro {
    color: var(--alms-text-muted);
    font-size: .9375rem !important;
    margin: 0;
    line-height: 1.5;
}

.alms-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.alms-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px) {
    .alms-form-row-2col { grid-template-columns: 1fr; }
}

.alms-label {
    font-size: .875rem !important;
    font-weight: 600;
    color: var(--alms-text);
    letter-spacing: .01em;
}

.alms-required { color: var(--alms-error); margin-left: 2px; }

.alms-input,
.alms-select {
    width: 100%;
    padding: 8px 14px;
    font-size: .9375rem !important;
    color: var(--alms-text);
    background: var(--alms-white);
    border: 1.5px solid var(--alms-border);
    border-radius: 10px;
    transition: border-color var(--alms-transition), box-shadow var(--alms-transition), background var(--alms-transition);
    box-sizing: border-box;
    line-height: 1.4;
}
.alms-input:hover:not(:focus) {
    border-color: #b0b8c4;
}
.alms-input:focus,
.alms-select:focus {
    outline: none;
    border-color: var(--alms-primary);
    box-shadow: 0 0 0 3px var(--alms-primary-light);
    background: var(--alms-white);
}
.alms-input::placeholder { color: var(--alms-text-muted); opacity: .7; }

/* Select arrow override */
.alms-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646970' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Password show/hide wrapper */
.alms-input-wrap { position: relative; }
.alms-input-wrap--icon-right .alms-input { padding-right: 48px; }

.alms-pw-toggle,
.alms-pwd-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    color: var(--alms-text-muted);
    transition: color var(--alms-transition), background var(--alms-transition);
}
.alms-pw-toggle:hover,
.alms-pwd-toggle:hover {
    color: var(--alms-primary);
    background: var(--alms-primary-light);
}
.alms-pw-icon,
.alms-eye-icon { display: flex; align-items: center; line-height: 1; }

/* Field-level validation */
.alms-field-error {
    font-size: .8125rem !important;
    color: var(--alms-error);
    display: none;
    min-height: 1em;
}
.alms-field-error--visible { display: block; }

.alms-field-hint {
    font-size: .8125rem !important;
    color: var(--alms-text-muted);
}

/* Input row (icon + text) */
.alms-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Checkbox */
.alms-checkbox {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--alms-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.alms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem !important;
    color: var(--alms-text-muted);
    cursor: pointer;
    line-height: 1.5;
}

/* Privacy group */
.alms-privacy-group { margin-top: 4px; }
.alms-privacy-text  { font-size: .875rem !important; color: var(--alms-text-muted); }
.alms-privacy-error { font-size: .8125rem !important; color: var(--alms-error); display: none; }
.alms-privacy-error.alms-field-error--visible { display: block; }

/* Alt link row (Back to login, etc.) */
.alms-form-alt-link {
    text-align: center;
    font-size: .875rem !important;
    color: var(--alms-text-muted);
    margin: 4px 0 0;
}

.alms-form-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */
.alms-message {
    padding: 12px 16px;
    border-radius: var(--alms-radius);
    font-size: .9375rem !important;
    line-height: 1.5;
    border: 1px solid transparent;
}
.alms-message--hidden  { display: none; }
.alms-message--success {
    background: var(--alms-success-bg);
    border-color: var(--alms-success);
    color: var(--alms-success-text);
}
.alms-message--error {
    background: var(--alms-error-bg);
    border-color: var(--alms-error);
    color: var(--alms-error-text);
}

.alms-page-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--alms-radius);
    border: 1px solid transparent;
    font-size: .9375rem !important;
    line-height: 1.5;
}
.alms-page-alert svg { flex-shrink: 0; margin-top: 2px; }
.alms-page-alert--error {
    background: var(--alms-error-bg);
    border-color: var(--alms-error);
    color: var(--alms-error-text);
}

.alms-error-msg {
    padding: 16px;
    background: var(--alms-error-bg);
    border-left: 4px solid var(--alms-error);
    border-radius: 0 var(--alms-radius) var(--alms-radius) 0;
    color: var(--alms-error-text);
    font-size: .9375rem !important;
}

.alms-no-results {
    text-align: center;
    color: var(--alms-text-muted);
    padding: 40px 0;
    font-size: 1rem !important;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.alms-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: .75rem !important;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.4;
    background: var(--alms-bg);
    color: var(--alms-text-muted);
    border: 1px solid var(--alms-border);
}
.alms-badge--lg {
    padding: 5px 14px;
    font-size: .875rem !important;
}
/* Common transaction/enrollment status values */
.alms-badge--success, .alms-badge--completed, .alms-badge--active {
    background: var(--alms-success-bg);
    color: var(--alms-success);
    border-color: var(--alms-success);
}
.alms-badge--failed, .alms-badge--error, .alms-badge--rejected {
    background: var(--alms-error-bg);
    color: var(--alms-error);
    border-color: var(--alms-error);
}
.alms-badge--pending, .alms-badge--processing, .alms-badge--warning {
    background: var(--alms-warning-bg);
    color: var(--alms-warning-text);
    border-color: var(--alms-warning);
}

.alms-enrolled-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--alms-success);
    color: var(--alms-white);
    font-size: .7rem !important;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Loading / Spinner ────────────────────────────────────────────────────── */
.alms-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: var(--alms-text-muted);
    font-size: .9375rem !important;
    gap: 10px;
}
.alms-loading.alms-loading--hidden,
.alms-course-loading { display: none; }

.alms-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--alms-border);
    border-top-color: var(--alms-primary);
    border-radius: 50%;
    animation: alms-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes alms-spin { to { transform: rotate(360deg); } }

.alms-fullpage-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
}
.alms-fullpage-loader-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 10px;
    box-shadow: var(--alms-shadow-md);
    padding: 12px 16px;
    color: var(--alms-text-secondary);
    font-size: .92rem !important;
    font-weight: 600;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.alms-pagination,
.alms-orders-pagination,
.alms-mycourses-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 32px;
}

.alms-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--alms-border);
    border-radius: var(--alms-radius-sm);
    background: var(--alms-white);
    color: var(--alms-text);
    font-size: .875rem !important;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--alms-transition), border-color var(--alms-transition);
}
.alms-page-btn:hover:not(.alms-page-btn--active) {
    background: var(--alms-bg);
    border-color: var(--alms-primary);
    color: var(--alms-primary);
    text-decoration: none;
}
.alms-page-btn--active {
    background: var(--alms-primary);
    border-color: var(--alms-primary);
    color: var(--alms-white);
    pointer-events: none;
}
.alms-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 38px;
    color: var(--alms-text-muted);
    font-size: .875rem !important;
}

/* ── Auth forms — Login / Register / ForgotPw / SetPassword ─────────────── */
.alms-login-wrap,
.alms-register-wrap,
.alms-forgotpw-wrap,
.alms-setpw-wrap {
    max-width: 480px;
    margin-inline: auto;
    padding: 40px 16px;
}

/* Login */
.alms-login-form  { }
.alms-login-message { }

/* Register */
.alms-register-form    { }
.alms-register-message { }


/* ── Course list ──────────────────────────────────────────────────────────── */
/*
 * Desktop layout (categories ON):
 *   col 1        | col 2
 *   sidebar      | controls-bar  (row 1)
 *   sidebar      | course grid   (row 2)
 *
 * DOM order: controls-bar → sidebar → content
 * CSS placement overrides that order for desktop.
 * On mobile the override is removed so DOM order takes effect:
 *   controls-bar → sidebar → course grid  ✓
 */
.alms-courselist-wrap { padding-bottom: 60px; }
.alms-courselist-wrap .alms-courselist-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 22px;
    align-items: start;
}
/* Controls bar: right column, first row */
.alms-courselist-layout > .alms-controls-bar {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
}
/* Sidebar: left column, spans both rows */
.alms-courselist-sidebar {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: var(--alms-header-height);
    align-self: start;
}
/* Content (grid): right column, second row */
.alms-courselist-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}
/* Categories OFF: single-column, controls above grid */
.alms-courselist-wrap .alms-courselist-layout--no-sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}
.alms-courselist-layout--no-sidebar > .alms-controls-bar {
    grid-column: 1;
    grid-row: 1;
}
.alms-courselist-layout--no-sidebar .alms-courselist-content {
    grid-column: 1;
    grid-row: 2;
}
.alms-sidebar-card {
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 12px;
    box-shadow: var(--alms-shadow);
    padding: 14px;
}
.alms-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.alms-sidebar-title {
    font-size: .95rem !important;
    font-weight: 700;
    color: var(--alms-text-strong);
}
.alms-clear-filters-btn {
    border: none;
    background: transparent;
    color: var(--alms-primary);
    font-size: .82rem !important;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    text-decoration: none;
}
.alms-clear-filters-btn:hover,
.alms-clear-filters-btn:focus {
    color: var(--alms-primary-dark);
    text-decoration: none;
}
.alms-cat-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 460px;
    overflow: auto;
    padding-right: 4px;
}
.alms-cat-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem !important;
    color: var(--alms-text-body);
    cursor: pointer;
}
.alms-cat-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--alms-primary);
    cursor: pointer;
}
.alms-cat-label { line-height: 1.35; }
.alms-cat-empty {
    font-size: .875rem !important;
    color: var(--alms-text-muted);
    margin: 0;
}

.alms-controls-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--alms-shadow);
}

.alms-search-input-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}                                                                           
.alms-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    line-height: 1;
    color: var(--alms-text-muted);
    z-index: 1;
}
.alms-search-input {
    padding-left: 36px;
}
.alms-search-group { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; }

.alms-filters-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.alms-filter-item { flex: 0 0 auto; }
.alms-category-filter,
.alms-sort-filter { min-width: 160px; }

.alms-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Course card */
.alms-course-card {
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 12px;
    box-shadow: var(--alms-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--alms-transition), transform var(--alms-transition);
}
.alms-course-card:hover {
    box-shadow: var(--alms-shadow-md);
    transform: translateY(-2px);
}

.alms-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--alms-bg);
}
.alms-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.alms-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--alms-bg);
    color: var(--alms-text-muted);
    font-size: 2rem !important;
}
.alms-card-img-placeholder--enrolled {
    background: var(--alms-success-bg);
    color: var(--alms-success);
}

.alms-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.alms-card-title {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--alms-text);
    margin: 0;
    line-height: 1.4;
    min-height: 2.8em; /* always reserve 2 lines so all card bodies align */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alms-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: .84rem !important;
    color: var(--alms-text-muted);
}
.alms-card-code,
.alms-card-trainer,
.alms-card-duration { display: inline-flex; align-items: center; gap: 4px; }
.alms-card-code::before {
    content: none;
}
.alms-card-trainer::before {
    content: none;
}
.alms-card-duration::before {
    content: none;
}

.alms-card-price {
    font-size: 1.2rem !important;
    font-weight: 800;
    color: var(--alms-text-strong);
}

.alms-card-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--alms-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.alms-card-link {
    font-size: .875rem !important;
    font-weight: 700;
    color: var(--alms-link);
    text-decoration: none;
}
.alms-card-link:hover,
.alms-card-link:focus { color: var(--alms-link-hover); text-decoration: none; }

/* Ensure theme styles don't underline list-card links */
.alms-course-card a,
.alms-course-card a:hover,
.alms-course-card a:focus,
.alms-course-card a:active,
.alms-course-card a:visited {
    text-decoration: none;
}

/* Neutralize theme link-underline rules inside plugin UI */
.alms-wrap a.alms-btn,
.alms-wrap a.alms-btn:hover,
.alms-wrap a.alms-btn:focus,
.alms-wrap a.alms-btn:active,
.alms-wrap a.alms-btn:visited,
.alms-wrap .alms-course-card a,
.alms-wrap .alms-course-card a:hover,
.alms-wrap .alms-course-card a:focus,
.alms-wrap .alms-course-card a:active,
.alms-wrap .alms-course-card a:visited,
.alms-wrap .alms-card-title,
.alms-wrap .alms-card-title:hover,
.alms-wrap .alms-card-title:focus,
.alms-wrap .alms-card-meta,
.alms-wrap .alms-card-meta:hover,
.alms-wrap .alms-card-price,
.alms-wrap .alms-card-price:hover {
    text-decoration: none;
}

/* Courselist root / loading state */
.alms-courselist,
.alms-courselist-root { }
.alms-mycourses,
.alms-mycourses-root  { }

/* ── My Courses ───────────────────────────────────────────────────────────── */
.alms-mycourses-wrap { padding-bottom: 60px; }

.alms-mycourses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.alms-mycourses-title {
    font-size: 1.5rem !important;
    font-weight: 700;
    margin: 0;
}
.alms-mycourses-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.alms-mycourses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
@media (max-width: 600px) {
    .alms-mycourses-grid { grid-template-columns: 1fr; }
}

/* Enrolled course card */
.alms-mycourse-card {
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: var(--alms-radius);
    box-shadow: var(--alms-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--alms-transition), transform var(--alms-transition);
}
.alms-mycourse-card:hover {
    box-shadow: var(--alms-shadow-md);
    transform: translateY(-2px);
}
.alms-mycourse-enroll-date {
    font-size: .8125rem !important;
    color: var(--alms-text-muted);
}
.alms-mycourse-status {
    font-size: .8125rem !important;
    color: var(--alms-text-secondary);
}
.alms-mycourse-enroll-date,
.alms-mycourse-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
    white-space: nowrap;
}
.alms-mycourse-card .alms-card-body {
    gap: 8px;
}
.alms-mycourse-card .alms-card-footer {
    justify-content: flex-end;
}

/* Enrollment status badge — light-shade pill, dark text & icons */
.alms-enrollment-status-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start; /* never stretch full-width inside flex column */
    gap: 4px;
    padding: .3em .65em;
    border-radius: 50em;
    font-size: .72rem !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: none;
}
.alms-enrollment-status--active,
.alms-enrollment-status--enrolled {
    background: #d1fae5;
    color: #065f46;
}
.alms-enrollment-status--completed {
    background: #d1fae5;
    color: #065f46;
}
.alms-enrollment-status--expired {
    background: #fee2e2;
    color: #991b1b;
}
.alms-enrollment-status--pending {
    background: #fef9c3;
    color: #854d0e;
}
.alms-enrollment-status--ongoing {
    background: #dbeafe;
    color: #1e40af;
}
.alms-enrollment-status-badge .alms-meta-icon { flex-shrink: 0; }

/* Badge overlaid on thumbnail (My Courses cards) */
.alms-card-thumb .alms-enrollment-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Info button in card footer */
.alms-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--alms-text-muted);
    border-radius: 50%;
    transition: color var(--alms-transition), background var(--alms-transition);
}
.alms-info-btn:hover,
.alms-info-btn:focus {
    color: var(--alms-primary);
    background: var(--alms-bg);
    outline: none;
}

/* Course info modal */
.alms-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.alms-modal {
    background: var(--alms-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15,23,42,.25);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.alms-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 0;
}
.alms-modal-title {
    font-size: 1.1rem !important;
    font-weight: 700;
    color: var(--alms-text);
    margin: 0;
    line-height: 1.4;
}
.alms-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--alms-text-muted);
    flex-shrink: 0;
    border-radius: var(--alms-radius-sm);
    display: inline-flex;
    align-items: center;
}
.alms-modal-close:hover { color: var(--alms-text); }
.alms-modal-body {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.alms-modal-desc {
    font-size: .9375rem !important;
    color: var(--alms-text-secondary);
    line-height: 1.6;
    margin: 0;
}
.alms-modal-meta {
    font-size: .8125rem !important;
    color: var(--alms-text-muted);
    margin: 0;
}

/* ── My Orders ────────────────────────────────────────────────────────────── */
.alms-myorders-wrap { }

.alms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.alms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem !important;
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--alms-shadow);
}
.alms-table th {
    background: var(--alms-table-header-bg);
    color: var(--alms-text);
    font-weight: 600;
    font-size: .8125rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--alms-border);
    white-space: nowrap;
}
.alms-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--alms-border-light);
    color: var(--alms-text);
    vertical-align: middle;
}
.alms-table tbody tr:last-child td { border-bottom: none; }
.alms-table tbody tr:hover { background: var(--alms-table-hover-bg); }

.alms-td-id     { font-family: var(--alms-font-mono); font-size: .8125rem !important; color: var(--alms-text-muted); }
.alms-td-amount { font-weight: 600; }
.alms-td-status { white-space: nowrap; }
.alms-td-actions { white-space: nowrap; text-align: right; }

.alms-orders-detail-link {
    font-size: .84rem !important;
    font-weight: 700;
    color: var(--alms-detail-link);
    border: 1px solid var(--alms-detail-link-border);
    background: var(--alms-detail-link-bg);
    border-radius: 999px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    text-decoration: none !important;
}
.alms-orders-detail-link::after {
    content: "→";
    font-size: .9em !important;
}
.alms-orders-detail-link:hover,
.alms-orders-detail-link:focus {
    background: var(--alms-detail-link-hover-bg);
    border-color: var(--alms-detail-link-hover-border);
    color: var(--alms-detail-link-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ── Transaction Details ──────────────────────────────────────────────────── */
.alms-txdetail-wrap { }

.alms-txdetail-back { margin-bottom: 16px; }

.alms-txdetail-card {
    background: var(--alms-white);
    border: 1px solid var(--alms-border-light);
    border-radius: 14px;
    box-shadow: var(--alms-shadow-md);
    padding: 28px 28px 24px;
    max-width: 760px;
    margin-inline: auto;
}

.alms-txdetail-receipt-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--alms-border);
    margin-bottom: 14px;
}
.alms-txdetail-receipt-title {
    font-size: 1.1rem !important;
    font-weight: 800;
    color: var(--alms-text-strong);
}
.alms-txdetail-receipt-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: .82rem !important;
    color: var(--alms-text-muted);
}
.alms-txdetail-receipt-no { font-family: var(--alms-font-mono); }
.alms-txdetail-receipt-date { font-weight: 600; }

.alms-txdetail-top-amount {
    margin-left: auto;
    font-weight: 800;
    font-size: 1.08rem !important;
    color: var(--alms-link);
}

.alms-txdetail-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--alms-border-light);
}

.alms-txdetail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}
.alms-txdetail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--alms-border-light);
    gap: 16px;
    align-items: baseline;
}
.alms-txdetail-row:last-child { border-bottom: none; }
.alms-txdetail-label {
    flex: 0 0 180px;
    font-size: .875rem !important;
    font-weight: 600;
    color: var(--alms-text-muted);
}
.alms-txdetail-value {
    flex: 1;
    font-size: .9375rem !important;
    color: var(--alms-text);
    word-break: break-all;
}
.alms-txdetail-mono   { font-family: var(--alms-font-mono); font-size: .875rem !important; }
.alms-txdetail-amount { font-weight: 700; font-size: 1.05rem !important; }

.alms-txdetail-cta { margin-top: 24px; }

@media (max-width: 520px) {
    .alms-txdetail-card    { padding: 16px; }
    .alms-txdetail-receipt-head { flex-direction: column; align-items: flex-start; }
    .alms-txdetail-receipt-meta { align-items: flex-start; }
    .alms-txdetail-top-amount { margin-left: 0; }
    .alms-txdetail-row     { flex-direction: column; gap: 4px; }
    .alms-txdetail-label   { flex: none; }
}

/* ── Course Detail ────────────────────────────────────────────────────────── */
.alms-course-detail { }

.alms-cd-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 860px) {
    .alms-cd-layout { grid-template-columns: 1fr; }
    .alms-cd-sidebar { order: -1; }
    .alms-cd-card { position: static; top: auto; }
}

.alms-cd-main  { min-width: 0; }

/* Hero / title */
.alms-cd-title {
    font-size: 1.9rem !important;
    font-weight: 800;
    color: var(--alms-text);
    margin: 0 0 12px;
    line-height: 1.25;
}
.alms-cd-code {
    font-family: var(--alms-font-mono);
    font-size: .8125rem !important;
    color: var(--alms-text-muted);
    margin-bottom: 8px;
}
.alms-cd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: .875rem !important;
    color: var(--alms-text-muted);
    margin-bottom: 16px;
}
.alms-cd-meta-row { display: inline-flex; align-items: center; gap: 5px; }
.alms-cd-trainer  { }
.alms-cd-code,
.alms-cd-duration,
.alms-cd-trainer,
.alms-cd-category,
.alms-cd-startdate,
.alms-cd-enddate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--alms-border-light);
    border-radius: 999px;
    background: var(--alms-white);
}
.alms-cd-code::before,
.alms-cd-duration::before,
.alms-cd-trainer::before,
.alms-cd-category::before,
.alms-cd-startdate::before,
.alms-cd-enddate::before {
    content: none;
}
.alms-meta-icon {
    color: var(--alms-text-muted);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
}

/* Thumbnail */
.alms-cd-thumb {
    border-radius: var(--alms-radius);
    overflow: hidden;
    margin-bottom: 20px;
    aspect-ratio: 16 / 9;
    background: var(--alms-bg);
}
.alms-cd-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video */
.alms-cd-video-wrap,
.alms-video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--alms-radius);
    margin-bottom: 20px;
    background: #000;
}
.alms-cd-video,
.alms-video-responsive iframe,
.alms-video-responsive video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Description */
.alms-cd-desc {
    font-size: .9375rem !important;
    line-height: 1.7;
    color: var(--alms-text);
}

/* Sections (features, faq, etc.) */
.alms-cd-section { margin-top: 32px; }
.alms-cd-section-title {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: var(--alms-text);
    margin: 0 0 14px;
    padding-bottom: 10px;
    /* border-bottom: 1px solid var(--alms-border-light); */
}

/* Features list */
.alms-cd-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.alms-cd-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .9rem !important;
    color: var(--alms-text);
    line-height: 1.45;
}
.alms-cd-feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    color: var(--alms-success);
    margin-top: 2px;
}

/* FAQ accordion */
.alms-cd-faq { display: flex; flex-direction: column; gap: 8px; }

.alms-faq-item {
    border: 1px solid var(--alms-border);
    border-radius: var(--alms-radius-sm);
    overflow: hidden;
}
.alms-faq-question {
    font-size: .95rem !important;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 16px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--alms-text);
    background: var(--alms-bg);
    user-select: none;
    transition: background-color var(--alms-transition);
}
.alms-faq-question::-webkit-details-marker { display: none; }
.alms-faq-question::after {
    content: '+';
    font-size: 1.2rem !important;
    color: var(--alms-primary);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform var(--alms-transition);
}
details[open] .alms-faq-question { background: var(--alms-white); }
details[open] .alms-faq-question::after { content: '−'; }

.alms-faq-answer {
    padding: 12px 16px 16px;
    font-size: .9rem !important;
    color: var(--alms-text-muted);
    line-height: 1.6;
}

/* Sidebar */
.alms-cd-sidebar { }

.alms-cd-card {
    background: linear-gradient(180deg, #fafbfc 0%, #f4f7fa 100%);
    /* background: var(--alms-white); */
    border: 1px solid var(--alms-border-light);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: var(--alms-header-height);
}
.alms-cd-card .alms-cd-thumb  { margin-bottom: 0; }
.alms-cd-card .alms-cd-section { margin-top: 0; }

.alms-cd-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.alms-cd-action-row .alms-btn,
.alms-cd-action-row .alms-sso-form { flex: 1 1 auto; }
.alms-cd-action-row .alms-sso-form .alms-btn { width: 100%; }
.alms-cd-action-row .alms-cd-price { flex: 0 0 auto; white-space: nowrap; }

.alms-cd-price-wrap {
    background: var(--alms-white);
    border: 1px solid var(--alms-border);
    border-radius: 12px;
    box-shadow: var(--alms-shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: var(--alms-header-height);
}
.alms-cd-price {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: var(--alms-text-strong);
    line-height: 1;
}
.alms-cd-action-box { display: flex; flex-direction: column; gap: 10px; }
.alms-pay-now-btn,
.alms-enroll-free-btn { width: 100%; }

.alms-payment-message {
    font-size: .875rem !important;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: var(--alms-radius-sm);
    border: 1px solid transparent;
}

/* Better mobile rhythm for list/detail similar to marketplace layouts */
@media (max-width: 760px) {
    .alms-wrap { padding: 18px 12px 36px; }
    /* Collapse to single column; clear explicit placements so DOM order drives the stack:
       controls-bar → sidebar (if visible) → course grid */
    .alms-courselist-wrap .alms-courselist-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .alms-courselist-layout > .alms-controls-bar,
    .alms-courselist-sidebar,
    .alms-courselist-content {
        grid-column: 1;
        grid-row: auto;
    }
    .alms-courselist-sidebar { position: static; top: auto; }
    .alms-controls-bar { padding: 10px; gap: 10px; }
    .alms-card-body { padding: 14px; }
    .alms-card-footer { padding: 12px 14px; }
    .alms-cd-title { font-size: 1.55rem !important; }
}
.alms-payment-message.alms-message--success {
    background: var(--alms-success-bg);
    border-color: var(--alms-success);
    color: var(--alms-success-text);
}
.alms-payment-message.alms-message--error {
    background: var(--alms-error-bg);
    border-color: var(--alms-error);
    color: var(--alms-error-text);
}

/* SSO button */
.alms-sso-form { margin: 0; }

/* Razorpay wrapper */
.alms-razorpay { }

/* Nav menu user widget styles are loaded globally via UserMenu::nav_widget_css(). */

/* Trigger button – unstyled, inherits nav font */
.alms-user-nav-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.alms-user-nav-trigger:hover { opacity: .8; }

/* Dropdown panel */
.alms-user-nav-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--alms-white);
    border: 1px solid var(--alms-border);
    border-radius: 6px;
    box-shadow: var(--alms-shadow-md);
    z-index: 200;
}
.alms-user-nav-dropdown--open { display: block !important; }

.alms-user-nav-dropdown li a {
    display: block;
    padding: 8px 18px;
    color: var(--alms-text);
    text-decoration: none;
    font-size: .9em !important;
    white-space: nowrap;
}
.alms-user-nav-dropdown li a:hover {
    background: var(--alms-bg);
    color: var(--alms-text-strong);
}
.alms-user-nav-logout-item { border-top: 1px solid var(--alms-border-light); margin-top: 4px; padding-top: 4px; }
.alms-user-nav-logout-item a { color: var(--alms-error); }
.alms-user-nav-logout-item a:hover { background: var(--alms-error-bg); color: var(--alms-error); }