/* Shared styles for the pre-login MFA announcement page (Admin + Client).
   Standalone page (Layout = null), so all styling lives here. */

/* Self-hosted Roboto (latin) so this standalone page renders correctly even where
   Google Fonts is blocked/slow. The file is a variable font covering 400 and 500. */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("/_content/SkinConsult.SkinApp.SharedComponents/fonts/roboto-latin.woff2") format("woff2");
}

:root {
    --skc-blue: #006ab3;
    --skc-body: #424242;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
    background-color: var(--skc-blue);
}

.mfa {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.mfa__intro {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 80px 160px;
    color: #ffffff;
}

.mfa__logo { height: 38px; }
.mfa__logo img { height: 38px; width: auto; display: block; }

/* body1 token: 14 / lh 21 / ls 0.15 / weight 400 */
.mfa__intro-text,
.mfa__text {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.15px;
    font-weight: 400;
    margin: 0;
    white-space: pre-line;
}

.mfa__panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 80px 160px;
    background-color: #ffffff;
    border-radius: 12px;
    color: var(--skc-body);
}

.mfa__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mfa__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* h5 token: 21 / lh 32.02 / ls 0 / weight 500 */
.mfa__h5 {
    font-size: 21px;
    line-height: 32.02px;
    letter-spacing: 0;
    font-weight: 500;
    margin: 0;
}

/* h6 token: 16.5 / lh 28 / ls 0.15 / weight 500 */
.mfa__h6 {
    font-size: 16.5px;
    line-height: 28px;
    letter-spacing: 0.15px;
    font-weight: 500;
    margin: 0;
}

.mfa__step { display: flex; flex-direction: column; gap: 6px; }

.mfa__link { color: inherit; }

.mfa__actions { display: flex; }

/* button token: 12.25 / lh 24.5 / ls 0.4 / weight 500 / uppercase */
.mfa__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    background-color: var(--skc-blue);
    color: #ffffff;
    font-family: inherit;
    font-size: 12.25px;
    font-weight: 500;
    line-height: 24.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.mfa__continue:hover { background-color: #005a99; }

.mfa__continue:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .mfa { flex-direction: column; }

    .mfa__intro,
    .mfa__panel {
        flex: 0 0 auto;
        padding: 40px 24px;
    }

    .mfa__panel { border-radius: 0; }
}