/* ============================================================
   EnCoach Portal – Custom Styles
   ============================================================ */

:root {
    --ec-primary: #4361ee;
    --ec-primary-soft: rgba(67, 97, 238, .08);
    --ec-success: #06d6a0;
    --ec-warning: #ffd166;
    --ec-radius: 1rem;
}

/* ---- General ---- */

.ec-register-section,
.ec-verify-section,
.ec-onboarding-section,
.ec-dashboard-section,
.ec-placement-section,
.ec-results-section,
.ec-course-section,
.ec-exam-results-section,
.ec-pending-section,
.ec-profile-section,
.ec-verification-section {
    min-height: calc(100vh - 200px);
}

/* ---- OTP Boxes ---- */

.ec-otp-box {
    width: 48px;
    height: 56px;
    font-size: 1.5rem;
    caret-color: var(--ec-primary);
}

.ec-otp-box:focus {
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 .2rem var(--ec-primary-soft);
}

/* ---- Action Cards (dashboard) ---- */

.ec-action-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.ec-action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08) !important;
}

/* ---- Course Cards ---- */

.ec-course-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.ec-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .07) !important;
}

/* ---- Module List (locked state) ---- */

.ec-module-locked {
    opacity: .55;
    pointer-events: none;
}

/* ---- Wizard ---- */

.ec-wizard {
    max-width: 720px;
    margin: 0 auto;
}

.ec-wizard-step.active small {
    color: var(--ec-primary);
    font-weight: 600;
}

.ec-wizard-step.completed small {
    color: var(--ec-success);
}

.ec-selectable-card {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.ec-selectable-card:hover {
    border-color: var(--ec-primary) !important;
    transform: translateY(-1px);
}

/* ---- Score Highlights ---- */

.ec-score-highlight {
    transition: transform .15s ease;
}

.ec-score-highlight:hover {
    transform: scale(1.03);
}

/* ---- Password Strength ---- */

.ec-password-strength .progress-bar {
    transition: width .3s ease, background-color .3s ease;
}

/* ---- Chart Container ---- */

.ec-chart-container {
    position: relative;
}

/* ---- CEFR Badge ---- */

.ec-cefr-badge {
    font-family: "Inter", system-ui, sans-serif;
    letter-spacing: .05em;
}

/* ---- Responsive Tweaks ---- */

@media (max-width: 576px) {
    .ec-otp-box {
        width: 40px;
        height: 48px;
        font-size: 1.25rem;
    }

    .ec-wizard-step small {
        font-size: .65rem;
    }
}
