/* Basic styling for Advanced MCQ Exam v10 */

.amcq-exam-container {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px 0;
    background: #fafafa;
}

/* Preview card (Pic-2): clickable summary before showing start form */
.amcq-exam-preview{cursor:pointer;border:1px solid #e5e5e5;padding:18px;border-radius:8px;}
.amcq-exam-preview:focus{outline:2px solid #2271b1;outline-offset:2px;}
.amcq-exam-preview-hint{margin-top:10px;opacity:.75;}

.amcq-exam-info p {
    margin: 0 0 4px;
}

.amcq-start-screen {
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    margin: 10px 0 20px;
}

#amcq-timer {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.amcq-question {
    margin-bottom: 12px;
}

.amcq-course-container {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px 0;
    background: #f7f7f7;
}

.amcq-course-exam-list {
    list-style: disc;
    margin-left: 20px;
}

.amcq-student-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.amcq-student-results-table th,
.amcq-student-results-table td {
    border: 1px solid #ddd;
    padding: 6px;
    text-align: left;
}
.amcq-student-results-table th {
    background: #f0f0f0;
}


/* Course exams as grid cards */
.amcq-course-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.amcq-course-exam-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #ffffff;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.amcq-course-exam-card:hover {
    border-color: #0073aa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.amcq-exam-card-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.amcq-exam-card-meta {
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.amcq-exam-card-label {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0f0f0;
}
.amcq-exam-card-marks,
.amcq-exam-card-duration {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f7f7f7;
}

/* Download button for exam PDF */
.amcq-exam-download-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background: #0073aa;
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
}
.amcq-exam-download-btn:hover {
    background: #005f8d;
}

/* Result modal */
.amcq-result-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}
.amcq-result-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.amcq-result-modal-content {
    position: absolute;
    max-width: 480px;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 22px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);

    /* Option B overlay support */
    overflow: hidden;
}
.amcq-result-modal-content h3 {
    margin-top: 0;
}
.amcq-result-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.amcq-result-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Buttons inside modal */
.amcq-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 13px;
}
.amcq-btn-dashboard {
    background: #0073aa;
    color: #fff;
}
.amcq-btn-dashboard:hover {
    background: #005f8d;
}
.amcq-btn-retake {
    background: #f1f1f1;
    color: #333;
}
.amcq-btn-retake:hover {
    background: #e2e2e2;
}

/* Result status colours */
.amcq-result-status {
    margin-top: 8px;
}
.amcq-result-pass {
    color: #118822;
}
.amcq-result-fail {
    color: #cc0000;
}


/* Course list page cards */
.amcq-course-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.amcq-course-list-item {
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 14px 16px;
    background: #ffffff;
}
.amcq-course-list-item h3 {
    margin: 0 0 8px;
    font-size: 18px;
}
.amcq-course-list-item h3 a {
    text-decoration: none;
}
.amcq-course-list-item h3 a:hover {
    text-decoration: underline;
}
.amcq-course-list-excerpt {
    font-size: 14px;
    color: #555;
}

/* Enlarged question images */
.amcq-question-title img,
.amcq-question img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px 0;
}

/* Countdown styling for exam cards */
.amcq-exam-card-countdown {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #d9534f;
}
.amcq-exam-card-start {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}


/* =========================================================
   Result Score (35px, Gradient, Animated)
   ========================================================= */
.amcq-result-score-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin:8px 0 14px;
}
.amcq-result-score-label{
    font-weight:700;
    opacity:.85;
}

/* Force score styling (prevents theme override) */
.amcq-result-modal-content .amcq-result-score{
    font-size:35px !important;
    font-weight:900 !important;
    line-height:1 !important;
    display:inline-block !important;

    background: linear-gradient(90deg,#ff4d4d,#ffcc00,#00c853,#00b0ff,#a855f7) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;

    text-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
    animation: amcqScorePop 1.4s ease-in-out infinite !important;
}
@keyframes amcqScorePop{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.12);}
}


/* =========================================================
   Celebration / Confetti (Option B: inside result popup)
   ========================================================= */
.amcq-result-modal-content{
    position:relative !important;
    overflow:hidden !important;
}

#amcq-celebrate-overlay.amcq-celebrate-overlay{
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    z-index:9999 !important;
    display:none;
}

#amcq-celebrate-overlay .amcq-celebrate-canvas{
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
}

#amcq-celebrate-overlay .amcq-confetti-layer{
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    pointer-events:none;
    overflow:hidden;
}

.amcq-confetti{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:2px;
    background:linear-gradient(45deg,#ff4d4d,#ffcc00,#00c853,#00b0ff,#a855f7);
    animation:amcqConfettiFall 1.6s linear forwards;
    opacity:.95;
}

@keyframes amcqConfettiFall{
    0%{transform:translateY(0) rotate(0deg);opacity:1;}
    100%{transform:translateY(360px) rotate(520deg);opacity:0;}
}



/* ===== Exam Preview Card (Pic-2 style) ===== */
.amcq-exam-preview{
    background:#fff;
    padding:18px 22px;
    border-radius:8px;
    border:1px solid #e5e5e5;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    margin:12px 0 18px;
    cursor:pointer;
}
.amcq-exam-preview:focus{
    outline:3px solid rgba(0,123,255,.35);
    outline-offset:2px;
}
.amcq-exam-title{
    font-size:34px;
    line-height:1.15;
    margin:0 0 12px;
    font-weight:700;
    color:#111;
}
.amcq-exam-preview p{
    margin:6px 0;
    font-size:15px;
    color:#222;
}
.amcq-exam-info{
    margin-top:10px;
}
.amcq-exam-info p strong{
    font-weight:700;
}
.amcq-exam-preview-hint{
    margin-top:16px;
}
.amcq-exam-preview-hint em{
    font-style:normal;
}
.amcq-exam-preview-hint{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border:1px solid #d6d6d6;
    border-radius:6px;
    background:#fafafa;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    user-select:none;
}
.amcq-exam-preview-hint::before{
    content:"▶";
    font-size:13px;
    line-height:1;
    color:#c00; /* icon red */
}
.amcq-exam-preview-hint em{
    color:#c00; /* Click text red */
    font-weight:700;
    letter-spacing:.2px;
}
.amcq-exam-preview:hover .amcq-exam-preview-hint{
    background:#fff;
    border-color:#c00;
}


/* When exam running, we hide other exam shortcodes via JS (display:none). */


.amcq-hidden-exam{ display:none !important; }
body.amcq-running .amcq-exam-container:not(.amcq-active-exam){ display:none !important; }

.amcq-share-page{max-width:900px;margin:30px auto;padding:0 16px}
.amcq-share-card{border:1px solid #e5e5e5;border-radius:10px;padding:22px;background:#fff}
.amcq-share-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.amcq-btn-download{border:1px solid #d0d0d0;}

/* Click to Start button style */
.amcq-exam-preview-hint{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid #d0d0d0;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    user-select:none;
}
.amcq-exam-preview-hint em{
    color:#d00000;
    font-style:normal;
    font-weight:700;
}
.amcq-exam-preview-hint:hover{
    box-shadow:0 4px 14px rgba(0,0,0,.08);
}


/* Mobile responsive result modal */
@media (max-width: 600px){
  .amcq-modal-content{
    width: 92% !important;
    max-width: 92% !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .amcq-modal-header h2{
    font-size: 20px !important;
  }
  #amcq-result{
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  #amcq-result h3{
    font-size: 18px !important;
  }
  #amcq-result p{
    margin: 6px 0 !important;
  }
  .amcq-modal-actions{
    flex-direction: column !important;
    gap: 10px !important;
  }
  .amcq-modal-actions .amcq-btn{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Hide logo in result display (watermark only in downloaded image) */
.amcq-result-logo, #amcq-result img, #amcq-result .amcq-logo{
  display:none !important;
}

.amcq-result-logo{display:none !important;}
.amcq-result-header img{display:none !important;}

/* Correct & Wrong Highlight (Answer Review) */
.amcq-option.correct {
    background: #d4edda;
    border: 1px solid #28a745;
    padding: 6px 10px;
    display: inline-block;
    border-radius: 6px;
    color: #155724;
    font-weight: bold;
}

.amcq-option.wrong {
    background: #f8d7da;
    border: 1px solid #dc3545;
    padding: 6px 10px;
    display: inline-block;
    border-radius: 6px;
    color: #721c24;
    font-weight: bold;
}



/* ✅ Correct Answer label */
.amcq-option.correct::after{
    content: " ✅ Correct Answer";
    margin-left: 8px;
    font-weight: 700;
}


/* Disable Copy (Text selection) */
.amcq-exam-container,
.amcq-exam-container *{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* --- Mobile improvements + Sticky Close Review --- */
.amcq-btn-close-review{
    position: sticky;
    top: 0;
    z-index: 1001;
    width: 100%;
    margin: 0 0 10px 0 !important;
    background: #d63638;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
}
.amcq-btn-close-review:hover{background:#b32d2e;}

@media (max-width: 600px){
    .amcq-result-modal-content{
        width: 94vw;
        max-height: 90vh;
        padding: 16px 14px 12px;
        overflow-y: auto; /* allow scroll so action buttons stay reachable */
        -webkit-overflow-scrolling: touch;
    }
    .amcq-result-actions{
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .amcq-result-actions .amcq-btn{
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
        padding: 12px 10px;
        font-size: 14px;
    }
    /* Make last button full width for better tap target */
    .amcq-result-actions .amcq-btn-retake{
        flex-basis: 100%;
    }
    /* Close X bigger */
    .amcq-result-close{
        font-size: 28px;
        line-height: 28px;
        width: 34px;
        height: 34px;
    }
}