@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --mg-ink: #10231f; --mg-paper: #f5f1e8; --mg-lime: #c9f15a; --mg-muted: #adc0b8; }
body { background: var(--mg-paper) !important; font-family: "DM Sans", Arial, sans-serif !important; }
.swal2-container { background: rgba(16, 35, 31, 0.15) !important; backdrop-filter: blur(4px); }

/* Menglobe treatment for standard in-room SweetAlert dialogs.
   Keep SweetAlert classes and buttons untouched so existing callbacks remain intact. */
.swal2-container:has(.swal2-popup:not(.init-modal-size)) {
    background: rgba(16, 35, 31, .42) !important;
    backdrop-filter: blur(9px) saturate(.75);
}

.swal2-popup:not(.init-modal-size) {
    width: min(510px, calc(100vw - 38px)) !important;
    padding: 38px 38px 34px !important;
    overflow: visible !important;
    border: 1px solid var(--mg-ink) !important;
    border-top: 5px solid var(--mg-lime) !important;
    border-radius: 0 !important;
    color: var(--mg-ink) !important;
    background: var(--mg-paper) !important;
    box-shadow: 16px 18px 0 rgba(16, 35, 31, .22) !important;
    font-family: "DM Sans", Arial, sans-serif !important;
}

.swal2-popup:not(.init-modal-size)::before {
    content: 'MENGLOBE CLASS  /  AVISO';
    display: block;
    width: 100%;
    margin: 0 0 23px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(16, 35, 31, .17);
    color: var(--mg-ink);
    font: 500 9px/1 "DM Mono", monospace;
    letter-spacing: .08em;
    text-align: left;
}

.swal2-popup:not(.init-modal-size) .swal2-title {
    margin: 4px 0 12px !important;
    padding: 0 !important;
    color: var(--mg-ink) !important;
    background: transparent !important;
    font: 600 31px/1.08 "DM Sans", Arial, sans-serif !important;
    letter-spacing: -.045em;
}

.swal2-popup:not(.init-modal-size) .swal2-html-container,
.swal2-popup:not(.init-modal-size) .swal2-content {
    margin: 12px 0 3px !important;
    color: #42524c !important;
    background: transparent !important;
    font: 400 17px/1.5 "DM Sans", Arial, sans-serif !important;
}

.swal2-popup:not(.init-modal-size) .swal2-icon {
    width: 76px !important;
    height: 76px !important;
    margin: 5px auto 25px !important;
    border-width: 1px !important;
    border-radius: 50% !important;
    color: var(--mg-ink) !important;
    border-color: var(--mg-ink) !important;
}

.swal2-popup:not(.init-modal-size) .swal2-icon.swal2-question {
    color: var(--mg-ink) !important;
    border-color: var(--mg-ink) !important;
}
.swal2-popup:not(.init-modal-size) .swal2-icon.swal2-warning,
.swal2-popup:not(.init-modal-size) .swal2-icon.swal2-error {
    color: #c74f37 !important;
    border-color: var(--mg-coral, #ef6f51) !important;
}
.swal2-popup:not(.init-modal-size) .swal2-icon.swal2-success,
.swal2-popup:not(.init-modal-size) .swal2-icon.swal2-info {
    color: var(--mg-ink) !important;
    border-color: #8caf2c !important;
}

.swal2-popup:not(.init-modal-size) .swal2-actions {
    gap: 10px !important;
    margin: 27px 0 0 !important;
}

.swal2-popup:not(.init-modal-size) .swal2-styled {
    min-height: 46px;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 600 11px/1 "DM Sans", Arial, sans-serif !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.swal2-popup:not(.init-modal-size) .swal2-confirm {
    border: 1px solid var(--mg-lime) !important;
    color: var(--mg-ink) !important;
    background: var(--mg-lime) !important;
}
.swal2-popup:not(.init-modal-size) .swal2-confirm:hover { background: #dcff7b !important; }

.swal2-popup:not(.init-modal-size) .swal2-deny {
    border: 1px solid var(--mg-coral, #ef6f51) !important;
    color: var(--mg-paper) !important;
    background: var(--mg-coral, #ef6f51) !important;
}
.swal2-popup:not(.init-modal-size) .swal2-deny:hover { background: #ff8165 !important; }

.swal2-popup:not(.init-modal-size) .swal2-cancel {
    border: 1px solid var(--mg-ink) !important;
    color: var(--mg-ink) !important;
    background: transparent !important;
}
.swal2-popup:not(.init-modal-size) .swal2-cancel:hover { color: var(--mg-paper) !important; background: var(--mg-ink) !important; }

.swal2-popup:not(.init-modal-size) .swal2-styled:focus-visible {
    outline: 2px solid var(--mg-ink) !important;
    outline-offset: 3px !important;
}

@media (max-width: 560px) {
    .swal2-popup:not(.init-modal-size) {
        width: calc(100vw - 28px) !important;
        padding: 28px 22px 26px !important;
        box-shadow: 9px 10px 0 rgba(16, 35, 31, .22) !important;
    }
    .swal2-popup:not(.init-modal-size)::before { margin-bottom: 20px; }
    .swal2-popup:not(.init-modal-size) .swal2-icon { width: 66px !important; height: 66px !important; }
    .swal2-popup:not(.init-modal-size) .swal2-html-container,
    .swal2-popup:not(.init-modal-size) .swal2-content { font-size: 15px !important; }
    .swal2-popup:not(.init-modal-size) .swal2-actions { width: 100%; }
    .swal2-popup:not(.init-modal-size) .swal2-styled { flex: 1; padding: 0 14px !important; }
}

.swal2-popup.init-modal-size {
    width: min(900px, calc(100vw - 48px)) !important;
    padding: 46px 36px 38px !important;
    border: 1px solid rgba(201, 241, 90, 0.38) !important;
    border-radius: 0 !important;
    background: var(--mg-ink) !important;
    box-shadow: 18px 20px 0 rgba(16, 35, 31, 0.14) !important;
}
.swal2-popup.init-modal-size .swal2-title { color: transparent !important; font-family: "Playfair Display", serif !important; font-size: 0 !important; letter-spacing: -.05em; margin: 0 0 26px !important; }
.swal2-popup.init-modal-size .swal2-title::after { color: var(--mg-paper); content: "Menglobe"; font-size: 42px; font-style: italic; line-height: 1; }
.swal2-popup.init-modal-size .swal2-html-container { color: var(--mg-paper) !important; margin: 0 !important; }
.swal2-popup.init-modal-size .swal2-input { border: 1px solid rgba(245, 241, 232, 0.25) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--mg-paper) !important; background: #203631 !important; font: 500 16px "DM Sans", Arial, sans-serif !important; height: 56px !important; margin: 22px 0 18px !important; padding: 0 18px !important; }
.swal2-popup.init-modal-size .swal2-input::placeholder { color: var(--mg-muted) !important; }
.swal2-popup.init-modal-size .swal2-confirm { border: 1px solid var(--mg-lime) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--mg-ink) !important; background: var(--mg-lime) !important; font: 600 13px "DM Sans", Arial, sans-serif !important; padding: 14px 28px !important; text-transform: uppercase; }
.swal2-popup.init-modal-size .swal2-confirm:hover { background: #dcff7b !important; }
.swal2-popup.init-modal-size .init-user { border-top: 1px solid rgba(245, 241, 232, 0.16); gap: 16px; padding: 20px 0 0; }
.swal2-popup.init-modal-size .init-video-container { border: 1px solid rgba(245, 241, 232, 0.18); background: #18302a; }
.swal2-popup.init-modal-size .initComands button { border-color: rgba(245, 241, 232, 0.28) !important; border-radius: 0 !important; color: var(--mg-paper) !important; background: transparent !important; }
.swal2-popup.init-modal-size .initComands button:hover { color: var(--mg-ink) !important; background: var(--mg-lime) !important; }
.swal2-popup.init-modal-size .initComands .red { color: #ff9b86 !important; }
.swal2-popup.init-modal-size .initComands select { border-color: rgba(245, 241, 232, 0.2) !important; border-radius: 0 !important; background: #203631 !important; }
@media (max-width: 680px) {
    .swal2-popup.init-modal-size { padding: 34px 20px 30px !important; }
    .swal2-popup.init-modal-size .swal2-title::after { font-size: 36px; }
}

/* Branded permission/loading screen. Keep #loadingDiv and spinner hooks intact. */
#loadingDiv {
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--mg-ink) !important;
    background: var(--mg-paper) !important;
    box-shadow: none !important;
    overflow: auto !important;
    text-align: left !important;
}

.mg-loading-shell,
.mg-loading-shell * { box-sizing: border-box; }

.mg-loading-shell {
    width: min(100%, 1440px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0 4.6vw;
    display: flex;
    flex-direction: column;
}

.mg-loading-nav {
    min-height: 101px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(16, 35, 31, .17);
}

.mg-loading-wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mg-ink);
    font: 700 23px/1 "DM Sans", Arial, sans-serif;
    letter-spacing: -1.1px;
    text-decoration: none;
}

.mg-loading-mark {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--mg-lime);
    background: var(--mg-ink);
    font: italic 600 17px/1 "Playfair Display", serif;
}

.mg-loading-step,
.mg-loading-eyebrow,
.mg-loading-trust,
.mg-loading-card-kicker,
.mg-loading-footer {
    font-family: "DM Mono", monospace;
    text-transform: uppercase;
}

.mg-loading-step { font-size: 11px; letter-spacing: .04em; }
.mg-loading-step b { margin-left: 7px; font-size: 17px; font-weight: 400; }

.mg-loading-main {
    flex: 1;
    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;
    gap: clamp(40px, 6vw, 100px);
    padding: 68px 0 54px;
}

.mg-loading-copy { position: relative; z-index: 2; max-width: 690px; }
.mg-loading-eyebrow { margin: 0 0 27px; font-size: 11px; letter-spacing: .06em; }
.mg-loading-eyebrow span {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    display: inline-block;
    border-radius: 50%;
    background: #ef6f51;
}

#loadingDiv .mg-loading-copy h1 {
    margin: 0;
    color: var(--mg-ink);
    font: 600 clamp(52px, 5.2vw, 80px)/.98 "DM Sans", Arial, sans-serif;
    letter-spacing: -.07em;
}

#loadingDiv .mg-loading-copy h1 em,
.mg-loading-card h2 em {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    letter-spacing: -.055em;
}

.mg-loading-lede {
    max-width: 510px;
    margin: 31px 0 27px;
    color: #42524c;
    font: 400 18px/1.55 "DM Sans", Arial, sans-serif;
}

.mg-loading-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #66716c;
    font-size: 10px;
}
.mg-loading-trust i { width: 4px; height: 4px; border-radius: 50%; background: #ef6f51; }

.mg-loading-visual {
    min-height: 455px;
    position: relative;
    display: grid;
    place-items: center;
}
.mg-loading-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(16, 35, 31, .13);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
}
.mg-loading-orbit-one { width: 96%; height: 68%; }
.mg-loading-orbit-two { width: 82%; height: 82%; transform: translate(-50%, -50%) rotate(17deg); }
.mg-loading-orbit-three { width: 74%; height: 98%; transform: translate(-50%, -50%) rotate(50deg); }
.mg-loading-signal {
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 1px solid var(--mg-ink);
    border-radius: 50%;
    background: #ef6f51;
}
.mg-loading-signal-one { left: 9%; top: 22%; }
.mg-loading-signal-two { right: 7%; bottom: 18%; }

.mg-loading-card {
    position: relative;
    z-index: 3;
    width: min(340px, 78vw);
    padding: 34px 36px 32px;
    color: var(--mg-paper);
    background: var(--mg-ink);
    border: 1px solid rgba(16, 35, 31, .18);
    box-shadow: 16px 18px 0 rgba(16, 35, 31, .10);
}

#loadingDiv .mg-loading-card .loading-spinner {
    width: 92px;
    height: 92px;
    margin: 0 0 28px;
}
#loadingDiv .mg-loading-card .spinner-ring {
    border: 2px solid rgba(245, 241, 232, .18);
    border-top-color: var(--mg-lime);
}
#loadingDiv .mg-loading-card .spinner-ring::before {
    border-width: 1px;
    border-color: rgba(245, 241, 232, .12);
    border-top-color: #ef6f51;
}
#loadingDiv .mg-spinner-monogram {
    width: 58px;
    height: 58px;
    left: 17px;
    top: 17px;
    transform: none;
    animation: mg-monogram-pulse 2s ease-in-out infinite;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--mg-ink);
    background: var(--mg-lime);
    font: italic 600 20px/1 "Playfair Display", serif;
}
.mg-loading-card-kicker { margin: 0 0 14px; color: var(--mg-lime); font-size: 10px; letter-spacing: .06em; }
.mg-loading-card h2 { margin: 0; color: var(--mg-paper); font: 600 34px/.98 "DM Sans", Arial, sans-serif; letter-spacing: -.055em; }
.mg-loading-card > p:last-child { margin: 20px 0 0; color: #adc0b8; font: 400 14px/1.5 "DM Sans", Arial, sans-serif; }

.mg-loading-footer {
    min-height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(16, 35, 31, .17);
    color: #66716c;
    font-size: 9px;
    letter-spacing: .05em;
}

@media (max-width: 860px) {
    .mg-loading-main { grid-template-columns: 1fr; gap: 30px; padding: 48px 0; }
    .mg-loading-visual { min-height: 400px; }
}

@media (max-width: 560px) {
    .mg-loading-shell { padding: 0 22px; }
    .mg-loading-nav { min-height: 78px; }
    .mg-loading-wordmark { font-size: 20px; }
    .mg-loading-step { font-size: 0; }
    .mg-loading-step::after { content: "CONECTANDO"; font-size: 9px; }
    .mg-loading-main { min-height: auto; padding: 40px 0 35px; }
    #loadingDiv .mg-loading-copy h1 { font-size: clamp(43px, 14vw, 59px); }
    .mg-loading-lede { font-size: 16px; }
    .mg-loading-visual { min-height: 345px; }
    .mg-loading-card { width: min(310px, 84vw); padding: 29px 28px 27px; }
    .mg-loading-footer { min-height: 58px; }
}

@keyframes mg-monogram-pulse {
    0%, 100% { opacity: .82; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #loadingDiv .spinner-ring,
    #loadingDiv .spinner-ring::before { animation-duration: 2.5s !important; }
    #loadingDiv .mg-spinner-monogram { animation: none !important; }
}