/* Add custom style here */

/* Override display:none !important to allow browser validation popups */
select.form-select {
    display: block !important;
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
* clip ONLY the visible selected value area */
.custom-select .current{
  display: block;
  max-width: 100%;
  min-width: 0;
}

.custom-select .current .custom-placeholder{
  display: block;
  max-width: 100%;
  overflow: hidden;      /* safe here */
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ensure dropdown appears above */
.custom-select .list{
  z-index: 9999;
}

/* Fix for custom select causing overflow/whitespace when closed */
.custom-select .list {
    display: none;
}
.custom-select.open .list {
    display: block;
}

/* Fix for exam header details on mobile */
@media (max-width: 767px) {
    .list-group-3 {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .list-group-3 .list-group-item {
        width: 100% !important;
        padding: 6px 0 !important;
    }

    .list-group-3 .list-content::after {
        display: none !important;
    }
}

/* ===== Live Exam UI Overrides ===== */

/* Question palette — Current question: filled primary */
.card-item-6 .list .active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Question palette — Attended/Answered: outlined circle */
.card-item-6 .list .completed {
    background-color: #fff !important;
    border: 2px solid var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}

/* Legend dot — Current */
.palette-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Legend dot — Attended */
.palette-item.completed {
    background-color: #fff !important;
    border: 2px solid var(--bs-primary) !important;
}

/* Submit button — red/primary */
#submit-exam-btn {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 8px;
}



/* Timer circle text color */
.timer-minutes-circle {
    color: var(--bs-primary) !important;
}

/* Question highlight animation on scroll */
@keyframes question-highlight {
    0%   { box-shadow: 0 0 0 0 rgba(149, 3, 35, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(149, 3, 35, 0); }
    100% { box-shadow: 0 0 0 0 rgba(149, 3, 35, 0); }
}
.question-card.highlight {
    animation: question-highlight 1s ease-out;
    border-color: var(--bs-primary) !important;
}

/* Button Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading .btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    display: block !important;
}

.btn-outline-primary.btn-loading .btn-spinner {
    border: 2px solid rgba(149, 3, 35, 0.1);
    border-top-color: var(--bs-primary);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}