/**
 * WP Exam Pro — Public Styles
 *
 * Clean, responsive, accessible exam interface.
 */

/* ================================================================ */
/*  VARIABLES & BASE                                                  */
/* ================================================================ */
.wp-exam-pro {
    --wpep-primary: #4f46e5;
    --wpep-primary-hover: #4338ca;
    --wpep-danger: #dc2626;
    --wpep-danger-hover: #b91c1c;
    --wpep-success: #16a34a;
    --wpep-warning: #f59e0b;
    --wpep-bg: #ffffff;
    --wpep-bg-alt: #f8fafc;
    --wpep-border: #e2e8f0;
    --wpep-text: #1e293b;
    --wpep-text-muted: #64748b;
    --wpep-radius: 8px;
    --wpep-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --wpep-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    font-family: var(--wpep-font);
    color: var(--wpep-text);
    line-height: 1.6;
    box-sizing: border-box;
}
.wp-exam-pro *, .wp-exam-pro *::before, .wp-exam-pro *::after {
    box-sizing: border-box;
}

/* ================================================================ */
/*  LOADING                                                           */
/* ================================================================ */
.wpep-loading {
    text-align: center;
    padding: 40px;
    color: var(--wpep-text-muted);
}
.wpep-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--wpep-border);
    border-top-color: var(--wpep-primary);
    border-radius: 50%;
    animation: wpep-spin 0.7s linear infinite;
}
@keyframes wpep-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================ */
/*  EXAM LISTING                                                      */
/* ================================================================ */
.wpep-grid {
    display: grid;
    gap: 20px;
}
.wpep-grid--grid.wpep-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wpep-grid--grid.wpep-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wpep-grid--grid.wpep-cols-4 { grid-template-columns: repeat(4, 1fr); }
.wpep-grid--list { grid-template-columns: 1fr; }

.wpep-exam-card {
    background: var(--wpep-bg);
    border: 1px solid var(--wpep-border);
    border-radius: var(--wpep-radius);
    box-shadow: var(--wpep-shadow);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.wpep-exam-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.wpep-exam-card__header {
    padding: 20px 20px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.wpep-exam-card__header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--wpep-text);
}
.wpep-exam-card__body {
    padding: 0 20px 16px;
    flex: 1;
}
.wpep-exam-card__body p {
    margin: 0 0 12px;
    color: var(--wpep-text-muted);
    font-size: 14px;
}
.wpep-exam-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--wpep-text-muted);
}
.wpep-exam-meta li {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wpep-exam-card__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--wpep-border);
    background: var(--wpep-bg-alt);
}

/* ================================================================ */
/*  BUTTONS                                                           */
/* ================================================================ */
.wpep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}
.wpep-btn:active { transform: scale(0.97); }
.wpep-btn--primary {
    background: var(--wpep-primary);
    color: #fff;
}
.wpep-btn--primary:hover { background: var(--wpep-primary-hover); }
.wpep-btn--secondary {
    background: var(--wpep-bg-alt);
    color: var(--wpep-text);
    border: 1px solid var(--wpep-border);
}
.wpep-btn--secondary:hover { background: var(--wpep-border); }
.wpep-btn--danger {
    background: var(--wpep-danger);
    color: #fff;
}
.wpep-btn--danger:hover { background: var(--wpep-danger-hover); }
.wpep-btn--disabled {
    background: var(--wpep-bg-alt);
    color: var(--wpep-text-muted);
    cursor: not-allowed;
}

.wpep-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--wpep-bg-alt);
    border: 1px solid var(--wpep-border);
    color: var(--wpep-text-muted);
}
.wpep-badge--success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.wpep-badge--fail { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.wpep-badge--pending { background: #fefce8; color: #854d0e; border-color: #fef08a; }

/* ================================================================ */
/*  EXAM OVERLAY (TAKING THE EXAM)                                    */
/* ================================================================ */
body.wpep-exam-active { overflow: hidden; }

.wpep-exam-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    background: var(--wpep-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.wpep-exam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--wpep-text);
    color: #fff;
    flex-shrink: 0;
}
.wpep-exam-title {
    font-size: 16px;
    font-weight: 600;
}
.wpep-timer {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 4px 16px;
    background: rgba(255,255,255,.1);
    border-radius: 6px;
}
.wpep-timer--warning { color: var(--wpep-warning); background: rgba(245,158,11,.15); }
.wpep-timer--urgent {
    color: var(--wpep-danger);
    background: rgba(220,38,38,.15);
    animation: wpep-pulse 1s ease-in-out infinite;
}
@keyframes wpep-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.wpep-save-status {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    min-width: 60px;
    text-align: right;
}

/* Body */
.wpep-exam-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.wpep-question-area {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto;
}
.wpep-question-nav {
    width: 220px;
    padding: 20px;
    background: var(--wpep-bg-alt);
    border-left: 1px solid var(--wpep-border);
    overflow-y: auto;
    flex-shrink: 0;
}

/* Footer */
.wpep-exam-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid var(--wpep-border);
    background: var(--wpep-bg-alt);
    flex-shrink: 0;
}
.wpep-exam-footer .wpep-btn:last-child { margin-left: auto; }

/* ================================================================ */
/*  QUESTION RENDERING                                                */
/* ================================================================ */
.wpep-question__number {
    font-size: 13px;
    color: var(--wpep-text-muted);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wpep-question__text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1.5;
}
.wpep-question__media {
    max-width: 100%;
    height: auto;
    border-radius: var(--wpep-radius);
    margin-bottom: 20px;
}
.wpep-question__audio {
    width: 100%;
    margin-bottom: 20px;
}
.wpep-question__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Options */
.wpep-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--wpep-bg);
    border: 2px solid var(--wpep-border);
    border-radius: var(--wpep-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.wpep-option:hover {
    border-color: var(--wpep-primary);
    background: rgba(79,70,229,.03);
}
.wpep-option--selected {
    border-color: var(--wpep-primary);
    background: rgba(79,70,229,.06);
}
.wpep-option input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--wpep-primary);
}
.wpep-option__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wpep-bg-alt);
    font-size: 13px;
    font-weight: 700;
    color: var(--wpep-text-muted);
    flex-shrink: 0;
}
.wpep-option--selected .wpep-option__label {
    background: var(--wpep-primary);
    color: #fff;
}
.wpep-option__text {
    flex: 1;
    font-size: 15px;
}

/* Input types */
.wpep-input, .wpep-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--wpep-border);
    border-radius: var(--wpep-radius);
    font-size: 15px;
    font-family: var(--wpep-font);
    transition: border-color 0.15s;
    color: var(--wpep-text);
    background: var(--wpep-bg);
}
.wpep-input:focus, .wpep-textarea:focus {
    outline: none;
    border-color: var(--wpep-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.wpep-word-count {
    margin-top: 6px;
    font-size: 12px;
    color: var(--wpep-text-muted);
    text-align: right;
}

/* Matching */
.wpep-matching { display: flex; flex-direction: column; gap: 10px; }
.wpep-match-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--wpep-bg-alt);
    border-radius: var(--wpep-radius);
}
.wpep-match-left { font-weight: 600; min-width: 120px; }
.wpep-match-arrow { color: var(--wpep-text-muted); }
.wpep-match-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--wpep-border);
    border-radius: 6px;
    font-size: 14px;
}

/* Ordering */
.wpep-ordering-hint { font-size: 13px; color: var(--wpep-text-muted); margin: 0 0 10px; }
.wpep-order-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--wpep-bg);
    border: 2px solid var(--wpep-border);
    border-radius: var(--wpep-radius);
    cursor: grab;
    margin-bottom: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wpep-order-item:hover { border-color: var(--wpep-primary); }
.wpep-order-item--dragging { opacity: 0.4; border-style: dashed; }
.wpep-order-handle { font-size: 16px; color: var(--wpep-text-muted); cursor: grab; }

/* ================================================================ */
/*  NAVIGATION PANEL                                                  */
/* ================================================================ */
.wpep-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.wpep-nav-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wpep-border);
    border-radius: 6px;
    background: var(--wpep-bg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.wpep-nav-item:hover { border-color: var(--wpep-primary); }
.wpep-nav-item--current { border-color: var(--wpep-primary); background: rgba(79,70,229,.1); color: var(--wpep-primary); }
.wpep-nav-item--answered { background: var(--wpep-success); color: #fff; border-color: var(--wpep-success); }
.wpep-nav-item--flagged { border-color: var(--wpep-warning); background: #fefce8; }
.wpep-nav-item--answered.wpep-nav-item--flagged { background: var(--wpep-warning); color: #fff; }

.wpep-nav-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    font-size: 11px;
    color: var(--wpep-text-muted);
}
.wpep-legend-item { display: flex; align-items: center; gap: 4px; }
.wpep-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--wpep-border);
}
.wpep-legend-dot--answered { background: var(--wpep-success); border-color: var(--wpep-success); }
.wpep-legend-dot--unanswered { background: var(--wpep-bg); }
.wpep-legend-dot--flagged { background: #fefce8; border-color: var(--wpep-warning); }

/* ================================================================ */
/*  TIMER WARNINGS                                                    */
/* ================================================================ */
.wpep-timer-warning {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: var(--wpep-radius);
    font-weight: 600;
    font-size: 15px;
    z-index: 1000000;
    animation: wpep-slide-down 0.3s ease;
}
.wpep-timer-warning--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.wpep-timer-warning--urgent { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; animation: wpep-slide-down 0.3s ease, wpep-pulse 1s ease infinite; }
@keyframes wpep-slide-down {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ================================================================ */
/*  PROCTORING WARNING                                                */
/* ================================================================ */
.wpep-proctor-warning {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #fef2f2;
    color: #991b1b;
    border: 2px solid #fca5a5;
    padding: 16px 28px;
    border-radius: var(--wpep-radius);
    font-weight: 600;
    font-size: 14px;
    z-index: 1000001;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
}
.wpep-proctor-warning--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================================ */
/*  POST-EXAM SCREEN                                                  */
/* ================================================================ */
.wpep-post-exam {
    max-width: 560px;
    margin: 60px auto;
    text-align: center;
    padding: 40px;
}
.wpep-post-exam__icon { font-size: 56px; margin-bottom: 16px; }
.wpep-post-exam h2 { font-size: 24px; margin: 0 0 12px; }
.wpep-post-exam p { color: var(--wpep-text-muted); margin: 0 0 12px; }
.wpep-post-exam__details {
    background: var(--wpep-bg-alt);
    border: 1px solid var(--wpep-border);
    border-radius: var(--wpep-radius);
    padding: 16px 20px;
    margin: 24px 0;
    text-align: left;
}
.wpep-post-detail {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--wpep-border);
    font-size: 14px;
}
.wpep-post-detail:last-child { border-bottom: none; }
.wpep-post-detail span:first-child { font-weight: 600; }
.wpep-post-exam__note {
    font-size: 13px;
    color: var(--wpep-text-muted);
    margin-top: 20px;
}

/* ================================================================ */
/*  RESULTS TABLE                                                     */
/* ================================================================ */
.wpep-results-table {
    width: 100%;
    border-collapse: collapse;
}
.wpep-results-table th, .wpep-results-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--wpep-border);
    font-size: 14px;
}
.wpep-results-table th {
    background: var(--wpep-bg-alt);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wpep-text-muted);
}
.wpep-results-table tr:hover td { background: rgba(79,70,229,.02); }
.wpep-link { color: var(--wpep-primary); text-decoration: none; font-weight: 600; }
.wpep-link:hover { text-decoration: underline; }

/* ================================================================ */
/*  ERROR & EMPTY                                                     */
/* ================================================================ */
.wpep-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 20px;
    border-radius: var(--wpep-radius);
}
.wpep-empty {
    text-align: center;
    color: var(--wpep-text-muted);
    padding: 40px;
}

/* ================================================================ */
/*  RESPONSIVE                                                        */
/* ================================================================ */
@media (max-width: 768px) {
    .wpep-grid--grid { grid-template-columns: 1fr !important; }
    .wpep-exam-body { flex-direction: column; }
    .wpep-question-area { padding: 20px; }
    .wpep-question-nav {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--wpep-border);
        max-height: 140px;
    }
    .wpep-exam-header { padding: 8px 12px; }
    .wpep-exam-title { font-size: 14px; }
    .wpep-timer { font-size: 18px; padding: 4px 10px; }
    .wpep-question__text { font-size: 16px; }
    .wpep-exam-footer { flex-wrap: wrap; gap: 8px; }
    .wpep-exam-footer .wpep-btn { font-size: 13px; padding: 8px 14px; }
}

@media (max-width: 480px) {
    .wpep-option { padding: 10px 12px; }
    .wpep-nav-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ================================================================ */
/*  LOGIN CARD                                                        */
/* ================================================================ */
.wpep-login-card {
    max-width: 420px;
    margin: 40px auto;
    background: var(--wpep-bg);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    overflow: hidden;
}
.wpep-login-header {
    text-align: center;
    padding: 32px 28px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: #fff;
}
.wpep-login-icon {
    font-size: 40px;
    margin-bottom: 8px;
}
.wpep-login-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.wpep-login-msg {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.85);
}
.wpep-login-body {
    padding: 28px;
}
.wpep-login-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpep-text);
    margin-bottom: 5px;
}
.wpep-login-body input[type="text"],
.wpep-login-body input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--wpep-border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    transition: border-color .15s;
    color: var(--wpep-text);
}
.wpep-login-body input[type="text"]:focus,
.wpep-login-body input[type="password"]:focus {
    outline: none;
    border-color: var(--wpep-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.wpep-login-body .login-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--wpep-text-muted);
}
.wpep-login-body .login-remember input {
    accent-color: var(--wpep-primary);
}
.wpep-login-body input[type="submit"],
.wpep-login-body .button-primary {
    width: 100%;
    padding: 12px;
    background: var(--wpep-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.wpep-login-body input[type="submit"]:hover {
    background: #1d4ed8;
}
.wpep-login-footer {
    text-align: center;
    padding: 14px 28px 20px;
    border-top: 1px solid var(--wpep-border);
}
.wpep-login-footer a {
    color: var(--wpep-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.wpep-login-footer a:hover {
    text-decoration: underline;
}

/* Style the WP login form inside our card */
#wpep-loginform {
    margin: 0;
    padding: 0;
}
#wpep-loginform p {
    margin-bottom: 14px;
}
#wpep-loginform .login-submit {
    margin: 0;
}

.wpep-guest-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:100000;padding:16px}
.wpep-guest-card{background:#fff;width:min(460px,100%);border-radius:18px;padding:22px;box-shadow:0 20px 50px rgba(15,23,42,.18)}
.wpep-guest-card h3{margin:0 0 8px;font-size:22px;color:var(--wpep-primary)}
.wpep-guest-card p{margin:0 0 14px;color:var(--wpep-gray-600)}
.wpep-guest-card .wpep-field{margin-bottom:12px}
.wpep-guest-card label{display:block;font-weight:600;margin-bottom:6px}
.wpep-guest-card input{width:100%;padding:10px 12px;border:1px solid var(--wpep-border);border-radius:10px}
.wpep-guest-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}