/* ========================================
   FONT DECLARATIONS
   ======================================== */

/* Benton Sans Pro Font Family - Complete */
@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-light-webfont.woff2') format('woff2'), url('/fonts/bentonsans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-book-webfont.woff2') format('woff2'), url('/fonts/bentonsans-book-webfont.woff') format('woff');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-regular-webfont.woff2') format('woff2'), url('/fonts/bentonsans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-regularitalic-webfont.woff2') format('woff2'), url('/fonts/bentonsans-regularitalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-medium-webfont.woff2') format('woff2'), url('/fonts/bentonsans-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-mediumitalic-webfont.woff2') format('woff2'), url('/fonts/bentonsans-mediumitalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Benton Sans Pro';
    src: url('/fonts/bentonsans-bold-webfont.woff2') format('woff2'), url('/fonts/bentonsans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Material Icons - Self-hosted */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/material-icons.woff2') format('woff2');
    font-display: swap;
}

.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* BentonSans Font Family - Complete */
@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-light-webfont.woff2') format('woff2'), url('/fonts/bentonsans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-book-webfont.woff2') format('woff2'), url('/fonts/bentonsans-book-webfont.woff') format('woff');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-regular-webfont.woff2') format('woff2'), url('/fonts/bentonsans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-regularitalic-webfont.woff2') format('woff2'), url('/fonts/bentonsans-regularitalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-medium-webfont.woff2') format('woff2'), url('/fonts/bentonsans-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-mediumitalic-webfont.woff2') format('woff2'), url('/fonts/bentonsans-mediumitalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/bentonsans-bold-webfont.woff2') format('woff2'), url('/fonts/bentonsans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BentonSans';
    src: url('/fonts/BentonSans-Comp-Black-Web.woff2') format('woff2'), url('/fonts/BentonSans-Comp-Black-Web.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* BentonSans Condensed - Separate Font Family */
@font-face {
    font-family: 'BentonSans Condensed';
    src: url('/fonts/BentonSans Cond Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* JetBrainsMono Font Family - Complete */
@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'), url('/fonts/JetBrainsMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2'), url('/fonts/JetBrainsMono-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2'), url('/fonts/JetBrainsMono-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Medium-Italic.woff2') format('woff2'), url('/fonts/JetBrainsMono-Medium-Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'), url('/fonts/JetBrainsMono-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-Bold-Italic.woff2') format('woff2'), url('/fonts/JetBrainsMono-Bold-Italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-ExtraBold-Italic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Newsycle Font Family - Complete */
@font-face {
    font-family: 'Newsycle';
    src: url('/fonts/newsycle-regular-webfont.woff2') format('woff2'), url('/fonts/newsycle-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Newsycle';
    src: url('/fonts/newsycle-bold-webfont.woff2') format('woff2'), url('/fonts/newsycle-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   EXTERNAL IMPORTS
   ======================================== */

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ─── AppBar responsive fixes ─── */

/* Hide username text on mobile, keep avatar */
.hide-on-mobile {
    display: none;
}

@media (min-width: 600px) {
    .hide-on-mobile {
        display: inline;
    }
}

/* Notification dropdown: full width on mobile */
@media (max-width: 600px) {
    .mud-popover {
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
    }

        .mud-popover .mud-paper {
            width: 100% !important;
            max-width: calc(100vw - 16px) !important;
            min-width: unset !important;
            max-height: 70vh !important;
            overflow-y: auto;
        }
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
:root {
    --bs-font-sans-serif: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    --md-typography-font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html, body {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400; /* Regular */
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Global Layout Containment ─────────────────────────────────────────
   Prevents horizontal overflow on any screen size.
   MudBlazor shifts .mud-main-content via margin-left for the sidebar,
   so we must cap width to the available space, not the full viewport.
   ─────────────────────────────────────────────────────────────────────── */

/* The root MudLayout wrapper */
.mud-layout {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* The scrollable content area next to the sidebar */
.mud-main-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bootstrap containers inside dashboard pages */
.mud-main-content .container-fluid,
.mud-main-content .container {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent any deeply nested row from bleeding outside */
.mud-main-content .row {
    --bs-gutter-x: 1rem; /* tighter gutters on small screens */
}

/* ─── Responsive: on very small screens shrink gutters ── */
@media (max-width: 480px) {
    .mud-main-content .container-fluid,
    .mud-main-content .container {
        padding-left: 8px;
        padding-right: 8px;
    }
    .mud-main-content .row {
        --bs-gutter-x: 0.5rem;
    }
}

/* Regular weight for headings */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.section-header, .kyc-topbar-title, .kyc-stepper-heading, .login-card-title, .login-image-title {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400; /* Regular */
}

/* Regular weight for form placeholders */
::placeholder,
input::placeholder,
textarea::placeholder,
.mud-input-root::placeholder,
.mud-input-slot::placeholder {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important; /* Regular */
}

/* Medium weight for step numbers and phone prefix */
.kyc-circle,
.kyc-step-counter,
.step-indicator-circle,
.step-number,
.iti__selected-dial-code,
.iti__selected-dial-code *,
.phone-prefix {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important; /* Medium */
}

/* Bold weight (uppercase) for button labels */
.mud-button,
.mud-button-label,
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
input[type="button"],
input[type="submit"],
.login-button-mud,
.login-button-mud-secondary,
.login-button-secondary {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700; /* Bold */
    text-transform: uppercase;
}

    h1:focus {
        outline: none;
    }

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

.dark, .dark body {
    background-color: #0f172a;
    color: #e5e7eb;
}

.mud-dialog-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Mud surfaces */
.dark .mud-paper, .dark .mud-card, .dark .mud-table, .dark .mud-dialog, .dark .mud-popover {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

.dark .mud-input-root, .dark .mud-select, .dark .mud-input-slot {
    color: #e5e7eb !important;
}

.dark .mud-input-label {
    color: #cbd5e1 !important;
}

.dark .mud-input-outlined .mud-input-notched-outline {
    border-color: #374151 !important;
}

.dark .mud-typography, .dark .mud-button, .dark .mud-chip, .dark .mud-breadcrumbs {
    color: inherit;
}

/* Common custom sections across pages */
.dark .features-section {
    background: #0b1226;
}

.dark .feature-card {
    background: #111827;
    border-color: #374151;
}


.dark .insurance-section {
    background: #0b1226;
}

.dark .insurance-card {
    background: #0f172a;
    border-color: #374151;
    box-shadow: none;
}

    .dark .insurance-card:hover {
        background: #111827;
    }

.dark .testimonials-section {
    background: #0b1226;
}

.dark .testimonial-card {
    background: #0f172a;
    border-top-color: #f59e0b;
}

.dark .landing-header {
    background: rgba(17,24,39,0.9);
    border-bottom-color: rgba(255,255,255,0.06);
}

.dark .landing-nav-link {
    color: #cbd5e1;
}



.dark .landing-btn-login {
    color: #e5e7eb;
    border-color: #e5e7eb;
}


/* Tables */
.dark .mud-table-container {
    background: #0f172a;
}

.dark .mud-table thead th {
    background: #0b1226;
    color: #cbd5e1;
}

.dark .mud-table tbody tr {
    background: #0f172a;
    color: #e5e7eb;
}

/* ========================================
   ERROR UI
   ======================================== */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ========================================
   FORM VALIDATION STYLES
   ======================================== */

/* Make placeholder red when field has error */
.input-error input::placeholder,
.input-error textarea::placeholder,
.input-error .mud-input-input::placeholder {
    color: red !important;
    opacity: 1 !important;
}

/* For MudAutocomplete */
.input-error .mud-autocomplete .mud-input-input::placeholder {
    color: red !important;
}

.input-error .mud-input-root,
.input-error .mud-select,
.input-error .mud-input {
    border-color: red !important;
}

.input-error .mud-input-label {
    color: red !important;
}

.input-error input {
    border-color: red !important;
}

.required-label::after {
    content: " *";
    color: red !important;
    font-weight: bold;
    font-size: 1.05rem;
}

.mud-input-label.required::after {
    content: " *";
    color: red !important;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* ========================================
   SECTION HEADERS & FORMS
   ======================================== */

.section-header {
    margin: 18px 0 12px 0;
    padding: 10px 14px;
    background-color: #EFF3F6;
    font-weight: 500;
    font-size: 1.1rem;
    color: #00164E;
    border-radius: 4px;
}

.form-row {
    margin-bottom: 20px;
}

.uniform-field {
    width: 100%;
}

.clean-card {
    padding: 20px 18px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 28px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.col-sm-3 > .mud-input-root,
.col-sm-3 > .mud-select-root,
.col-sm-3 > .mud-autocomplete-root {
    width: 100%;
}

@media (max-width: 576px) {
    .col-sm-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .form-row {
        margin-bottom: 26px;
    }
}

/* ========================================
   LOGIN PAGE STYLES
   ======================================== */

/* Dark mode login overrides */
.dark .login-container {
    background: #0f172a;
}

.dark .login-image-side {
    background: linear-gradient(135deg, #0b1226 0%, #101b3a 100%);
}

.dark .login-image-title {
    color: #e5e7eb;
}

.dark .login-image-subtitle {
    color: rgba(229, 231, 235, 0.8);
}

.dark .login-image-feature {
    color: rgba(229, 231, 235, 0.85);
}

.dark .login-form-side {
    background: #0f172a;
}

.dark .login-header {
    background: rgba(17, 24, 39, 0.9);
    border-bottom-color: rgba(255,255,255,0.06);
}

.dark .login-header-text,
.dark .login-header-call {
    color: #e5e7eb;
}

.dark .login-header-nav-link {
    color: #cbd5e1;
}

   

.dark .login-card,
.dark .registration-card {
    background: #111827;
    box-shadow: none;
}

.dark .login-card-title {
    color: #e5e7eb;
}

.dark .login-card-subtitle {
    color: #9ca3af;
}

.dark :deep(.mud-input-label) {
    color: #cbd5e1;
}

.dark :deep(.mud-input-outlined .mud-input-notched-outline) {
    border-color: #374151 !important;
}

.dark :deep(.mud-input-outlined .mud-input-slot) {
    color: #e5e7eb;
}

.dark :deep(.mud-input-helper-text) {
    color: #9ca3af;
}

.dark .login-button-secondary {
    background: transparent;
    color: #e5e7eb;
    border-color: #e5e7eb;
}

.dark .create-account-left {
    background: linear-gradient(135deg, #0b1226 0%, #101b3a 100%);
}

.dark .create-account-right {
    background: #0f172a;
}

.dark .password-requirements li {
    color: #cbd5e1;
}

.dark .registration-requirements-sidebar {
    background: rgba(255,255,255,0.06);
    border-left-color: #f59e0b;
}

/* Phone Input Styling - Match MudBlazor */
/* Phone Input Styling - Match MudBlazor */
.phone-input-wrapper {
    width: 100%;
    position: relative;
}

.phone-input {
    width: 100%;
    font-family: 'BentonSans', sans-serif;
    font-size: 1rem;
    padding: 8.5px 14px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background-color: transparent;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

    .phone-input:hover {
        border-color: rgba(0, 0, 0, 0.87);
    }

    .phone-input:focus {
        outline: none;
        border-color: #594AE2;
        border-width: 2px;
        padding: 7.5px 13px;
    }

    .phone-input.error {
        border-color: #f44336;
    }

        .phone-input.error:focus {
            border-color: #f44336;
            border-width: 2px;
        }

.phone-error-text {
    color: #f44336;
    font-size: 0.75rem;
    margin-top: 3px;
    margin-left: 14px;
    font-family: 'BentonSans', sans-serif;
}

/* intl-tel-input Container */
.iti {
    width: 100%;
    display: block;
}

.iti__container {
    width: 100%;
}

/* Separate dial code styling */
.iti--separate-dial-code .iti__selected-dial-code {
    font-family: 'BentonSans', sans-serif;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.87);
}

.iti--separate-dial-code input {
    padding-left: 90px !important;
}

/* Flag container positioning & sizing safeguards */
.iti__flag,
.iti__country-list .iti__flag,
.iti__selected-country .iti__flag,
.iti--fullscreen-popup .iti__flag,
.iti img,
.iti svg.iti__flag {
    width: 20px !important;
    height: 14px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    object-fit: cover !important;
    display: inline-block !important;
}

.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
}

.iti__selected-country {
    background-color: transparent;
    border: none;
    height: 100%;
    padding: 0 0 0 8px;
}

    .iti__selected-country:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

/* Dropdown arrow */
.iti__arrow {
    border: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #555;
    margin-left: 6px;
}

/* Country dropdown */
.iti__country-list {
    font-family: 'BentonSans', sans-serif;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
    border-radius: 4px;
    margin-top: 4px;
}

.iti__country {
    padding: 8px 12px;
}

    .iti__country:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

    .iti__country.iti__highlight {
        background-color: rgba(89, 74, 226, 0.12);
    }

/* Search input in dropdown */
.iti__search-input {
    font-family: 'BentonSans', sans-serif;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    margin: 8px;
    width: calc(100% - 16px);
}

    .iti__search-input:focus {
        outline: none;
        border-color: #594AE2;
        border-width: 2px;
        padding: 7px 11px;
    }

/* Ensure consistent height with MudBlazor Dense margin */
.iti input[type="tel"] {
    height: 40px;
}

/* Remove any conflicting styles */
.phone-input-container .iti {
    margin-top: 0;
    margin-bottom: 0;
}

.phone-input-container .mud-input-control {
    width: 100%;
}

/* Login Container */
.login-container {
    background: transparent;
    min-height: 100vh;
    display: flex;
    width: 100vw;
    flex-direction: row;
    padding-top: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Left Side - Image */
.login-image-side {
    flex: 1;
    background: linear-gradient(135deg, #003366 0%, #1F3A7F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

    .login-image-side::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        border-radius: 50%;
    }

.login-image-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 100%;
}

.login-image-container {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
}

    .login-image-container img {
        width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        object-fit: contain;
        max-height: 350px;
    }

.login-image-text {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-image-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
}

.login-image-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 400px;
}

.login-image-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.login-image-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.login-image-feature-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #FF9900;
    flex-shrink: 0;
}

/* Right Side - Form */
.login-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: white;
}

/* Header */
.login-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 100;
}

.login-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-header-call {
    color: #003366;
    font-size: 13px;
    font-weight: 600;
}

.login-header-nav {
    display: flex;
    gap: 24px;
    align-items: center;
}

.login-header-nav-link {
    color: #003366;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s;
}


.login-header-logo {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF9900 0%, #E68A00 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}

    .login-header-logo img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

.login-header-text {
    color: #003366;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.login-header-text-title {
    font-size: 14px;
    font-weight: 600;
}

.login-header-text-subtitle {
    font-size: 12px;
    opacity: 0.7;
}

/* Login Content */
.login-content {
    width: 100%;
    max-width: 600px;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
}

.login-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    box-shadow: none;
    animation: slideInLeft 0.5s ease-out;
    backdrop-filter: none;
}

    .login-card.hidden {
        display: none;
    }

.registration-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    box-shadow: none;
    animation: slideInRight 0.5s ease-out;
    backdrop-filter: none;
}

    .registration-card.hidden {
        display: none;
    }

.registration-form-wrapper {
    gap: 40px;
    width: 100%;
    align-items: start;
}

.registration-form-content {
    flex-direction: column;
    gap: 18px;
}

.registration-requirements-sidebar {
    background: linear-gradient(135deg, #FFF4E6 0%, #FFFBF0 100%);
    border-left: 4px solid #FF9900;
    border-radius: 12px;
    padding: 28px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

    .registration-requirements-sidebar h4 {
        font-size: 12px;
        font-weight: 700;
        color: #17275F;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 12px 0;
    }

.registration-requirements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.requirement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #666;
}

.requirement-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e5e7;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

    .requirement-icon.checked {
        background: #FF9900;
        color: white;
    }

/* Card Header */
.login-card-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
}

    .login-card-header::after {
        content: '';
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        border-radius: 2px;
    }

.login-card-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    background: rgba(0, 63, 202, 0.07);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003FCA;
    font-size: 24px;
    box-shadow: none;
    position: relative;
}

    .login-card-icon::before {
        content: none;
    }

    .login-card-icon img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

.login-card-title {
    font-size: 26px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 8px;
}

.login-card-subtitle {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
}

/* Forms */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .login-form::before {
        content: '';
        display: block;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e5e5e7, transparent);
        margin-bottom: 8px;
    }

.registration-card .login-form {
    gap: 18px;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #003366;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* MudBlazor TextField styling */
:deep(.mud-input-outlined) {
    border-radius: 12px;
}

:deep(.mud-input-outlined .mud-input-notched-outline) {
    border-color: #e5e5e7 !important;
}

:deep(.mud-input-outlined.mud-focused .mud-input-notched-outline) {
    border-color: #FF9900 !important;
}

/* Password Toggle Icon Button */
.pw-toggle-btn {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    width: 24px !important;
    height: 24px !important;
    z-index: 10 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.pw-toggle-btn:hover {
    color: #475569 !important;
}

.pw-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

:deep(.mud-input-outlined .mud-input-slot) {
    padding: 12px 16px;
}

:deep(.mud-input-label) {
    font-size: 13px;
    font-weight: 600;
    color: #17275F;
}

:deep(.mud-input-helper-text) {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.login-form-helper {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.login-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-top: 6px;
}

.login-form-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.login-form-forgot {
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

 

/* Buttons */
.login-button {
    background: linear-gradient(135deg, #283A79 0%, #283A79 100%);
    color: white;
    padding: 13px 22px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 6px;
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.25);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

    .login-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        transition: left 0.3s ease;
    }


    .login-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.login-button-secondary {
    background: white;
    color: #17275F;
    border: 2px solid #17275F;
    padding: 12px 22px;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(23, 39, 95, 0.12);
    font-size: 15px;
    font-weight: 600;
}

  

/* ========================================
   CREATE ACCOUNT MODAL STYLES
   ======================================== */

.create-account-modal {
    border-radius: 24px !important;
    background: white !important;
}

.create-account-container {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    padding: 0;
    border-radius: 24px;
}

/* Modal Header */
.create-account-header {
    background: linear-gradient(135deg, #17275F 0%, #1F3A7F 100%);
    padding: 24px;
    text-align: center;
    border-radius: 24px 24px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.create-account-logo {
    margin-bottom: 12px;
}

    .create-account-logo img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

.create-account-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 8px 0 4px 0;
    line-height: 1.2;
}

.create-account-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Modal Content */
.create-account-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: row;
}

    .create-account-content::-webkit-scrollbar {
        width: 6px;
    }

    .create-account-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .create-account-content::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 3px;
    }

/* Left Side - Info & Requirements */
.create-account-left {
    flex: 0 0 35%;
    background: linear-gradient(135deg, #17275F 0%, #1F3A7F 100%);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: white;
}

.create-account-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.create-account-info-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.create-account-info-item {
    display: flex;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.create-account-info-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #FF9900;
    flex-shrink: 0;
}

/* Right Side - Form */
.create-account-right {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

    .create-account-right::-webkit-scrollbar {
        width: 6px;
    }

    .create-account-right::-webkit-scrollbar-track {
        background: transparent;
    }

    .create-account-right::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 3px;
    }

.form-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.form-row-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.form-group-third {
    margin-bottom: 0;
}

.form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.form-helper {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

.password-requirements {
    background: rgba(255, 255, 255, 0.1);
    border-left: 4px solid #FF9900;
    padding: 12px;
    margin: 0;
    border-radius: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.create-account-left .password-requirements {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.password-requirements strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 11px;
    color: white;
}

/* Password Visibility Toggle Button & Input Styling */
.pw-toggle-btn {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    width: 24px !important;
    height: 24px !important;
    z-index: 10 !important;
}
.pw-toggle-btn:hover {
    color: #475569 !important;
}
.pw-input-with-toggle {
    padding-right: 42px !important;
}

.password-requirements ul {
    margin: 0;
    padding-left: 16px;
    list-style-type: disc;
}

.password-requirements li {
    margin-bottom: 3px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.requirement-icon.unchecked {
    background-color: #e0e0e0;
    color: #999;
}

.requirement-icon.checked {
    background-color: #FF9900;
    color: white;
}

/* Modal Footer */
.create-account-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: #f5f5f7;
    border-radius: 0 0 24px 24px;
}

.create-account-button {
    flex: 1;
    background: linear-gradient(135deg, #FF9900 0%, #E68A00 100%);
    color: white;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}


.create-account-button-cancel {
    background: white;
    color: #003366;
    border: 2px solid #003366;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
}



/* ========================================
   2FA STYLES
   ======================================== */

.twofa-container {
    position: relative;
    border-radius: 24px;
    width: 100%;
    text-align: center;
}

.twofa-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    padding: 0;
}



    .twofa-close-btn:active {
        transform: scale(0.95);
    }

.twofa-header {
    margin-top: 16px;
}

.twofa-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #0033AA 0%, #003FCA 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: none;
}

.twofa-title {
    font-size: 24px;
    font-weight: 600;
    color: #003366;
    margin-bottom: 8px;
}

.twofa-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.twofa-email {
    font-size: 13px;
    color: #999;
    word-break: break-all;
}

.twofa-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.twofa-input-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 30px 0;
}

.twofa-input {
    width: 36px;
    height: 36px;
    font-size: small;
    text-align: center;
    border: 2px solid #283A79;
    border-radius: 4px;
    font-weight: bolder;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fafafa;
    color: #003366;
    caret-color: #FF9900;
}

    .twofa-input:focus {
        outline: none;
        border-color: #283A79;
        background: white;
        box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.15), 0 4px 12px rgba(255, 153, 0, 0.2);
        transform: scale(1.05);
    }

    .twofa-input.filled {
        border-color: #283A79;
        background: linear-gradient(135deg, #FFF4E6 0%, #FFFBF0 100%);
        box-shadow: 0 2px 8px rgba(255, 153, 0, 0.1);
    }

    .twofa-input::placeholder {
        color: #ccc;
        font-size: 24px;
    }

.twofa-button {
    background: linear-gradient(135deg, #283A79 0%, #283A79 100%);
    color: white;
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
}

    .twofa-button:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(255, 153, 0, 0.35);
        background: linear-gradient(135deg, #FF9900 0%, #E68A00 100%);
    }

    .twofa-button:active:not(:disabled) {
        transform: translateY(-1px);
    }

    .twofa-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
        box-shadow: none;
    }

.twofa-resend {
    font-size: 13px;
    color: #666;
}

.twofa-resend-link {
    color: #FF9900;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

    .twofa-resend-link:hover {
        text-decoration: underline;
    }

.twofa-timer {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.twofa-error {
    background-color: #fee;
    color: #c33;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

.twofa-success {
    background-color: #efe;
    color: #3c3;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* OTP sent confirmation notice — calm green banner shown on code dispatch */
.otp-sent-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f0faf4;
    border: 1px solid #b7e4c7;
    color: #1a7f4b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.twofa-email-inline {
    color: #003FCA;
    font-weight: 600;
}

/* ========================================
   HEADER / NAVIGATION
   ======================================== */

.login-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-header-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #002B5C;
    font-size: 20px;
    font-weight: 700;
}

    .login-logo img {
        height: 40px;
        width: auto;
    }

.landing-nav {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
}

.landing-nav-link {
    color: #003366;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
}

/* In YourComponent.razor.css or wwwroot/css/app.css */
.custom-submit-btn {
    background-color: #008545 !important;
    color: white !important;
    min-width: 240px;
    box-shadow: none !important;
    font-weight: 500;
}

    .custom-submit-btn.mud-disabled {
        /* MudBlazor adds .mud-disabled when Disabled=true */
        background-color: #9e9e9e !important; /* Medium gray - adjust shade as needed */
        color: rgba(255, 255, 255, 0.7) !important; /* Slightly faded white text */
        cursor: not-allowed;
    }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   MISC COMPONENTS
   ======================================== */

.notification-list.mud-list.mud-list-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 1024px) {
    .login-container {
        flex-direction: column;
        padding-top: 0;
    }

    .login-image-side {
        min-height: 300px;
        padding: 20px;
    }

    .login-form-side {
        padding: 80px 20px 40px;
    }

    .login-header {
        position: relative;
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .login-container {
        flex-direction: column;
    }

    .login-form-side {
        order: 1;
        padding: 24px 16px 30px;
    }

    .login-image-side {
        order: 2;
        min-height: 220px;
        padding: 16px;
    }

    .create-account-content {
        flex-direction: column;
    }

    .create-account-left, .create-account-right {
        width: 100%;
        padding: 16px;
    }

    .login-content {
        max-width: 100%;
    }

    .login-header {
        flex-wrap: wrap;
        padding: 12px 16px;
    }

    .login-header-left {
        order: 1;
        width: 100%;
    }

    .login-header-nav {
        order: 2;
        width: 100%;
        justify-content: center;
        gap: 10px;
        display: none;
    }

    .login-header-right {
        order: 3;
        width: 100%;
        justify-content: flex-end;
        display: none;
    }

    .login-header-call {
        font-size: 11px;
    }

    .login-card-title {
        font-size: 18px;
    }

    .login-card-icon {
        width: 56px;
        height: 56px;
    }

    .login-header-nav a {
        font-size: 11px;
    }

    .twofa-dialog :deep(.mud-dialog) {
        margin: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 90vh;
        border-radius: 0;
    }

    .twofa-dialog :deep(.mud-dialog-content) {
        padding: 10px;
    }

    .twofa-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 10px;
    }

    .twofa-header {
        margin-top: 8px;
    }

    .twofa-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .twofa-title {
        font-size: 18px;
    }

    .twofa-subtitle {
        font-size: 12px;
    }

    .twofa-input-group {
        gap: 6px;
        margin: 14px 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .twofa-input {
        width: 14px;
        height: 18px;
        font-size: 20px;
    }

    .twofa-button {
        width: 100%;
        padding: 10px 16px;
    }
}

/* ========================================
   RESPONSIVE - EXTRA SMALL
   ======================================== */

@media (max-width: 360px) {
    .twofa-dialog :deep(.mud-dialog) {
        margin: 0;
        width: 100vw;
        max-width: 100vw;
    }

    .twofa-container {
        max-width: 100%;
        padding: 8px;
    }

    .twofa-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .twofa-title {
        font-size: 16px;
    }

    .twofa-subtitle, .twofa-email {
        font-size: 11px;
    }

    .twofa-input-group {
        gap: 4px;
        margin: 12px 0;
    }

    .twofa-input {
        width: 10px;
        height: 18px;
        font-size: 18px;
    }

    .twofa-button {
        padding: 10px 14px;
    }
}


/*My Holdings Page*/

/* ??? Page Header ??????????????????????????????????????????????????????????? */

.page-title {
    color: #0033AA;
}

.new-order-btn {
    background-color: #0033AA;
    border-color: #0033AA;
    border-radius: 8px;
    color: #ffffff;
}

    .new-order-btn:hover {
        background-color: #003FCA;
        border-color: #003FCA;
        color: #ffffff;
    }

/* ??? Loading State ????????????????????????????????????????????????????????? */

.loading-wrapper {
    min-height: 300px;
}

/* ??? Empty State ??????????????????????????????????????????????????????????? */

.empty-card {
    border-radius: 10px;
}

.empty-icon {
    font-size: 4rem;
    color: #ccc;
}

.start-investing-btn {
    background-color: #00164E;
    border-color: #00164E;
}

/* ??? Summary Cards ????????????????????????????????????????????????????????? */

.summary-card {
    border-radius: 10px;
}

.summary-card--primary {
    border-left: 4px solid #00164E;
}

.summary-card--success {
    border-left: 4px solid #28a745;
}

.summary-value {
    color: #00164E;
}

/* ??? Section Cards (Chart + Table wrappers) ???????????????????????????????? */

.section-card {
    border-radius: 10px;
}

.section-title {
    color: #00164E;
}

/* ??? Chart ????????????????????????????????????????????????????????????????? */

.chart-loading {
    height: 400px;
}

.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ??? Holdings Table ???????????????????????????????????????????????????????? */

.holdings-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .holdings-table .mud-table-container {
        border-radius: 12px;
    }

    .holdings-table .mud-table-head {
        background-color: #f8f9fa;
    }

    .holdings-table .mud-table-cell {
        border-bottom: 1px solid #e9ecef;
    }

/* ??? Table Header Cells ???????????????????????????????????????????????????? */

.th-watched,
.th-default,
.th-right,
.th-center {
    font-weight: 600;
    color: #00164E;
    background-color: #f8f9fa;
    padding: 16px;
}

.th-watched {
    width: 60px;
}

.th-right {
    text-align: right;
}

.th-center {
    text-align: center;
}

/* Table Data Cells */

.td-default {
    padding: 16px;
}

.td-instrument {
    padding: 16px;
    min-width: 180px;
}

.td-right {
    padding: 16px;
    text-align: right;
}

.td-value {
    padding: 16px;
    text-align: right;
    font-weight: 600;
    color: #00164E;
}

.td-center {
    padding: 16px;
    text-align: center;
}

.th-actions,
.td-actions {
    width: 260px;
    text-align: center;
}

    .th-actions .mud-table-sort-label {
        width: 100%;
        justify-content: center;
    }

/* ??? Instrument Link ??????????????????????????????????????????????????????? */

.instrument-link {
    color: #00164E;
    cursor: pointer;
}

/* ??? Badges ???????????????????????????????????????????????????????????????? */

.code-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    background-color: #e3f2fd;
    color: #1976d2;
}

.percentage-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    background-color: #e8f5e9;
    color: #388e3c;
}

/* Status Badges */

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.badge-pending {
    background-color: #fff8e1;
    color: #f59f00;
}

.badge-submitted {
    background-color: #e3f2fd;
    color: #1976d2;
}

.badge-completed {
    background-color: #e8f5e9;
    color: #388e3c;
}

.badge-cancelled {
    background-color: #fdecea;
    color: #d32f2f;
}

.badge-default {
    background-color: #f1f3f5;
    color: #6c757d;
}

/* Action Button */

.action-btn {
    border-radius: 8px;
}

/* ??? Additions for Orders page ????????????????????????????????????????????? */

/* Tab navigation */
.tab-link-active {
    border-bottom: 3px solid #00164E;
    color: #00164E;
    font-weight: bold;
}

.tab-link-inactive {
    color: #6c757d;
}

/* Disabled input fields in modal forms */
.input-disabled {
    background-color: #e9ecef;
}

/* Primary action button (modal save/place) */
.btn-primary-dark {
    background-color: #00164E;
}

/* Executed trades card link */
.view-details-link {
    text-decoration: none;
}

/* Fixed-size order modal */
.fixed-order-modal {
    width: 900px !important;
    max-width: 900px !important;
}

    .fixed-order-modal .mud-overlay {
        backdrop-filter: blur(2px);
    }

/* Nav tab */
.nav-link {
    border: none;
    padding: 1rem 1.5rem;
}

/* Modal icon accent */
.modal-icon-wrap {
    background-color: rgba(183, 143, 46, 0.1);
}

.modal-icon {
    color: #00164E;
    font-size: 1.2rem;
}

/* Modal title */
.modal-title {
    color: #00164E;
}

/* Modal form card */
.modal-form-card {
    background-color: #f9f9f9;
    border-radius: 8px;
}

/* Executed trades card clickable */
.card-clickable {
    cursor: pointer;
}

/* MudChips */
.td-default .mud-chip {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    height: auto;
}

    .td-default .mud-chip .mud-chip-content {
        padding: 0;
    }

/* Mobile alignment */
.mobile-hide .mud-chip {
    justify-content: center;
}


/* ??? Funds Marketplace Sidebar ????????????????????????????????????????????? */

.sidebar-sticky {
    position: sticky;
    top: 20px;
}

.sidebar-scroll {
    max-height: 600px;
    overflow-y: auto;
}

.sidebar-item-active {
    background-color: #00164E !important;
    color: white !important;
    border-radius: 6px;
    margin: 2px 0;
}

    .sidebar-item-active span {
        color: white !important;
    }

    .sidebar-item-active .badge {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
    }

.list-group-item {
    cursor: pointer;
}

/* ==========================================================================
   STANDARD BANK UI UX BRANDING DESIGN SYSTEM STYLES
   ========================================================================== */

/* 1. Page titles and headers */
.page-title {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #0F172A !important;
}

/* 2. Main sections, card headers, and headings */
.main-section-header {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #0F172A !important;
    border-bottom: 1px solid #E2E8F0 !important;
    margin: 20px 0 14px 0 !important;
    padding-bottom: 10px !important;
}

.sub-section-header {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #0F172A !important;
    font-weight: 400 !important;
    border-left: 4px solid #2F4BD8 !important;
}

/* 3. Form fields and inputs (Flat thin border #D8DEE6, 12px radius, 44px height, zero elevation) */
.mud-input-outlined .mud-input-notched-outline {
    border-color: #D8DEE6 !important;
    border-width: 1px !important;
}

.mud-input-outlined {
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.mud-input-outlined:hover .mud-input-notched-outline {
    border-color: #94A3B8 !important;
}

.mud-input-outlined.mud-focused .mud-input-notched-outline {
    border-color: #2F4BD8 !important;
    border-width: 1.5px !important;
}

.mud-input-slot,
.mud-select-trigger {
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid #D8DEE6 !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    color: #0F172A !important;
}

textarea.mud-input-slot {
    height: auto !important;
    min-height: 80px !important;
}

.mud-input-slot:hover:not(:focus),
.mud-select-trigger:hover:not(:focus) {
    border-color: #94A3B8 !important;
    box-shadow: none !important;
}

.mud-input-slot:focus,
.mud-select-trigger:focus {
    border-color: #2F4BD8 !important;
    box-shadow: 0 0 0 2px rgba(47, 75, 216, 0.12) !important;
}

.mud-input-slot::placeholder {
    font-size: 14px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    color: #64748B !important;
    opacity: 1 !important;
}

/* Uniform Capitalised Small Form Field Labels Across the System */
.form-label,
.field-label,
.mud-input-label,
.rnam-form-label,
.no-label,
.sr-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #1E293B !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.mud-input-outlined.mud-focused .mud-input-label {
    color: #2F4BD8 !important;
}

/* 4. Action Buttons (NEXT/SAVE & CONTINUE/FINISH) */
[style*="#008545"] {
    background-color: #2F4BD8 !important;
    background: #2F4BD8 !important;
    color: #FFFFFF !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

[style*="#008545"]:hover {
    background-color: #233BB8 !important;
    background: #233BB8 !important;
}

/* 5. Back Navigation Buttons */
.row.mt-4 .d-flex button[style*="#00164E"],
.row.mt-5 .d-flex button[style*="#00164E"],
.mt-4 .d-flex button[style*="#00164E"],
.mt-5 .d-flex button[style*="#00164E"] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0B1F5C !important;
    border: 1.5px solid #2F4BD8 !important;
    border-radius: 12px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}

.row.mt-4 .d-flex button[style*="#00164E"] .mud-button-icon-start,
.row.mt-5 .d-flex button[style*="#00164E"] .mud-button-icon-start,
.mt-4 .d-flex button[style*="#00164E"] .mud-button-icon-start,
.mt-5 .d-flex button[style*="#00164E"] .mud-button-icon-start {
    color: #0B1F5C !important;
}

.row.mt-4 .d-flex button[style*="#00164E"]:hover,
.row.mt-5 .d-flex button[style*="#00164E"]:hover,
.mt-4 .d-flex button[style*="#00164E"]:hover,
.mt-5 .d-flex button[style*="#00164E"]:hover {
    background-color: #EEF2FF !important;
    background: #EEF2FF !important;
    color: #2F4BD8 !important;
    border-color: #2F4BD8 !important;
}

/* ========================================
   BRAND SPECIFIC STYLE GUIDE OVERRIDES
   ======================================== */

/* 1. Global Font and Typography Weight mappings */
:root {
    --bs-font-sans-serif: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    --md-typography-font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #0F172A;
    font-size: 14px;
    font-weight: 400;
}

.mud-typography-body1, .mud-typography-body2 {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
}

/* Ensure meta labels in bank summary are small, uppercase and gray */
.sbg-bank-meta-item label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748B !important;
}

/* 2. Page Headings (Regular 400) */
.page-title, .main-section-header {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #0F172A;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* 3. Steps (1–7) / Progress Stepper styling (Medium 500) */
.step-circle.current, .step-circle.completed, .sbg-step-dot.active, .sbg-step-dot.done {
    background: #2F4BD8 !important;
    background-color: #2F4BD8 !important;
    border: none !important;
}

.step-circle.current .step-number, .step-circle.completed .step-number {
    color: #FFFFFF !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 14px !important;
}

.step-circle.pending, .sbg-step-dot.pending {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #D8DEE6 !important;
}

.step-circle.pending .step-number {
    color: #1E293B !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 14px !important;
}

/* Connector lines */
.step-connector, .step-connector.pending, .sbg-step-connector {
    background: #D8DEE6 !important;
    background-color: #D8DEE6 !important;
}

.step-connector.completed, .sbg-step-connector.done {
    background: #2F4BD8 !important;
    background-color: #2F4BD8 !important;
}

/* 4. Form Fields styling */
.mud-input-outlined .mud-input-notched-outline {
    border-color: #D8DEE6 !important;
    border-width: 1px !important;
}

.mud-input-outlined.mud-input-focused .mud-input-notched-outline {
    border-color: #2F4BD8 !important;
    border-width: 1.5px !important;
}

input, select, textarea, .mud-input-slot {
    background-color: #FFFFFF !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important; /* Regular */
}

/* Form field placeholder text (Regular 400, 14px) */
input::placeholder, textarea::placeholder, .mud-input-input::placeholder {
    color: #64748B !important;
    font-size: 14px !important;
    font-weight: 400 !important; /* Regular */
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Phone prefix styling (Medium 500) */
.phone-prefix, .iti__selected-dial-code {
    color: #0B1F5C !important;
    font-size: 14px !important;
    font-weight: 500 !important; /* Medium */
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Phone input flat thin border matching MudTextField */
.phone-input,
.iti input[type="tel"] {
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid #D8DEE6 !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    color: #0F172A !important;
}

.phone-input:hover:not(:focus),
.iti input[type="tel"]:hover:not(:focus) {
    border-color: #94A3B8 !important;
}

.phone-input:focus,
.iti input[type="tel"]:focus {
    border: 1.5px solid #2F4BD8 !important;
    box-shadow: 0 0 0 2px rgba(47, 75, 216, 0.12) !important;
    outline: none !important;
}

/* Dropdown arrow icon */
.mud-select-toggle-icon, .iti__arrow {
    color: #64748B !important;
    fill: #64748B !important;
}

/* Fix MudBlazor button labels/icons inheriting incorrect global span colors */
.mud-button .mud-button-label,
.mud-button .mud-button-icon-start,
.mud-button .mud-button-icon-end,
.mud-button .mud-icon-root,
.mud-button span,
.mud-button i,
.btn span,
.btn i {
    color: inherit !important;
}

/* 5. Navigation Buttons styling (Bold 700, Uppercase) */
button.btn-primary,
.mud-button-filled.mud-button-filled-primary,
button[style*="#008545"],
button[style*="background-color: #008545"],
button[style*="background-color:#008545"] {
    background-color: #2F4BD8 !important;
    background: #2F4BD8 !important;
    color: #FFFFFF !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 12px !important;
    border: none !important;
}

/* Back button border & text */
button[style*="#00164E"],
button[style*="background-color: #00164E"],
button[style*="background-color:#00164E"],
button.mud-button-outlined,
.btn-cancel-profile {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0B1F5C !important;
    border: 1.5px solid #2F4BD8 !important;
    border-radius: 12px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}

.btn-edit-profile,
.btn-save-profile {
    background-color: #2F4BD8 !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 12px rgba(47, 75, 216, 0.22) !important;
}

.field-value {
    font-family: 'Benton Sans Pro', 'BentonSans', 'Roboto', 'Segoe UI', 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #0F172A !important;
    background: #F8FAFC !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid #D8DEE6 !important;
    min-height: 44px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

/* 6. Card & Modal Borders (Flat thin border, no heavy shadow) */
.timeline-container, 
.card,
.form-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* Compact row spacing inside KYC and Profile form cards */
.form-card .row.mt-3,
.form-card .row.mt-4,
.kyc-form-wrap .row.mt-3 {
    margin-top: 8px !important;
}

.form-card .col-sm-3,
.form-card .col-sm-4,
.form-card .col-sm-6,
.form-card .col-sm-12 {
    margin-bottom: 4px !important;
}

/* 7. Background Gradient */
.container-fluid.py-4 {
    background: #FFFFFF !important;
    min-height: 100vh;
}

/* ==========================================================================
   SBG KYC INPUT FIELDS & TEXTFIELDS CUSTOM STYLING
   ========================================================================== */

.mud-input-control-input-container {
    position: relative !important;
}

.mud-input-label-outlined {
    transform: translate(12px, -7px) scale(0.75) !important;
    transform-origin: top left !important;
    background-color: #FFFFFF !important;
    padding: 0 6px !important;
    z-index: 10 !important;
    color: #1E293B !important;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

.mud-input-outlined-border-legend {
    display: none !important;
}

.mud-input-outlined.mud-input-focus ~ .mud-input-label-outlined,
.mud-input-control-input-container:focus-within .mud-input-label-outlined {
    color: #2F4BD8 !important;
    font-weight: 600 !important;
}

.mud-input-outlined-border {
    border: 1px solid #D8DEE6 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-width 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mud-input-outlined:hover:not(.mud-input-focus) .mud-input-outlined-border {
    border-color: #94A3B8 !important;
}

.mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: #2F4BD8 !important;
    border-width: 1.5px !important;
}

.mud-input-adornment-end {
    margin-left: 0 !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.mud-select .mud-input-slot {
    padding-right: 36px !important;
}

.mud-input-adornment-end .mud-icon-button {
    padding: 4px !important;
}

/* =========================================================
   GLOBAL FIX: MudAutocomplete / MudSelect popover positioning
   ========================================================= */

.mud-popover-provider {
    z-index: 99999 !important;
    position: fixed !important;
}

.mud-popover {
    position: fixed !important;
    z-index: 99999 !important;
}

.mud-autocomplete-popover,
.mud-select-popover {
    z-index: 99999 !important;
}

.mud-dialog-container {
    z-index: 2500 !important;
}

.mud-overlay {
    z-index: 2490 !important;
}

.mud-popover-overflow-y-auto,
.mud-popover-paper {
    overflow-y: auto !important;
    max-height: 380px;
}
/* =========================================================
   GLOBAL & KYC DROPDOWN / AUTOCOMPLETE TEXT WRAPPING
   Ensures long options wrap cleanly and are fully readable
   ========================================================= */

.mud-autocomplete-popover,
.mud-select-popover,
.mud-popover:has(.mud-list) {
    min-width: 100% !important;
    max-width: min(94vw, 560px) !important;
}

.mud-autocomplete-popover .mud-popover-paper,
.mud-select-popover .mud-popover-paper,
.mud-popover:has(.mud-list) .mud-popover-paper,
.mud-popover-overflow-y-auto {
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
}

.mud-popover .mud-list,
.mud-autocomplete-popover .mud-list,
.mud-select-popover .mud-list {
    padding: 4px !important;
}

.mud-popover .mud-list-item,
.mud-autocomplete-popover .mud-list-item,
.mud-select-popover .mud-list-item {
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    align-items: center !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
}

.mud-popover .mud-list-item:not(:last-child),
.mud-autocomplete-popover .mud-list-item:not(:last-child),
.mud-select-popover .mud-list-item:not(:last-child) {
    border-bottom: 1px solid #F1F5F9 !important;
}

.mud-popover .mud-list-item-text,
.mud-autocomplete-popover .mud-list-item-text,
.mud-select-popover .mud-list-item-text,
.mud-popover .mud-list-item .mud-typography,
.mud-autocomplete-popover .mud-list-item .mud-typography,
.mud-select-popover .mud-list-item .mud-typography,
.mud-popover .mud-list-item-text * {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-overflow: unset !important;
    overflow: visible !important;
    line-height: 1.45 !important;
    font-size: 13.5px !important;
}

.mud-popover .mud-list-item:hover,
.mud-autocomplete-popover .mud-list-item:hover,
.mud-select-popover .mud-list-item:hover {
    background-color: #F8FAFC !important;
}

.mud-popover .mud-list-item.mud-selected-item,
.mud-autocomplete-popover .mud-list-item.mud-selected-item,
.mud-select-popover .mud-list-item.mud-selected-item {
    background-color: #EFF6FF !important;
    color: #0A5FD8 !important;
    font-weight: 600 !important;
}

/* Native Select Elements & Options Text Wrapping */
select,
.kyc-select,
.custom-select,
.admin-modal-select,
.form-select,
.no-select {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

select option,
.kyc-select option,
.custom-select option,
.admin-modal-select option,
.form-select option,
.no-select option {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
    font-size: 13.5px !important;
}

/* Phone Country Dropdown Text Wrapping */
.iti__country {
    white-space: normal !important;
    word-break: break-word !important;
}
.iti__country-name {
    white-space: normal !important;
}

.mud-card,
.mud-paper,
.kyc-form-wrap,
.form-card {
    overflow: visible !important;
}

.mud-card > .mud-card-content,
.mud-card > div {
    overflow: visible !important;
}

/* --- New Order Custom Modal --- */
.no-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center;
    z-index: 10000; padding: 16px; backdrop-filter: blur(2px);
}
.no-modal {
    background: white; border-radius: 20px; width: 100%; max-width: 480px;
    padding: 24px; border: 1px solid #E2E8F0; box-shadow: 0 20px 40px rgba(0, 4, 32, 0.12);
    display: flex; flex-direction: column; gap: 16px;
    max-height: 90vh; overflow-y: auto; overflow-x: hidden;
}
.no-modal-header { display: flex; justify-content: space-between; align-items: center; }
.no-title { font-size: 18px; font-weight: 700; color: #0F172A; margin: 0; }
.no-close { width: 32px; height: 32px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748B; font-size: 20px; border-radius: 8px; transition: 0.15s; }
.no-close:hover { background: #F1F5F9; color: #0F172A; }

.no-segment { display: flex; background: #F1F5F9; border-radius: 12px; padding: 4px; gap: 4px; }
.no-seg-btn { flex: 1; padding: 8px 12px; border: none; background: transparent; font-size: 13.5px; font-weight: 700; cursor: pointer; color: #475569; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; transition: 0.18s; }
.no-seg-btn.buy.active { background: #4E9B6F !important; color: white !important; }
.no-seg-btn.sell.active { background: #E11D48 !important; color: white !important; }

.no-bal-banner { display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; border: 1px solid #E2E8F0; padding: 10px 14px; border-radius: 12px; }
.no-bal-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; }
.no-bal-label i { color: #64748B; }
.no-bal-value { font-size: 14px; font-weight: 700; color: #0F172A; }

.no-row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.no-row-qty-price { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.no-field { display: flex; flex-direction: column; gap: 4px; }
.no-label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #475569 !important; }
.no-select, .no-input { width: 100%; height: 42px; border: 1px solid #D8DEE6; border-radius: 10px; padding: 0 12px; font-size: 13.5px; color: #0F172A; background: white; outline: none; transition: 0.18s; }
.no-select:focus, .no-input:focus { border-color: #2F4BD8; box-shadow: 0 0 0 2px rgba(47, 75, 216, 0.12); }
.no-select:disabled, .no-input:disabled { background: #F8FAFC; color: #64748B; }

.no-hint { font-size: 11.5px; color: #64748B; margin-top: 2px; }

.no-order-type { display: inline-flex; background: #F1F5F9; border-radius: 10px; padding: 3px; width: fit-content; gap: 2px; }
.no-ot-btn { padding: 6px 16px; border: none; background: transparent; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #64748B; border-radius: 8px; transition: 0.18s; }
.no-ot-btn.active { background: #FFFFFF; color: #0F172A; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.no-input-wrapper { position: relative; }
.no-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #EEF2FF; color: #2F4BD8; font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 600; }

.no-summary { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.no-sum-row { display: flex; justify-content: space-between; font-size: 13px; color: #475569; }
.no-sum-val { color: #0F172A; font-weight: 500; }
.no-sum-total { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 700; color: #0F172A; margin-top: 4px; padding-top: 8px; border-top: 1px solid #E2E8F0; }
.no-sum-total .val { color: #2F4BD8; }

.no-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.no-cancel { flex: 1; height: 42px; padding: 0 16px; background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #0F172A; cursor: pointer; text-align: center; transition: 0.15s; }
.no-cancel:hover { background: #F1F5F9; }
.no-submit { flex: 2; height: 42px; padding: 0 16px; border-radius: 10px; border: none; color: white; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: center; transition: 0.18s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.no-submit.btn-buy { background: #4E9B6F !important; }
.no-submit.btn-buy:hover:not(:disabled) { background: #3D8B5F !important; }
.no-submit.btn-sell { background: #E11D48 !important; }
.no-submit.btn-sell:hover:not(:disabled) { background: #BE123C !important; }
.no-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Responsive adjustments (Bottom Sheet on Mobile) */
@media (max-width: 767px) {
    .mud-overlay { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; }
    .no-modal {
        position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
        max-width: 100% !important; width: 100% !important; border-radius: 24px 24px 0 0 !important;
        max-height: 88vh !important; margin: 0 !important; padding: 12px 18px 24px 18px !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15) !important;
        animation: sheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .no-drag-handle { width: 36px; height: 4px; background: #CBD5E1; border-radius: 2px; margin: 0 auto 10px auto; }
    .no-row-fields { grid-template-columns: 1fr; gap: 12px; }
    .no-row-qty-price { grid-template-columns: 1fr 1fr; gap: 12px; }
    .no-actions { flex-direction: row; gap: 10px; }
}
@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────
   REQUIRED FIELD ASTERISKS 
   Adds a red asterisk dynamically for required fields.
   Driven by data-req="true" on MudBlazor controls.
───────────────────────────────────────────────────────────── */
.mud-input-control:has([data-req="true"]) .mud-input-label::after,
div:has(> [data-req="true"]) .mud-switch-label::after,
div:has(> [data-req="true"]) .mud-radio-label::after,
div:has(> [data-req="true"]) .mud-checkbox-label::after {
    content: " *";
    color: #ef4444 !important; /* Vivid red for visibility */
    font-weight: bold;
}

.admin-modal-required,
.view-modal-required {
    color: #ef4444 !important; /* Vivid red for visibility */
    font-weight: bold;
}

.admin-btn-primary:disabled {
    background-color: #668cff !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
}

/* Global fix for primary buttons text color and casing */
.admin-btn-primary, .btn-new-nok, .form-save-btn {
    color: #ffffff !important;
    text-transform: uppercase !important;
}

/* ============================================================
   GLOBAL: Force MudBlazor Required asterisk to be red
   Overrides the default gray/inherited color on .mud-required-text
   ============================================================ */
.mud-required-text,
.mud-input-label .mud-required-text,
.mud-input-label-text .mud-required-text,
.mud-input-label-outlined .mud-required-text,
.mud-input-label-required .mud-required-text,
label.mud-input-label > span.mud-required-text,
label.mud-input-label-inputcontrol > span.mud-required-text,
.mud-input-label.mud-input-label-required::after {
    color: #dc2626 !important;
    font-weight: 700;
}

/* ============================================================
   LIGHTWEIGHT INTERACTIVE & TACTILE TRANSITIONS
   Provides instant visual feedback and smooth micro-interactions
   ============================================================ */
.db-card, .db-kpi-tile, .stm-card, .mud-card {
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.db-card:hover, .db-kpi-tile:hover {
    box-shadow: 0 4px 14px rgba(0, 22, 78, 0.05);
}

.mud-button-root:active, .db-btn-primary:active, .db-btn-outline:active {
    transform: scale(0.985);
}

.mud-tabs-panels {
    transition: opacity 0.15s ease-in-out;
}


/* ==========================================================================
   GLOBAL MOBILE RESPONSIVENESS ENHANCEMENTS
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent the 4-column squishing trap on tablets & landscape phones */
    .col-sm-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-sm-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Global responsive table scrolling */
    .table-responsive-wrapper,
    .mud-table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 600px) {
    /* Ensure MudDialogs are comfortable and fit within mobile screens */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        margin: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 48px) !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .mud-dialog-title {
        padding: 16px 20px 12px !important;
        flex-shrink: 0 !important;
    }
    
    .mud-dialog-content {
        padding: 12px 16px 16px !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mud-dialog-actions {
        padding: 12px 16px 16px !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    .mud-dialog-actions > * {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Single column modal form grids */
    .sr-form-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Bank deposit inflow grid stack */
    .dep-inflow-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* KYC Stepper mobile compactness */
    .sbg-stepper {
        padding: 12px 14px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .sbg-step-label {
        font-size: 0.62rem !important;
    }
    .sbg-step-dot {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.72rem !important;
    }
    .sbg-step-connector {
        min-width: 8px !important;
        margin-bottom: 14px !important;
    }
    .main-section-header {
        font-size: 1.05rem !important;
        margin: 20px 0 14px 0 !important;
    }
    .sub-section-header {
        font-size: 0.9rem !important;
    }
}


/* ==========================================================================
   GLOBAL LOADING SHIMMER & SKELETON STYLES
   ========================================================================== */
@keyframes sbg-shimmer-wave {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.sk-shimmer {
    background: linear-gradient(90deg, #E2E8F0 0%, #EDF2F7 35%, #F8FAFC 50%, #EDF2F7 65%, #E2E8F0 100%);
    background-size: 200% 100%;
    animation: sbg-shimmer-wave 1.6s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
}

.sk-shimmer-light {
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.12) 100%);
    background-size: 200% 100%;
    animation: sbg-shimmer-wave 1.6s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
}

.sk-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 20px;
}

.sk-kpi {
    background: #ffffff;
    border: 1px solid rgba(0, 22, 78, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 125px;
    box-shadow: 0 4px 15px rgba(0, 22, 78, 0.02);
}

.sk-kpi-primary {
    background: linear-gradient(135deg, #0033AA 0%, #0051FF 100%);
    border: none;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 125px;
    box-shadow: 0 8px 30px rgba(0, 51, 170, 0.25);
}

.dark .sk-shimmer {
    background: linear-gradient(90deg, #1E293B 0%, #334155 35%, #475569 50%, #334155 65%, #1E293B 100%);
    background-size: 200% 100%;
}

.dark .sk-card,
.dark .sk-kpi {
    background: #0f172a;
    border-color: #1e293b;
}


/* =========================================================================
   GLOBAL PILL NAVIGATION TABS (Digital Storm & Stanbic Theme)
   ========================================================================= */
.ds-nav-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #E2E8F0 !important;
    border: 1px solid rgba(203, 213, 225, 0.7) !important;
    border-radius: 14px !important;
    padding: 5px !important;
    margin-top: 6px !important;
    margin-bottom: 22px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: fit-content !important;
    max-width: 100% !important;
}
.ds-nav-tabs::-webkit-scrollbar {
    display: none !important;
}
.ds-nav-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    text-transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}
.ds-nav-tab:hover {
    color: #0F172A !important;
    background: rgba(255, 255, 255, 0.45) !important;
}
.ds-nav-tab.active {
    color: #0F172A !important;
    font-weight: 700 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    border-bottom: none !important;
}
.ds-tab-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 0 6px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #CBD5E1 !important;
    color: #334155 !important;
    border: none !important;
    transition: all 0.18s ease-in-out !important;
}
.ds-tab-badge.active,
.ds-nav-tab.active .ds-tab-badge {
    background: #E0E7FF !important;
    color: #2F4BD8 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================================================
   DEDICATED MOBILE APP EXPERIENCE (< 992px)
   Exact desktop visual design adapted naturally for mobile screens
   ========================================================================= */

@media (max-width: 991.98px) {
    /* --- NAVBAR --- */
    .sbg-navbar {
        height: 68px !important;
        padding: 0 20px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background-color: #FFFFFF !important;
        border-bottom: 1px solid #EDF2F7 !important;
    }

    .sbg-logo-img {
        height: 42px !important;
        object-fit: contain !important;
    }

    .sbg-nav-links, .sbg-nav-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
        font-size: 1.45rem !important;
        color: #1E293B !important;
        cursor: pointer !important;
    }

    /* Sub-nav Tab Switcher (Removed per user request) */
    .sbg-mobile-tabs-bar {
        display: none !important;
    }

    /* Mobile Drawer */
    .mobile-drawer {
        top: 68px !important;
        padding: 24px 20px !important;
        background-color: #FFFFFF !important;
        z-index: 99 !important;
    }

    .mobile-nav-link {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #1E293B !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #F1F5F9 !important;
    }

    .mobile-nav-link.active {
        color: #2563EB !important;
    }

    /* --- HERO FULL BANNER (Home Tab) --- */
    .hero-full-banner {
        width: 100% !important;
        min-height: 420px !important;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 100%), url('/Images/Building.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .hero-banner-content {
        max-width: 100% !important;
        padding: 48px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .hero-headline {
        font-size: 2.1rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        color: #FFFFFF !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .hero-description {
        font-size: 0.98rem !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;
        color: #FFFFFF !important;
        margin-bottom: 28px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    .hero-btn-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-btn-primary {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        background-color: #2563EB !important;
        color: #FFFFFF !important;
        border: none !important;
        padding: 12px 10px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }

    .hero-btn-secondary {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        background-color: transparent !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
        padding: 10px 10px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    /* --- BANNER HERO (Unit Trust & Securities) --- */
    .banner-hero-container {
        padding: 36px 24px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }

    .banner-hero-left {
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }

    .banner-hero-title {
        font-size: 2.0rem !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
        line-height: 1.15 !important;
        color: #FFFFFF !important;
    }

    .banner-hero-divider {
        display: none !important;
    }

    .banner-hero-right {
        padding-left: 0 !important;
        width: 100% !important;
    }

    .banner-hero-text {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
        color: #FFFFFF !important;
    }

    /* --- CONTENT SECTIONS --- */
    .sbg-section {
        padding: 44px 20px 60px 20px !important;
    }

    .section-header {
        text-align: center !important;
        margin-bottom: 32px !important;
    }

    .section-title {
        font-size: 1.85rem !important;
        font-weight: 700 !important;
        color: #1E293B !important;
        margin-bottom: 8px !important;
    }

    .section-subtitle {
        font-size: 1.0rem !important;
        color: #475569 !important;
        font-weight: 400 !important;
    }

    /* --- OFFERINGS CARDS (Identical to Desktop, stacked) --- */
    .offerings-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .offering-card {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 16px !important;
        padding: 32px 24px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    }

    .card-icon-box {
        width: 52px !important;
        height: 52px !important;
        background-color: var(--sbg-icon-bg) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--sbg-icon-color) !important;
        font-size: 1.55rem !important;
        margin-bottom: 20px !important;
    }

    .offering-title {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: #1E3A8A !important;
        margin-bottom: 8px !important;
    }

    .offering-accent-line {
        width: 44px !important;
        height: 3px !important;
        background-color: #2563EB !important;
        border-radius: 2px !important;
        margin-bottom: 18px !important;
    }

    .offering-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .offering-item-text {
        font-size: 1.05rem !important;
        color: #334155 !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        padding: 2px 0 !important;
        transition: color 0.15s ease !important;
    }

    .offering-item-text:hover {
        color: #2563EB !important;
    }

    /* --- PRODUCT CARDS (Identical to Desktop, with top blue accent bar) --- */
    .products-grid-4, .products-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .product-card {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-top: 4px solid #2563EB !important;
        border-radius: 12px !important;
        padding: 30px 22px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    }

    .product-title {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        margin-bottom: 12px !important;
        line-height: 1.35 !important;
    }

    .product-description {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        color: #475569 !important;
        margin-bottom: 22px !important;
    }

    .product-bullets {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .product-bullet-item {
        font-size: 0.90rem !important;
        color: #334155 !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 8px !important;
    }

    .product-bullet-item::before {
        content: "•" !important;
        color: #1E293B !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
    }

    /* --- FOOTER (Identical to Desktop, natural layout) --- */
    .sbg-footer {
        background-color: var(--sbg-footer) !important;
        color: #FFFFFF !important;
        padding: 38px 24px 44px 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .footer-heading {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        margin-bottom: 14px !important;
        color: #FFFFFF !important;
    }

    .footer-contacts {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .footer-contact-item {
        font-size: 0.95rem !important;
        color: #FFFFFF !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }

    .footer-contact-item:hover {
        text-decoration: underline !important;
    }

    .footer-disclaimer {
        font-size: 0.84rem !important;
        color: #FFFFFF !important;
        opacity: 0.92 !important;
        line-height: 1.55 !important;
    }

    /* --- LOGIN & REGISTRATION MOBILE BEHAVIOUR --- */
    html, body {
        overflow-y: auto !important;
        height: auto !important;
    }

    .login-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        min-height: 100vh !important;
        height: auto !important;
        padding: 0 16px 40px 16px !important;
        background-color: #F8FAFC !important;
        overflow-y: auto !important;
    }

    .login-left-side {
        display: none !important;
    }

    .login-right-side {
        flex: 1 !important;
        width: 100% !important;
        max-width: 460px !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        background: transparent !important;
        overflow-y: visible !important;
    }

    .dark .login-right-side {
        background: transparent !important;
    }

    .login-header {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 16px 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    .landing-logo {
        display: none !important;
    }

    .mobile-back-btn {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #0051FF !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 15px !important;
    }

    .landing-nav {
        display: none !important;
    }

    .login-form-side {
        width: 100% !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 20px !important;
        padding: 24px 20px !important;
        margin-top: 0 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    }

    .login-card-header {
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .login-title-premium {
        font-size: 1.55rem !important;
        font-weight: 800 !important;
        color: #0F172A !important;
        margin-bottom: 6px !important;
    }

    .login-subtitle-premium {
        font-size: 0.86rem !important;
        color: #64748B !important;
        line-height: 1.4 !important;
    }

    .reg-form-cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .reg-col {
        width: 100% !important;
    }

    .mud-input-control .mud-input > input {
        font-size: 16px !important;
        color: #1E293B !important;
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
    }

    .login-button-mud {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        background: #0051FF !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(0, 81, 255, 0.25) !important;
        transition: transform 0.1s ease !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }

    .login-button-mud-secondary {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0051FF !important;
        border: 1.5px solid #0051FF !important;
        background: transparent !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }

    .login-button-mud:active, .login-button-mud-secondary:active {
        transform: scale(0.97) !important;
    }

    .login-card, .registration-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .right-glow-blob {
        display: none !important;
    }

    /* ═════════════════════════════════════════════════════════════════
       DASHBOARD MOBILE EXPERIENCE (max-width: 991.98px)
       Preserves 100% authentic desktop information & calculations.
       Optimizes layout, touch targets, and visual rhythm for smartphones.
       ═════════════════════════════════════════════════════════════════ */

    .db-page {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 24px !important;
    }

    /* Unified Grid layout stacking on mobile */
    .db-unified-grid {
        padding: 16px 14px 20px !important;
        gap: 14px !important;
    }

    .db-unified-brokerage {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "greeting"
            "actions"
            "kpis-right"
            "kpis-left"
            "main-left"
            "main-right" !important;
    }

    .db-unified-asset {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "greeting"
            "actions" !important;
    }

    /* Mobile Header & Greeting */
    .db-header {
        padding: 16px 14px 12px !important;
    }

    .db-header-greeting {
        width: 100% !important;
    }

    .db-greeting-date {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
        margin-bottom: 2px !important;
    }

    .db-greeting-title {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 2px !important;
    }

    .db-greeting-sub {
        font-size: 0.82rem !important;
        color: #64748B !important;
    }

    /* Mobile Header Actions */
    .db-header-actions {
        display: flex !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    .db-header-actions-left {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .db-btn-primary {
        flex: 1 1 auto !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .db-btn-icon-mobile {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    .db-btn-request-account {
        width: 100% !important;
        flex: 1 1 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 16px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .db-btn-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Pill Navigation Tabs — Mobile (Digital Storm style) */
    .ds-nav-tabs {
        display: inline-flex !important;
        gap: 4px !important;
        background: #E2E8F0 !important;
        border: 1px solid rgba(203, 213, 225, 0.7) !important;
        border-radius: 12px !important;
        padding: 4px !important;
        margin-top: 4px !important;
        margin-bottom: 16px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: fit-content !important;
        max-width: 100% !important;
    }
    .ds-nav-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .ds-nav-tab {
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        transition: all 0.15s ease-in-out !important;
        text-decoration: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }
    .ds-nav-tab:hover {
        color: #0F172A !important;
        background: rgba(255, 255, 255, 0.45) !important;
    }
    .ds-nav-tab.active {
        color: #0F172A !important;
        font-weight: 700 !important;
        background: #FFFFFF !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
        border-bottom: none !important;
    }
    .ds-tab-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 18px !important;
        min-width: 18px !important;
        padding: 0 5px !important;
        border-radius: 9999px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        background: #CBD5E1 !important;
        color: #334155 !important;
        border: none !important;
        transition: all 0.15s ease-in-out !important;
    }
    .ds-tab-badge.active,
    .ds-nav-tab.active .ds-tab-badge {
        background: #E0E7FF !important;
        color: #2F4BD8 !important;
    }

    /* Currency Tabs — Flat WhatsApp / Material Style */
    .myfunds-top-tabs {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }

    .myfunds-top-tabs .mud-tabs-toolbar {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        border-radius: 0 !important;
        border-bottom: 2px solid #E2E8F0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        min-height: 46px !important;
        overflow-x: hidden !important;
    }

    .myfunds-top-tabs .mud-tabs-scroll-button {
        display: none !important;
    }

    .myfunds-top-tabs .mud-tabs-toolbar-inner {
        width: 100% !important;
        display: flex !important;
        gap: 0 !important;
    }

    .myfunds-top-tabs .mud-tab {
        flex: 1 1 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: unset !important;
        padding: 12px 8px !important;
        border-radius: 0 !important;
        font-weight: 600 !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.4px !important;
        color: #64748B !important;
        text-transform: uppercase !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .myfunds-top-tabs .mud-tab.mud-tab-active {
        background: transparent !important;
        background-color: transparent !important;
        color: #0033AA !important;
        font-weight: 800 !important;
        box-shadow: none !important;
        border-bottom: 3px solid #0033AA !important;
    }

    .myfunds-top-tabs .mud-tabs-toolbar .mud-tab-slider {
        display: none !important;
    }

    .myfunds-top-tabs .mud-badge-container {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        gap: 6px !important;
    }

    .myfunds-top-tabs .mud-badge {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 18px !important;
        min-width: 18px !important;
        border-radius: 9px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        background-color: #E2E8F0 !important;
        color: #64748B !important;
        box-shadow: none !important;
        padding: 0 6px !important;
    }

    .myfunds-top-tabs .mud-tab.mud-tab-active .mud-badge {
        background-color: rgba(0, 51, 170, 0.12) !important;
        color: #0033AA !important;
    }

    /* Hero Balance Card (Asset Mode: Current Balance) */
    .kpi-card-inspir.primary-card {
        border-radius: 18px !important;
        padding: 18px 18px 16px !important;
        min-height: 120px !important;
        height: auto !important;
        box-shadow: 0 8px 24px rgba(0, 51, 170, 0.25) !important;
    }

    .kpi-card-inspir.primary-card .kpi-label {
        font-size: 0.72rem !important;
        letter-spacing: 0.4px !important;
        font-weight: 600 !important;
    }

    .kpi-card-inspir.primary-card .kpi-value {
        font-size: 1.65rem !important;
        font-weight: 800 !important;
        margin: 4px 0 !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
    }

    .kpi-card-inspir.primary-card .kpi-value.value-medium {
        font-size: 1.35rem !important;
    }

    .kpi-card-inspir.primary-card .kpi-arrow-circle {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
    }

    .kpi-card-inspir.primary-card .kpi-sub {
        font-size: 0.70rem !important;
        margin-top: 4px !important;
    }

    /* Secondary Metric Cards (Deposits, Withdrawals, Cumulative Interest) */
    .kpi-card-inspir:not(.primary-card) {
        border-radius: 14px !important;
        padding: 14px 16px !important;
        min-height: 94px !important;
        height: auto !important;
        box-shadow: 0 2px 10px rgba(0, 22, 78, 0.03) !important;
    }

    .kpi-card-inspir:not(.primary-card) .kpi-label {
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
    }

    .kpi-card-inspir:not(.primary-card) .kpi-value {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        margin: 2px 0 !important;
        line-height: 1.15 !important;
    }

    .kpi-card-inspir:not(.primary-card) .kpi-value.value-medium {
        font-size: 1.15rem !important;
    }

    .kpi-card-inspir:not(.primary-card) .kpi-arrow-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.80rem !important;
    }

    .kpi-card-inspir:not(.primary-card) .kpi-sub {
        font-size: 0.68rem !important;
        margin-top: 2px !important;
    }

    /* Brokerage Mode Hero STM Card */
    .db-stm-card {
        border-radius: 18px !important;
        padding: 16px 18px !important;
        min-height: 125px !important;
        box-shadow: 0 8px 24px rgba(63, 71, 202, 0.22) !important;
    }

    .stm-value {
        font-size: 1.65rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important;
        line-height: 1.15 !important;
    }

    .stm-header {
        margin-bottom: 4px !important;
    }

    .stm-card-label {
        font-size: 0.68rem !important;
    }

    .stm-live-badge {
        font-size: 0.58rem !important;
        padding: 3px 8px !important;
    }

    .stm-value-row {
        margin: 6px 0 !important;
    }

    /* Brokerage Cash Tiles (Cash Pending Receipt & Available Cash) */
    .db-kpis-left {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .db-kpi-tile {
        border-radius: 14px !important;
        padding: 12px 12px 10px !important;
        min-height: 94px !important;
    }

    .db-kpi-value {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
    }

    .db-kpi-label {
        font-size: 0.64rem !important;
        font-weight: 700 !important;
    }

    .db-kpi-divider-sub {
        font-size: 0.64rem !important;
        margin-top: 4px !important;
    }

    .db-kpi-icon-wrap {
        width: 26px !important;
        height: 26px !important;
        border-radius: 6px !important;
        margin-bottom: 4px !important;
    }

    .db-kpi-icon-wrap i {
        font-size: 0.85rem !important;
    }

    /* Content Cards & Tables */
    .db-card {
        border-radius: 16px !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    }

    .db-card-header {
        padding: 14px 16px 8px !important;
    }

    .db-card-title {
        font-size: 0.72rem !important;
        letter-spacing: 0.5px !important;
    }

    .db-card-subtitle {
        font-size: 0.64rem !important;
    }

    .db-card-body {
        padding: 8px 16px 16px !important;
    }

    .db-view-all {
        font-size: 0.70rem !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }

    /* Donut Chart mobile centering */
    .db-chart-section {
        gap: 10px !important;
        padding: 4px 0 !important;
    }

    .db-chart-wrap {
        width: 190px !important;
        height: 190px !important;
        margin: 0 auto !important;
    }

    .db-chart-center-val {
        font-size: 0.90rem !important;
        font-weight: 800 !important;
    }

    .db-chart-center-lbl {
        font-size: 0.54rem !important;
    }

    .db-chart-legend {
        gap: 4px 8px !important;
        padding-top: 6px !important;
    }

    .db-legend-pill {
        font-size: 0.60rem !important;
    }

    /* Active Holdings List Rows */
    .db-holding-row {
        padding: 9px 6px !important;
        margin: 0 -6px !important;
    }

    .db-holding-name {
        font-size: 0.74rem !important;
        font-weight: 600 !important;
    }

    .db-holding-sub {
        font-size: 0.60rem !important;
    }

    .db-holding-val {
        font-size: 0.74rem !important;
        font-weight: 700 !important;
    }

    .db-holding-pct {
        font-size: 0.58rem !important;
        padding: 1px 5px !important;
    }

    /* Account Status items on mobile */
    .db-status-item {
        padding: 8px 0 !important;
    }

    .db-status-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }

    .db-status-label {
        font-size: 0.72rem !important;
    }

    .db-status-sub {
        font-size: 0.70rem !important;
    }

    /* Account Info Card rows */
    .db-info-row {
        padding: 8px 0 !important;
        font-size: 0.70rem !important;
    }

    /* KYC Onboarding Screens on Mobile */
    .ns-hero {
        padding: 28px 16px 20px !important;
    }

    .ns-hero-name {
        font-size: 1.35rem !important;
    }

    .ns-hero-sub {
        font-size: 0.80rem !important;
    }

    .ns-card {
        margin: 14px 12px 0 !important;
        border-radius: 14px !important;
    }

    .ns-card-head {
        padding: 14px 16px 0 !important;
    }

    .ns-card-body {
        padding: 4px 16px 16px !important;
    }

    .ns-row {
        padding: 10px 0 !important;
    }

    .ns-row-label, .ns-row-val {
        font-size: 0.76rem !important;
    }

    .ns-cta-wrap {
        padding: 14px 12px 20px !important;
    }

    .ns-btn {
        min-height: 48px !important;
        padding: 12px !important;
        font-size: 0.84rem !important;
        border-radius: 14px !important;
    }

    .ip-page {
        padding: 16px 12px !important;
        min-height: auto !important;
    }

    .ip-card {
        border-radius: 18px !important;
        max-width: 100% !important;
    }

    .ip-card-head {
        padding: 22px 18px 16px !important;
    }

    .ip-name {
        font-size: 1.25rem !important;
    }

    .ip-card-body {
        padding: 16px 18px 22px !important;
    }

    .ip-cta {
        min-height: 48px !important;
        border-radius: 14px !important;
        padding: 12px !important;
        font-size: 0.88rem !important;
    }
}

/* =========================================================================
   GLOBAL ALERT SNACKBARS & TOAST NOTIFICATIONS (Z-INDEX FIX)
   Ensures all snackbars, toasts, and alert popups appear ABOVE any modal,
   overlay, dialog, drawer, or backdrop across the entire application.
   ========================================================================= */
:root {
    --mud-zindex-snackbar: 2147483647 !important;
}

.app-toast-container,
.app-toast-card,
.toast-container-root,
.mud-snackbar-provider,
.mud-snackbar,
.mud-snackbar-location-top-right,
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-bottom-right,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-center {
    z-index: 2147483647 !important;
}

/* ==========================================================================
   Cross-Browser Touch & Click Event Delegation (iOS Safari & WebKit & Mobile Chrome)
   Mobile Safari drops click events on non-form elements unless cursor: pointer is set.
   touch-action: manipulation prevents the 300ms double-tap delay on mobile browsers.
   ========================================================================== */
button,
a,
[role="button"],
[onclick],
.sbg-nav-item,
.mobile-nav-link,
.offering-item-text,
.create-account-link,
.login-form-forgot,
.twofa-close-btn,
.twofa-resend-link,
.mobile-menu-btn,
.btn-create-acc,
.btn-login-outline,
.hero-btn-primary,
.hero-btn-secondary,
.mud-select-trigger,
.mud-button,
.mud-icon-button,
.nav-link,
.tab-link {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}



/* ─── 3-State Live OTP Delivery Feedback Banner ─── */
.otp-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Benton Sans Pro', 'BentonSans', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.4;
    text-align: left;
    margin: 8px 0 16px 0;
    transition: all 0.25s ease-in-out;
}

.otp-notice-sending {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

.otp-notice-sent {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #065F46;
}

.otp-notice-timeout {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.otp-notice-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.otp-pulse-spinner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 4px;
}

.otp-pulse-spinner .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2563EB;
    animation: otpPulseDot 1.4s infinite ease-in-out both;
}

.otp-pulse-spinner .pulse-dot.dot1 { animation-delay: -0.32s; }
.otp-pulse-spinner .pulse-dot.dot2 { animation-delay: -0.16s; }
.otp-pulse-spinner .pulse-dot.dot3 { animation-delay: 0s; }

@keyframes otpPulseDot {
    0%, 80%, 100% { transform: scale(0.35); opacity: 0.35; }
    40% { transform: scale(1); opacity: 1; }
}

.otp-resend-pill-btn {
    flex-shrink: 0;
    background: #2563EB;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease;
}
.otp-resend-pill-btn:hover {
    background: #1D4ED8;
}