.notify {
    position: fixed;
    z-index: 99999;
}

.notify button {
    background-color: transparent;
    background-image: none;
    padding: 0;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

.notify svg {
    display: block;
    vertical-align: middle;
}

/* =========================
   Auth Pages (Login/Register)
   ========================= */
.site-auth {
    background: radial-gradient(1200px 500px at 50% -10%, rgba(45, 139, 255, 0.25), rgba(4, 20, 37, 0) 55%),
    radial-gradient(900px 500px at 20% 110%, rgba(0, 212, 255, 0.18), rgba(4, 20, 37, 0) 60%),
    #041425 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 40px 0 !important;
}

.site-auth .auth-content {
    background: rgba(9, 19, 38, 0.92) !important;
    border: 1px solid rgba(77, 143, 255, 0.28) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45) !important;
    padding: 22px 18px !important;
    color: rgba(230, 241, 255, 0.88) !important;
}

.site-auth .auth-content .logo a img {
    height: 30px !important;
    width: auto !important;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.site-auth .auth-content .title h2 {
    color: #e6f1ff !important;
}

.site-auth .auth-content .title p {
    color: rgba(207, 230, 255, 0.72) !important;
}

.site-auth .auth-content .site-auth-form .box-label,
.site-auth .auth-content .site-auth-form .form-check-label {
    color: rgba(207, 230, 255, 0.78) !important;
}

.site-auth .auth-content .site-auth-form .box-input,
.site-auth .auth-content .site-auth-form .form-select,
.site-auth .auth-content .site-auth-form .site-nice-select {
    background: rgba(7, 12, 27, 0.65) !important;
    border: 1px solid rgba(77, 143, 255, 0.3) !important;
    color: #e6f1ff !important;
    border-radius: 12px !important;
}

.site-auth .auth-content .site-auth-form .box-input::placeholder {
    color: rgba(174, 198, 232, 0.55) !important;
}

.site-auth .auth-content .site-auth-form .box-input:focus,
.site-auth .auth-content .site-auth-form .form-select:focus {
    border-color: rgba(0, 212, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(45, 139, 255, 0.18) !important;
}

.site-auth .auth-content .site-auth-form .check-input:checked {
    background-color: #2d8bff !important;
    border-color: rgba(77, 143, 255, 0.6) !important;
}

.site-auth .auth-content .site-auth-form .forget-pass-text a,
.site-auth .auth-content .site-auth-form .singnup-text a {
    color: #66d7ff !important;
}

.site-auth .auth-content .site-auth-form .singnup-text p {
    color: rgba(207, 230, 255, 0.72) !important;
}

/* =========================
   Homepage/Header Pill Style
   ========================= */
.header {
    background: transparent !important;
    border-bottom: none !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.header .navbar {
    padding: 0 !important;
}

/* Override the web3-home.css sticky header background/blur so only the pill shows */
.web3-home-body .header {
    background: transparent !important;
    border-bottom: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.web3-home-body .header .navbar {
    padding: 0 !important;
}

/* The "pill" container */
.header .navbar .container-fluid {
    max-width: 1180px;
    margin: 12px auto 0;
    padding: 12px 18px !important;
    background: rgba(7, 16, 34, 0.72) !important;
    border: 1px solid rgba(77, 143, 255, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.header .navbar .navbar-brand img {
    height: 32px !important;
    width: auto !important;
}

/* Hamburger: remove any “extra blue box” look */
.header .navbar .navbar-toggler {
    background: transparent !important;
    border: none !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
}

.header .navbar .navbar-toggler:focus {
    box-shadow: none !important;
}

.header .navbar .main-nav .nav-item a.nav-link {
    color: rgba(230, 241, 255, 0.82) !important;
}

.header .navbar .main-nav .nav-item a.nav-link:hover,
.header .navbar .main-nav .nav-item a.nav-link.active {
    color: #66d7ff !important;
}

@media (max-width: 991px) {
    .header .navbar .container-fluid {
        max-width: none;
        margin: 10px 12px 0;
        padding: 10px 14px !important;
        border-radius: 16px !important;
    }

    .header .navbar-collapse {
        padding-top: 10px;
    }
}

/* Hero spacing: header is fixed, so give the hero room (mobile had only 44px top padding). */
@media (max-width: 767px) {
    .web3-home .banner.hero-xrp-earn {
        padding-top: 118px !important;
        padding-bottom: 54px !important;
    }
}

/* =========================
   Mobile Bottom Nav Spacing
   ========================= */
@media (max-width: 575px) {
    .panel-layout .page-container .main-content {
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }
}

/* =========================
   Deposit Modal (Web3)
   ========================= */
.web3-deposit-modal .form-label,
.web3-deposit-modal .input-info-text,
.web3-deposit-modal .user-panel-title h3,
.web3-deposit-modal .table td,
.web3-deposit-modal .table strong {
    color: rgba(230, 241, 255, 0.86) !important;
}

.web3-deposit-modal .text-muted {
    color: rgba(207, 230, 255, 0.6) !important;
}

.web3-deposit-modal .form-control,
.web3-deposit-modal .input-group-text,
.web3-deposit-modal .form-select {
    background: rgba(7, 12, 27, 0.72) !important;
    border: 1px solid rgba(77, 143, 255, 0.3) !important;
    color: #e6f1ff !important;
}

.web3-deposit-modal .form-control::placeholder {
    color: rgba(174, 198, 232, 0.55) !important;
}

.web3-deposit-modal .table {
    color: rgba(230, 241, 255, 0.86) !important;
}

.web3-deposit-modal .table > :not(caption) > * > * {
    background: transparent !important;
    border-color: rgba(77, 143, 255, 0.15) !important;
}

.web3-deposit-modal .modal-body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

.web3-deposit-modal .buttons {
    position: sticky;
    bottom: 0;
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(11, 20, 44, 0), rgba(11, 20, 44, 0.92) 35%, rgba(11, 20, 44, 0.98));
    backdrop-filter: blur(10px);
}

.web3-deposit-modal .payment-method {
    max-height: 32px;
    width: auto;
    display: inline-block;
}

/* Deposit page helper text on dark cards */
.progress-steps-form .text-muted,
.progress-steps-form p.text-muted {
    color: rgba(207, 230, 255, 0.6) !important;
}

/* Footer "Powered By" pill */
.powered-by-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding-bottom: 10px;
}

.powered-by-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(12, 35, 70, 0.55);
    border: 1px solid rgba(77, 143, 255, 0.35);
    color: rgba(217, 231, 255, 0.92);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.powered-by-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #00d4ff;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.14);
}

/* =========================
   Modal Layering (User Panel)
   Fix: ensure backdrop covers sidebar/header on desktop
   ========================= */
.modal-backdrop {
    z-index: 4990 !important;
}

.modal {
    z-index: 5000 !important;
}

.modal-backdrop.show {
    opacity: 0.72 !important;
    background-color: #020915 !important;
}

/* Always allow clicking inside the modal dialog even on weird stacking-context pages */
.modal-dialog {
    pointer-events: auto !important;
}



/* Web3 blue button defaults */
.site-btn,
.site-btn-sm,
.primary-btn,
.grad-btn {
    background: linear-gradient(120deg, #2d8bff, #00d4ff) !important;
    border: none !important;
    color: #061028 !important;
}

.site-btn.white-btn,
.site-btn.black-btn {
    background: rgba(9, 19, 38, 0.9) !important;
    border: 1px solid rgba(77, 143, 255, 0.35) !important;
    color: #e8f2ff !important;
}

.site-btn-sm.primary-btn {
    background: linear-gradient(120deg, #2d8bff, #00d4ff) !important;
    color: #061028 !important;
}

.site-btn-sm.secondary-btn,
.site-btn-sm.light-btn {
    background: rgba(45, 139, 255, 0.15) !important;
    border: 1px solid rgba(77, 143, 255, 0.45) !important;
    color: #e8f2ff !important;
}

/* Force legacy pink/orange buttons to blue */
.site-btn-round,
.site-btn-round.red-btn,
.site-btn-round.blue-btn,
.site-btn-round.primary-btn,
.site-btn-round.pink-btn,
.site-btn-round.orange-btn,
.site-btn-round.yellow-btn,
.site-btn-round.green-btn {
    background: linear-gradient(120deg, #2d8bff, #00d4ff) !important;
    border: none !important;
    color: #061028 !important;
}

.mobile-referral-link-form button,
.referral-link-form button,
.moreless-button,
.moreless-button-2 {
    background: linear-gradient(120deg, #2d8bff, #00d4ff) !important;
    border: none !important;
    color: #061028 !important;
}

.bottom-appbar {
    background: rgba(9, 19, 38, 0.95) !important;
    border: 1px solid rgba(77, 143, 255, 0.35) !important;
}

.bottom-appbar a {
    color: rgba(124, 198, 255, 0.85) !important;
}

.mob-shortcut-btn a {
    background: rgba(9, 19, 38, 0.9) !important;
    border: 1px solid rgba(77, 143, 255, 0.3) !important;
    color: #e8f2ff !important;
}

.mob-shortcut-btn a:first-child,
.mob-shortcut-btn a:last-child {
    background: rgba(45, 139, 255, 0.18) !important;
    border-color: rgba(77, 143, 255, 0.45) !important;
}

/* Wallet dropdown */
.wallet-dropdown {
    position: relative;
    width: 100%;
}

.wallet-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(7, 12, 27, 0.8);
    border: 1px solid rgba(77, 143, 255, 0.35);
    color: #e8f2ff;
    padding: 10px 12px;
    border-radius: 10px;
}

.wallet-trigger .wallet-label {
    flex: 1;
    text-align: left;
}

.wallet-caret {
    color: #7cc6ff;
}

.wallet-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: rgba(9, 19, 38, 0.98);
    border: 1px solid rgba(77, 143, 255, 0.35);
    border-radius: 10px;
    padding: 6px;
    display: none;
    z-index: 50;
}

.wallet-dropdown.open .wallet-menu {
    display: block;
}

.wallet-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: #e8f2ff;
    padding: 8px 10px;
    border-radius: 8px;
}

.wallet-option:hover {
    background: rgba(45, 139, 255, 0.2);
}

.wallet-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.wallet-icon.is-text {
    background: rgba(45, 139, 255, 0.35);
    color: #9cd9ff;
    font-weight: 700;
    font-size: 12px;
}

.wallet-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

/* Force "How it works" icon backgrounds to blue */
.how-it-works-single .icon-box {
    background: #1f6dff !important;
    border: 1px solid rgba(77, 143, 255, 0.6) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.how-it-works-single .icon-box span {
    display: none !important;
}

/* Global icon background override (blue) */
.icon-box,
.icon,
.icon i,
.icon svg,
.single-card .icon,
.single-card .icon i,
.single-card .icon svg,
.site-card .icon,
.site-card .icon i,
.site-card .icon svg,
.how-it-works-single .icon-box,
.user-cards .single .icon,
.table-description .icon {
    background: #1f6dff !important;
    color: #061028 !important;
    border: 1px solid rgba(77, 143, 255, 0.6) !important;
    border-radius: 12px !important;
}

/* Remove icon background in nav grid (mobile dashboard) */
.nav-grid .icon,
.nav-grid .icon i,
.nav-grid .icon svg,
.all-navigations .icon,
.all-navigations .icon i,
.all-navigations .icon svg {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* Remove blue background on navigation pills/cards */
.nav-grid .nav-item,
.all-navigations .single-nav,
.all-navigations .single-nav a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove blue backgrounds in mobile navigation grid */
.all-feature-mobile .contents .single,
.all-feature-mobile .contents .single a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.all-feature-mobile .contents .single a .icon,
.all-feature-mobile .contents .single a .icon img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.all-feature-mobile .contents .single a .icon {
    border-radius: 0 !important;
}

.all-feature-mobile .contents .single a .icon::after {
    background: transparent !important;
}

/* Mobile dashboard cards/icons override */
.all-cards-mobile .single-card,
.all-cards-mobile .contents.row [class*="col"]:nth-of-type(12n + 1) .single-card,
.all-cards-mobile .contents.row [class*="col"]:nth-of-type(12n + 2) .single-card,
.all-cards-mobile .contents.row [class*="col"]:nth-of-type(12n + 3) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 1) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 2) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 3) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 4) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 5) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 6) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 7) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 8) .single-card,
.all-cards-mobile .moretext-2 .contents.row [class*="col"]:nth-of-type(12n + 9) .single-card {
    background: transparent !important;
    border: 1px solid rgba(77, 143, 255, 0.45) !important;
    color: #e8f2ff !important;
}

.all-cards-mobile .single-card .icon,
.all-cards-mobile .single-card .icon svg,
.all-cards-mobile .single-card .icon i {
    background: rgba(45, 139, 255, 0.2) !important;
    color: #9cd9ff !important;
    border-radius: 12px !important;
}

.user-ranking-mobile,
.user-wallets-mobile {
    border: 1px solid rgba(77, 143, 255, 0.35) !important;
}

/* Mobile hamburger button */
.navbar-toggler,
.navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon,
.navbar-toggler-icon:focus,
.navbar-toggler:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Tidio: keep widget above the mobile footer nav */
@media (max-width: 991px) {
    /* Tidio injects fixed-position elements with ids like #tidio-chat / #tidio-chat-iframe */
    #tidio-chat,
    #tidio-chat-iframe,
    #tidio-chat iframe,
    .tidio-chat iframe,
    iframe#tidio-chat-iframe,
    iframe[id^="tidio-chat"],
    div[id^="tidio-chat"] {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
        z-index: 999999 !important;
    }
}

/* Ensure widget stays above custom fixed navs */
#tidio-chat,
#tidio-chat-iframe,
iframe#tidio-chat-iframe,
iframe[id^="tidio-chat"],
div[id^="tidio-chat"] {
    z-index: 999999 !important;
}

/* Dashboard header: ensure site logo is visible on dark/web3 headers (mobile + desktop) */
.panel-layout .panel-header .nav-wrap .nav-left .mob-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(77, 143, 255, 0.22);
}

.panel-layout .panel-header .nav-wrap .nav-left .mob-logo img {
    width: auto !important;
    height: 22px;
    max-width: 28px;
    object-fit: contain;
    display: block;
}

.panel-layout .panel-header .logo a .logo-unfold,
.panel-layout .panel-header .logo a .logo-fold {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}