/* ------------------------------------------------------------------
   bs-compat.css — minimal compatibility layer that REPLACES the full
   bootstrap.min.css on the front-end. It defines only the handful of
   utility classes still toggled/injected by legacy jQuery and the modal
   styles for the two remaining modals (#solutionVideoModal, #imagePreviewModal).
   Everything else on the front is now Tailwind. ~90 lines vs Bootstrap's 140KB.
------------------------------------------------------------------ */

/* display / flex utilities that legacy JS adds, removes, or injects into
   generated HTML (quiz navigation, result reveal, result-review cards) */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.text-center { text-align: center !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.w-100 { width: 100% !important; }
.disabled { pointer-events: none; opacity: .6; }

/* modal (Bootstrap 5 subset — only what the two front modals use) */
.modal {
    position: fixed; inset: 0; z-index: 1055;
    display: none; width: 100%; height: 100%;
    overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal.show { display: block; }
.modal-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    width: 100vw; height: 100vh; background: #000; opacity: .5;
}
.modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }
.modal.show .modal-dialog { pointer-events: auto; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
    .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
    .modal-lg { max-width: 800px; }
}
.modal-content {
    position: relative; display: flex; flex-direction: column; width: 100%;
    pointer-events: auto; background: #fff; border-radius: .75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2); overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-line, #e9ecef);
}
.modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-ink, #2f4858); }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.25rem; }
.modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
    padding: 1rem 1.25rem; border-top: 1px solid var(--color-line, #e9ecef);
}
.close {
    padding: 0; margin: 0; background: transparent; border: 0;
    font-size: 1.5rem; line-height: 1; color: #000; opacity: .5; cursor: pointer;
}
.close:hover { opacity: .85; }
body.modal-open { overflow: hidden; }