/* OPX 6.0 Layout Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   Universal Loader — .onepip-loader
   Usage: $('.onepip-loader').show() / .hide()
   ======================================== */

.onepip-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.onepip-loader.active {
    display: flex;
}

.onepip-loader .onepip-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FFB800;
    border-radius: 50%;
    animation: onepip-spin 1s linear infinite;
}

@keyframes onepip-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.opx6-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    min-height: 100vh;
    height: auto !important;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.opx6-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 48px 12px 48px;
}

.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 32px;
    flex: 0.126;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.opx-logo {
    width: 90px;
    height: 36px;
    object-fit: contain;
}

/* Navigation */
/* header-nav grows to fill remaining space, pushing header-right to the far right */
.header-nav {
    display: flex;
    gap: 0;
    flex: 1;
    justify-content: flex-start;
    margin-left: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: #171717;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 8px 16px;
    min-height: 36px;
    border-radius: 6px;
}

.nav-link:hover {
    color: #FFC107;
}

.dropdown-toggle::after {
    content: none;
}

/* Lucide Icons in nav */
.lucide-chevron {
    width: 13.25px;
    height: 13.25px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Flip the chevron to face up while its dropdown is open (hover or tap). */
.header-nav .nav-item.dropdown:has(.dropdown-menu.show) .lucide-chevron {
    transform: rotate(180deg);
}

.lucide-icon-sm {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lucide-icon-bell {
    width: 20px;
    height: 20px;
}

.lucide-icon-globe {
    width: 20px;
    height: 20px;
}

/* Try Upload with AI - gradient pill button */
.btn-try-ai {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #ff8827 0%, #ffb566 80.77%, #ffe4ab 100%);
    color: #ffffff;
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.btn-try-ai:hover {
    opacity: 0.9;
    color: #ffffff;
}

.btn-try-ai .lucide-icon-sm {
    color: #ffffff;
}

.btn-try-ai-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-try-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    border-radius: 6px;
    font-size: 8px;
    line-height: 10px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

/* Invisible bridge covering the 8px gap between the nav label and its menu,
   so moving the cursor onto the menu never leaves the hover area. Scoped to
   the header nav so other .dropdown-menu instances are unaffected. */
.header-nav .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
    color: #FFC107;
}

.dropdown-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 8px 0;
}

/* Profile Dropdown Menu */
.profile-dropdown-menu {
    min-width: 280px;
    padding: 0;
    overflow: visible !important;
    max-height: none !important;
}

.profile-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}

/* Profile Section */
.profile-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 8px;
    overflow: visible;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.profile-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-edit-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}

.avatar-edit-icon i {
    font-size: 10px;
    color: #737373;
}

/* Avatar Photo Badge - "+" icon overlay for profile avatar */
.avatar-photo-badge {
    position: absolute;
    bottom: -4px;
    left: 25px;
    background-color: white;
    border: 1px solid #fafafa;
    border-radius: 20px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 22px;
    height: 21px;
}

.avatar-photo-badge:hover {
    background-color: #fafafa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-photo-badge img {
    width: 10px;
    height: 10px;
    display: block;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #262626;
    margin: 0;
    white-space: pre-wrap;
}

.profile-email {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #525252;
    margin: 0;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Company Selector */
.company-selector-wrapper {
    position: relative;
}

.company-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.company-selector:hover {
    background-color: #fafafa;
    border-color: #d4d4d4;
}

.company-selector.active,
.company-selector:focus,
.company-selector:active {
    border-color: #0ea5e9;
    outline: none;
    box-shadow: none;
}

.company-selector.dropdown-toggle::after {
    display: none !important;
}

.company-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.company-name {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #262626;
    margin: 0;
    white-space: pre-wrap;
}

.company-badge {
    display: inline-flex;
    align-items: center;
    background-color: #737373;
    color: #ffffff;
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    padding: 2px 8px;
    border-radius: 6px;
    align-self: flex-start;
}

.company-chevron {
    font-size: 20px;
    color: #404040;
    transition: transform 0.2s ease;
}

.company-selector.active .company-chevron {
    transform: rotate(180deg);
}

/* Account Dropdown Menu */
.account-dropdown-menu {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 8px !important;
    padding: 0 !important;
}

.account-dropdown-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px !important;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f5f5f5;
    color: #262626 !important;
    text-decoration: none !important;
}

.account-dropdown-item:last-child {
    border-bottom: none;
}

.account-dropdown-item:hover {
    background-color: #fafafa !important;
    color: #262626 !important;
}

.account-dropdown-item.selected {
    background-color: #f0f9ff !important;
    color: #262626 !important;
}

.account-dropdown-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-dropdown-item-name {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #262626;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-dropdown-item-badge {
    display: inline-flex;
    align-items: center;
    background-color: #737373;
    color: #ffffff;
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    align-self: flex-start;
}

.account-dropdown-item-check {
    font-size: 18px;
    color: #0ea5e9;
    display: none;
    margin-left: 8px;
}

.account-dropdown-item.selected .account-dropdown-item-check {
    display: block;
}

/* Profile Menu Items */
.profile-menu-items {
    display: flex;
    flex-direction: column;
}

.profile-divider {
    height: 1px;
    background-color: #e5e5e5;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #171717;
    text-decoration: none;
    transition: background-color 0.2s;
}

.profile-menu-item:hover {
    background-color: #f5f5f5;
}

/* Help & Support Menu */
.dropdown-menu.help-support-menu {
    padding: 8px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.help-menu-columns {
    display: flex;
    gap: 16px;
}

.help-menu-column {
    display: flex;
    flex-direction: column;
    width: 280px;
}

.help-menu-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.help-menu-item:hover {
    background-color: #f5f5f5;
}

.help-item-title {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #171717;
}

.help-item-description {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #737373;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Language Selector */
.language-selector {
    position: relative;
}

.language-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #171717;
    transition: color 0.2s;
}

.language-button:hover {
    color: #525252;
}

.language-button i {
    font-size: 20px;
}

.flag-sm {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
}

/* Login/Signup Buttons */
.btn-login {
    background-color: #FFC107;
    color: #333333;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s;
}

.btn-login:hover {
    background-color: #FFB300;
    text-decoration: none;
    color: #333333;
}

.btn-signup {
    background-color: transparent;
    color: #333333;
    border: 2px solid #333333;
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-signup:hover {
    background-color: #333333;
    color: #ffffff;
    text-decoration: none;
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
}

.user-welcome {
    color: #333333;
    font-size: 14px;
}

.user-welcome strong {
    font-weight: 600;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #333333;
    cursor: pointer;
    padding: 8px;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1002;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-header span {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #333333;
    cursor: pointer;
}

.mobile-nav {
    padding: 20px;
}

.mobile-nav-section {
    margin-bottom: 24px;
}

.mobile-nav-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: #999999;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.mobile-nav-section a {
    display: block;
    padding: 12px 0;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.mobile-nav-section a:hover {
    color: #FFC107;
}

.btn-logout {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background-color: #f5f5f5;
    color: #333333;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-logout:hover {
    background-color: #e0e0e0;
    text-decoration: none;
    color: #333333;
}

/* Menu Open State */
body.menu-open {
    overflow: hidden;
}

body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Main Content */
.opx6-content {
    flex: 1;
    width: 100%;
    overflow-x: clip; /* sticky-safe horizontal-overflow guard: clip does NOT create a scroll container, so position:sticky on descendants keeps working */
}

/* Responsive Design */
@media (max-width: 1024px) {
    .header-container {
        padding: 12px 24px 12px 24px;
    }

    .header-nav {
        margin-left: 0;
        gap: 0;
    }
}

@media (max-width: 960px) {
    .header-container {
        padding: 10px 16px 10px 16px;
    }

    .header-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .opx-logo {
        width: 72px;
        height: 28px;
    }

    .btn-login,
    .btn-signup {
        display: none;
    }

    .user-welcome {
        display: none;
    }

    /* Explicitly push .header-right to the far-right edge of the header.
       On desktop the hidden .header-nav (flex:1) does this automatically; on mobile
       it collapses to display:none so we anchor .header-right with margin-left:auto
       to guarantee it stays at the right regardless of flex-grow behaviour on
       .header-left. This is a belt-and-suspenders rule — the flex:0.126 on
       .header-left already absorbs the remaining space, but being explicit here
       makes the intent clear and handles any edge cases on narrow viewports. */
    .header-right {
        margin-left: auto;
    }

    .language-selector {
        /* Remove the trailing gap that desktop spacing adds. */
        margin-right: 0;
    }

    .language-button {
        font-size: 12px;
    }

    /* Language dropdown: right-aligned to the language-selector's own right edge so it
       opens inward (leftward) and grows up to max-width, constrained to the viewport
       so it is always fully visible / never truncated off the right side.
       "right:0; left:auto" anchors the menu to the selector's right edge (rather than
       "left:0", which would anchor to the left edge and risk overflowing the viewport
       on narrow screens).
       Scoped to .language-selector so other dropdowns (profile, account, help) are
       unaffected. */
    .language-selector .dropdown-menu {
        right: 0;
        left: auto;
        margin-top: 8px;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 10px 12px 10px 16px;
    }

    .language-button span {
        display: none;
    }

    .notification-icon {
        margin-right: 0;
    }
}

/* Notification Icon */
.notification-icon {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 0;
}

.notification-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    transition: background-color 0.2s;
    text-decoration: none;
    color: #262626;
}

.notification-button:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}

.notification-button i,
.notification-button svg {
    font-size: 20px;
    color: #262626;
}

.notification-badge {
    position: absolute;
    top: 1px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 2px;
    background-color: #d60000;
    border-radius: 99999px;
    border: 2px solid #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    /* Typography: Label/Extra Extra Small from OPX 6.0 design system */
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    box-sizing: border-box;
}

.notification-badge.has-unread {
    display: flex;
}

/* ============================================================================ */
/* Header Notification Popup                                                    */
/* ============================================================================ */

.header-notification-popup {
    position: absolute;
    z-index: 10001;
    width: 400px;
    max-height: 520px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.hnp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #F5F5F5;
}

.hnp-title {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #171717;
    margin: 0;
}

/* Body */
.hnp-body {
    flex: 1;
   overflow-y: auto;
    max-height: 380px; 
}

/* Notification item */
.hnp-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #F5F5F5;
    position: relative;
}

.hnp-item:last-child {
    border-bottom: none;
}

.hnp-item:hover {
    background-color: #FAFAFA;
}

.hnp-item.unread {
   /* background-color: #FFFBF0; */
}

.hnp-item.unread:hover {
    background-color: #FFF7E0;
}

.hnp-unread-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    background-color: #dc2626;
    border-radius: 50%;
    margin-top: 6px;
}

.hnp-item-content {
    flex: 1;
    min-width: 0;
}

.hnp-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.hnp-item-title {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.hnp-item.read .hnp-item-title {
    font-weight: 500;
    color: #525252;
}

.hnp-item-time {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #A3A3A3;
    white-space: nowrap;
    flex-shrink: 0;
}

.hnp-item-message {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #737373;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Empty state */
.hnp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
}

.hnp-empty-icon {
    opacity: 0.5;
}

.hnp-empty-text {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #A3A3A3;
    margin: 0;
}

/* Footer */
.hnp-footer {
    padding: 12px 16px 16px;
    display: flex;
    justify-content: flex-end;
}

.hnp-view-all-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background-color: #E5E5E5;
    color: #262626;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    border: 1px solid #E5E5E5;
    border-radius: 99999px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.hnp-view-all-pill:hover {
    background-color: #E5E5E5;
    color: #404040;
    text-decoration: none;
}

.hnp-view-all-pill svg {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .header-notification-popup {
        width: calc(100vw - 16px);
        left: 8px !important;
        right: 8px;
    }
}

/* ============================================================================ */
/* VA Popup Dialogue (Notice / Info / Prelaunch)                               */
/* ============================================================================ */

.va-dialogue-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
}

.va-dialogue-container {
    background: #FFFFFF;
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    /* Figma: 32px padding all round, 32px gap between sections */
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Header row — title on the left, close (X) on the right (Figma 6785:99102) */
.va-dialogue-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.va-dialogue-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #262626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.va-dialogue-close svg {
    width: 24px;
    height: 24px;
    display: block;
}

.va-dialogue-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.va-dialogue-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.va-dialogue-image img {
    width: 230px;
    max-width: 100%;
    height: auto;
}

/* Header title — left aligned, Heading/H2 (Figma 6785:99103) */
.va-dialogue-title {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 590;
    line-height: 32px;
    color: #262626;
    margin: 0;
    text-align: left;
    flex: 1;
    min-width: 0;
}

/* Body heading — centered, Heading/H2 (Figma 6785:99167) */
.va-dialogue-heading {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 590;
    line-height: 32px;
    color: #262626;
    margin: 0;
    text-align: center;
    width: 100%;
}

.va-dialogue-body {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #525252;
    text-align: center;
    width: 100%;
    word-wrap: break-word;
}

/* Highlighted phrase — "new OPX 1Account" (Figma #f86f00, Semibold) */
.va-dialogue-highlight {
    color: #f86f00;
    font-weight: 590;
}

.va-dialogue-donotshow {
    width: 100%;
    display: flex;
    justify-content: center;
}

.va-dialogue-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #262626;
    cursor: pointer;
    user-select: none;
}

.va-dialogue-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #FFAC00;
    cursor: pointer;
}

/* Actions — primary button on top, do-not-show checkbox below (Figma 6785:99169) */
.va-dialogue-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.va-dialogue-btn-primary {
    background-color: #FFAC00;
    color: #262626;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Figma Label/Large: 14px / 590, 44px tall pill, 300px wide */
    font-size: 14px;
    font-weight: 590;
    line-height: 18px;
    width: 300px;
    max-width: 100%;
    height: 44px;
    padding: 8px 32px;
    border: none;
    border-radius: 99999px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.va-dialogue-btn-primary:hover {
    background-color: #FFB91A;
}

/* OPX 6 launch popup — celebration illustration (Figma 7010:99214):
   confetti gif behind, twinkling 4-point sparks, breathing OPX logo.
   Animation spec from assets/images/icon/"OPX Celebration Graphic.html" handoff. */
@keyframes opxBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes opxTwinkle {
    0%, 100% { transform: scale(.2) rotate(0); opacity: 0; }
    50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

.va-launch-celebration {
    position: relative;
    width: 220px;
    height: 140px;
    max-width: 100%;
    flex-shrink: 0;
    pointer-events: none;
}

.va-launch-confetti {
    position: absolute;
    left: 4%;
    top: -10%;
    width: 92%;
    height: auto;
}

.va-launch-spark {
    position: absolute;
    animation: opxTwinkle 2s ease-in-out infinite;
}

.va-launch-logo {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 51%;
    height: auto;
    transform-origin: center;
    animation: opxBreathe 2.8s ease-in-out infinite;
}

/* OPX 6 launch popup — actions (Figma 7010:99218, 12px gap) */
.va-launch-actions {
    gap: 12px;
}

/* View User Guide button — grey pill (Figma I7010:99219) */
.va-launch-guide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 300px;
    max-width: 100%;
    height: 44px;
    padding: 8px 32px;
    background-color: #E5E5E5;
    color: #262626;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 590;
    line-height: 24px;
    border: none;
    border-radius: 99999px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.va-launch-guide-btn:hover {
    background-color: #D9D9D9;
}

.va-launch-guide-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ============================================================
   MYVA Prelaunch Popup — OPX 1Account Coming Soon illustration
   Animated SVG calendar ported from wwwroot/coming.html (US/3835).
   All keyframes are namespaced "opxPre*" to avoid conflicts
   with the OPX 6 launch popup keyframes above.
   Durations below = the reference's base duration * motionScale (1.8x
   for its default motionEnergy="calm" preset), e.g. glow's source is
   `calc(3.5s * var(--opx-motion-scale))` = 3.5 * 1.8 = 6.3s.
   ============================================================ */

@keyframes opxPreRayRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes opxPreGlow {
    0%, 100% { opacity: .55; }
    50%       { opacity: .9; }
}

@keyframes opxPreSparkle {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1); }
}

@keyframes opxPreDash {
    to { stroke-dashoffset: -14; }
}

@keyframes opxPrePageFlip {
    0%, 15%  { transform: scaleY(1); }
    65%, 100%{ transform: scaleY(0.03); }
}

@keyframes opxPrePageShade {
    0%, 15% { opacity: 0; }
    40%     { opacity: 0.35; }
    65%, 100%{ opacity: 0; }
}

@keyframes opxPreShine {
    0%   { transform: translateX(-220px) rotate(20deg); }
    100% { transform: translateX(220px)  rotate(20deg); }
}

/*.va-prelaunch-container {
    max-width: 680px;
}*/

.va-prelaunch-illustration {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 0;
    flex-shrink: 0;
}

.va-prelaunch-svg {
    display: block;
    max-width: 480px;
    margin: 0 auto;
}

.va-prelaunch-rays {
    transform-origin: 280px 180px;
    animation: opxPreRayRotate 19.8s linear infinite;
}

.va-prelaunch-glow {
    animation: opxPreGlow 6.3s ease-in-out infinite;
}

.va-prelaunch-sparkle {
    animation: opxPreSparkle 3.96s ease-in-out infinite;
}

.va-prelaunch-dash {
    animation: opxPreDash 0.9s linear infinite;
}

.va-prelaunch-shine {
    animation: opxPreShine 5.76s ease-in-out infinite;
}

.va-prelaunch-page-flip {
    animation: opxPrePageFlip 4.5s ease-in-out 1 forwards;
}

.va-prelaunch-page-shade {
    opacity: 0;
    animation: opxPrePageShade 4.5s ease-in-out 1 forwards;
}

.va-prelaunch-content {
    text-align: center;
    gap: 10px;
    margin: 20px 0 20px;
}

.va-prelaunch-lead {
    font-size: 17px;
    font-weight: 600;
    color: #262626;
    margin: 0;
}

.va-prelaunch-detail {
    font-size: 14px;
    color: #525252;
    line-height: 1.6;
    margin: 0;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .va-prelaunch-rays,
    .va-prelaunch-glow,
    .va-prelaunch-sparkle,
    .va-prelaunch-dash,
    .va-prelaunch-shine,
    .va-prelaunch-page-flip,
    .va-prelaunch-page-shade {
        animation: none;
    }

    .va-prelaunch-page-flip {
        transform: scaleY(0.03);
    }

    .va-prelaunch-page-shade {
        opacity: 0;
    }
}

/* ============================================================================ */
/* MYVA Launch Popup — pixel-ported from wwwroot/assets/upgrade.html           */
/* ("OPX 1Account Upgrade Dialog" design prototype). That file is a            */
/* parameterized template (props resolved via `{{ token }}` + a renderVals()   */
/* script); all values below are resolved to the reference's DEFAULT props:    */
/* walletColor=#6b89ff, cashColor=#2b9145, sparkleColor=#FFAC00,               */
/* sparkleDensity=3, sparkleSize=13, confetti colours=customColor1-4           */
/* (#ffd500/#fb980e/#fbe974/#fdb73f), ribbonDensity=26 + circleDensity=8 (34   */
/* pieces), logoOffsetY=0, walletOffsetY=0. Confetti/sparkle placement values  */
/* were generated by replicating the reference's exact seeded PRNG            */
/* (`r = seed*9301+49297`, seed=1, the component's initial state) in Python,  */
/* so the result matches the reference's first render exactly rather than an  */
/* approximation. Keyframes are namespaced "opxMyva*" to avoid clashing with  */
/* the OPX 6 launch popup keyframes above. The reference's confetti layer     */
/* auto-fades to opacity 0 after ~5.2s via JS state/setTimeout; that stateful  */
/* behaviour was intentionally not ported (kept CSS/markup-only, matching the */
/* existing convention for this codebase's other popups) — confetti/sparkles  */
/* loop continuously here instead.                                            */
/* ============================================================================ */

@keyframes opxMyvaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes opxMyvaCardIn {
    0%   { opacity: 0; transform: translateY(24px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes opxMyvaRise {
    0%   { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes opxMyvaShimmer {
    0%   { transform: translateX(-140%) skewX(-20deg); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translateX(260%) skewX(-20deg); opacity: 0; }
}

@keyframes opxMyvaDrift1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -10px); }
}

@keyframes opxMyvaDrift2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-10px, 8px); }
}

@keyframes opxMyvaDrift3 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(6px, 9px); }
}

@keyframes opxMyvaConfetti {
    0%   { transform: translate3d(0, -14px, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { transform: translate3d(var(--dx, 0px), 170px, 0) rotate(var(--rot, 200deg)); opacity: 0; }
}

@keyframes opxMyvaSparkle {
    0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
    45%      { opacity: 1; transform: scale(1) rotate(24deg); }
}

@keyframes opxMyvaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes opxMyvaBoxPop {
    0%   { transform: scale(.3) translateY(20px); opacity: 0; }
    55%  { transform: scale(1.06) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes opxMyvaMarkRise {
    0%   { opacity: 0; transform: translateY(44px) scale(.4); }
    60%  { transform: translateY(-6px) scale(1.05); opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes opxMyvaNotePop {
    0%       { opacity: 0; transform: translateY(46px) rotate(var(--tilt, 0deg)) scale(.88); }
    16%      { opacity: 1; transform: translateY(-5px) rotate(var(--tilt, 0deg)) scale(1.03); }
    26%      { transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
    62%      { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
    84%, 100%{ opacity: 0; transform: translateY(46px) rotate(var(--tilt, 0deg)) scale(.9); }
}

/* Backdrop + card — background color fix (reference: rgba(23,23,23,0.7)
   backdrop, warm cream-to-white card gradient). Scoped to this popup only
   (va-myva-overlay / va-myva-container) so other popups sharing
   .va-dialogue-overlay / .va-dialogue-container are unaffected. */
.va-myva-overlay {
    background-color: rgba(23, 23, 23, 0.7);
    animation: opxMyvaFadeIn .5s ease-out both;
}

.va-myva-container {
    background: linear-gradient(180deg, #FFF4DE 0%, #FFF9EF 39%, #FFFFFF 70%);
    animation: opxMyvaCardIn .7s cubic-bezier(.22, 1, .36, 1) .15s both;
}

.va-myva-header {
    animation: opxMyvaFadeIn .5s ease-out .3s both;
}

.va-myva-header .va-dialogue-close {
    animation: opxMyvaFadeIn .5s ease-out .3s both;
}

.va-myva-hero {
    position: relative;
    /* Reference (assets/opx1acc.html) gives its hero section (rays, drifting
       circles, confetti, wallet) zero side inset — it spans the full card
       width edge-to-edge, only the header/content blocks carry their own
       side padding. This popup reuses the shared .va-dialogue-container,
       which applies ONE uniform padding to every section including the
       hero, so the hero (and everything clipped/positioned inside it, e.g.
       va-myva-hero-rays' 640px-wide gradient) was rendering in a narrower
       window than the reference at every width. Bleed the hero back out to
       the card's full padding-box width via negative margins matching the
       container's own side padding, scoped to this popup only, so rays/
       circles/confetti/wallet get the same width window the reference
       gives them. */
    width: calc(100% + 64px);
    margin: 0 -32px;
    height: 216px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    pointer-events: none;
}

.va-myva-hero-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 172, 0, 0.18) 0%, rgba(255, 172, 0, 0) 62%);
}

.va-myva-hero-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 640px;
    height: 340px;
    margin: -170px 0 0 -320px;
    background: conic-gradient(from 200deg at 50% 55%, transparent 0deg, rgba(255, 172, 0, 0.10) 12deg, transparent 26deg, transparent 60deg, rgba(255, 172, 0, 0.08) 74deg, transparent 90deg, transparent 130deg, rgba(248, 111, 0, 0.07) 146deg, transparent 162deg, transparent 360deg);
    filter: blur(6px);
    -webkit-mask-image: radial-gradient(ellipse at 50% 55%, black 30%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 55%, black 30%, transparent 72%);
}

.va-myva-hero-circle {
    position: absolute;
    border-radius: 999px;
}

.va-myva-circle-1 { left: 14%; top: 30%; width: 92px; height: 92px; margin: -46px 0 0 -46px; background: radial-gradient(circle at 35% 30%, rgba(255, 172, 0, 0.14), transparent 70%); animation: opxMyvaDrift1 7s ease-in-out infinite; }
.va-myva-circle-2 { left: 86%; top: 26%; width: 68px; height: 68px; margin: -34px 0 0 -34px; background: radial-gradient(circle at 35% 30%, rgba(248, 111, 0, 0.12), transparent 70%); animation: opxMyvaDrift2 8.5s ease-in-out infinite; }
.va-myva-circle-3 { left: 8%;  top: 72%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: radial-gradient(circle at 35% 30%, rgba(255, 172, 0, 0.20), transparent 70%); animation: opxMyvaDrift3 6.5s ease-in-out infinite; }
.va-myva-circle-4 { left: 92%; top: 70%; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: radial-gradient(circle at 35% 30%, rgba(255, 172, 0, 0.16), transparent 70%); animation: opxMyvaDrift1 9s ease-in-out 1.2s infinite; }
.va-myva-circle-5 { left: 24%; top: 12%; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: radial-gradient(circle at 35% 30%, rgba(248, 111, 0, 0.18), transparent 70%); animation: opxMyvaDrift2 6s ease-in-out .6s infinite; }
.va-myva-circle-6 { left: 76%; top: 86%; width: 32px; height: 32px; margin: -16px 0 0 -16px; background: radial-gradient(circle at 35% 30%, rgba(255, 172, 0, 0.22), transparent 70%); animation: opxMyvaDrift3 7.5s ease-in-out .9s infinite; }

.va-myva-confetti-piece {
    position: absolute;
    animation: opxMyvaConfetti 2.8s ease-in infinite both;
}

.va-myva-sparkle {
    position: absolute;
    color: #FFAC00;
    animation: opxMyvaSparkle 2.4s ease-in-out infinite;
}

.va-myva-sparkle svg {
    display: block;
}

.va-myva-wallet {
    position: relative;
    width: 200px;
    height: 162px;
    flex-shrink: 0;
    /* Reference (assets/opx1acc.html) applies the infinite float bob and the
       one-shot entrance pop to two separate nested elements, so they never
       conflict. This popup ports both onto this single element (no markup
       change allowed), which by default makes opxMyvaBoxPop's frozen
       "both"-fill end state (transform: scale(1) translateY(0)) permanently
       replace/suppress opxMyvaFloat's transform on this property once the
       pop finishes — the wallet visibly stops floating forever instead of
       gently bobbing like the reference. animation-composition: add makes
       the pop's contribution compose with (rather than replace) the float's,
       matching the reference's independently-floating wallet. */
    animation: opxMyvaFloat 5s ease-in-out 2.5s infinite, opxMyvaBoxPop .7s cubic-bezier(.34, 1.56, .64, 1) .55s both;
    animation-composition: replace, add;
}

.va-myva-wordmark {
    position: absolute;
    left: 50%;
    bottom: 122px;
    width: 190px;
    margin-left: -95px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(248, 111, 0, 0.3));
    animation: opxMyvaMarkRise .9s cubic-bezier(.22, 1, .36, 1) 1.45s both;
}

.va-myva-note {
    --tilt: -12deg;
    position: absolute;
    bottom: 34px;
    width: 35px;
    height: 46px;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: opxMyvaNotePop 4.2s cubic-bezier(.22, 1, .36, 1) 1.15s infinite both;
}

/* Left note (cashColor #2b9145 mixed with white/black) */
.va-myva-note-left {
    left: 66px;
    --tilt: -12deg;
    background: linear-gradient(180deg, #FFFFFF 0%, #D0E7D6 100%);
    border: 1px solid #A6D1B1;
}

/* Right note (cashColor #2b9145 mixed with white/black, different ratios than the left note) */
.va-myva-note-right {
    right: 66px;
    bottom: 37px;
    --tilt: 10deg;
    background: linear-gradient(180deg, #FFFFFF 0%, #BFDEC7 100%);
    border: 1px solid #A6D1B1;
}

/* "$" coin badge inside each note — a circle with its own border/text color,
   distinct from the banknote's own border (reference: 18px circle, 2px border,
   color-mix(cashColor, X%, black) for text). */
.va-myva-note-coin {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.va-myva-note-left .va-myva-note-coin {
    border: 2px solid #2B9145;
    color: #206D34;
}

.va-myva-note-right .va-myva-note-coin {
    border: 2px solid #227437;
    color: #1A5729;
}

.va-myva-wallet-body {
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 88px;
    height: 50px;
    margin-left: -44px;
    border-radius: 11px;
    background: linear-gradient(180deg, #FFFFFF 0%, #D0D9FF 100%);
    border: 1px solid #BCCAFF;
    box-shadow: 0 11px 22px rgba(107, 137, 255, 0.25), inset 0 -5px 10px rgba(107, 137, 255, 0.10);
}

.va-myva-wallet-clasp {
    position: absolute;
    right: -8px;
    top: 13px;
    width: 35px;
    height: 19px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6B89FF 0%, #566ECC 100%);
    box-shadow: 0 3px 8px rgba(107, 137, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    box-sizing: border-box;
}

.va-myva-wallet-clasp span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #FFFFFF;
    opacity: 0.9;
}

.va-myva-balance-chip {
    position: absolute;
    left: 14px;
    bottom: 10px;
    z-index: 5;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 9px;
    padding: 5px 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    text-align: left;
    animation: opxMyvaRise .6s cubic-bezier(.22, 1, .36, 1) 2s both;
}

.va-myva-balance-label {
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8C8C8C;
}

.va-myva-balance-value {
    font-size: 10.5px;
    font-weight: 700;
    color: #171717;
    font-variant-numeric: tabular-nums;
}

/* Content (heading/body) + actions (buttons/checkbox) entrance animations —
   scoped via va-myva-content / va-myva-actions wrapper classes so the shared
   .va-dialogue-heading / .va-dialogue-body / .va-launch-guide-btn /
   .va-dialogue-btn-primary / .va-dialogue-checkbox-label rules used by other
   popups are untouched. */
.va-myva-content .va-dialogue-heading {
    animation: opxMyvaRise .6s cubic-bezier(.22, 1, .36, 1) 1.7s both;
}

.va-myva-content .va-dialogue-body {
    animation: opxMyvaRise .6s cubic-bezier(.22, 1, .36, 1) 1.9s both;
}

.va-myva-actions {
    animation: none;
}

.va-myva-actions .va-launch-guide-btn {
    animation: opxMyvaRise .6s cubic-bezier(.22, 1, .36, 1) 2.75s both;
}

.va-myva-actions .va-dialogue-btn-primary {
    position: relative;
    overflow: hidden;
    animation: opxMyvaRise .6s cubic-bezier(.22, 1, .36, 1) 2.9s both;
}

.va-myva-actions .va-dialogue-btn-primary::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 36%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    animation: opxMyvaShimmer 1.3s ease-in-out 3.7s both;
    pointer-events: none;
}

.va-myva-actions .va-dialogue-checkbox-label {
    animation: opxMyvaFadeIn .6s ease-out 3.3s both;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .va-myva-overlay,
    .va-myva-container,
    .va-myva-header,
    .va-myva-header .va-dialogue-close,
    .va-myva-hero-circle,
    .va-myva-confetti-piece,
    .va-myva-sparkle,
    .va-myva-wallet,
    .va-myva-wordmark,
    .va-myva-note,
    .va-myva-balance-chip,
    .va-myva-content .va-dialogue-heading,
    .va-myva-content .va-dialogue-body,
    .va-myva-actions .va-launch-guide-btn,
    .va-myva-actions .va-dialogue-btn-primary,
    .va-myva-actions .va-dialogue-btn-primary::after,
    .va-myva-actions .va-dialogue-checkbox-label {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 480px) {
    .va-dialogue-overlay {
        padding: 16px;
    }

    .va-dialogue-container {
        max-width: 100%;
        padding: 24px;
        gap: 24px;
    }

    .va-dialogue-image img {
        width: 180px;
    }

    .va-dialogue-title,
    .va-dialogue-heading {
        font-size: 20px;
        line-height: 28px;
    }

    .va-launch-celebration {
        width: 240px;
        height: 180px;
    }

    /* MYVA popup — reference (assets/opx1acc.html) keeps its card generously
       padded at every viewport width (it never shrinks padding responsively,
       only the outer card narrows). The shared .va-dialogue-overlay /
       .va-dialogue-container mobile rules above tighten padding/gap for
       other (shorter) popups, which reads as cramped for this one's
       hero+wallet illustration. Restore the roomier desktop-equivalent
       spacing here, scoped to the MYVA popup only via va-myva-overlay /
       va-myva-container so other popups keep the tighter mobile padding. */
    .va-myva-overlay {
        padding: 24px;
    }

    .va-myva-container {
        padding: 32px 24px;
        gap: 32px;
    }

    /* Keep the hero's edge-to-edge bleed matched to the container's mobile
       side padding (24px here vs 32px on desktop) so it still spans the
       card's full width, same as the reference at every breakpoint. */
    .va-myva-hero {
        width: calc(100% + 48px);
        margin: 0 -24px;
    }
}

/* Print Styles */
@media print {
    .opx6-header {
        position: static;
    }

    .mobile-menu-toggle,
    .language-selector,
    .notification-icon,
    .btn-login,
    .btn-signup {
        display: none;
    }
}

.breadcrumb a{
    text-decoration: none;
}

#transactionsTab .transaction-empty{
    margin: auto;
    margin-top: calc(100% - 50%);
}

.thb-beneficiary-bank-message{
    color: red;
    font-size: 12px;
    padding: 0 12px;
}

.otp-email-button.disabled{
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
    cursor: not-allowed;
}

.otp-link.disabled{
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    cursor: not-allowed;
}

/* ==========================================================================
   Reset Password Page Styles
   All selectors scoped to .reset-password-* to avoid overwriting other styles
   ========================================================================== */

/* Breadcrumb (logged-in users only) */
.reset-password-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 120px;
    margin-top: 16px;
}

.reset-password-breadcrumb .breadcrumb-link {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #737373;
    text-decoration: none;
}

.reset-password-breadcrumb .breadcrumb-link:hover {
    color: #525252;
}

.reset-password-breadcrumb .breadcrumb-sep {
    font-size: 16px;
    color: #737373;
}

.reset-password-breadcrumb .breadcrumb-current {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #262626;
}

/* Reset Password Container */
.reset-password-main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 120px);
    padding: 64px 32px 32px;
}

.reset-password-card-wrapper {
    width: 100%;
    max-width: 344px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.reset-password-gold-bar {
    height: 8px;
    background-color: #FFAC00;
    border-radius: 4px 4px 0 0;
}

.reset-password-card {
    width: 100%;
    background: linear-gradient(180deg, rgba(246,246,246,0.19) -2.12%, #d2d2d2 -0.354%, #FFFFFF 7.152%);
    border: 1px solid #d4d4d4;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 48px 32px 32px;
}

.reset-password-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reset-password-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reset-password-title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.reset-password-title {
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 860;
    font-size: 18px;
    line-height: 24px;
    color: #525252;
    letter-spacing: -0.64px;
    margin-bottom: 0;
}

.reset-password-subtitle {
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #404040;
    margin-bottom: 0;
}

.reset-password-requirements {
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    color: #FFAC00;
    text-align: center;
    margin-bottom: 0;
}

.reset-password-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reset-password-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reset-password-label {
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #FFAC00;
    margin-bottom: 0;
}

.reset-password-input-wrapper {
    position: relative;
    width: 100%;
}

.reset-password-input {
    width: 100%;
    height: 38px;
    background-color: #FFFCF7 !important;
    border: 1px solid #FFAC00 !important;
    border-radius: 6px;
    padding: 8px 40px 8px 12px;
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #000000;
    outline: none;
}

.reset-password-input:focus {
    border: 1px solid #FFAC00 !important;
    box-shadow: 0 0 0 2px rgba(255, 172, 0, 0.1);
}

.reset-password-toggle-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #707070;
    font-size: 16px;
}

.reset-password-warning {
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-size: 10px;
    line-height: 12px;
    color: #707070;
    margin-top: 4px;
    margin-bottom: 0;
    min-height: 12px;
}

.reset-password-warning.error {
    color: #B02330;
}

.reset-password-submit-btn {
    width: 100%;
    height: 36px;
    background-color: #FFAC00;
    border: none;
    border-radius: 8px;
    font-family: 'SF Pro', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    text-align: center;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reset-password-submit-btn:hover:not(:disabled) {
    background-color: #E69A00;
}

.reset-password-submit-btn:disabled {
    background-color: #B4B4B4;
    cursor: not-allowed;
    color: #FFFFFF;
}

/* Reset Password Responsive */
@media (max-width: 768px) {
    .reset-password-breadcrumb {
        padding: 4px 24px;
    }
}

@media (max-width: 428px) {
    .reset-password-main-container {
        padding: 32px 24px;
    }

    .reset-password-card-wrapper {
        max-width: 100%;
    }

    .reset-password-card {
        padding: 32px 24px;
    }
}

/* ========================================
   LOGOUT STATE — Language Switcher (Figma)
   Scoped under .logout-state to avoid affecting login state
   ======================================== */

/* Override custom.css white text/bg on .language-selector for logout state */
.logout-state .language-selector {
    color: #171717 !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/*.logout-state .language-button {
    font-family: var(--font-family, "SF Pro", -apple-system, sans-serif);
    font-size: 18px;
    font-weight: 400;
    color: #171717;
    gap: 4px;
    line-height: 24px;
} */

.logout-state .language-button i {
    font-size: 20px;
    color: #171717;
}

.logout-state .language-button span {
    color: #171717;
}

/* Hide Login/Sign Up buttons (removed from layout, this is a safety fallback) */
.logout-state .btn-login,
.logout-state .btn-signup {
    display: none;
}

.beneficiary-preloader, .sender-preloader, .transaction-preloader, .notification-preloader, .users-preloader{
    display: flex;
    align-items: center;
    justify-content: center; 
}

#ftlLoadingOverlay[style*="display: block"] {
    display: flex !important;
}

/* ===== OPX Warning Alert Dialog (Global) ===== */
.opx-warning-popup {
    border-radius: 16px !important;
    padding: 20px 0 24px !important;
    max-width: 513px !important;
}

.opx-warning-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}

.opx-warning-popup .swal2-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    color: #262626;
}

.opx-warning-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
}

.opx-warning-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.opx-warning-alert-icon svg {
    width: 80px;
    height: 80px;
    color: #ffb566;
    stroke-width: 2;
}

.opx-warning-alert-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    color: #262626;
    word-break: break-word;
}

.opx-warning-alert-title {
    font-size: 20px;
    font-weight: 590;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 28px;
}

.opx-warning-alert-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.opx-warning-popup .swal2-actions {
    margin-top: 32px !important;
   /* padding: 0 24px;
    width: 300px;*/
}

.opx-warning-confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 8px 32px;
    border: none;
    border-radius: 99999px;
    background-color: #FFAC00;
    color: #262626;
    font-size: 16px;
    font-weight: 590;
    line-height: 24px;
    cursor: pointer;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.opx-warning-confirm-btn:hover {
    background-color: #FFB300;
}

.opx-warning-close-btn {
    color: #262626 !important;
    font-size: 20px !important;
}

/* ===== OPX Alert Two-Button Layout (Cancel + OK) ===== */
.opx-alert-actions-two-btn {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: center !important;
    width: auto !important;
    margin-top: 32px !important;
}

/* Discard Transaction dialog — left-align its action buttons only */
.opx-discard-actions {
    justify-content: flex-start !important;
    margin-left: unset;
    padding: 0 24px;
}

.opx-alert-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 44px;
    padding: 8px 32px; 
    border: 1px solid #737373;
    border-radius: 99999px;
    background-color: transparent;
    color: #525252;
    font-size: 16px;
    font-weight: 590;
    line-height: 24px;
    cursor: pointer;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.opx-alert-cancel-btn:hover {
    background-color: #f5f5f5;
    border-color: #525252;
}

.opx-alert-confirm-btn-small {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 44px;
    padding: 8px 32px;
    border: none;
    border-radius: 99999px;
    background-color: #FFAC00;
    color: #262626;
    font-size: 16px;
    font-weight: 590;
    line-height: 24px;
    cursor: pointer;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.opx-alert-confirm-btn-small:hover {
    background-color: #FFB300;
}

/* ===== OPX Discard Transaction Dialog ===== */
.opx-discard-dialog {
    text-align: left;
    padding: 0 24px;
}

.opx-discard-title {
    font-size: 20px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 8px;
}

.opx-discard-text {
    font-size: 14px;
    color: #737373;
    margin-bottom: 20px;
    line-height: 1.5;
}

.opx-discard-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #262626;
    user-select: none;
}

.opx-discard-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #FFAC00;
    cursor: pointer;
}

/* ===== OPX Error Alert Dialog (Global) ===== */
.opx-error-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
}

.opx-error-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.opx-error-alert-icon svg {
    width: 80px;
    height: 80px;
    color: #bf0e0e;
    stroke-width: 2;
}

.opx-error-alert-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    color: #262626;
    word-break: break-word;
}

.opx-error-alert-title {
    font-size: 20px;
    font-weight: 590;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 28px;
}

.opx-error-alert-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* ===== OPX Success Alert Dialog (Global) ===== */
.opx-success-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 24px;
}

.opx-success-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.opx-success-alert-icon svg {
    width: 80px;
    height: 80px;
    color: #15803d;
    stroke-width: 2;
}

.opx-success-alert-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    color: #262626;
    word-break: break-word;
}

.opx-success-alert-title {
    font-size: 20px;
    font-weight: 590;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 28px;
}

.opx-success-alert-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* ===== OPX Alert Dialogs — Responsive (Mobile / Tablet) =====
   All rules below are scoped inside max-width media queries so the
   desktop appearance (>768px) is completely unaffected.
   ============================================================= */

/* ---- Tablet / small desktop (≤960px) -----------------------------------------
   Problem 1: SweetAlert2 sets its own fixed width (~32em / 512px) on .swal2-popup.
   Our base style only sets max-width:513px, which does not prevent the popup from
   overflowing narrow viewports when SweetAlert's own width property wins. Adding
   an explicit fluid width (100vw minus 16px margins on each side) ensures the
   popup always fits with comfortable breathing room. max-width:513px is preserved
   so the dialog never grows wider than the design spec on larger screens.

   Problem 4 (partial): Padding on the content areas is reduced slightly from 24px
   to 20px at tablet width to give text and buttons a little more room before
   reaching the narrower breakpoint where more aggressive reductions apply.
   ----------------------------------------------------------------------------- */
@media (max-width: 960px) {
    /* Fluid popup width — never wider than (viewport − 32px of margin).
       !important is required to beat SweetAlert2's own inline/rule-level width. */
    .opx-warning-popup {
        width: calc(100vw - 32px) !important;
        max-width: 513px !important;
    }

    /* Gently narrow content padding from 24px → 20px on tablets so inner
       elements have more clearance. Desktop (>768px) is untouched. */
    .opx-warning-alert,
    .opx-error-alert,
    .opx-success-alert {
        padding: 0 20px;
    }

    /* Keep the Discard Transaction dialog's text block and its action row
       in sync with the tightened padding above. */
    .opx-discard-dialog,
    .opx-discard-actions {
        padding: 0 20px;
    }
}

/* ---- Mobile phones (≤480px) --------------------------------------------------
   At this breakpoint the popup is ≈ 288–448px wide. Four adjustments are made:

   Problem 1 (continued): The fluid width rule from 768px already handles this,
   but the popup now operates in a very narrow band so padding/spacing must shrink.

   Problem 2: The two-button row (Cancel + Confirm/OK) with two min-width:120px
   buttons and a 12px gap can total > 252px, which is too tight inside a 288px
   popup after padding. flex:1 + min-width:0 on each button lets them share the
   row width equally so neither overflows. reverseButtons:true order (Cancel left,
   Confirm right) is preserved — we only change how the buttons size, not their
   DOM/flex order.

   Problem 3: Icon shrinks 80px → 64px, gap reduces 20px → 16px, and the top
   margin on the actions row drops 32px → 20px to keep the dialog compact and
   avoid unnecessary scrolling on phones.

   Problem 5: The X close button shifts inward by 4px on each axis to stay
   visually comfortable inside the narrower popup, while still sitting in its
   expected top-right corner position.
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Tighten lateral content padding from 20px → 16px to reclaim horizontal
       space for text and buttons on the narrowest phones. */
    .opx-warning-alert,
    .opx-error-alert,
    .opx-success-alert {
        padding: 0 16px;
        /* Reduce row gap between icon and text block from 20px → 16px so the
           dialog takes less vertical height without feeling cramped. */
        gap: 16px;
    }

    /* Keep Discard dialog content + action row aligned with the new 16px padding. */
    .opx-discard-dialog,
    .opx-discard-actions {
        padding: 0 16px;
    }

    /* Problem 5: X close button — shift inward by 4px on each axis so it stays
       comfortably within the narrower popup boundary and doesn't overlap text. */
    .opx-warning-popup .swal2-close {
        top: 16px;
        right: 16px;
    }

    /* Problem 3: Shrink icon containers from 80px → 64px to save vertical space
       on phones. Only dimensions are changed; colors and stroke-width are left
       untouched because the warning/error/success icon colors were recently
       finalised and must not be overridden here. */
    .opx-warning-alert-icon,
    .opx-error-alert-icon,
    .opx-success-alert-icon {
        width: 64px;
        height: 64px;
    }

    .opx-warning-alert-icon svg,
    .opx-error-alert-icon svg,
    .opx-success-alert-icon svg {
        width: 64px;
        height: 64px;
        /* NOTE: color (#ffb566 / #bf0e0e / #15803d) and stroke-width (2) are
           intentionally NOT redeclared — preserve the recently-shipped icon
           fill colors exactly as they are in the base rule. */
    }

    /* Problem 3 (continued): Reduce the top margin above the action buttons from
       32px → 20px to shorten overall dialog height. Both the single-button variant
       (.opx-warning-popup .swal2-actions) and the two-button variant
       (.opx-alert-actions-two-btn, used as customClass.actions) are covered. */
    .opx-warning-popup .swal2-actions,
    .opx-alert-actions-two-btn {
        margin-top: 20px !important;
    }

    /* Problem 2: Two-button row — give each button flex:1 so they split the
       available width equally and neither can force the row to overflow.
       min-width is reset to 0 (was 120px) because at 320px the content area
       is only ~256px, and two 120px+ buttons would exceed that even with flex.
       Height (44px) is untouched on .opx-alert-confirm-btn-small; min-height
       (44px) is untouched on .opx-alert-cancel-btn — both remain ≥44px for
       touch target compliance. Padding is narrowed from 32px → 16px per side
       so button labels don't get clipped at minimum width.
       reverseButtons:true order is preserved — we only change sizing, not
       flex-direction or DOM order. */
    .opx-alert-cancel-btn,
    .opx-alert-confirm-btn-small {
      /*  flex: 1;
        min-width: 0;
        padding-left: 16px;
        padding-right: 16px; */
        padding: 5px 10px;
    }
}

/* ============================================================
   Mobile slide-out menu — Switch Account (scoped overrides)
   All selectors are prefixed with .mobile-nav to ensure they
   do NOT affect the desktop profile-dropdown instance.
   ============================================================ */

/* Toggle row — matches the style of .mobile-nav-section a links */
.mobile-nav .mobile-company-selector-wrapper {
    position: static;
    margin-bottom: 4px;
}

.mobile-nav .mobile-company-selector-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s;
}

.mobile-nav .mobile-company-selector-toggle:hover {
    background: none;
    border-color: transparent;
}

/* Company name styled like the other mobile nav links */
.mobile-nav .mobile-company-selector-toggle .company-name {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-nav .mobile-company-selector-toggle .company-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
}

.mobile-nav .mobile-company-selector-toggle .company-chevron {
    font-size: 16px;
    color: #999999;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Rotate chevron when expanded */
.mobile-nav .mobile-company-selector-toggle[aria-expanded="true"] .company-chevron {
    transform: rotate(180deg);
}

/* Account list — hidden by default, shown when expanded.
   Long lists scroll internally (capped height). overscroll-behavior: contain
   keeps the inner scroll from chaining to the outer .mobile-menu, and
   -webkit-overflow-scrolling: touch gives smooth momentum scrolling on iOS. */
.mobile-nav .mobile-account-list {
    display: none;
    position: static !important;
    float: none !important;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-top: 0 !important;
    padding: 0 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mobile-nav .mobile-account-list.open {
    display: block;
}

/* Account items inside mobile list */
.mobile-nav .mobile-account-list .account-dropdown-item {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f5f5f5;
}

.mobile-nav .mobile-account-list .account-dropdown-item:last-child {
    border-bottom: none;
}

.mobile-nav .mobile-account-list .account-dropdown-item-name {
    font-size: 13px;
}

/* ========================================
   OPX 6.0 Error Page
   Scoped to body.opx6-error-page — used ONLY by Views/Shared/Error.cshtml
   ======================================== */

body.opx6-error-page {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    color: #262626;
}

.opx6-error-page .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-height: 100vh;
    padding: 40px 20px;
    text-align: center;
    animation: opx6ErrorFadeInUp 0.6s ease-out;
}

.opx6-error-page .error-illustration {
    width: 260px;
    height: 180px;
    object-fit: cover;
}

.opx6-error-page .error-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
    max-width: 600px;
}

.opx6-error-page .error-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.opx6-error-page .error-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    color: #171717;
}

.opx6-error-page .error-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #262626;
}

.opx6-error-page .error-code {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #404040;
}

.opx6-error-page .error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 44px;
    padding: 8px 32px;
    background: #ffac00;
    border: none;
    border-radius: 99999px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #262626;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.opx6-error-page .error-btn:hover {
    background: #e69a00;
    color: #262626;
}

.opx6-error-page .error-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #262626;
    text-decoration: none;
    cursor: pointer;
}

.opx6-error-page .error-help:hover {
    color: #262626;
    text-decoration: underline;
}

.opx6-error-page .error-help .lucide {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .opx6-error-page .error-container { padding: 30px 15px; gap: 24px; }
    .opx6-error-page .error-illustration { width: 208px; height: 144px; }
    .opx6-error-page .error-title { font-size: 26px; line-height: 34px; }
    .opx6-error-page .error-subtitle { font-size: 16px; line-height: 22px; }
    .opx6-error-page .error-btn { width: 100%; max-width: 260px; }
}

@keyframes opx6ErrorFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Transaction amount cell — FROM/TO currency pair */

.txn-amount-fx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.txn-amount-fx .txn-amount-from {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #171717;
}

.txn-amount-fx .txn-amount-to {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #737373;
}

@media (max-width: 480px) {
    .txn-amount-fx .txn-amount-to {
        font-size: 12px;
        line-height: 16px;
    }
}