/* ========================================
   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;
}

/* 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', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --md-typography-font-family: 'Benton Sans Pro', 'BentonSans', system-ui, sans-serif !important;
}

html, body, p, span, div, li, ol, ul, small, a, td, th, label, option, select {
    font-family: 'Benton Sans Pro', 'BentonSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important; /* 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;
    }
}

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', sans-serif !important;
    font-weight: 400 !important; /* 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', 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', sans-serif !important;
    font-weight: 500 !important; /* Medium */
}

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

    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 */
.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: #f5f5f7;
    min-height: 100vh;
    display: flex;
    width: 100vw;
    flex-direction: row;
    padding-top: 72px;
}

/* 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;
}

: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: 10px;
    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;
    font-weight: 600;
    color: #17275F;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.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-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;
}

/* ========================================
   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: 'BentonSans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    color: #02070D !important;
}

/* 2. Main sections, card headers, and headings */
.main-section-header {
    font-family: 'BentonSans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #02070D !important;
    border-bottom: 2px solid #00164E !important;
    margin: 32px 0 20px 0 !important;
    padding-bottom: 12px !important;
}

.sub-section-header {
    font-family: 'BentonSans', sans-serif !important;
    color: #02070D !important;
    border-left: 4px solid #0033AA !important;
}

/* 3. MudBlazor Form fields and inputs */
/* Form field border #697786 */
.mud-input-outlined .mud-input-notched-outline {
    border-color: #697786 !important;
    border-width: 1px !important;
}

/* Form field background #FFFFFF */
.mud-input-outlined {
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
}

/* Hover state */
.mud-input-outlined:hover .mud-input-notched-outline {
    border-color: #0033AA !important;
}

/* Focused active state */
.mud-input-outlined.mud-focused .mud-input-notched-outline {
    border-color: #0033AA !important;
    border-width: 2px !important;
}

/* Form field placeholder text #697786, font size 16px */
.mud-input-slot, 
.mud-input-slot::placeholder {
    font-size: 16px !important;
    font-family: 'BentonSans', sans-serif !important;
    color: #02070D !important;
}

.mud-input-slot::placeholder {
    color: #697786 !important;
    opacity: 1 !important;
}

/* Form field label styling */
.mud-input-label {
    font-size: 14px !important;
    font-family: 'BentonSans', sans-serif !important;
    color: #697786 !important;
}

.mud-input-outlined.mud-focused .mud-input-label {
    color: #0033AA !important;
}

/* 4. Action Buttons (NEXT/SAVE & CONTINUE/FINISH) */
/* Override all green buttons (#008545) with brand blue #0033AA */
[style*="#008545"] {
    background-color: #0033AA !important;
    background: #0033AA !important;
    color: #FFFFFF !important;
    font-family: 'BentonSans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: none !important;
    text-transform: uppercase !important;
}

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

/* 5. Back Navigation Buttons */
/* White background, border & text #0033AA, font size 14px */
.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: #0033AA !important;
    border: 2px solid #0033AA !important;
    border-radius: 8px !important;
    font-family: 'BentonSans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !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: #0033AA !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: rgba(0, 51, 170, 0.05) !important;
    background: rgba(0, 51, 170, 0.05) !important;
    color: #003FCA !important;
    border-color: #003FCA !important;
}

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

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

body, p, span, .mud-typography-body1, .mud-typography-body2 {
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    color: #222E37 !important; /* Body/description text */
    font-size: 14px !important;
    font-weight: 400 !important; /* Regular */
}

/* 1.5. Small Gray Labels style guide rules */
label, .mud-input-label, .field-label {
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    color: #697786 !important; /* Form field placeholder/border gray */
    font-size: 12px !important;
    font-weight: 500 !important; /* Medium */
    text-transform: none !important;
}

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

/* 2. Page Headings */
.page-title, h1, h2, h3, .main-section-header, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    color: #02070D !important; /* Heading color */
    font-size: 28px !important;
    font-weight: 400 !important; /* Regular */
    letter-spacing: -0.02em;
}

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

.step-circle.current .step-number, .step-circle.completed .step-number {
    color: #FFFFFF !important; /* Active step number text */
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 14px !important; /* Step numbers */
}

.step-circle.pending, .sbg-step-dot.pending {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 2px solid #CED3D9 !important; /* Inactive step circles */
}

.step-circle.pending .step-number {
    color: #222E37 !important; /* Inactive step number text */
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 14px !important; /* Step numbers */
}

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

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

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

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

input, select, textarea, .mud-input-slot {
    background-color: #FFFFFF !important; /* Form field background */
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    font-weight: 400 !important; /* Regular */
}

/* Form field placeholder text */
input::placeholder, textarea::placeholder, .mud-input-input::placeholder {
    color: #697786 !important;
    font-size: 16px !important;
    font-weight: 400 !important; /* Regular */
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
}

/* Phone prefix styling */
.phone-prefix, .iti__selected-dial-code {
    color: #0033AA !important; /* Phone prefix text (+27) */
    font-size: 16px !important;
    font-weight: 500 !important; /* Medium */
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
}

/* Dropdown arrow icon */
.mud-select-toggle-icon, .iti__arrow {
    color: #0033AA !important;
    fill: #0033AA !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 */
/* NEXT button label / Primary Button (NEXT) */
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: #0033AA !important; /* Primary button background */
    background: #0033AA !important;
    color: #FFFFFF !important; /* NEXT button label */
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 14px !important; /* Button labels */
    text-transform: uppercase !important;
    border-radius: 8px !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 {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0033AA !important; /* Back button text */
    border: 2px solid #0033AA !important; /* Back button border */
    border-radius: 8px !important;
    font-family: 'Benton Sans Pro', 'BentonSans', sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 14px !important; /* Button labels */
    text-transform: uppercase !important;
    box-shadow: none !important;
}

/* 6. Card & Modal Borders */
.timeline-container, 
.mud-paper:not(.mud-dialog):not(.sbg-submit-modal), 
.card {
    background-color: #FFFFFF !important; /* Card background */
    border: 1px solid #CED3D9 !important; /* Card border */
}

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

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

/* 1. Floating label positioned at the top-left border cutout with a white background */
.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: #718096 !important; /* Default label grey */
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

/* Hide default MudBlazor legend notch since the white label background handles the cutout */
.mud-input-outlined-border-legend {
    display: none !important;
}

/* When the input is focused, label color turns to SBG primary blue (#0033AA) */
.mud-input-outlined.mud-input-focus ~ .mud-input-label-outlined,
.mud-input-control-input-container:focus-within .mud-input-label-outlined {
    color: #0033AA !important;
    font-weight: 600 !important;
}

/* 2. 1px grey border with border-radius: 4px matching MudBlazor's default outlined variant */
.mud-input-outlined-border {
    border: 1px solid #CED3D9 !important; /* Grey border matching MudBlazor default */
    border-radius: 4px !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: #9098A5 !important;
}

/* 3. Focus state thickens to 2px and turns SBG primary blue (#0033AA) */
.mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: #0033AA !important;
    border-width: 2px !important;
}

/* 4. Dropdown arrow (Chevron) custom-positioned on the right for selects */
.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;
}

/* Fix for prefilled values or date picker icon container alignment */
.mud-input-adornment-end .mud-icon-button {
    padding: 4px !important;
}

/* =========================================================
   GLOBAL FIX: MudAutocomplete / MudSelect popover positioning
   Prevents the "floating dropdown" issue where popovers render
   at the wrong position inside overflow:hidden containers.
   MudBlazor renders popovers via the MudPopoverProvider at the
   root level - ensuring proper z-index and no clipping.
   ========================================================= */

/* Ensure MudBlazor popover host renders above all page content */
.mud-popover-provider {
    z-index: 9999 !important;
    position: fixed !important;
}

/* Each individual popover should use fixed positioning */
.mud-popover {
    position: fixed !important;
}

/* Ensure autocomplete paper dropdowns are always on top */
.mud-autocomplete-popover,
.mud-select-popover {
    z-index: 9999 !important;
}

/* Prevent any ancestor overflow from clipping the popover */
.mud-popover-overflow-y-auto,
.mud-popover-paper {
    overflow-y: auto !important;
    max-height: 300px;
}

/* Cards and form wrappers must not clip popovers */
.mud-card,
.mud-paper,
.kyc-form-wrap,
.form-card {
    overflow: visible !important;
}

/* Restore scroll on the card content layer (not the card itself) */
.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(0,0,0,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: 440px;
    padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; gap: 24px;
    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: 20px; font-weight: 600; color: #1C339F; margin: 0; }
.no-close { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: 0.2s; }
.no-close:hover { background: #f9fafb; color: var(--text-primary); }

.no-segment { display: flex; background: white; border: 1px solid #D7DDF0; border-radius: 24px; padding: 0; overflow: hidden; }
.no-seg-btn { flex: 1; padding: 12px; border: none; background: transparent; font-size: 15px; font-weight: 600; cursor: pointer; color: #3251E6; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
.no-seg-btn.active { background: #263CA2; color: white; }

.no-bal-banner { display: flex; align-items: center; justify-content: space-between; background: #F3F6FD; padding: 12px 16px; border-radius: 12px; }
.no-bal-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #51648A; }
.no-bal-value { font-size: 15px; font-weight: 600; color: #263CA2; }

.no-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.no-field { display: flex; flex-direction: column; gap: 6px; }
.no-label { font-size: 14px; color: var(--text-secondary); }
.no-select, .no-input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; font-size: 15px; color: var(--text-primary); background: white; outline: none; transition: 0.2s; }
.no-select:focus, .no-input:focus { border-color: #263CA2; }
.no-select:disabled, .no-input:disabled { background: #f9fafb; color: var(--text-muted); }

.no-hint { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.no-order-type { display: inline-flex; border: 1px solid #D7DDF0; border-radius: 20px; padding: 0; background: white; width: fit-content; overflow: hidden; }
.no-ot-btn { padding: 8px 24px; border: none; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; color: #3251E6; transition: 0.2s; }
.no-ot-btn.active { background: #263CA2; color: white; }

.no-input-wrapper { position: relative; }
.no-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #E9EEFC; color: #263CA2; font-size: 12px; padding: 4px 10px; border-radius: 12px; font-weight: 600; }

.no-summary { border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.no-sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-secondary); }
.no-sum-val { color: var(--text-primary); }
.no-sum-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; color: #000; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.no-sum-total .val { color: #263CA2; }

.no-actions { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.no-cancel { flex: 1; padding: 16px; background: transparent; border: none; font-size: 15px; font-weight: 600; color: var(--text-secondary); cursor: pointer; text-align: center; }
.no-cancel:hover { color: var(--text-primary); }
.no-submit { flex: 2; padding: 16px; border-radius: 10px; border: none; background: #263CA2; color: white; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; transition: 0.2s; }
.no-submit:hover { background: #162463; }
.no-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Responsive adjustments */
@media (max-width: 639px) {
    .no-modal { padding: 20px 16px; border-radius: 16px; gap: 20px; }
    .no-row { grid-template-columns: 1fr; gap: 12px; }
    .no-actions { flex-direction: column-reverse; gap: 8px; }
    .no-cancel, .no-submit { width: 100%; padding: 14px; }
}