/* Modern gradient background for welcome card */
:root {
    --font-Montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-Roboto: 'Roboto', sans-serif;
    --premium-cream: #FAF9F6;
    --slate-gray: #334155;
    --orange-primary: #fe6700;
    --orange-soft: rgba(254, 103, 0, 0.1);
    --app-font-size: 13px;
}

/* Global Typography Consistency */
body, p, a, li, td, th, input, select, textarea, button, label, h1, h2, h3, h4, h5, h6, .form-control, .form-select {
    font-family: var(--font-Montserrat);
}

/* Ensure Icon Fonts Are Never Overridden */
.fa, .fas, .far, .fal, .fad, .fat,
[class^="fa-"], [class*=" fa-"],
i.fa, i.fas, i.far, i.fal, i.fad, i.fat {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
}

.fab, .fa-brands, [class^="fa-brands"], [class*=" fa-brands"], i.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

.ti, [class^="ti-"], [class*=" ti-"], i.ti {
    font-family: "tabler-icons" !important;
}

body {
    font-size: var(--app-font-size) !important;
}

.f-s-11 { font-size: 11px !important; }
.f-s-12 { font-size: 12px !important; }
.f-s-13 { font-size: 13px !important; }
.f-s-14 { font-size: 14px !important; }
.f-s-15 { font-size: 15px !important; }
.f-s-16 { font-size: 16px !important; }
.f-s-18 { font-size: 18px !important; }
.f-s-20 { font-size: 20px !important; }
.f-s-24 { font-size: 24px !important; }
.f-s-28 { font-size: 28px !important; }

.f-w-400 { font-weight: 400 !important; }
.f-w-500 { font-weight: 500 !important; }
.f-w-600 { font-weight: 600 !important; }
.f-w-700 { font-weight: 700 !important; }
.f-w-800 { font-weight: 800 !important; }
.f-w-900 { font-weight: 900 !important; }

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-Montserrat) !important;
}

/* Quick Rate Calculator Unified Styles */
.nav-pills-custom {
    background: #f1f5f9 !important;
    padding: 4px !important;
    border: 1px solid #e2e8f0;
    border-radius: 14px !important;
    display: flex;
}
.nav-pills-custom .nav-link {
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
    background: transparent;
    font-size: 13px;
    border-radius: 10px !important;
}
.nav-pills-custom .nav-link.active {
    background: #fff8f2 !important;
    color: #ff7820 !important;
    box-shadow: 0 2px 8px rgba(255, 120, 32, 0.08);
    border: 1px solid rgba(255, 120, 32, 0.2) !important;
}
.nav-pills-custom .nav-link:hover:not(.active) {
    color: #ff7820;
    background: rgba(255, 120, 32, 0.05);
}

.bg-orange-soft { background-color: #fff4ed !important; }
.bg-light-primary-soft { background-color: #f0fdf4 !important; }
.bg-light-orange { background-color: rgba(254, 103, 0, 0.08) !important; }
.shadow-orange { box-shadow: 0 10px 20px -5px rgba(254, 103, 0, 0.3) !important; }
.shadow-orange-sm { box-shadow: 0 4px 12px rgba(254, 103, 0, 0.15) !important; }
.shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; }

.btn-orange {
    background-color: #fe6700 !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s ease;
}
.btn-orange:hover {
    background-color: #e55d00 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(254, 103, 0, 0.25) !important;
}

.calc-card-container {
    max-width: 580px;
    margin: 0 auto;
}

/* Modern Auth Forms Typography and Input Styling */
.it-signup-title {
    font-family: var(--font-Montserrat) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px;
    font-size: 32px !important;
}
.it-signup-wrap > span,
.it-signup-wrap > p {
    font-family: var(--font-Montserrat) !important;
    color: #64748b !important;
    font-size: 14px;
    font-weight: 500;
    display: block;
}
.it-signup-input {
    position: relative !important;
    margin-bottom: 1.25rem !important;
}
.it-signup-input input {
    width: 100% !important;
    height: 56px !important;
    line-height: normal !important;
    padding-left: 62px !important;
    padding-right: 50px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: var(--font-Montserrat) !important;
    font-size: 15px !important;
    font-weight: 500;
    color: #0f172a !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
}
.it-signup-input input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}
.it-signup-input input:focus {
    border-color: #ff7300 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 115, 0, 0.12) !important;
    outline: none;
}
.it-signup-input .it-signup-input-icon {
    position: absolute !important;
    top: 50% !important;
    left: 22px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    color: #5F6168 !important;
    width: 20px !important;
    font-size: 16px !important;
}
.it-signup-input .toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    color: #5F6168 !important;
}
.it-signup-btn button,
.it-btn.circle-effect,
.it-btn.theme-style {
    font-family: var(--font-Montserrat) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    background: #ff7300 !important;
    position: relative !important;
    overflow: hidden !important;
}
.it-signup-btn button span,
.it-btn.circle-effect span,
.it-btn.theme-style span {
    font-family: var(--font-Montserrat) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #ffffff !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 2 !important;
}
.it-signup-btn button {
    height: 56px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 115, 0, 0.3) !important;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.it-signup-btn button:hover,
.it-btn.circle-effect:hover,
.it-btn.theme-style:hover {
    background: #e66800 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(255, 115, 0, 0.4) !important;
}
/* Disable circular hover animation on all buttons */
.it-btn::after,
.it-btn:hover::after,
.it-btn::before,
.it-btn:hover::before,
.pg-btn::after,
.pg-btn:hover::after,
.pg-btn::before,
.pg-btn:hover::before,
.pg-btn-light::after,
.pg-btn-light:hover::after,
.pg-btn-light:after,
.pg-btn-light:hover:after,
.circle-effect::after,
.circle-effect:hover::after,
.circle-effect::before,
.circle-effect:hover::before,
.it-signup-btn button::after,
.it-signup-btn button:hover::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
}
.it-signup-forget a, .it-signup-text a, .form-check-label {
    font-family: var(--font-Montserrat) !important;
    font-weight: 600;
    color: #ff7300 !important;
}

.project-details-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(14deg, #1e253b 0%, #635bff 100%);
    box-shadow: 0 4px 32px rgba(30, 41, 59, 0.08);
}

/* Optional: animated gradient overlay */
.project-details-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.project-details-card>.card-body {
    position: relative;
    z-index: 2;
}

.text-main {
    color: rgb(255 255 255) !important;
}

.bg-blue-300 {
    background-color: #2e5ee74d !important;
    color: #2e5ee7;
}

.text-white {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    margin: 5px;
}


.bg-blue {
    background-color: #f7f8f8 !important;
    color: #ffffff !important;
}

.bg-orange {
    background-color: var(--orange-primary) !important;
    color: #ffffff !important;
}

.text-orange {
    color: var(--orange-primary) !important;
}

.bg-cream {
    background-color: var(--premium-cream) !important;
}

.text-slate {
    color: var(--slate-gray) !important;
}

.btn-orange {
    background-color: var(--orange-primary) !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-orange:hover {
    background-color: #e55d00 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 103, 0, 0.2);
}

.px-22 {
    padding-right: 15rem !important;
    padding-left: .5rem !important;
}

@media screen and (max-width: 768px) {
    .px-22 {
        padding-right: .5rem !important;
        padding-left: .5rem !important;
    }
}

.btn-green {
    background-color: #34a853;
    border: 1px solid #34a853;
    color: rgba(var(--white), 1);
}

.btn-lighting {
    background-color: rgb(254 103 0 / 41%);
    border: 1px solid rgb(254 103 0 / 0%);
    color: black;
}

.bg-lighting {
    background-color: rgb(254 103 0 / 41%);
    border: 1px solid rgb(254 103 0 / 0%);
    color: black;
}

.btn-bluy {
    background-color: #2e5ee74d !important;
    color: #2e5ee7;
}

.bg-lighting-soft {
    background-color: #ff83313d;
    border: 1px solid #ff83313d;
    color: black;
}

.tv-ticker-item-last__short-name {
    font-family: poppins, sans-serif !important;
}

/* Payment Method Tabs Active State */
.checkout-tabs-step .tab.checkout-current-step {
    border: 2px solid transparent !important;
    border-radius: 15px;
    transition: all 0.3s ease;
    padding: 10px;
    margin-right: 15px;
}

.checkout-tabs-step .tab.checkout-current-step.active {
    border-color: #fe6700 !important;
    background-color: #fe67000d !important;
    /* Very light orange */
    box-shadow: 0 4px 15px rgba(254, 103, 0, 0.1);
}

.checkout-tabs-step .tab.checkout-current-step:hover:not(.active) {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
}

.checkout-tabs-step .tab.active .tabs-steps i,
.tab.active .tabs-steps i {
    color: #fff !important;
}

/* Ensure admin content is not covered by fixed sidebar on desktop */
@media screen and (min-width: 992px) {
    .app-wrapper .app-content {
        padding-left: var(--sidebar-width) !important;
    }
}

/* Admin Pagination Fixes */
.pagination-footer {
    position: relative;
    width: 100%;
    background: #fff;
    z-index: 5;
    clear: both;
}

.pagination-footer .pagination .page-link {
    padding: 0.5rem 1rem;
    font-size: 13px;
    border-radius: 8px !important;
    margin: 0 2px;
    border: 1px solid #e9ecef;
    color: #495057;
}

.pagination-footer .pagination .page-item.active .page-link {
    background-color: #635bff !important;
    border-color: #635bff !important;
    color: #fff !important;
}

.pagination-footer .pagination .page-item.disabled .page-link {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #adb5bd !important;
}

/* Chat Bubble Aesthetics & Conversation Container */
.conversation-container {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.conversation-container .d-inline-block {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.conversation-container .d-inline-block,
.conversation-container .f-s-13 {
    color: #000000 !important;
}

/* Dashboard Pagination Alignment Fix */
.pagination-footer {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 0;
    flex-wrap: wrap;
    gap: 15px;
}

.pagination-footer nav {
    margin-left: auto;
}

@media screen and (max-width: 576px) {
    .pagination-footer {
        flex-direction: column;
        text-align: center;
    }

    .pagination-footer nav {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* Badge for message counters */
.counter-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff3b30;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-icon-wrapper {
    position: relative;
    display: inline-block;
}

/* Premium Custom Dropdown Styles */
.premium-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    margin-bottom: 1rem;
}

.premium-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #f7f8f8;
    border: 1.5px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    color: #334155;
}

.premium-select-trigger:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.premium-select-wrapper.active .premium-select-trigger {
    background: #fff;
    border-color: #fe6700;
    box-shadow: 0 4px 12px rgba(254, 103, 0, 0.1);
}

.premium-select-selected {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-select-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 50%;
}

.premium-select-arrow {
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.premium-select-wrapper.active .premium-select-arrow {
    transform: rotate(180deg);
}

.premium-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 290px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.premium-select-dropdown::-webkit-scrollbar {
    width: 7px !important;
    display: block !important;
}

.premium-select-dropdown::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
}

.premium-select-dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 8px !important;
}

.premium-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #fe6700 !important;
}

.premium-select-wrapper.active .premium-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.premium-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.premium-select-option:hover {
    background: #f8fafc;
}

.premium-select-option.selected {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
}

.premium-select-option .option-info {
    display: flex;
    flex-direction: column;
}

.premium-select-option .option-label {
    font-size: 14px;
}

.premium-select-option .option-network {
    font-size: 11px;
    color: #94a3b8;
}

/* Hide original select but keep it functional for form submission */
.premium-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Page body top spacing to prevent header overlap */
.page-body {
    padding-top: 2.5rem !important;
}

/* Explicit sidebar active styles for SPA consistency */
.main-nav li.active > a {
    color: var(--orange-primary) !important;
    background-color: var(--orange-soft) !important;
    border-radius: 12px;
}
.main-nav li.active > a i {
    color: var(--orange-primary) !important;
}
.main-nav li.active > .collapse li a.active {
    color: var(--orange-primary) !important;
    font-weight: 600;
}

/* Text Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Option Hover Cards for Add Cash Modal */
.option-hover-card {
    transition: all 0.2s ease-in-out;
}
.option-hover-card:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================
   MOBILE BOTTOM NAVIGATION SYSTEM
   ========================================== */
@media (max-width: 991px) {
    /* Hide desktop/mobile sidebar drawer elements */
    .app-wrapper nav,
    .header-toggle {
        display: none !important;
    }
    
    /* Ensure content does not overlay with header/footer */
    .app-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .page-body {
        padding-bottom: 80px !important;
    }

    /* Fixed bottom navigation container (Sticky Tab Bar) */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04) !important;
        z-index: 10000 !important;
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        padding: 0 8px;
        box-sizing: border-box;
    }

    /* Navigation item structure */
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #64748b !important;
        text-decoration: none !important;
        font-family: var(--font-Montserrat) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        height: 52px;
        border-radius: 26px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 6px 12px;
        margin: 0 2px;
        box-sizing: border-box;
        flex: 1;
        min-width: 0;
    }

    /* Wrapper for custom icons to ensure perfect centering */
    .bottom-nav-item .nav-icon-wrapper {
        font-size: 20px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
        color: #64748b !important;
        transition: transform 0.2s ease-in-out;
    }

    /* Active Highlight States - Simple Elegant Active Highlight */
    .bottom-nav-item.active:not(.bottom-nav-center) {
        background: transparent !important;
        color: #fe6700 !important;
        box-shadow: none !important;
    }

    .bottom-nav-item.active:not(.bottom-nav-center) .nav-icon-wrapper {
        color: #fe6700 !important;
        transform: scale(1.1);
    }

    /* Circular Raised Center Tab (Style 2) */
    .bottom-nav-center {
        position: relative !important;
        top: -12px !important;
        max-width: 56px !important;
        height: 56px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        border: 2px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        z-index: 10001 !important;
        padding: 0 !important;
        flex: 0 0 56px !important;
    }

    .bottom-nav-center .nav-icon-wrapper {
        margin: 0 !important;
        height: auto !important;
        font-size: 22px !important;
        color: #fe6700 !important;
    }

    .bottom-nav-center.active {
        background: #fe6700 !important;
        border-color: #fe6700 !important;
        box-shadow: 0 6px 20px rgba(254, 103, 0, 0.3) !important;
    }

    .bottom-nav-center.active .nav-icon-wrapper {
        color: #ffffff !important;
    }
}

/* Unified Transaction History Style (PalmPay Style) */
.history-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.history-header-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.history-download-link {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
}

.history-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #475569;
}

.history-filter-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 700;
}

.history-month-group {
    background: #f8fafc;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.history-month-name {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}

.history-month-flow {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.history-month-flow span {
    margin-right: 12px;
}

.tx-palm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: #ffffff;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background 0.2s;
}

.tx-palm-row:hover {
    background: #f8fafc;
}

.tx-palm-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.tx-palm-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.tx-palm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tx-palm-avatar i {
    font-size: 18px;
    color: #64748b;
}

.tx-palm-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tx-palm-title {
    font-size: 12.5px;
    font-weight: 600 !important;
    color: #0f172a;
    margin-bottom: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tx-palm-time {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 600;
}

.tx-palm-right {
    font-size: 13px;
    font-weight: 600 !important;
    text-align: right;
    margin-left: 10px;
}

/* Category Filter Bottom Sheet drawer tags styling */
.filter-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: left;
}

.filter-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.filter-tag-pill {
    padding: 6px 12px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.filter-tag-pill.active {
    background: #fff7ed !important;
    color: #fe6700 !important;
    border-color: #fe6700 !important;
}

.filter-sheet-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.filter-sheet-btn-cancel {
    flex: 1;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-weight: 700;
    border-radius: 12px;
    padding: 10px;
    font-size: 13px;
}

.filter-sheet-btn-confirm {
    flex: 1;
    background: #fe6700;
    color: #ffffff;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    padding: 10px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(254, 103, 0, 0.15);
}

@media (max-width: 991px) {
    /* Prevent go-top overlap and push support widget above capsule nav */
    .go-top {
        display: none !important;
    }
    
    #ocee-support-widget {
        bottom: 104px !important;
        right: 20px !important;
        z-index: 9999 !important;
    }

    /* Bottom Sheet Modal Styling */
    .bottom-sheet-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding-right: 0 !important;
        pointer-events: none !important;
    }
    
    .bottom-sheet-modal.show {
        display: flex !important;
        pointer-events: auto !important;
    }
    
    .bottom-sheet-modal .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateY(100%) !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .bottom-sheet-modal.show .modal-dialog {
        transform: translateY(0) !important;
    }
    
    .bottom-sheet-modal .modal-content {
        border-radius: 24px 24px 0 0 !important;
        border: none !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08) !important;
        background: #ffffff !important;
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bottom-nav-label {
        font-size: 9.5px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        margin-top: 1px !important;
        font-family: var(--font-Montserrat), sans-serif !important;
    }
    
    /* Drag handle visual */
    .bottom-sheet-drag-handle {
        width: 40px;
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        margin: 12px auto 0 auto;
    }
    
    /* Trade options styling */
    .trade-sheet-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        transition: all 0.2s ease-in-out;
        color: #1e293b !important;
        cursor: pointer;
    }
    
    .trade-sheet-option:hover {
        background: #fff8f2;
        border-color: #ffd8be;
    }
    
    .trade-sheet-option .trade-sheet-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: 8px;
        color: white;
    }
    
    .trade-sheet-option .trade-sheet-icon.bg-giftcard {
        background: linear-gradient(135deg, #fe6700, #ff8a3d) !important;
    }
    
    .trade-sheet-option .trade-sheet-icon.bg-crypto {
        background: linear-gradient(135deg, #fe6700, #ff8a3d) !important;
    }

    /* Mobile Header & Profile Dropdown Optimization */
    .header-main {
        height: 60px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    }
    .header-main .header-toggle {
        display: none !important;
    }
    .header-main .head-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }
    .header-main .header-right ul {
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        gap: 12px !important;
    }
    .header-profile-canvas {
        width: 250px !important;
        max-width: 250px !important;
        border-radius: 16px 0 0 16px !important;
    }
    .header-profile-canvas .offcanvas-header {
        padding: 10px 14px !important;
    }
    .header-profile-canvas .offcanvas-body {
        padding: 10px 14px !important;
    }
    .header-profile-canvas .profile-header-card {
        padding: 8px 10px !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
    }
    .header-profile-canvas .profile-menu-item {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    .header-profile-canvas .btn {
        margin-top: 8px !important;
        padding: 6px !important;
        font-size: 13px !important;
    }
    #ocee-support-widget {
        bottom: 135px !important;
    }
}

/* Premium Modern SweetAlert2 Global Custom Styling */
.swal2-container {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 11000 !important;
}

.swal2-popup {
    border-radius: 24px !important;
    padding: 30px 24px !important;
    font-family: 'Outfit', sans-serif !important;
    background: #ffffff !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    max-width: 380px !important;
}

.swal2-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-size: 20px !important;
    margin-top: 15px !important;
    padding: 0 !important;
}

.swal2-html-container {
    font-family: 'Inter', sans-serif !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 10px 0 0 0 !important;
}

.swal2-actions {
    margin-top: 24px !important;
    gap: 12px !important;
    width: 100% !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, #fe6700, #ff8a3d) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(254, 103, 0, 0.25) !important;
    flex-grow: 1 !important;
    outline: none !important;
    margin: 0 !important;
    transition: transform 0.2s !important;
}

.swal2-confirm:hover {
    transform: translateY(-1px) !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(254, 103, 0, 0.3) !important;
}

.swal2-cancel {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    flex-grow: 1 !important;
    outline: none !important;
    margin: 0 !important;
    transition: background 0.2s !important;
}

.swal2-cancel:hover {
    background: #e2e8f0 !important;
}

.swal2-icon {
    border-width: 3px !important;
    transform: scale(0.9) !important;
    margin: 10px auto 5px auto !important;
}

.swal2-icon.swal2-success {
    border-color: #fe6700 !important;
    color: #fe6700 !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #fe6700 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(254, 103, 0, 0.15) !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: #ef4444 !important;
}

.swal2-timer-progress-bar {
    background: rgba(254, 103, 0, 0.3) !important;
    height: 3px !important;
    border-radius: 1.5px !important;
}

/* Global input focus styles - Sleek Slate/Blue, NO ORANGE */
.form-control:focus,
.form-select:focus,
.input-group-text:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #94a3b8 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12) !important;
    outline: none !important;
}

/* Global input elements base - Sleek neutral slate gray */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

.form-select,
select {
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    padding: 10px 32px 10px 14px !important;
    font-size: 13px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

/* Crypto Funding Page - Lighten orange presence & reduce thickness */
.crypto-funding-page .bg-light-primary {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    border: 1px solid #e0f2fe !important;
}

.crypto-funding-page .bg-primary.bg-opacity-10 {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.crypto-funding-page .text-primary {
    color: #475569 !important;
}

.crypto-funding-page .btn-orange {
    height: 46px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(254, 103, 0, 0.15) !important;
}

/* Ensure the header maintains consistent height and positioning across all pages, even when back arrow is hidden on home page */
.header-main {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

.header-main .container-fluid, 
.header-main .row {
    width: 100% !important;
    align-items: center !important;
}

.header-left {
    min-height: 36px !important; /* Forces same height even when back button is hidden */
    display: flex !important;
    align-items: center !important;
}

/* Premium SPA Transitions & Fast Tap Styles */
.page-body {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    opacity: 1;
    transform: translateY(0);
}

.page-body.page-fade-out {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}

.bottom-nav-item, 
.bottom-nav-item *, 
.btn, 
.btn *, 
a, 
a * {
    touch-action: manipulation !important;
}

/* Align notification and profile icons closer to the right on mobile PWA views */
@media (max-width: 991px) {
    .header-main .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .header-right {
        padding-right: 0 !important;
    }
    .header-right ul {
        gap: 8px !important;
    }
    .header-right .head-icon {
        margin-right: 0 !important;
    }
}

/* Show header on desktop for transaction history page, hide on mobile PWA */
@media (max-width: 991px) {
    .naira-transactions-page .header-main {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .naira-transactions-page .header-main {
        display: block !important;
    }
}

/* Floating Profile Offcanvas (Desktop & Mobile) */
.header-profile-canvas {
    height: auto !important;
    max-height: fit-content !important;
    top: 75px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    width: 260px !important;
    max-width: 260px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease-in-out !important;
}
@media (max-width: 767px) {
    .header-profile-canvas {
        top: 65px !important;
        right: 10px !important;
        width: 240px !important;
        max-width: 240px !important;
    }
}

/* Align and normalize spacing between header notification and profile icons */
header.header-main .header-right ul {
    gap: 8px !important;
}
header.header-main .header-right li {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
header.header-main .header-profile {
    margin-left: 4px !important;
    margin-right: 0 !important;
}

/* Mobile spacing & padding fixes for PWA transaction rows */
@media screen and (max-width: 576px) {
    #transactions-list-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .card-header.py-3.px-4 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .tx-palm-row {
        padding: 12px 8px !important;
    }
    .tx-palm-info {
        max-width: calc(100vw - 180px) !important;
    }
}


/* PWA Layout Spacing & Sticky Header Alignment */
@media (max-width: 991px) {
    /* Reset app-content top padding on mobile */
    .app-content {
        padding-top: 0px !important;
    }

    /* Keep main layout cards snug when header is hidden on sub-pages */
    body:not(.page-dashboard) .page-body {
        padding-top: calc(15px + env(safe-area-inset-top, 0px)) !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 991px) {
    body.page-settings .container-fluid,
    body.page-profile .container-fluid,
    body.page-security .container-fluid,
    body.page-notifications .container-fluid,
    body.page-kyc .container-fluid,
    body.page-bank .container-fluid,
    body.page-virtual-account .container-fluid,
    body.page-referrals .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    body.page-settings .col-md-8,
    body.page-profile .col-md-8,
    body.page-security .col-md-8,
    body.page-notifications .col-md-8,
    body.page-kyc .col-md-8,
    body.page-bank .col-md-8,
    body.page-virtual-account .col-md-8,
    body.page-referrals .col-md-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Centered Desktop Layout for Transaction History */
@media (min-width: 992px) {
    body.naira-transactions-page .history-header-bar {
        max-width: 900px !important;
        margin: 20px auto 10px auto !important;
        border-radius: 16px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    }
    
    body.naira-transactions-page .history-filter-bar {
        max-width: 900px !important;
        margin: 0 auto 15px auto !important;
        border-radius: 16px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    }

    body.naira-transactions-page .page-body .container-fluid {
        max-width: 900px !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Security Settings Page Reset */
.page-security .form-control:focus,
.page-security .input-group-text:focus,
.page-security input:focus {
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

.page-security .input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.15) !important;
    border-radius: 8px !important;
}

.page-security .input-group:focus-within .input-group-text,
.page-security .input-group:focus-within .form-control {
    border-color: #cbd5e1 !important;
}

/* Stretch detail page containers to full width on PWA/Mobile */
@media screen and (max-width: 768px) {
    body.page-profile .page-body .container-fluid,
    body.page-security .page-body .container-fluid,
    body.page-kyc .page-body .container-fluid,
    body.page-notifications .page-body .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    body.page-profile .page-body .col-md-8,
    body.page-security .page-body .col-md-8,
    body.page-kyc .page-body .col-md-8,
    body.page-notifications .page-body .col-md-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    body.page-profile .premium-profile-card,
    body.page-profile .card,
    body.page-security .card,
    body.page-kyc .card,
    body.page-notifications .card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Fix settings option list width from min-content to full width */
.vertical-tab > ul {
    width: 100% !important;
}

/* Neutralize security page icons and input groups backgrounds/colors */
body.page-security .input-group-text,
.page-security .input-group-text {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}
body.page-security .input-group-text i,
.page-security .input-group-text i {
    color: #64748b !important;
    background: transparent !important;
}
body.page-security .input-group:focus-within .input-group-text {
    border-color: #cbd5e1 !important;
}

/* Neutralize referral history table header background */
body.page-security #user-referrals-table thead,
body.page-referrals #user-referrals-table thead tr,
body.page-referrals #user-referrals-table thead th {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #64748b !important;
}

/* Remove orange background from warning/alert boxes in crypto funding page and deposit details modal */
.crypto-funding-page .alert.alert-light,
#cryptoPreviewModal .alert.alert-light {
    background-color: #ffe5b4 !important;
    color: #856404 !important;
    border: 1px solid #ffe3b3 !important;
}

.crypto-funding-page .alert.alert-light i,
#cryptoPreviewModal .alert.alert-light i {
    color: #856404 !important;
}

/* Global Modal Layering over Mobile Bottom Nav & Floating Chat Widgets */
.modal-backdrop {
    z-index: 100050 !important;
}
.modal {
    z-index: 100060 !important;
}
.modal-dialog {
    z-index: 100065 !important;
}
.modal-content {
    z-index: 100070 !important;
}

body.modal-open .mobile-bottom-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.modal-open [id*="tawk"],
body.modal-open #chat-widget-container,
body.modal-open .tawk-min-container {
    display: none !important;
}