/* Premium Modern Web3 Style Enhancements for Novax */

/* 1. Global Typography: Modern Crypto Font */
body, div, span, h1, h2, h3, h4, h5, h6, a, button, input {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Sleek Blue Background with Whitish Gradient */
body {
    background: linear-gradient(135deg, #0A1B3F 0%, #1565FF 50%, #DDE8FA 100%) !important;
    background-attachment: fixed !important;
    position: relative;
    overflow-x: hidden;
    color: #ffffff;
}

/* Add subtle glowing orbs using pseudo-elements on the body */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content stays above the background glows and is transparent */
html, .page, #app, .uno-5272ex, main, .main-layout, .layout-wrapper, .bg-dark, .dark-theme {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. Glassmorphism for Tables and Wrappers */
/* Targeting the containers that hold the tables (like Hot Spot and Onchain) and Banners */
.meme-list, .earn-box, .announcement-item, .uno-4axgik, .svelte-1toj92k {
    background: rgba(10, 27, 63, 0.7) !important; /* Deep blue translucent */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}

/* Ensure banner images fit well */
.announcement-item {
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.announcement-item img {
    border-radius: 16px !important;
    mix-blend-mode: normal !important;
}

/* 4. Text Contrast Fixes for Blue Background */
.maq-item .desc, .maq-item .date, .marquee svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

.shining.hasActiveActivities {
    --banner-title-theme-color1: #ffffff !important;
    --banner-title-theme-color2: #e0e8f5 !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3) !important;
}

/* 4. Smooth Hover Effects on Rows */
.hot-symbol-row, .crypto.svelte-12gexk8, .earn-box-item.svelte-10tykmt {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 8px;
}

.hot-symbol-row, .crypto.svelte-12gexk8 {
    margin: 4px;
}

.hot-symbol-row:hover, .crypto.svelte-12gexk8:hover, .earn-box-item.svelte-10tykmt:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Fix text colors inside the rows for better contrast */
.hot-symbol-row span, .uno-hi2s9d, .uno-uh8ccy {
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 5. Premium Buttons */
/* Make all blue buttons glow */
button.theme-btn-primary, 
.symbol-action-column div, 
.link-trade {
    background: linear-gradient(135deg, #1565FF 0%, #0044CC 100%) !important;
    box-shadow: 0 4px 14px rgba(21, 101, 255, 0.3) !important;
    border: 1px solid rgba(21, 101, 255, 0.5) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600 !important;
}

button.theme-btn-primary:hover, 
.symbol-action-column div:hover, 
.link-trade:hover {
    box-shadow: 0 6px 20px rgba(21, 101, 255, 0.6) !important;
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.1);
}

/* 6. Sleek Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0b0e14;
}
::-webkit-scrollbar-thumb {
    background: #2a2e38;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1565FF;
}

/* Navbar / Header tweaking */
header, .header-wrap {
    background: rgba(11, 14, 20, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Hide broken skeleton banners that have no JS data */
.uno-ettynq {
    display: none !important;
}

/* Fix header login button alignment on mobile */
.header-right-btn-login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, #1565FF 0%, #0044CC 100%) !important;
    color: white !important;
    border: none !important;
    margin: 0 !important;
}
.header-right-btn-login span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Telegram Float Button */
.tg-btn-float { position: fixed; bottom: 30px; right: 30px; width: 65px; height: 65px; background: linear-gradient(135deg, #1565FF, #00E1FF); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 20px rgba(21, 101, 255, 0.4); cursor: pointer; z-index: 10000; transition: transform 0.3s; }
.tg-btn-float:hover { transform: scale(1.1) rotate(10deg); }