/**
 * NeuroScores Engine — Unified Test UI Design System v2
 *
 * ALL visual values are driven by CSS Custom Properties (variables).
 * The variables are injected dynamically by PHP (class-nse-frontend.php)
 * from the Admin → NeuroScores > Design settings page.
 *
 * Fallback defaults are defined in :root below so the system works even
 * before the admin saves any settings.
 *
 * Structure:
 *   1. Global Design Tokens (CSS Variables)
 *   2. Main Canvas Wrapper
 *   3. Layout Presets (Wide / Centered / Compact / Mobile)
 *   4. Core Test Elements (Stimulus, Card, Instruction)
 *   5. Button System
 *   6. Dynamic States (Loading, Feedback, End Screen)
 *   7. Responsive Overrides
 */

/* ══════════════════════════════════════════════════════════
   1. GLOBAL DESIGN TOKENS  (fallback defaults)
   ══════════════════════════════════════════════════════════ */
:root {
    /* ── Brand Colors ── */
    --neuro-primary:        #3b82f6;
    --neuro-primary-hover:  #2563eb;
    --neuro-secondary:      #f3f4f6;
    --neuro-secondary-hover:#e5e7eb;
    --neuro-success:        #10b981;
    --neuro-error:          #ef4444;

    /* ── Canvas & Layout ── */
    --neuro-bg:             #fafafa;
    --neuro-text-dark:      #1e293b;
    --neuro-text-light:     #64748b;
    --neuro-max-width:      1000px;
    --neuro-min-height:     500px;
    --neuro-padding:        30px;
    --neuro-radius-md:      12px;
    --neuro-radius-lg:      16px;
    --neuro-shadow:         0 4px 15px rgba(0, 0, 0, 0.06);
    --neuro-border-color:   #e5e7eb;

    /* ── Typography ── */
    --neuro-font-main:      'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --neuro-font-size:      1rem;
    --neuro-stimulus-size:  5rem;   /* size of the main stimulus text / shape */

    /* ── Buttons ── */
    --neuro-btn-padding:    12px 28px;
    --neuro-btn-font-size:  1.1rem;
    --neuro-btn-radius:     var(--neuro-radius-md);
    --neuro-btn-min-width:  120px;

    /* ── Spacing ── */
    --neuro-gap-sm:         10px;
    --neuro-gap-md:         20px;
    --neuro-gap-lg:         30px;
}

/* ══════════════════════════════════════════════════════════
   2. MAIN CANVAS WRAPPER  (.neuro-canvas)
   ══════════════════════════════════════════════════════════ */
.neuro-canvas {
    width:            100%;
    max-width:        var(--neuro-max-width) !important;
    min-height:       var(--neuro-min-height);
    /* No margin here: centering/alignment is now controlled by .nse-wrapper align-items
       which is set via --neuro-wrapper-align CSS variable injected by PHP */
    background-color: var(--neuro-bg);
    border:           1px solid var(--neuro-border-color);
    border-radius:    var(--neuro-radius-lg);
    box-shadow:       var(--neuro-shadow);
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    padding:          var(--neuro-padding);
    box-sizing:       border-box;
    font-family:      var(--neuro-font-main);
    font-size:        var(--neuro-font-size);
    color:            var(--neuro-text-dark);
    text-align:       center;
    direction:        rtl;
    position:         relative;
    overflow:         hidden;
}

/* ══════════════════════════════════════════════════════════
   3. LAYOUT PRESETS
   Applied as extra class on .neuro-canvas by PHP engine:
     <div class="neuro-canvas neuro-shell--wide">
   ══════════════════════════════════════════════════════════ */

/* Wide — fills the available column width */
.neuro-canvas.neuro-shell--wide {
    --neuro-max-width: 100%;
    --neuro-padding:   20px;
}

/* Centered — balanced default (matches admin global setting) */
.neuro-canvas.neuro-shell--centered {
    --neuro-max-width: 900px;
}

/* Compact — focused / minimal */
.neuro-canvas.neuro-shell--compact {
    --neuro-max-width:   600px;
    --neuro-padding:     20px;
    --neuro-stimulus-size: 4rem;
}

/* Mobile-First — telephone-sized, great for quick quizzes */
.neuro-canvas.neuro-shell--mobile {
    --neuro-max-width:   480px;
    --neuro-padding:     16px;
    --neuro-stimulus-size: 3rem;
    --neuro-btn-padding: 10px 18px;
}

/* ══════════════════════════════════════════════════════════
   4. CORE TEST ELEMENTS
   ══════════════════════════════════════════════════════════ */

/* Inner card — groups stimulus + buttons, provides secondary depth */
.neuro-card {
    background:     #ffffff;
    border:         1px solid var(--neuro-secondary-hover);
    border-radius:  var(--neuro-radius-lg);
    padding:        var(--neuro-gap-lg);
    min-width:      60%;
    max-width:      90%;
    box-shadow:     0 1px 4px rgba(0, 0, 0, 0.05);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:            var(--neuro-gap-md);
}

/* Main stimulus — word, letter, shape, image */
.neuro-stimulus {
    font-size:       var(--neuro-stimulus-size);
    font-weight:     bold;
    margin-bottom:   var(--neuro-gap-md);
    transition:      all 0.2s ease-in-out;
    user-select:     none;
    line-height:     1.2;
}

/* Stimulus box with fixed height — for N-Back / spatial tests */
.neuro-stimulus-box {
    width:          100%;
    min-height:     250px;
    border:         2px dashed var(--neuro-secondary-hover);
    border-radius:  var(--neuro-radius-md);
    display:        flex;
    align-items:    center;
    justify-content:center;
    margin-bottom:  var(--neuro-gap-md);
    font-size:      var(--neuro-stimulus-size);
    font-weight:    bold;
}

/* Instructional text shown before the test starts */
.neuro-instruction {
    font-size:    1.25rem;
    color:        var(--neuro-text-light);
    margin-bottom:var(--neuro-gap-md);
    max-width:    90%;
    line-height:  1.6;
}

/* ══════════════════════════════════════════════════════════
   5. BUTTON SYSTEM
   ══════════════════════════════════════════════════════════ */

/* Button row / grid */
.neuro-btn-group {
    display:        flex;
    gap:            var(--neuro-gap-md);
    flex-wrap:      wrap;
    justify-content:center;
    width:          100%;
}

/* Base button */
.neuro-btn {
    appearance:      none;
    background-color:var(--neuro-secondary);
    color:           var(--neuro-text-dark);
    border:          none;
    border-radius:   var(--neuro-btn-radius);
    padding:         var(--neuro-btn-padding);
    font-size:       var(--neuro-btn-font-size);
    font-weight:     600;
    cursor:          pointer;
    transition:      all 0.2s ease-in-out;
    font-family:     var(--neuro-font-main);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       var(--neuro-btn-min-width);
    text-decoration: none;
}

.neuro-btn:hover {
    background-color: var(--neuro-secondary-hover);
    transform:        translateY(-2px);
}

.neuro-btn:active {
    transform: translateY(0);
}

/* Primary (CTA) button */
.neuro-btn-primary {
    background-color: var(--neuro-primary);
    color:            #ffffff;
}

.neuro-btn-primary:hover {
    background-color: var(--neuro-primary-hover);
}

/* Floating control button (top corner overlays) */
.neuro-btn-float {
    position:  absolute;
    top:       var(--neuro-gap-md);
    left:      var(--neuro-gap-md);
    padding:   8px 16px;
    font-size: 0.9rem;
    min-width: unset;
}

/* ══════════════════════════════════════════════════════════
   6. DYNAMIC STATES & FEEDBACK
   ══════════════════════════════════════════════════════════ */

/* Loading state container */
.neuro-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
}

/* Spinner */
.neuro-spinner {
    width:         40px;
    height:        40px;
    border:        4px solid var(--neuro-secondary);
    border-top:    4px solid var(--neuro-primary);
    border-radius: 50%;
    animation:     neuro-spin 1s linear infinite;
    margin-bottom: var(--neuro-gap-md);
}

@keyframes neuro-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Flash overlays for correct / wrong answer feedback */
.neuro-feedback-overlay {
    position:       absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.2s ease-out;
    z-index:        10;
}

.neuro-feedback-success {
    background-color: rgba(16, 185, 129, 0.18);
    opacity:          1;
}

.neuro-feedback-error {
    background-color: rgba(239, 68, 68, 0.18);
    opacity:          1;
}

/* End-screen panel */
.neuro-endscreen {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      #f8fafc;
    border-radius:   var(--neuro-radius-md);
    padding:         var(--neuro-gap-lg);
    border:          1px solid var(--neuro-secondary);
    width:           100%;
}

.neuro-endscreen-title {
    font-size:     1.5rem;
    color:         var(--neuro-primary);
    font-weight:   bold;
    margin-bottom: var(--neuro-gap-sm);
}

.neuro-endscreen-text {
    font-size: 1.1rem;
    color:     var(--neuro-text-light);
}

/* Feedback message bar (success / error notices) */
.neuro-feedback {
    width:         100%;
    padding:       12px 20px;
    border-radius: var(--neuro-radius-md);
    font-size:     1rem;
    font-weight:   600;
    text-align:    center;
    box-sizing:    border-box;
}

.neuro-feedback--success {
    background: #d1fae5;
    color:      #065f46;
    border:     1px solid #6ee7b7;
}

.neuro-feedback--error {
    background: #fee2e2;
    color:      #991b1b;
    border:     1px solid #fca5a5;
}

/* ══════════════════════════════════════════════════════════
   7. RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    .neuro-canvas {
        --neuro-padding:      var(--neuro-gap-md);
        --neuro-radius-lg:    12px;
    }

    .neuro-card {
        min-width: 90%;
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .neuro-canvas {
        --neuro-min-height:     400px;
        --neuro-stimulus-size:  2.5rem;
        --neuro-padding:        16px;
        border-radius:          var(--neuro-radius-md);
    }

    .neuro-btn-group {
        flex-direction: column;
        align-items:    stretch;
    }

    .neuro-btn {
        width:     100%;
        min-width: unset;
    }
}