/*
 * WP Voice Recorder Pro — Frontend Styles
 * =======================================
 * Aesthetic: Editorial / Premium Academic
 * Type: Fraunces (display) + Geist (sans) + IBM Plex Sans Arabic
 * Palette: deep navy ink + warm paper + crimson accent
 *
 * Scoped under .wpvrp-page to avoid bleeding into the host theme.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Geist:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* =====================================================================
 * 1. Design Tokens (scoped)
 * ================================================================== */
.wpvrp-page {
    /* — Ink (navy) — */
    --c-ink-900: #0a1929;
    --c-ink-800: #0e2438;
    --c-ink-700: #0E2A47;
    --c-ink-500: #2c4a6e;
    --c-ink-400: #5a7290;
    --c-ink-300: #8da3bd;
    --c-ink-200: #c5d2e0;
    --c-ink-100: #e2eaf3;

    /* — Paper (warm off-white background palette) — */
    --c-paper:   #fbf7f0;
    --c-paper-2: #f5efe3;
    --c-paper-3: #ece4d3;
    --c-paper-4: #d8cdb6;

    /* — Surface (cards) — */
    --c-surface:   #ffffff;
    --c-surface-2: #fbfaf7;

    /* — Accent (crimson) — */
    --c-accent:      #890C25;
    --c-accent-hover:#6b091d;
    --c-accent-soft: #fbe9ec;

    /* — Status — */
    --c-success: #1f6b4b;
    --c-success-soft: #e0f3ea;
    --c-warning: #b8540a;
    --c-warning-soft: #fdf0dc;
    --c-error:   #8b1c1c;
    --c-error-soft: #fce7e7;
    --c-info:    #1e4d8b;
    --c-info-soft: #e3edf9;

    /* — Typography — */
    --f-display: 'Fraunces', 'IBM Plex Sans Arabic', Georgia, serif;
    --f-sans:    'Geist', 'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --f-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

    /* — Spacing scale — */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --s-9: 96px; --s-10: 128px;

    /* — Radii — */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;

    /* — Shadows — */
    --sh-1: 0 1px 2px rgba(14,42,71,.04), 0 1px 1px rgba(14,42,71,.06);
    --sh-2: 0 4px 14px rgba(14,42,71,.06), 0 1px 3px rgba(14,42,71,.04);
    --sh-3: 0 18px 38px rgba(14,42,71,.08), 0 6px 12px rgba(14,42,71,.04);
    --sh-4: 0 32px 64px rgba(14,42,71,.10), 0 12px 24px rgba(14,42,71,.05);
    --sh-ring: 0 0 0 4px rgba(137,12,37,.12);

    /* — Motion — */
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-in-out: cubic-bezier(.65,0,.35,1);
    --dur-1: 180ms;
    --dur-2: 320ms;
    --dur-3: 600ms;

    /* — Base — */
    font-family: var(--f-sans);
    color: var(--c-ink-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    font-size: 16px;
}

/* RTL automatic detection */
.wpvrp-page[dir="rtl"], html[dir="rtl"] .wpvrp-page {
    font-family: 'IBM Plex Sans Arabic', 'Geist', system-ui, sans-serif;
}

/* =====================================================================
 * 2. Page wrappers
 * ================================================================== */
.wpvrp-page {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: var(--s-7) var(--s-4);
    background:
        radial-gradient(at 20% 0%, rgba(137,12,37,.04) 0%, transparent 50%),
        radial-gradient(at 80% 100%, rgba(14,42,71,.05) 0%, transparent 50%),
        var(--c-paper);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Subtle paper grain texture via CSS noise */
.wpvrp-page::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.16 0 0 0 0 0.28 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    opacity: .55;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}
.wpvrp-page > * { position: relative; z-index: 1; }

.wpvrp-page--panel,
.wpvrp-page--result,
.wpvrp-page--auth {
    max-width: 950px;
    padding: var(--s-9) var(--s-5);
}

.wpvrp-page--test {
    max-width: 880px;
    padding: var(--s-5) var(--s-4);
}

@media (max-width: 640px) {
    .wpvrp-page { padding: var(--s-5) var(--s-3); border-radius: var(--r-md); }
    .wpvrp-page--panel, .wpvrp-page--result, .wpvrp-page--auth { padding: var(--s-7) var(--s-4); }
}

/* =====================================================================
 * 3. Typography
 * ================================================================== */
.wpvrp-page h1, .wpvrp-page h2, .wpvrp-page h3, .wpvrp-page h4 {
    font-family: var(--f-display);
    font-optical-sizing: auto;
    color: var(--c-ink-900);
    margin: 0 0 var(--s-3);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 500;
}
.wpvrp-page h1 { font-size: 2.5rem; font-weight: 600; }
.wpvrp-page h2 { font-size: 2rem; font-weight: 500; }
.wpvrp-page h3 { font-size: 1.5rem; font-weight: 500; }
.wpvrp-page h4 { font-size: 1.2rem; font-weight: 600; font-family: var(--f-sans); letter-spacing: -0.005em; }

.wpvrp-page p { margin: 0 0 var(--s-4); color: var(--c-ink-500); }
.wpvrp-page p:last-child { margin-bottom: 0; }

.wpvrp-eyebrow {
    font-family: var(--f-sans);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--c-accent);
    margin-bottom: var(--s-3);
}

.wpvrp-meta-line {
    font-size: .9rem;
    color: var(--c-ink-400);
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * 4. Buttons
 * ================================================================== */
.wpvrp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 11px 22px;
    font-family: var(--f-sans);
    font-size: .94rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: transform var(--dur-1) var(--ease-out),
                box-shadow var(--dur-1) var(--ease-out),
                background var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out);
    position: relative;
    overflow: hidden;
    user-select: none;
    background: var(--c-ink-700);
    color: var(--c-paper);
}

.wpvrp-btn:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.wpvrp-btn:disabled, .wpvrp-btn.is-disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none !important;
}

.wpvrp-btn--primary {
    background: var(--c-ink-700);
    color: var(--c-paper);
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.08);
}
.wpvrp-btn--primary:hover:not(:disabled):not(.is-disabled) {
    background: var(--c-ink-800);
    transform: translateY(-1px);
    box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.1);
}
.wpvrp-btn--primary:active:not(:disabled) { transform: translateY(0); }

.wpvrp-btn--accent {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(137,12,37,.2);
}
.wpvrp-btn--accent:hover:not(:disabled) {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(137,12,37,.28);
}

.wpvrp-btn--ghost {
    background: transparent;
    color: var(--c-ink-700);
    border-color: var(--c-ink-200);
}
.wpvrp-btn--ghost:hover:not(:disabled) {
    background: var(--c-paper-2);
    border-color: var(--c-ink-400);
}

.wpvrp-btn--soft {
    background: var(--c-paper-2);
    color: var(--c-ink-700);
    box-shadow: inset 0 0 0 1px var(--c-paper-3);
}
.wpvrp-btn--soft:hover:not(:disabled) {
    background: var(--c-paper-3);
    box-shadow: inset 0 0 0 1px var(--c-paper-4);
}

.wpvrp-btn--danger {
    background: transparent;
    color: var(--c-error);
    border-color: rgba(139,28,28,.2);
}
.wpvrp-btn--danger:hover:not(:disabled) {
    background: var(--c-error-soft);
    border-color: var(--c-error);
}

.wpvrp-btn--lg  { padding: 16px 28px; font-size: 1rem; border-radius: 10px; }
.wpvrp-btn--xl  { padding: 20px 36px; font-size: 1.06rem; border-radius: 12px; }
.wpvrp-btn--block { display: flex; width: 100%; }

.wpvrp-btn__spinner {
    display: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: wpvrp-spin .8s linear infinite;
}
.wpvrp-btn.is-loading .wpvrp-btn__label { opacity: 0; }
.wpvrp-btn.is-loading .wpvrp-btn__spinner {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

@keyframes wpvrp-spin { to { transform: rotate(360deg); } }

/* =====================================================================
 * 5. Generic panel (used for static states)
 * ================================================================== */
.wpvrp-panel {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-8) var(--s-7);
    box-shadow: var(--sh-3);
    text-align: center;
    border: 1px solid rgba(14,42,71,.05);
}
.wpvrp-panel--error { border-color: var(--c-error); background: var(--c-error-soft); }

.wpvrp-panel__head { margin-bottom: var(--s-5); }
.wpvrp-panel__icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-5);
    background: var(--c-paper-2);
    color: var(--c-ink-700);
    box-shadow: inset 0 0 0 1px var(--c-paper-3);
}
.wpvrp-panel__icon--accent  { background: var(--c-accent-soft);  color: var(--c-accent); }
.wpvrp-panel__icon--success { background: var(--c-success-soft); color: var(--c-success); animation: wpvrp-pop var(--dur-2) var(--ease-out); }
.wpvrp-panel__icon--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.wpvrp-panel__icon--info    { background: var(--c-info-soft);    color: var(--c-info); }

@keyframes wpvrp-pop {
    0% { transform: scale(.7); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.wpvrp-panel__title-lg { font-size: 2rem; margin-top: var(--s-4); }

.wpvrp-panel__content { margin: var(--s-5) auto; max-width: 540px; }
.wpvrp-panel__content h3 { margin-top: var(--s-4); }
.wpvrp-panel__content p  { line-height: 1.7; }

.wpvrp-panel__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    margin-top: var(--s-6);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .wpvrp-panel { padding: var(--s-6) var(--s-5); }
    .wpvrp-panel__title-lg { font-size: 1.5rem; }
}

/* =====================================================================
 * 6. Level Badge (CEFR pill)
 * ================================================================== */
.wpvrp-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-ink-700) 0%, var(--c-ink-900) 100%);
    color: var(--c-paper);
    box-shadow: 0 12px 28px rgba(14,42,71,.25);
    margin: var(--s-3) auto var(--s-4);
    position: relative;
}
.wpvrp-level-badge::after {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px dashed var(--c-paper-4);
    opacity: .8;
}
.wpvrp-level-badge__code {
    font-family: var(--f-display);
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -.03em;
}
.wpvrp-level-badge--xl { width: 140px; height: 140px; }
.wpvrp-level-badge--xl .wpvrp-level-badge__code { font-size: 3.5rem; }

/* =====================================================================
 * 7. Result card
 * ================================================================== */
.wpvrp-result-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-8) var(--s-7);
    text-align: center;
    box-shadow: var(--sh-3);
    border: 1px solid rgba(14,42,71,.05);
    margin-bottom: var(--s-6);
}
.wpvrp-result-card__title {
    font-size: 1.8rem;
    margin-top: var(--s-3);
    margin-bottom: var(--s-2);
}

.wpvrp-recommended {
    margin-top: var(--s-6);
}
.wpvrp-recommended__title {
    font-family: var(--f-display);
    font-size: 1.4rem;
    margin-bottom: var(--s-4);
    text-align: center;
    color: var(--c-ink-700);
}

/* =====================================================================
 * 8. Course cards (used by [wpvrp_courses_by_level])
 * ================================================================== */
.wpvrp-courses__heading {
    font-family: var(--f-display);
    text-align: center;
    margin-bottom: var(--s-5);
}
.wpvrp-courses__grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.wpvrp-courses--cols-1 .wpvrp-courses__grid { --cols: 1; }
.wpvrp-courses--cols-2 .wpvrp-courses__grid { --cols: 2; }
.wpvrp-courses--cols-3 .wpvrp-courses__grid { --cols: 3; }
.wpvrp-courses--cols-4 .wpvrp-courses__grid { --cols: 4; }

@media (max-width: 880px) {
    .wpvrp-courses__grid { --cols: 2 !important; }
}
@media (max-width: 540px) {
    .wpvrp-courses__grid { --cols: 1 !important; }
}

.wpvrp-course-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-1);
    border: 1px solid rgba(14,42,71,.05);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.wpvrp-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-3);
    text-decoration: none;
    color: inherit;
}
.wpvrp-course-card__thumb {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--c-paper-3);
}
.wpvrp-course-card__thumb--placeholder {
    background-image: linear-gradient(135deg, var(--c-paper-3) 0%, var(--c-paper-4) 100%);
}
.wpvrp-course-card__body { padding: var(--s-4); position: relative; }
.wpvrp-course-card__level {
    display: inline-block;
    padding: 2px 9px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: var(--s-2);
}
.wpvrp-course-card__title {
    margin: 0 0 var(--s-2);
    font-size: 1.05rem;
    color: var(--c-ink-800);
    font-family: var(--f-sans);
    font-weight: 600;
    line-height: 1.3;
}
.wpvrp-course-card__excerpt {
    font-size: .88rem;
    color: var(--c-ink-400);
    margin: 0;
    line-height: 1.5;
}

.wpvrp-courses-empty {
    padding: var(--s-7);
    text-align: center;
    background: var(--c-paper-2);
    border-radius: var(--r-md);
    border: 1px dashed var(--c-paper-4);
    color: var(--c-ink-400);
}

/* =====================================================================
 * 9. The Test App
 * ================================================================== */
.wpvrp-test-app {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    border: 1px solid rgba(14,42,71,.05);
    overflow: hidden;
    min-height: 480px;
}

.wpvrp-test-loading {
    padding: var(--s-9);
    text-align: center;
    color: var(--c-ink-400);
}
.wpvrp-spinner {
    width: 36px; height: 36px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    border: 3px solid var(--c-paper-3);
    border-top-color: var(--c-ink-700);
    animation: wpvrp-spin .9s linear infinite;
}

/* --- Test header (progress bar + dots + counter) --- */
.wpvrp-test-head {
    padding: var(--s-5) var(--s-6) var(--s-4);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-paper-3);
}

.wpvrp-progress {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.wpvrp-progress__counter {
    font-family: var(--f-display);
    font-size: 1.05rem;
    color: var(--c-ink-700);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wpvrp-progress__counter strong { color: var(--c-accent); font-weight: 700; }

.wpvrp-progress__bar {
    flex: 1;
    height: 6px;
    background: var(--c-paper-3);
    border-radius: 99px;
    overflow: hidden;
    min-width: 100px;
}
.wpvrp-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-ink-700) 0%, var(--c-accent) 100%);
    border-radius: 99px;
    transition: width var(--dur-3) var(--ease-out);
    width: 0%;
}

.wpvrp-progress__dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--s-3);
    width: 100%;
}
.wpvrp-progress__dot {
    height: 6px;
    flex: 1;
    min-width: 10px;
    max-width: 32px;
    border-radius: 99px;
    background: var(--c-paper-3);
    transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wpvrp-progress__dot.is-done     { background: var(--c-ink-700); }
.wpvrp-progress__dot.is-current  {
    background: var(--c-accent);
    transform: scaleY(1.6);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* --- Test body (question card) --- */
.wpvrp-test-body {
    padding: var(--s-7) var(--s-6) var(--s-6);
    position: relative;
    min-height: 340px;
}

.wpvrp-q {
    animation: wpvrp-enter var(--dur-2) var(--ease-out);
}
@keyframes wpvrp-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes wpvrp-exit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}
.wpvrp-q.is-leaving { animation: wpvrp-exit var(--dur-1) var(--ease-out) forwards; }

/* --- Type chip --- */
.wpvrp-q__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}
.wpvrp-q__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--c-paper-2);
    color: var(--c-ink-700);
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid var(--c-paper-3);
}
.wpvrp-q__chip svg { width: 13px; height: 13px; }

.wpvrp-q__chip--mcq      { background: #eef2ff;       color: #3730a3; border-color: #c7d2fe; }
.wpvrp-q__chip--listen   { background: var(--c-success-soft); color: var(--c-success); border-color: #a7d8c2; }
.wpvrp-q__chip--record   { background: var(--c-accent-soft);  color: var(--c-accent);  border-color: #f0c6cd; }

.wpvrp-q__timer {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--c-paper-2);
    border-radius: 99px;
    font-family: var(--f-mono);
    font-size: .85rem;
    font-weight: 500;
    color: var(--c-ink-700);
    font-variant-numeric: tabular-nums;
    transition: all var(--dur-1) var(--ease-out);
    border: 1px solid var(--c-paper-3);
}
.wpvrp-q__timer.is-warning {
    background: var(--c-warning-soft);
    color: var(--c-warning);
    border-color: rgba(184,84,10,.3);
}
.wpvrp-q__timer.is-critical {
    background: var(--c-error-soft);
    color: var(--c-error);
    border-color: rgba(139,28,28,.3);
    animation: wpvrp-pulse-warn 1s ease-in-out infinite;
}
@keyframes wpvrp-pulse-warn {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
}
.wpvrp-q__timer svg { width: 14px; height: 14px; }

/* --- Question text & image --- */
.wpvrp-q__text {
    font-family: var(--f-display);
    font-size: 1.45rem;
    line-height: 1.4;
    color: var(--c-ink-900);
    margin: 0 0 var(--s-5);
    font-weight: 500;
    letter-spacing: -.01em;
}
.wpvrp-q__text p:last-child { margin-bottom: 0; }
.wpvrp-q__text strong { color: var(--c-accent); font-weight: 600; }

.wpvrp-q__image {
    margin: 0 0 var(--s-5);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-paper-2);
    box-shadow: var(--sh-1);
}
.wpvrp-q__image img { display: block; width: 100%; height: auto; }

/* --- Audio player for listening --- */
.wpvrp-q__audio {
    background: linear-gradient(135deg, var(--c-ink-700) 0%, var(--c-ink-900) 100%);
    border-radius: var(--r-md);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    color: var(--c-paper);
    box-shadow: 0 12px 24px rgba(14,42,71,.18);
    position: relative;
    overflow: hidden;
}
.wpvrp-q__audio::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(at 80% 50%, rgba(137,12,37,.18), transparent 40%);
    pointer-events: none;
}
.wpvrp-q__audio-label {
    font-family: var(--f-sans);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255,255,255,.7);
    margin-bottom: var(--s-2);
    position: relative;
}
.wpvrp-q__audio audio {
    width: 100%;
    height: 38px;
    position: relative;
    z-index: 1;
}
/* Try to style native audio controls */
.wpvrp-q__audio audio::-webkit-media-controls-panel {
    background: rgba(255,255,255,.08);
}

/* --- MCQ / Listening options --- */
.wpvrp-q__options {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.wpvrp-q__opt {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 14px 18px;
    background: var(--c-surface);
    border: 2px solid var(--c-paper-3);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: start;
    font-family: var(--f-sans);
    font-size: 1rem;
    color: var(--c-ink-800);
    transition: all var(--dur-1) var(--ease-out);
    line-height: 1.4;
    width: 100%;
}
.wpvrp-q__opt:hover {
    border-color: var(--c-ink-300);
    background: var(--c-paper);
    transform: translateY(-1px);
}
.wpvrp-q__opt:focus-visible {
    outline: none;
    box-shadow: var(--sh-ring);
}
.wpvrp-q__opt-radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--c-ink-200);
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-1) var(--ease-out);
}
.wpvrp-q__opt-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--c-accent);
    transform: scale(0);
    transition: transform var(--dur-1) var(--ease-out);
}
.wpvrp-q__opt-letter {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--c-paper-2);
    color: var(--c-ink-500);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--dur-1) var(--ease-out);
}
.wpvrp-q__opt-text { flex: 1; }

.wpvrp-q__opt.is-selected {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}
.wpvrp-q__opt.is-selected .wpvrp-q__opt-radio { border-color: var(--c-accent); }
.wpvrp-q__opt.is-selected .wpvrp-q__opt-radio::after { transform: scale(1); }
.wpvrp-q__opt.is-selected .wpvrp-q__opt-letter {
    background: var(--c-accent);
    color: #fff;
}

/* --- Recorder widget --- */
.wpvrp-rec {
    background: var(--c-surface-2);
    border: 1px solid var(--c-paper-3);
    border-radius: var(--r-md);
    padding: var(--s-6);
    text-align: center;
}

/* State: idle */
.wpvrp-rec__big {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    width: 180px; height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent) 0%, #6e0a1e 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(137,12,37,.32), inset 0 1px 0 rgba(255,255,255,.15);
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    margin-bottom: var(--s-4);
    position: relative;
}
.wpvrp-rec__big:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 40px rgba(137,12,37,.4); }
.wpvrp-rec__big:active { transform: translateY(0) scale(.98); }
.wpvrp-rec__big:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.wpvrp-rec__big-icon { width: 52px; height: 52px; }
.wpvrp-rec__big-label {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* State: recording (active red w/ rings) */
.wpvrp-rec--recording .wpvrp-rec__big {
    background: linear-gradient(135deg, #c41e3a 0%, #890C25 100%);
    animation: none;
}
.wpvrp-rec__rings {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wpvrp-rec--recording .wpvrp-rec__rings { display: block; }
.wpvrp-rec__rings::before, .wpvrp-rec__rings::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--c-accent);
    opacity: 0;
    animation: wpvrp-ring 2.2s ease-out infinite;
}
.wpvrp-rec__rings::after { animation-delay: 1.1s; }
@keyframes wpvrp-ring {
    0%   { transform: scale(1);   opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Waveform canvas */
.wpvrp-rec__wave {
    margin: var(--s-4) auto 0;
    width: 100%; max-width: 480px;
    height: 64px;
    background: transparent;
    display: block;
}

/* Timer & duration */
.wpvrp-rec__timer {
    font-family: var(--f-mono);
    font-size: 2rem;
    font-weight: 500;
    color: var(--c-ink-700);
    margin: var(--s-3) 0;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.wpvrp-rec__timer-sep { color: var(--c-ink-300); margin: 0 4px; }

.wpvrp-rec__hint {
    font-size: .88rem;
    color: var(--c-ink-400);
    margin: var(--s-2) 0;
}

.wpvrp-rec__attempts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--c-paper-2);
    border-radius: 99px;
    font-size: .8rem;
    color: var(--c-ink-500);
    font-weight: 500;
    border: 1px solid var(--c-paper-3);
}
.wpvrp-rec__attempts.is-last {
    background: var(--c-warning-soft);
    color: var(--c-warning);
    border-color: rgba(184,84,10,.2);
}

/* Preview state */
.wpvrp-rec--preview .wpvrp-rec__player {
    background: var(--c-surface);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-bottom: var(--s-4);
    box-shadow: var(--sh-1);
    border: 1px solid var(--c-paper-3);
}
.wpvrp-rec__player audio { width: 100%; }

.wpvrp-rec__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--s-4);
}

/* Time-expired notice in preview */
.wpvrp-rec__time-up {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--c-warning-soft);
    color: var(--c-warning);
    border-radius: var(--r-sm);
    font-weight: 600;
    margin-bottom: var(--s-3);
    border: 1px solid rgba(184,84,10,.3);
    font-size: .92rem;
    animation: wpvrp-pop var(--dur-2) var(--ease-out);
}
.wpvrp-rec__time-up svg { width: 18px; height: 18px; }

/* Upload progress */
.wpvrp-rec--uploading .wpvrp-rec__progress {
    height: 8px;
    background: var(--c-paper-3);
    border-radius: 99px;
    overflow: hidden;
    margin: var(--s-4) auto;
    max-width: 320px;
}
.wpvrp-rec__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-hover) 100%);
    border-radius: 99px;
    transition: width var(--dur-2) var(--ease-out);
    width: 0%;
}

/* Saved state */
.wpvrp-rec--saved .wpvrp-rec__check {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--c-success-soft);
    color: var(--c-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-3);
    animation: wpvrp-pop var(--dur-2) var(--ease-out);
}
.wpvrp-rec__check svg { width: 40px; height: 40px; }

/* Error inline */
.wpvrp-rec__error {
    padding: var(--s-3) var(--s-4);
    background: var(--c-error-soft);
    color: var(--c-error);
    border-radius: var(--r-sm);
    font-size: .92rem;
    margin: var(--s-3) 0;
    text-align: start;
    border-inline-start: 3px solid var(--c-error);
}

/* --- Test footer --- */
.wpvrp-test-foot {
    padding: var(--s-4) var(--s-6) var(--s-6);
    border-top: 1px solid var(--c-paper-3);
    background: var(--c-surface-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.wpvrp-test-foot__hint {
    font-size: .88rem;
    color: var(--c-ink-400);
}

/* --- Intro screen (state=not_started) --- */
.wpvrp-intro {
    padding: var(--s-7) var(--s-6) var(--s-6);
    text-align: center;
}
.wpvrp-intro__seal {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-ink-700), var(--c-ink-900));
    color: var(--c-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
    position: relative;
    box-shadow: 0 16px 32px rgba(14,42,71,.2);
}
.wpvrp-intro__seal::after {
    content: "";
    position: absolute; inset: -8px;
    border-radius: 50%;
    border: 1px dashed var(--c-paper-4);
    opacity: .7;
}
.wpvrp-intro__seal svg { width: 48px; height: 48px; }

.wpvrp-intro__title {
    font-family: var(--f-display);
    font-size: 2.2rem;
    margin-bottom: var(--s-3);
}
.wpvrp-intro__content {
    text-align: start;
    max-width: 620px;
    margin: var(--s-5) auto var(--s-6);
    color: var(--c-ink-500);
    line-height: 1.7;
}
.wpvrp-intro__content h3 {
    font-family: var(--f-display);
    font-size: 1.25rem;
    margin-top: var(--s-4);
    margin-bottom: var(--s-2);
    color: var(--c-ink-700);
}
.wpvrp-intro__content ul, .wpvrp-intro__content ol {
    margin: 0 0 var(--s-3); padding-inline-start: var(--s-5);
}
.wpvrp-intro__content li { margin-bottom: var(--s-2); }
.wpvrp-intro__content strong { color: var(--c-accent); }

/* --- Submit confirmation modal --- */
.wpvrp-modal {
    position: fixed;
    inset: 0;
    background: rgba(10,25,41,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    animation: wpvrp-fade-in var(--dur-2) var(--ease-out);
}
@keyframes wpvrp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.wpvrp-modal__card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-7) var(--s-6);
    max-width: 460px;
    text-align: center;
    box-shadow: var(--sh-4);
    animation: wpvrp-pop var(--dur-2) var(--ease-out);
}
.wpvrp-modal__title {
    font-family: var(--f-display);
    font-size: 1.6rem;
    margin-bottom: var(--s-3);
}
.wpvrp-modal__body { color: var(--c-ink-500); margin-bottom: var(--s-5); }
.wpvrp-modal__actions {
    display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
}

/* --- Completion screen --- */
.wpvrp-complete {
    padding: var(--s-9) var(--s-6);
    text-align: center;
}
.wpvrp-complete__icon {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: var(--c-success-soft);
    color: var(--c-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-5);
    animation: wpvrp-pop var(--dur-3) var(--ease-out);
}
.wpvrp-complete__icon svg { width: 48px; height: 48px; }
.wpvrp-complete__title { font-family: var(--f-display); font-size: 2rem; margin-bottom: var(--s-3); }
.wpvrp-complete__body { max-width: 480px; margin: 0 auto; }

/* =====================================================================
 * 10. Auth forms (login / register)
 * ================================================================== */
.wpvrp-page--auth {
    background: transparent !important;
    min-height: unset;
    padding: var(--s-6) var(--s-4);
}

.wpvrp-auth-form {
    background: #ffffff;
    border-radius: 20px;
    padding: var(--s-7) var(--s-7);
    box-shadow: 0 8px 48px rgba(14,42,71,.10), 0 1.5px 6px rgba(14,42,71,.06);
    border: 1px solid rgba(14,42,71,.07);
    max-width: 480px;
    margin: 0 auto;
}

/* Logo inside form */
.wpvrp-auth-form__logo {
    text-align: center;
    margin-bottom: var(--s-5);
}
.wpvrp-auth-logo-img {
    max-height: 64px;
    width: auto;
    display: inline-block;
}
.wpvrp-auth-form__site-name {
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: -.02em;
}

.wpvrp-auth-form__title {
    font-family: var(--f-display);
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: var(--s-1);
    text-align: center;
    color: var(--c-ink-900);
    letter-spacing: -.03em;
}
.wpvrp-auth-form__sub {
    text-align: center;
    color: var(--c-ink-400);
    margin-bottom: var(--s-5);
    font-size: .95rem;
}

/* remember + forgot password row */
.wpvrp-auth-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--s-2) 0 var(--s-4);
}
.wpvrp-auth-form__forgot {
    font-size: .85rem;
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 600;
}
.wpvrp-auth-form__forgot:hover { text-decoration: underline; }

/* password toggle wrapper */
.wpvrp-field-block__pw-wrap {
    position: relative;
}
.wpvrp-field-block__pw-wrap input {
    padding-right: 44px;
}
.wpvrp-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--c-ink-400);
    line-height: 1;
}
.wpvrp-pw-toggle:hover { color: var(--c-accent); }

/* OR divider */
.wpvrp-auth-form__divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-4) 0 var(--s-3);
    color: var(--c-ink-300);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wpvrp-auth-form__divider::before,
.wpvrp-auth-form__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-ink-200);
}

.wpvrp-field-block { display: block; margin-bottom: var(--s-3); }
.wpvrp-field-block__label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-ink-700);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}
.wpvrp-field-block input {
    width: 100%;
    padding: 12px 14px;
    background: var(--c-paper);
    border: 1.5px solid var(--c-paper-3);
    border-radius: var(--r-sm);
    font-family: var(--f-sans);
    font-size: 1rem;
    color: var(--c-ink-900);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.wpvrp-field-block input:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 4px rgba(137,12,37,.1);
}
.wpvrp-field-block__hint { font-size: .8rem; color: var(--c-ink-400); margin-top: 4px; }

.wpvrp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}

.wpvrp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: .9rem;
    color: var(--c-ink-500);
    margin: var(--s-2) 0 var(--s-4);
    cursor: pointer;
}
.wpvrp-checkbox input {
    width: 18px; height: 18px;
    accent-color: var(--c-accent);
    cursor: pointer;
}

.wpvrp-honeypot {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

.wpvrp-auth-form__error {
    min-height: 24px;
    color: var(--c-error);
    font-size: .92rem;
    padding: var(--s-2) 0;
    text-align: center;
}
.wpvrp-auth-form__error:not(:empty) {
    background: var(--c-error-soft);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: var(--s-2) 0 var(--s-3);
}

.wpvrp-auth-form__alt {
    text-align: center;
    margin-top: var(--s-4);
    font-size: .9rem;
    color: var(--c-ink-400);
}
.wpvrp-auth-form__alt a {
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: none;
}
.wpvrp-auth-form__alt a:hover { text-decoration: underline; }

/* =====================================================================
 * 11. Responsive tweaks
 * ================================================================== */
@media (max-width: 720px) {
    .wpvrp-test-head { padding: var(--s-4); }
    .wpvrp-test-body { padding: var(--s-5) var(--s-4); }
    .wpvrp-test-foot { padding: var(--s-3) var(--s-4) var(--s-4); }
    .wpvrp-q__text { font-size: 1.2rem; }
    .wpvrp-rec { padding: var(--s-4); }
    .wpvrp-rec__big { width: 144px; height: 144px; }
    .wpvrp-rec__big-icon { width: 42px; height: 42px; }
    .wpvrp-intro { padding: var(--s-5) var(--s-4); }
    .wpvrp-intro__title { font-size: 1.6rem; }
    .wpvrp-field-row { grid-template-columns: 1fr; }
    .wpvrp-auth-form { padding: var(--s-5) var(--s-4); }
    .wpvrp-courses__grid { gap: var(--s-3); }
}

/* =====================================================================
 * 12. Accessibility & motion preferences
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wpvrp-page *, .wpvrp-page *::before, .wpvrp-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
 * 13. Course Gating panel (appears on single course pages)
 * ================================================================== */

/* Reuse the design tokens by inheriting from .wpvrp-page, but the gate
 * appears OUTSIDE that wrapper (inside LearnPress's button area). So we
 * scope its own tokens directly on the gate. */
.wpvrp-gate {
    font-family: 'Geist', 'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin: 0 0 16px;
    box-shadow: 0 4px 14px rgba(14,42,71,.06), 0 1px 3px rgba(14,42,71,.04);
    border: 1px solid rgba(14,42,71,.06);
    text-align: center;
    color: #0E2A47;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Subtle accent stripe on top */
.wpvrp-gate::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0E2A47 0%, #890C25 100%);
}
.wpvrp-gate--eligible::before { background: #1f6b4b; }
.wpvrp-gate--info::before     { background: #1e4d8b; }
.wpvrp-gate--blocked::before  { background: #890C25; }

.wpvrp-gate__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 8px auto 16px;
    background: #f5efe3;
    color: #0E2A47;
}
.wpvrp-gate__icon svg { width: 32px; height: 32px; }
.wpvrp-gate__icon--accent  { background: #fbe9ec; color: #890C25; }
.wpvrp-gate__icon--info    { background: #e3edf9; color: #1e4d8b; }
.wpvrp-gate__icon--warning { background: #fdf0dc; color: #b8540a; }
.wpvrp-gate__icon--success { background: #e0f3ea; color: #1f6b4b; }

/* Single level pill */
.wpvrp-gate__level {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #0E2A47 0%, #0a1929 100%);
    color: #fbf7f0;
    border-radius: 99px;
    margin: 0 0 16px;
}
.wpvrp-gate__level-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .7;
    font-weight: 500;
}
.wpvrp-gate__level-code {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1;
}

/* Dual level pair (for "your level → required") */
.wpvrp-gate__levels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.wpvrp-gate__level-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #f5efe3;
    min-width: 80px;
}
.wpvrp-gate__level-pair .wpvrp-gate__level-label {
    color: #5a7290;
    opacity: 1;
}
.wpvrp-gate__level-pair .wpvrp-gate__level-code {
    color: #0E2A47;
}
.wpvrp-gate__level-code--user {
    color: #890C25 !important;
}
.wpvrp-gate__level-code--required {
    color: #1f6b4b !important;
}
.wpvrp-gate__level-arrow {
    font-size: 1.8rem;
    color: #8da3bd;
    font-weight: 400;
    padding: 0 4px;
}

.wpvrp-gate__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #0a1929;
    margin: 0 0 10px;
    letter-spacing: -.01em;
    line-height: 1.3;
}
.wpvrp-gate__body {
    font-size: .92rem;
    color: #5a7290;
    margin: 0 0 18px;
    line-height: 1.6;
}

.wpvrp-gate__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* Buttons inside the gate inherit from .wpvrp-btn defined earlier */
.wpvrp-gate .wpvrp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: .94rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: all .18s ease;
    width: 100%;
}
.wpvrp-gate .wpvrp-btn--primary {
    background: #0E2A47;
    color: #fbf7f0;
    box-shadow: 0 4px 14px rgba(14,42,71,.18);
}
.wpvrp-gate .wpvrp-btn--primary:hover {
    background: #0a1929;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(14,42,71,.24);
    color: #fbf7f0;
}
.wpvrp-gate .wpvrp-btn--accent {
    background: #890C25;
    color: #fff;
    box-shadow: 0 4px 14px rgba(137,12,37,.2);
}
.wpvrp-gate .wpvrp-btn--accent:hover {
    background: #6e0a1e;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(137,12,37,.28);
    color: #fff;
}
.wpvrp-gate .wpvrp-btn--ghost {
    background: transparent;
    color: #0E2A47;
    border-color: #c5d2e0;
}
.wpvrp-gate .wpvrp-btn--ghost:hover {
    background: #f5efe3;
    border-color: #5a7290;
    color: #0E2A47;
}
.wpvrp-gate .wpvrp-btn--lg { padding: 14px 24px; font-size: 1rem; }

/* Recommendations grid below blocked panel */
.wpvrp-gate__recommendations {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2eaf3;
    text-align: start;
}
.wpvrp-gate__recommendations .wpvrp-courses__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

/* Eligible variant — much more compact */
.wpvrp-gate--eligible {
    padding: 14px 18px;
    text-align: start;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f1faf4;
    border-color: rgba(31,107,75,.18);
}
.wpvrp-gate--eligible .wpvrp-gate__check {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #d4ebde;
    color: #1f6b4b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wpvrp-gate--eligible .wpvrp-gate__check svg { width: 22px; height: 22px; }
.wpvrp-gate__eligible-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.wpvrp-gate__eligible-text strong {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    color: #1f6b4b;
    font-weight: 600;
}
.wpvrp-gate__eligible-text span {
    font-size: .85rem;
    color: #2c4a6e;
}

/* Mobile */
@media (max-width: 540px) {
    .wpvrp-gate { padding: 18px; }
    .wpvrp-gate__title { font-size: 1.15rem; }
    .wpvrp-gate__body  { font-size: .88rem; }
    .wpvrp-gate__icon  { width: 56px; height: 56px; }
    .wpvrp-gate__icon svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .wpvrp-gate, .wpvrp-gate * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Tab focus visible only when keyboard-navigating (restored) */
.wpvrp-page :focus { outline: none; }
.wpvrp-page :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}






/* ===================================================================
 * Append to: assets/css/wpvrp-frontend.css (at the end)
 * Styles the CEFR level badge that replaces the price in course cards.
 * =================================================================== */

.wpvrp-level-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 6px 14px !important;
    background: linear-gradient(180deg, #bf1e2e 0%, #890C25 100%) !important;
    color: #fff !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .06em !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(191,30,46,.25);
    text-transform: uppercase;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Optional: subtle per-level tinting (cool → warm as level rises) */
.wpvrp-level-badge--a1, .wpvrp-level-badge--a2 {
    background: linear-gradient(180deg, #2d7a4f 0%, #1a5c38 100%) !important;
    box-shadow: 0 4px 12px rgba(45,122,79,.25);
}
.wpvrp-level-badge--b1, .wpvrp-level-badge--b2 {
    background: linear-gradient(180deg, #d99b1d 0%, #a06a08 100%) !important;
    box-shadow: 0 4px 12px rgba(217,155,29,.25);
}
.wpvrp-level-badge--c1, .wpvrp-level-badge--c2 {
    background: linear-gradient(180deg, #bf1e2e 0%, #890C25 100%) !important;
    box-shadow: 0 4px 12px rgba(191,30,46,.3);
}
.wpvrp-level-badge--none {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%) !important;
    box-shadow: 0 4px 12px rgba(107,114,128,.25);
}

/* Grid wrapper — uses the theme's existing card markup,
   so this just controls the columns layout. */
.wpvrp-courses-grid {
    display: grid;
    gap: 28px;
    margin-top: 20px;
}
.wpvrp-courses-grid--cols-1 { grid-template-columns: 1fr; }
.wpvrp-courses-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wpvrp-courses-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wpvrp-courses-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
    .wpvrp-courses-grid--cols-3,
    .wpvrp-courses-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .wpvrp-courses-grid--cols-2,
    .wpvrp-courses-grid--cols-3,
    .wpvrp-courses-grid--cols-4 { grid-template-columns: 1fr; }
}

.wpvrp-courses__heading {
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    color: #1a2a47;
    margin: 0 0 8px;
}
.wpvrp-courses__heading strong {
    color: #bf1e2e;
    font-weight: 700;
}
.wpvrp-courses__empty {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 40px 20px;
}