/*
 * RSMIS: ONE loader for the whole portal, the same one as "Request to Registrar" shows (SweetAlert2 Swal.showLoading()):
 * a ring with two opposite blue arcs (#2778c4), turning once every 1.5 seconds.
 * SweetAlert's own loader is NOT touched (it is the model). Everything else is restyled to match it, so no page has to change:
 *   .rs-ring                 the ring itself (for new code)
 *   .fr-spin                 popups that show a page inside (Official Search, Payments)
 *   .spinner-border          Bootstrap spinners (Constitution, Annual report, submit buttons ...)
 *   .dataTables_processing   the "Processing / Loading" box of the tables
 *   .fa-spinner.fa-spin, .fa-circle-notch.fa-spin   spinner icons (inside a button the ring takes the button's text colour)
 * Load it AFTER Bootstrap / AdminLTE (layout/header-main.php and header-login.php do).
 */
:root { --rs-ring: #2778c4; }
@keyframes rsRing { to { transform: rotate(360deg); } }

/* the "please wait" dialog (rsLoading): always the plain SweetAlert look, even on pages that round their own popups */
/* a card with a moving colour bar on top, a comet ring, the title and one line of text */
.swal2-popup.swal2-modal.rs-wait {
    position: relative; overflow: hidden; width: 25em; max-width: 92vw; padding: 2.1rem 1.6rem 1.8rem !important;
    border-radius: 18px !important; box-shadow: 0 30px 70px -20px rgba(11, 45, 90, .55) !important;
}
.swal2-popup.rs-wait::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent 0, #0b5fa5 30%, #00a3dd 70%, transparent 100%);
    background-size: 60% 100%; background-repeat: no-repeat; animation: rswBar 1.4s ease-in-out infinite;
}
@keyframes rswBar { 0% { background-position: -70% 0; } 100% { background-position: 170% 0; } }
.rs-wait .rs-wait-body { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.rsw { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rsw-ring {
    position: relative; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1.15rem;
    background: conic-gradient(from 0deg, rgba(11, 95, 165, 0) 0%, #0b5fa5 72%, #00a3dd 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    animation: rsRing 1s linear infinite;
}
/* the faint full circle behind the moving arc */
.rsw::before {
    content: ""; position: absolute; top: 0; left: 50%; margin-left: -32px; width: 64px; height: 64px; border-radius: 50%; box-sizing: border-box;
    border: 6px solid rgba(11, 95, 165, .10);
}
.rsw-dot { display: none; }
.rsw-title { font-size: 1.3rem; font-weight: 800; color: #0f1f33; line-height: 1.25; }
.rsw-text  { margin-top: .5rem; font-size: .95rem; line-height: 1.5; color: #5b6b7f; }
.rsw-late  {
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding: 0 .8rem; border-radius: 10px;
    font-size: .82rem; line-height: 1.45; color: #8a5a00; background: #fff6e0; transition: all .4s ease;
}
.rsw-late.is-on { max-height: 6em; opacity: 1; margin-top: 1rem; padding: .6rem .8rem; }
/* the service dialog (rsLoading.service): icon in the ring + three steps that tick off */
.rsw-ico { position: absolute; top: 0; left: 50%; margin-left: -32px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #0b5fa5; font-size: 1.35rem; animation: rswPop .5s ease-out both; }
@keyframes rswPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rsw-steps { list-style: none; margin: 1.15rem 0 0; padding: .7rem .95rem; width: 100%; box-sizing: border-box; text-align: left; border-radius: 12px; background: #f4f8fc; border: 1px solid #e3ecf5; }
.rsw-steps li { display: flex; align-items: center; gap: .6rem; padding: .22rem 0; font-size: .88rem; color: #9aa9ba; transition: color .3s ease; }
.rsw-steps li .rsw-tick { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 2px solid #cfdae6; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: #fff; transition: all .3s ease; }
.rsw-steps li.is-now { color: #0f1f33; font-weight: 700; }
.rsw-steps li.is-now .rsw-tick { border-color: #0b5fa5; border-top-color: transparent; animation: rsRing .8s linear infinite; }
.rsw-steps li.is-done { color: #31465c; }
.rsw-steps li.is-done .rsw-tick { border-color: #1a7f37; background: #1a7f37; }
.rsw-steps li.is-done .rsw-tick::after { content: "\2713"; }
@media (prefers-reduced-motion: reduce) { .rsw-ico { animation: none; } .rsw-steps li.is-now .rsw-tick { animation-duration: 3s; } }
@media (prefers-reduced-motion: reduce) { .rsw-ring { animation-duration: 3s; } .swal2-popup.rs-wait::before { animation-duration: 3s; } }

/* ---------- the ring (same size/width/colour as the Swal loader) ---------- */
.rs-ring, .fr-spin, .spinner-border {
    box-sizing: border-box;
    border-style: solid;
    border-radius: 100%;
    border-color: var(--rs-ring) transparent var(--rs-ring) transparent;
    animation: rsRing 1.5s linear infinite;
}
.rs-ring { display: inline-block; width: 2.2em; height: 2.2em; border-width: .25em; vertical-align: middle; }
.fr-spin { width: 2.2em; height: 2.2em; border-width: .25em; font-size: 16px; }
.spinner-border {
    border-width: .2em !important;
    border-color: var(--rs-ring) transparent var(--rs-ring) transparent !important;
    animation: rsRing 1.5s linear infinite !important;
}
/* inside a button: the colour of the button text, so it shows on a blue and on a light button alike */
.btn .spinner-border, button .spinner-border {
    border-color: currentColor transparent currentColor transparent !important;
}

/* a lone loader that floats over the page (Constitution, Annual report): on a card like the Swal dialog, so it shows on any background */
#loader, #Iloader {
    padding: 1.25em 1.6em; background: #fff; border-radius: .3125em;
    box-shadow: 0 0 1px rgba(0,0,0,.075), 0 1px 2px rgba(0,0,0,.075), 1px 2px 4px rgba(0,0,0,.075), 1px 3px 8px rgba(0,0,0,.075), 2px 4px 16px rgba(0,0,0,.075);
}
#loader .spinner-border, #Iloader .spinner-border { width: 2.2rem; height: 2.2rem; border-width: .25em !important; }

/* ---------- DataTables "Processing" / "Loading" ---------- */
div.dataTables_wrapper div.dataTables_processing {
    background: #fff; border: 0; border-radius: .3125em;
    box-shadow: 0 0 1px rgba(0,0,0,.075), 0 1px 2px rgba(0,0,0,.075), 1px 2px 4px rgba(0,0,0,.075), 1px 3px 8px rgba(0,0,0,.075), 2px 4px 16px rgba(0,0,0,.075);
    color: #545454; font-weight: 600; padding: .9em 1em;
}
div.dataTables_wrapper div.dataTables_processing::before {
    content: ""; display: inline-block; width: 1.3em; height: 1.3em; margin-right: .6em; vertical-align: -.3em;
    box-sizing: border-box; border: .2em solid; border-color: var(--rs-ring) transparent var(--rs-ring) transparent; border-radius: 100%;
    animation: rsRing 1.5s linear infinite;
}

/* ---------- spinner icons (Font Awesome) become the same ring ---------- */
.fa-spinner.fa-spin::before, .fa-circle-notch.fa-spin::before {
    content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.14em;
    box-sizing: border-box; border: .17em solid; border-color: var(--rs-ring) transparent var(--rs-ring) transparent; border-radius: 100%;
}
.btn .fa-spinner.fa-spin::before, button .fa-spinner.fa-spin::before,
.btn .fa-circle-notch.fa-spin::before, button .fa-circle-notch.fa-spin::before {
    border-color: currentColor transparent currentColor transparent;
}
.fa-spinner.fa-spin, .fa-circle-notch.fa-spin { animation-duration: 1.5s; animation-timing-function: linear; }

@media (prefers-reduced-motion: reduce) {
    .rs-ring, .fr-spin, .spinner-border, div.dataTables_wrapper div.dataTables_processing::before { animation-duration: 3s !important; }
    .fa-spinner.fa-spin, .fa-circle-notch.fa-spin { animation-duration: 3s; }
}