/* ================== POPUP QUIZ ================== */
/* Namespace: .tora-flashcard-plugin .tora-popup-overlay */

.tora-popup-overlay,
.tora-popup-overlay.tora-quiz-start-popup,
.tora-popup-overlay.tora-exit-popup,
.tora-popup-overlay.tora-quiz-result-popup {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}

/* Popup chung */
body .tora-popup-overlay > .tora-popup,
body .tora-popup-overlay > .tora-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 10001 !important;
    background: var(--tora-bg-light, white);
    border-radius: 12px;
    padding: 30px 24px;
    min-width: 300px;
    max-width: 95vw;
    box-shadow: 0 6px 24px var(--tora-accent, rgba(0,0,0,0.5));
    text-align: center;
    color: var(--tora-text-main, #222B45);
    animation: tora-quiz-scaleIn 0.3s ease-in-out forwards;
}

/* Popup khởi động quiz */
.tora-flashcard-plugin .quiz-start-popup h3 {
    margin: 0 0 15px;
    font-size: clamp(20px, 3vw, 24px);
    color: var(--tora-text-sub);
}

.tora-flashcard-plugin .quiz-start-popup input {
    padding: 10px;
    font-size: 16px;
    width: 60%;
    margin-bottom: 20px;
    border: 2px solid var(--tora-info);
    border-radius: 5px;
    color: var(--tora-text-sub);
}

.tora-flashcard-plugin .quiz-start-popup input[type="number"] {
    width: 100%;
    max-width: 300px;
    padding: 10px 12px;
    font-size: 16px;
    border: 2px solid var(--tora-info);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--tora-text-main);
}

.tora-flashcard-plugin .quiz-start-popup input[type="number"]::placeholder {
    color: var(--tora-text-sub);
    text-align: left;
    opacity: 1;
}

.tora-flashcard-plugin .quiz-start-popup button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    background-color: var(--tora-info);
    color: var(--tora-text-light);
    transition: background 0.2s;
}

.tora-flashcard-plugin .quiz-start-popup button:hover {
    background-color: var(--tora-accent);
}

/* Popup kết quả quiz */
.tora-popup-overlay.tora-quiz-result-popup > .tora-popup {
    /* Kế thừa chung */
}

.tora-flashcard-plugin .quiz-result-popup h3 {
    font-size: clamp(20px, 3vw, 24px);
    margin-bottom: 10px;
}

/* Popup xác nhận thoát */
.tora-popup-overlay.tora-exit-popup > .tora-popup {
    /* Kế thừa chung */
}

/* Nút popup */
.tora-flashcard-plugin .tora-popup-btn.tora-popup-confirm,
.tora-flashcard-plugin .tora-popup-btn.tora-popup-cancel {
    background: var(--tora-primary);
    color: var(--tora-text-light);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px 5px;
    z-index: 10002 !important;
    pointer-events: all !important;
    transition: background 0.2s ease;
}

.tora-flashcard-plugin .tora-popup-btn.tora-popup-cancel {
    background: var(--tora-secondary);
}

.tora-flashcard-plugin .tora-popup-btn.tora-popup-confirm:hover,
.tora-flashcard-plugin .tora-popup-btn.tora-popup-cancel:hover {
    background: var(--tora-accent);
}

/* Animation scale */
@keyframes tora-quiz-scaleIn {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}