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

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

.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: 768px) {
    .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;
        /* Reorder the language-selector to appear AFTER the mobile-menu-toggle
           visually, so it sits at the top-right corner of the header instead of
           being pushed left by the hamburger button.
           DOM order is notification → language-selector → toggle; CSS order:2
           moves language-selector past the toggle (order:0 default) without
           touching the markup.  The notification-icon stays at order:0 so the
           visual sequence on mobile becomes:
             logged-in:  [notification] [hamburger] [globe / lang-selector]
             logout:     [hamburger] [globe / lang-selector]
           Only active inside this media query — desktop layout is unaffected. */
        order: 2;
    }

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

    /* Language dropdown: right-aligned to the language-selector's right edge so it
       opens inward (leftward) from the top-right corner, constrained to the viewport
       so it is always fully visible / never truncated off the right side.
       Changed from "left:0; right:0" (which anchored to the selector's left edge and
       caused the menu to overflow the viewport once the selector moved to the far
       right) to "right:0; left:auto" (which right-aligns the menu to the selector's
       right edge and lets it grow leftward up to max-width).
       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: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #dc2626;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: none;
}

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

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

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

/* 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{
    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 (≤768px) -----------------------------------------
   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: 768px) {
    /* 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;
}