body {
    font-family: 'Manrope', sans-serif;
}

h1, h2, h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Shared static header with one soft, diamond-inspired tonal composition. */
.portal-topbar {
    background-color: #73787d;
    background-image: url('../images/header-diamond-pattern.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 1px solid rgba(37, 42, 46, 0.14);
    box-shadow: 0 12px 32px rgba(22, 25, 28, 0.14);
}

.portal-brand-link {
    border-radius: 0.75rem;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.portal-brand-link span {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.portal-brand-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.09);
}

.portal-brand-link:hover span {
    color: #ffffff;
}

.portal-brand-link:focus-visible {
    outline: 3px solid rgba(117, 190, 255, 0.78);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px rgba(17, 19, 21, 0.9);
}

.portal-language-switcher {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(114, 119, 129, 0.3);
    color: #414750;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.portal-user-chip {
    background: rgba(12, 14, 16, 0.58);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.portal-language-switcher > span {
    color: #727781;
}

.portal-language-switcher [data-lang-btn] {
    color: #727781;
}

.portal-language-switcher [data-lang-btn].text-primary {
    color: #003366;
    border-color: #1687e8;
}

.portal-language-switcher [data-lang-btn]:hover {
    color: #003366;
}

.portal-user-chip > span:last-child {
    color: #f8fafc;
}

/* ── Background Animation ─────────────────────────────────────────── */
.bg-animation-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    /* dark charcoal background */
    background: #16161a;
}

/* canvas fills the full container */
.bg-animation-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* subtle top glow */
.bg-animation-container::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 340px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* subtle bottom accent */
.bg-animation-container::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -60px;
    width: 480px;
    height: 480px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.03) 0%, transparent 65%);
    pointer-events: none;
}

/* keep old wave / smoke elements hidden — they are replaced by canvas */
.smoke-layer,
.smoke-layer-2,
.wave-container,
.wave { display: none; }

.login-page-shell {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: hidden;
    background: #16161a;
}

.login-page-shell .bg-animation-container {
    z-index: 0;
}

.login-support-panel {
    background: rgba(22, 22, 26, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.login-support-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.login-support-contacts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    align-items: start;
}

@media (min-width: 768px) {
    .login-support-content {
        grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
        gap: 2rem;
        align-items: center;
    }

    .login-support-copy {
        padding-right: 2rem;
        border-right: 1px solid rgba(255, 255, 255, 0.16);
    }

    .login-support-contacts {
        grid-template-columns: minmax(12rem, 1fr) minmax(13rem, 1.1fr);
        grid-template-areas:
            "line phone"
            "email phone";
        column-gap: 1.5rem;
        align-items: center;
    }

    .login-support-line {
        grid-area: line;
    }

    .login-support-email {
        grid-area: email;
    }

    .login-support-phone {
        grid-area: phone;
        align-self: stretch;
        padding-left: 1.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
}

.login-support-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: rgb(255 237 213 / 0.9);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.login-support-link:hover {
    color: #ffffff;
}

.bu-login-button {
    --pointer-x: 50%;
    --pointer-y: 50%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
    color: #003366;
    border: 2px solid rgba(0, 51, 102, 0.92);
    box-shadow:
        0 10px 24px rgba(0, 36, 72, 0.22),
        0 2px 6px rgba(0, 51, 102, 0.12),
        0 0 0 4px rgba(244, 121, 32, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(0, 51, 102, 0.1);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.bu-login-button::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -80%;
    left: -34%;
    width: 30%;
    height: 260%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 224, 178, 0.28) 38%,
        rgba(255, 255, 255, 0.92) 49%,
        rgba(255, 255, 255, 0.62) 54%,
        rgba(80, 142, 197, 0.12) 68%,
        transparent 100%
    );
    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.42),
        0 0 30px rgba(255, 190, 104, 0.16);
    filter: blur(4px);
    opacity: 0;
    transform: translate3d(-350%, 0, 0) rotate(18deg);
    transform-origin: center;
    will-change: opacity, transform;
    animation: bu-login-natural-sheen 5.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.bu-login-button::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        circle 95px at var(--pointer-x) var(--pointer-y),
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 225, 184, 0.2) 34%,
        rgba(0, 80, 158, 0.06) 52%,
        transparent 72%
    );
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.bu-login-button:hover {
    color: #003366;
    border-color: #f47920;
    box-shadow:
        0 14px 30px rgba(0, 36, 72, 0.24),
        0 4px 10px rgba(244, 121, 32, 0.16),
        0 0 0 4px rgba(244, 121, 32, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 51, 102, 0.12);
    transform: translateY(-2px);
}

.bu-login-button:hover::after {
    opacity: 1;
}

.bu-login-button__icon {
    position: relative;
    z-index: 1;
    color: #f47920;
}

@keyframes bu-login-natural-sheen {
    0%,
    52% {
        opacity: 0;
        transform: translate3d(-350%, 0, 0) rotate(18deg);
    }
    58% {
        opacity: 0.2;
    }
    72% {
        opacity: 0.78;
    }
    84%,
    100% {
        opacity: 0;
        transform: translate3d(520%, 0, 0) rotate(18deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bu-login-button::before {
        animation: none;
        opacity: 0;
    }
}

.portal-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

.portal-footer-brand,
.portal-footer-contact,
.portal-footer-policies {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.portal-footer-contact-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.portal-footer-policies {
    align-items: center;
}

@media (min-width: 1100px) {
    .portal-footer-grid {
        grid-template-columns: 14rem minmax(0, 1fr) 14rem;
        gap: 2rem;
        text-align: left;
    }

    .portal-footer-contact-items {
        justify-content: flex-start;
    }

    .portal-footer-policies {
        align-items: flex-end;
        text-align: right;
    }
}

body {
    min-height: max(884px, 100dvh);
}

/* Local fallbacks for project Tailwind theme colors.
   These prevent transparent cards/controls before the Tailwind CDN runtime finishes. */
:root {
    --twc-surface-container-lowest: #ffffff;
    --twc-secondary-container: #FF9A47;
    --twc-primary-container: #00509E;
    --twc-surface-container-high: #e7e8e9;
    --twc-surface: #f8f9fa;
    --twc-surface-container-low: #f3f4f5;
    --twc-on-tertiary-fixed-variant: #005225;
    --twc-on-surface-variant: #414750;
    --twc-on-secondary-container: #3D1400;
    --twc-on-primary-container: #C5DDFF;
    --twc-on-primary-fixed: #001c38;
    --twc-inverse-primary: #a2c9ff;
    --twc-on-surface: #191c1d;
    --twc-inverse-surface: #2e3132;
    --twc-tertiary-fixed-dim: #5adf82;
    --twc-on-secondary-fixed: #341000;
    --twc-outline: #727781;
    --twc-on-tertiary-fixed: #00210b;
    --twc-surface-dim: #d9dadb;
    --twc-on-secondary-fixed-variant: #7a3000;
    --twc-error-container: #ffdad6;
    --twc-on-tertiary-container: #5ce184;
    --twc-surface-variant: #e1e3e4;
    --twc-on-background: #191c1d;
    --twc-on-primary: #ffffff;
    --twc-on-tertiary: #ffffff;
    --twc-primary: #003366;
    --twc-surface-container: #edeeef;
    --twc-on-error: #ffffff;
    --twc-secondary-fixed-dim: #ffb693;
    --twc-surface-container-highest: #e1e3e4;
    --twc-tertiary-container: #00612d;
    --twc-primary-fixed-dim: #a2c9ff;
    --twc-tertiary: #00471f;
    --twc-secondary: #F47920;
    --twc-surface-tint: #1b60a2;
    --twc-surface-bright: #f8f9fa;
    --twc-primary-fixed: #d3e4ff;
    --twc-secondary-fixed: #ffdbcb;
    --twc-error: #ba1a1a;
    --twc-on-secondary: #ffffff;
    --twc-on-error-container: #93000a;
    --twc-on-primary-fixed-variant: #004881;
    --twc-tertiary-fixed: #78fc9c;
    --twc-inverse-on-surface: #f0f1f2;
    --twc-outline-variant: #c1c7d2;
    --twc-background: #f8f9fa;
}

.bg-surface-container-lowest { background-color: var(--twc-surface-container-lowest); }
.bg-secondary-container { background-color: var(--twc-secondary-container); }
.bg-primary-container { background-color: var(--twc-primary-container); }
.bg-surface-container-high { background-color: var(--twc-surface-container-high); }
.bg-surface { background-color: var(--twc-surface); }
.bg-surface-container-low { background-color: var(--twc-surface-container-low); }
.bg-inverse-surface { background-color: var(--twc-inverse-surface); }
.bg-error-container { background-color: var(--twc-error-container); }
.bg-surface-variant { background-color: var(--twc-surface-variant); }
.bg-primary { background-color: var(--twc-primary); }
.bg-surface-container { background-color: var(--twc-surface-container); }
.bg-surface-container-highest { background-color: var(--twc-surface-container-highest); }
.bg-tertiary-container { background-color: var(--twc-tertiary-container); }
.bg-tertiary { background-color: var(--twc-tertiary); }
.bg-secondary { background-color: var(--twc-secondary); }
.bg-primary-fixed { background-color: var(--twc-primary-fixed); }
.bg-secondary-fixed { background-color: var(--twc-secondary-fixed); }
.bg-error { background-color: var(--twc-error); }
.bg-background { background-color: var(--twc-background); }
.bg-tertiary\/5 { background-color: rgb(0 71 31 / 0.05); }
.bg-tertiary\/10 { background-color: rgb(0 71 31 / 0.10); }
.bg-primary\/10 { background-color: rgb(0 51 102 / 0.10); }
.bg-surface-container-low\/50 { background-color: rgb(243 244 245 / 0.50); }
.bg-surface-container-high\/40 { background-color: rgb(231 232 233 / 0.40); }

.text-on-tertiary-fixed-variant { color: var(--twc-on-tertiary-fixed-variant); }
.text-on-surface-variant { color: var(--twc-on-surface-variant); }
.text-on-secondary-container { color: var(--twc-on-secondary-container); }
.text-on-primary-container { color: var(--twc-on-primary-container); }
.text-on-primary-fixed { color: var(--twc-on-primary-fixed); }
.text-inverse-primary { color: var(--twc-inverse-primary); }
.text-on-surface { color: var(--twc-on-surface); }
.text-tertiary-fixed-dim { color: var(--twc-tertiary-fixed-dim); }
.text-on-secondary-fixed { color: var(--twc-on-secondary-fixed); }
.text-outline { color: var(--twc-outline); }
.text-on-tertiary-fixed { color: var(--twc-on-tertiary-fixed); }
.text-on-secondary-fixed-variant { color: var(--twc-on-secondary-fixed-variant); }
.text-on-tertiary-container { color: var(--twc-on-tertiary-container); }
.text-on-background { color: var(--twc-on-background); }
.text-on-primary { color: var(--twc-on-primary); }
.text-on-tertiary { color: var(--twc-on-tertiary); }
.text-primary { color: var(--twc-primary); }
.text-on-error { color: var(--twc-on-error); }
.text-tertiary { color: var(--twc-tertiary); }
.text-secondary { color: var(--twc-secondary); }
.text-error { color: var(--twc-error); }
.text-on-secondary { color: var(--twc-on-secondary); }
.text-on-error-container { color: var(--twc-on-error-container); }
.text-on-primary-fixed-variant { color: var(--twc-on-primary-fixed-variant); }
.text-tertiary-fixed { color: var(--twc-tertiary-fixed); }
.text-inverse-on-surface { color: var(--twc-inverse-on-surface); }
.text-primary-fixed\/80 { color: rgb(211 228 255 / 0.80); }

.border-primary-container { border-color: var(--twc-primary-container); }
.border-surface-container-high { border-color: var(--twc-surface-container-high); }
.border-outline { border-color: var(--twc-outline); }
.border-primary { border-color: var(--twc-primary); }
.border-surface-container { border-color: var(--twc-surface-container); }
.border-surface-container-highest { border-color: var(--twc-surface-container-highest); }
.border-tertiary { border-color: var(--twc-tertiary); }
.border-outline-variant { border-color: var(--twc-outline-variant); }
.border-outline-variant\/20 { border-color: rgb(193 199 210 / 0.20); }
.border-outline-variant\/30 { border-color: rgb(193 199 210 / 0.30); }
.border-outline-variant\/50 { border-color: rgb(193 199 210 / 0.50); }
.border-tertiary\/20 { border-color: rgb(0 71 31 / 0.20); }

.placeholder\:text-outline::placeholder { color: var(--twc-outline); }
.placeholder\:text-outline\/50::placeholder { color: rgb(114 119 129 / 0.50); }
.hover\:bg-surface-container:hover { background-color: var(--twc-surface-container); }
.hover\:bg-surface-container-high:hover { background-color: var(--twc-surface-container-high); }
.hover\:bg-primary-container:hover { background-color: var(--twc-primary-container); }
.hover\:text-secondary:hover { color: var(--twc-secondary); }
.hover\:text-error:hover { color: var(--twc-error); }
.hover\:text-on-surface:hover { color: var(--twc-on-surface); }
.focus\:bg-white:focus { background-color: #ffffff; }
.focus\:ring-primary:focus { --tw-ring-color: var(--twc-primary); }
.focus\:ring-primary\/10:focus { --tw-ring-color: rgb(0 51 102 / 0.10); }
.selection\:bg-primary-container::selection { background-color: var(--twc-primary-container); }
.selection\:text-white::selection { color: #ffffff; }