/* Custom Dexconomy Overrides */

/* ============================================ */
/* IMMEDIATE HEADER HIDING (CSS-only is safe)  */
/* ============================================ */

/*
 * CSS-only hiding is safe and doesn't cause React hydration errors.
 * Only DOM manipulation (removing/moving elements) causes issues.
 * So we can hide the original header immediately.
 */

/* Hide original React headers IMMEDIATELY */
.header_Header__mERV6,
.header_noBanner__8tFFA,
header:not(#dex-header),
[class*="header_Header"],
[class*="Header__"]:not(#dex-header):not(#dex-header-buttons),
[class*="header_noBanner"],
[class*="Header_half"],
[class*="header_Header_half"],
[class*="Header_nav"]:not(#dex-nav),
[class*="Header_buttons"]:not(#dex-header-buttons),
[class*="Header_logo"]:not(.dex-logo),
[class*="Header_social"],
[class*="header_Header_logo"],
[class*="header_Header_social"],
[class*="header_Header_nav"],
[class*="header_Header_buttons"],
body > div[class*="header"]:not(#dex-header),
body > div[class*="Header"]:not(#dex-header),
body > header:not(#dex-header),
div[data-header],
[role="banner"]:not(#dex-header) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
    z-index: -99999 !important;
}

/* ============================================ */
/* CUSTOM NAVIGATION BAR - Replaces React Nav  */
/* ============================================ */

/* Extra specificity for header hiding */
header:not(#dex-header),
nav:not(#dex-nav):not(#dex-mobile-menu):not([id^="dex"]),
main header:not(#dex-header),
#__next header:not(#dex-header),
#__next nav:not(#dex-nav):not(#dex-mobile-menu),
#__next > header,
#__next > div > header:not(#dex-header) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
}

/* Hide original mobile menu immediately */
[class*="modal-menu_ModalMenu"],
[class*="ModalMenu__"],
[class*="ModalMenu"],
[class*="Burger"],
[class*="burger"],
.modal-menu_ModalMenu__2g48b,
[class*="modal-menu"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
}

/* ============================================ */
/* CUSTOM HEADER - SHOW IMMEDIATELY            */
/* ============================================ */

/* Custom header visible immediately when created */
#dex-header,
#dex-mobile-menu {
    opacity: 1;
    visibility: visible;
}

/* Override for loading state on home page */
#dex-header.loading {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Custom Header Container - TRANSPARENT */
#dex-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    padding: 15px 40px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: background 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 60px !important;
}

#dex-header.scrolled {
    background: rgba(10, 10, 20, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 12px 40px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Hide header during page load */
#dex-header.loading {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

/* Smooth fade in */
#dex-header {
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* Logo */
#dex-header .dex-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

#dex-header .dex-logo img {
    height: 24px !important;
    width: auto !important;
    display: block !important;
}

/* Desktop Navigation */
#dex-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    justify-content: center !important;
    margin: 0 20px !important;
}

#dex-nav a {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    letter-spacing: 0.02em !important;
}

#dex-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

#dex-nav a.active {
    color: #8b5cf6;
}

/* Header Buttons */
#dex-header-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

#dex-header-buttons .btn-login {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

#dex-header-buttons .btn-login:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

#dex-header-buttons .btn-signup {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

#dex-header-buttons .btn-signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
}

#dex-header-buttons .btn-signup:active {
    transform: translateY(0) scale(0.98);
}

#dex-header-buttons .btn-signup svg {
    width: 16px;
    height: 16px;
}

/* Login button hover improvements */
#dex-header-buttons .btn-login:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

#dex-header-buttons .btn-login:active {
    transform: translateY(0) scale(0.98);
}

/* Mobile Menu Button */
#dex-menu-btn {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

#dex-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

#dex-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#dex-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

#dex-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Hover effect for menu button */
#dex-menu-btn:hover span {
    background: #8b5cf6 !important;
}

#dex-menu-btn:active {
    transform: scale(0.95);
}

/* Mobile Menu */
#dex-mobile-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 8, 18, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 9998;
    padding: 30px 20px;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#dex-mobile-menu.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#dex-mobile-menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 15px 20px;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}

#dex-mobile-menu a:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #fff;
    transform: translateX(4px);
}

#dex-mobile-menu a:active {
    background: rgba(139, 92, 246, 0.25);
    transform: translateX(4px) scale(0.98);
}

/* Active state for current page in mobile menu */
#dex-mobile-menu a.active {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
    color: #8b5cf6;
}

#dex-mobile-menu .mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#dex-mobile-menu .btn-login {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    transition: all 0.2s ease;
}

#dex-mobile-menu .btn-login:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

#dex-mobile-menu .btn-login:active {
    transform: translateY(0) scale(0.98);
}

#dex-mobile-menu .btn-signup {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

#dex-mobile-menu .btn-signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

#dex-mobile-menu .btn-signup:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================ */
/* RESPONSIVE STYLES                           */
/* ============================================ */

/* Large Desktop (1400px+) */
@media screen and (min-width: 1400px) {
    #dex-header {
        padding: 18px 60px !important;
    }

    #dex-nav {
        gap: 12px !important;
    }

    #dex-nav a {
        font-size: 1rem !important;
        padding: 10px 20px !important;
    }

    #dex-header .dex-logo img {
        height: 28px !important;
    }
}

/* Desktop (1025px - 1399px) */
@media screen and (min-width: 1025px) and (max-width: 1399px) {
    #dex-header {
        padding: 15px 40px !important;
    }

    #dex-nav a {
        font-size: 0.9rem !important;
        padding: 8px 14px !important;
    }
}

/* Desktop and above - hide mobile menu */
@media screen and (min-width: 1025px) {
    #dex-mobile-menu {
        display: none !important;
    }

    #dex-menu-btn {
        display: none !important;
    }
}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    #dex-nav {
        display: none !important;
    }

    #dex-header-buttons {
        display: none !important;
    }

    #dex-menu-btn {
        display: flex !important;
    }

    #dex-header {
        padding: 14px 24px !important;
        min-height: 64px !important;
    }

    #dex-header .dex-logo img {
        height: 26px !important;
    }

    #dex-mobile-menu {
        top: 64px !important;
        padding: 24px !important;
    }

    #dex-mobile-menu a {
        font-size: 1.15rem !important;
        padding: 16px 20px !important;
        font-weight: 500 !important;
    }

    #dex-mobile-menu .mobile-buttons {
        gap: 14px !important;
        margin-top: 24px !important;
        padding-top: 24px !important;
    }

    #dex-mobile-menu .btn-login,
    #dex-mobile-menu .btn-signup {
        font-size: 1.05rem !important;
        padding: 16px 24px !important;
        font-weight: 600 !important;
    }
}

/* Mobile Large (481px - 767px) */
@media screen and (max-width: 767px) {
    #dex-header {
        padding: 12px 16px !important;
        min-height: 60px !important;
    }

    #dex-header .dex-logo img {
        height: 22px !important;
    }

    #dex-menu-btn {
        width: 44px !important;
        height: 44px !important;
    }

    #dex-menu-btn span {
        width: 22px !important;
        height: 2px !important;
    }

    #dex-mobile-menu {
        top: 60px !important;
        padding: 20px 16px !important;
        gap: 8px !important;
    }

    #dex-mobile-menu a {
        font-size: 1.1rem !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }

    #dex-mobile-menu .mobile-buttons {
        gap: 12px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    #dex-mobile-menu .btn-login,
    #dex-mobile-menu .btn-signup {
        font-size: 1rem !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
    }
}

/* Mobile Small (up to 480px) */
@media screen and (max-width: 480px) {
    #dex-header {
        padding: 10px 12px !important;
        min-height: 56px !important;
    }

    #dex-header .dex-logo img {
        height: 20px !important;
    }

    #dex-menu-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 6px !important;
    }

    #dex-menu-btn span {
        width: 20px !important;
    }

    #dex-mobile-menu {
        top: 56px !important;
        padding: 16px 12px !important;
    }

    #dex-mobile-menu a {
        font-size: 1rem !important;
        padding: 12px 14px !important;
    }

    #dex-mobile-menu .btn-login,
    #dex-mobile-menu .btn-signup {
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
    }
}

/* Scrolled state adjustments for mobile */
@media screen and (max-width: 1024px) {
    #dex-header.scrolled {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        min-height: auto !important;
    }
}

/* Landscape orientation on mobile */
@media screen and (max-width: 900px) and (orientation: landscape) {
    #dex-mobile-menu {
        padding: 16px 24px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-content: flex-start !important;
        gap: 8px 16px !important;
    }

    #dex-mobile-menu a {
        flex: 0 0 auto !important;
        padding: 10px 16px !important;
        font-size: 0.95rem !important;
    }

    #dex-mobile-menu .mobile-buttons {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    #dex-mobile-menu .btn-login,
    #dex-mobile-menu .btn-signup {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        padding: 10px 20px !important;
    }
}

/* No padding needed since header is transparent and overlays content */
body {
    padding-top: 0 !important;
}

/* Fix for pages that might have their own header spacing */
main,
[class*="Hero"],
[class*="hero"] {
    margin-top: 0 !important;
}

/* Add spacing above and below hero description text */
[class*="__01-hero_Hero_text"],
[class*="_Hero_text_"] {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

/* FORCE hide any SVG logos in header area that aren't ours */
#dex-header svg:not([viewBox="0 0 24 23"]) {
    display: none !important;
}

/* Make sure our header is above everything */
#dex-header,
#dex-mobile-menu {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* Reset any inherited styles */
#dex-header * {
    box-sizing: border-box !important;
}

#dex-header a {
    text-decoration: none !important;
}

/* Ensure consistent text rendering */
#dex-header,
#dex-header * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Hide ALL SVG logos and original logo elements site-wide - ULTRA AGGRESSIVE */
[class*="logo"]:not(.dex-logo):not(#dex-header *) svg,
[class*="Logo"]:not(.dex-logo):not(#dex-header *) svg,
[class*="header"]:not(#dex-header) svg,
[class*="Header"]:not(#dex-header) svg,
[class*="footer"] svg,
[class*="Footer"] svg,
[class*="preloader"] svg,
[class*="Preloader"] svg,
[class*="Preloader_center"] svg,
.header_Header_logo__7JpqW,
[class*="header_Header_logo"],
a[class*="Header_logo"],
a[class*="header_logo"],
[class*="logo"]:not(.dex-logo):not(#dex-header *),
header:not(#dex-header) svg,
header:not(#dex-header) a[class*="logo"],
nav:not(#dex-nav) svg,
body > div:not(#dex-header):not(#dex-mobile-menu) > header,
body > div:not(#dex-header):not(#dex-mobile-menu) > nav,
#__next > header,
#__next header:not(#dex-header),
#__next [class*="Header"],
#__next [class*="header_Header"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    pointer-events: none !important;
    z-index: -99999 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Style for the new logo image */
.dex-logo-img,
[class*="logo"] img,
[class*="Logo"] img,
img[src*="logo.png"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-height: 22px !important;
}

/* Preloader center logo styling */
[class*="Preloader_center"] .dex-logo-img {
    height: 80px !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* Hide unnecessary footer links - but keep PDF links for Privacy/Terms */
footer a[href*="/programs"],
footer a[href*="/academy"],
footer a[href*="/contact-us"],
footer a[href*="intercom"],
[class*="Footer"] a[href*="/programs"],
[class*="Footer"] a[href*="/academy"],
[class*="Footer"] a[href*="/contact-us"],
[class*="Footer"] a[href*="intercom"] {
    display: none !important;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Hide hero stats section completely */
.hero-section__items .item .down,
.hero-section__items .down,
[class*="hero-section"] .down {
    display: none !important;
}

/* Hide Payout System section on How it Works page */
[class*="Payout"],
[class*="payout"],
[class*="PayoutSystem"],
[class*="payout-system"],
[class*="04-certificate"],
[class*="certificate_Certificate"] {
    display: none !important;
}

/* Hide competitor comparison section (APEX vs Dexconomy vs TOPSTEP) on affiliate page */
[class*="04-our-advantages"],
[class*="OurAdvantages"] {
    display: none !important;
}

/* Increase space between label and heading on affiliate/how pages */
/* [class*="HowWork"] [class*="label"],
[class*="how-work"] [class*="label"],
[class*="HowWork"] > div:first-child,
[class*="02-how-work"] [class*="wrapper"] > div:first-child {
    margin-bottom: 50px !important;
} */

[class*="02-how-work"] h2,
[class*="HowWork"] h2 {
    margin-top: 30px !important;
}



/* Hide empty video areas in cards (when video files are missing) */
[class*="Card"] video:not([src]),
[class*="card"] video:not([src]),
[class*="Card"] video[src=""],
[class*="card"] video[src=""] {
    display: none !important;
}

/* Style empty video containers with gradient background */
[class*="Card_video"],
[class*="card_video"],
[class*="Card"] [class*="video"],
[class*="card"] [class*="video"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
    min-height: 120px !important;
}

/* Hide broken video sources */
video source[src=""] {
    display: none !important;
}

/* Make affiliate page card videos bigger like home page */
[class*="card_Card_image"],
[class*="Card_image"] {
    min-height: 180px !important;
    height: 180px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.9), rgba(30, 30, 60, 0.7)) !important;
    margin-bottom: 15px !important;
    position: relative !important;
}

[class*="card_Card_image"] video,
[class*="Card_image"] video {
    width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    background: transparent !important;
}

/* Fix card title being cut off */
[class*="card_Card_title"],
[class*="Card_title"],
[class*="card_Card"] h3,
[class*="Card"] h3 {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    padding-top: 10px !important;
    margin-top: 5px !important;
}

/* Ensure card content has proper spacing */
[class*="card_Card_content"],
[class*="Card_content"] {
    overflow: visible !important;
    padding-top: 10px !important;
}

/* Hide decorative lines/SVG in hero section top left */
[class*="Hero"] svg,
[class*="hero"] svg:not([class*="logo"]),
.hero-section svg,
[class*="Hero_svg"],
[class*="hero_Hero_svg"],
[class*="lines"],
[class*="Lines"],
[class*="decoration"],
[class*="Decoration"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide lines.webp image in hero */
img[src*="lines"],
img[alt="lines"],
[class*="Hero"] img[src*="lines.webp"],
[class*="hero"] img[src*="lines.webp"],
img[src*="/hero/lines"],
img[src*="01-hero/lines"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Active nav link styling */
nav a.active,
[class*="Header"] a.active {
    color: #8b5cf6 !important;
}

/* Hide promo banner - be specific to not hide header */
[class*="Promo"],
[class*="promo"],
[class*="TopBanner"],
[class*="top-banner"] {
    display: none !important;
}

/* Hide Support nav item pointing to intercom */
[class*="Header"] a[href*="intercom"],
nav a[href*="intercom"] {
    display: none !important;
}

/* Hide Discord button in header */
[class*="Header_social"],
[class*="header_Header_social"],
[class*="Header"] a[href*="discord"],
header a[href*="discord"] {
    display: none !important;
}

/* Hide Notice/Disclaimer section in footer */
[class*="Footer_notice"],
[class*="footer_Footer_notice"],
[class*="Notice"],
[class*="notice"],
[class*="Disclaimer"],
[class*="disclaimer"] {
    display: none !important;
}

/* Hide Intercom/Support chat widget */
#intercom-container,
#intercom-frame,
.intercom-lightweight-app,
.intercom-launcher,
.intercom-messenger,
[class*="intercom"],
[id*="intercom"],
iframe[name="intercom-frame"],
iframe[title*="Intercom"],
iframe[title*="chat"],
.crisp-client,
#crisp-chatbox,
[class*="support-widget"],
[class*="chat-widget"],
[class*="launcher"],
div[style*="z-index: 2147483647"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide "Dexconomy" name text in footer */
[class*="Footer_info_name"],
[class*="footer_Footer_info_name"] {
    display: none !important;
}

/* Footer logo margin */
[class*="Footer_info_logo"],
.dex-footer-logo {
    margin-bottom: 25px !important;
}

/* Footer logo image size for mobile */
@media screen and (max-width: 767px) {
    [class*="Footer_info_logo"] img,
    [class*="Footer_info_logo"] .dex-logo-img {
        max-height: 45px !important;
        height: 45px !important;
    }
}

/* Footer column headings on single line */
[class*="NavCol_title"],
[class*="nav-col_NavCol_title"] {
    white-space: nowrap !important;
}

/* Footer links on single line - Privacy Policy, Terms & Conditions */
[class*="Footer"] a,
[class*="footer"] a,
footer a,
[class*="NavCol"] a,
[class*="nav-col"] a {
    white-space: nowrap !important;
}

/* Make remaining cards centered with gap */
[class*="Join_list"],
[class*="join_Join_list"],
[class*="join"] > div {
    /* justify-content: center !important; */
    gap: 40px !important;
}

/* Ensure Join section card titles are visible */
[class*="Join"] [class*="card_Card_title"],
[class*="join"] [class*="card_Card_title"] {
    overflow: visible !important;
    padding-top: 15px !important;
    margin-top: 10px !important;
}

/* Ensure Join section cards have visible content */
[class*="Join"] [class*="card_Card__"],
[class*="join"] [class*="card_Card__"] {
    overflow: visible !important;
    padding-top: 15px !important;
}

/* Join section card - fix text overlapping icon */
[class*="Join"] [class*="Card"],
[class*="join"] [class*="Card"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Card title - add space above */
[class*="Join"] [class*="Card_title"],
[class*="join"] [class*="Card_title"],
[class*="Join"] [class*="Card"] h3,
[class*="join"] [class*="Card"] h3 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Card description text - better spacing */
[class*="Join"] [class*="card_Card_description"],
[class*="join"] [class*="card_Card_description"],
[class*="Join"] [class*="Card_description"],
[class*="join"] [class*="Card_description"],
[class*="Join"] [class*="Card"] p,
[class*="join"] [class*="Card"] p {
    margin-top: 25px !important;
    padding-top: 10px !important;
    position: relative !important;
    z-index: 5 !important;
    line-height: 1.6 !important;
}

/* Card icon - position at top */
[class*="Join"] [class*="card_Card_icon"],
[class*="join"] [class*="card_Card_icon"],
[class*="Join"] [class*="Card_icon"],
[class*="join"] [class*="Card_icon"],
[class*="Join"] [class*="Card"] svg,
[class*="join"] [class*="Card"] svg {
    position: absolute !important;
    top: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Contact form styling */
#dex-contact-form input:focus,
#dex-contact-form textarea:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

#dex-contact-form input::placeholder,
#dex-contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Ensure contact form inputs are clickable */
#dex-contact-form {
    position: relative !important;
    z-index: 100 !important;
}

#dex-contact-form input,
#dex-contact-form textarea {
    pointer-events: auto !important;
    cursor: text !important;
    position: relative !important;
    z-index: 101 !important;
}

#dex-contact-form button {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 101 !important;
}

/* Style Discord button in Join section to match Send Message button */
[class*="join"] a[href*="discord"],
[class*="Join"] a[href*="discord"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: opacity 0.3s, transform 0.2s !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
    min-width: 160px !important;
}

/* Ensure Discord button text is visible */
[class*="join"] a[href*="discord"] *,
[class*="Join"] a[href*="discord"] *,
[class*="join"] a[href*="discord"] span,
[class*="Join"] a[href*="discord"] span {
    color: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

[class*="join"] a[href*="discord"]:hover,
[class*="Join"] a[href*="discord"]:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
}

/* Remove pointer-events blocking overlays on Join cards */
[class*="join"] [class*="card"]::before,
[class*="join"] [class*="card"]::after,
[class*="Join"] [class*="card"]::before,
[class*="Join"] [class*="card"]::after {
    pointer-events: none !important;
}

/* Hide Trustpilot/Review button in "Trusted by Traders" section */
[class*="Loved_btn"],
[class*="Loved"] a[class*="Button"] {
    display: none !important;
}

/* Hide One Step / Direct to Sim Live tabs and account selector */
[class*="choose_Choose_selector"],
[class*="selector_Selector"],
[class*="Choose_selector"] {
    display: none !important;
}

/* Add spacing between sections */
[class*="HowItWorks"],
[class*="howItWorks"] {
    margin-bottom: 80px !important;
    padding-bottom: 40px !important;
}

/* Reduce space after "Your First Trade" heading */
[class*="HowItWorks"] h1,
[class*="HowItWorks"] h2,
[class*="HowItWorks"] [class*="title"],
[class*="howItWorks"] h1,
[class*="howItWorks"] h2 {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
}

/* Style the subheading we added */
#how-sub {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}

/* Hide broken "blue", "bg", "app" and platform "logo" placeholder images */
img[alt="blue"],
img[src*="blue"],
img[alt="bg"],
img[src*="/bg"],
img[alt="app"],
img[src*="/app"],
[class*="Platforms"] img[alt="logo"],
[class*="platforms"] img[alt="logo"] {
    display: none !important;
}

/* Add spacing before pricing section */
[class*="Choose"],
[class*="choose"] {
    margin-top: 80px !important;
    padding-top: 40px !important;
}

/* Fix How it Works cards - force single column on mobile */
@media screen and (max-width: 767px) {
    .__02-how-work_HowWork_cards__co_9D,
    [class*="HowWork_cards"],
    [class*="how-work"] [class*="cards"] {
        grid-template-columns: repeat(1, 1fr) !important;
        display: grid !important;
        grid-auto-flow: row !important;
    }

    .__02-how-work_HowWork_cards__co_9D > *,
    [class*="HowWork_cards"] > *,
    [class*="how-work"] [class*="cards"] > * {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }
}

/* Tablet: Fix pricing cards layout (768px - 1100px) - Force vertical stacking */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    /* Force parent container to stack vertically - CRITICAL FIX */
    .__11-choose_Choose_card__0AF__ {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 30px !important;
        width: 100% !important;
    }

    /* Make each pricing card take full width and stack */
    .__11-choose_Choose_card__0AF__ > div {
        width: 90% !important;
        max-width: 90% !important;
        flex: 0 0 auto !important;
        margin: 0 auto 20px !important;
        display: block !important;
    }

    /* Override any grid or flex-row layouts */
    [class*="11-choose"] {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Mobile: Reduce spacing in pricing section */
@media screen and (max-width: 1024px) {
    [class*="Choose"],
    [class*="choose"] {
        margin-top: 0 !important;
        padding-top: 100px !important;
    }

    #pricing-label {
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }

    #pricing-sub {
        margin-top: 5px !important;
        margin-bottom: 20px !important;
    }

    [class*="Choose"] [class*="title"],
    [class*="choose"] [class*="title"],
    [class*="Choose"] h2,
    [class*="choose"] h2 {
        margin-bottom: 10px !important;
    }

    [class*="Choose"] > div,
    [class*="choose"] > div {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    [class*="Choose_wrapper"],
    [class*="choose_wrapper"] {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    [class*="Choose_card"]:first-child,
    [class*="choose_card"]:first-child,
    [class*="Choose"] [class*="Card"]:first-of-type,
    [class*="choose"] [class*="Card"]:first-of-type {
        margin-top: 20px !important;
    }

    /* Footer bottom spacing fix */
    footer,
    [class*="Footer"],
    [class*="footer"] {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    footer > div,
    [class*="Footer"] > div,
    [class*="footer"] > div {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    footer [class*="copy"],
    footer [class*="Copy"],
    [class*="Footer"] [class*="copy"],
    [class*="Footer"] [class*="Copy"] {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Reduce spacing around pricing title */
[class*="Choose"] [class*="title"],
[class*="choose"] [class*="title"],
[class*="Choose"] h2,
[class*="choose"] h2 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
}

/* Pricing label and subtitle spacing */
#pricing-label {
    margin-bottom: 5px !important;
}

#pricing-sub {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}

/* Fix pricing title width for 2 lines */
[class*="choose_Choose_title"],
[class*="Choose_title"] {
    max-width: 500px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix STANDARD/Elite text not cutting off - only pricing cards */
[class*="choose_Choose_card"] h3,
[class*="Choose_card"] h3,
[class*="choose"] [class*="Card"] h3,
[class*="Choose"] [class*="Card"] h3 {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    padding-top: 15px !important;
    margin-top: 10px !important;
}

/* Ensure pricing card container doesn't clip title */
[class*="choose_Choose_card"],
[class*="Choose_card"],
[class*="choose"] [class*="Card"],
[class*="Choose"] [class*="Card"] {
    overflow: visible !important;
    padding-top: 10px !important;
}

/* Fix card header area */
[class*="choose"] [class*="Card_header"],
[class*="Choose"] [class*="Card_header"] {
    overflow: visible !important;
    padding-top: 10px !important;
}

/* Hide platforms section */
[class*="choose_Choose_platforms"],
[class*="Choose_platforms"] {
    display: none !important;
}

/* Hide View more/less button */
[class*="Card_benefits_more"] {
    display: none !important;
}

/* Show ALL benefit items - remove height limits */
[class*="Card_benefits_list"] {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

[class*="Card_benefits_list_inner"] {
    max-height: none !important;
    height: auto !important;
}

/* Left align the benefit text and fix layout */
[class*="Card_benefits"] > div > div > div {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* Style benefit rows */
[class*="Card_benefits"] [class*="Benefit"],
[class*="benefits"] [class*="item"] {
    text-align: left !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Checkmark styling */
[class*="Card_benefits"] [class*="title"],
[class*="Benefit"] > span:first-child {
    color: #8b5cf6 !important;
    font-size: 1rem !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    text-align: left !important;
}

/* Text styling */
[class*="Card_benefits"] [class*="text"],
[class*="Benefit"] > span:last-child {
    text-align: left !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

/* Features title */
[class*="Card_benefits_title"] {
    text-align: left !important;
    padding-left: 15px !important;
}

/* Hide the empty app image box in FAQ section */
[class*="GetStarted"] [class*="image"],
[class*="GetStarted"] [class*="app"],
[class*="GetStarted"] [class*="App"],
[class*="GetStarted"] img:not([alt="Dexconomy"]),
img[alt="app"] {
    display: none !important;
}

/* Make sure FAQ container is visible and centered */
#dex-faq {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FAQ items container */
#dex-faq > div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 12px !important;
}

/* FAQ question row - needs flex for layout */
#dex-faq > div > div:first-child {
    display: flex !important;
    visibility: visible !important;
}

/* FAQ answer */
#dex-faq > div > div:last-child {
    visibility: visible !important;
}

/* Override any hiding rules for FAQ */
[class*="GetStarted"] #dex-faq {
    display: block !important;
    visibility: visible !important;
}

/* Also hide via parent that contains the broken image */
[class*="GetStarted_app"],
[class*="Started_app"] {
    display: none !important;
}

/* Hide Sign Up button in FAQ section */
[class*="GetStarted"] a[class*="Button"],
[class*="GetStarted"] button {
    display: none !important;
}

/* FAQ Styles */
.dex-faq-item {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease, transform 0.5s ease !important;
}

.dex-faq-item:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15) !important;
    transform: translateY(-2px) !important;
}

.dex-faq-q:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dex-faq-icon {
    font-size: 1.5rem !important;
    color: #8b5cf6 !important;
    transition: transform 0.3s ease !important;
}

/* FAQ animation keyframes */
@keyframes faqFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure all FAQ items are visible - high specificity overrides */
.dex-faq-item,
#dex-faq > div,
#dex-faq > .dex-faq-item,
div#dex-faq > div,
div#dex-faq > div.dex-faq-item,
#dex-faq > div:nth-child(1),
#dex-faq > div:nth-child(2),
#dex-faq > div:nth-child(3),
#dex-faq > div:nth-child(4),
#dex-faq > div:nth-child(5) {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Override any :not(:first-child) rules */
#dex-faq > div:not(:first-child) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force GetStarted section to show full FAQ content */
[class*="GetStarted"] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

[class*="GetStarted"] > div {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* FAQ container itself */
#dex-faq {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    margin-bottom: 40px !important;
    padding-bottom: 20px !important;
}

/* Ensure FAQ label and its wrapper are visible */
#faq-label,
#faq-label + *,
[id="faq-label"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FAQ label wrapper (parent div that centers the label) - force spacing */
[class*="GetStarted"] > div > div:has(#faq-label),
div:has(> #faq-label) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    padding-bottom: 10px !important;
}

/* Ensure all FAQ items are visible - high specificity */
#dex-faq,
#dex-faq .dex-faq-item,
#dex-faq > div,
#dex-faq > div.dex-faq-item,
div#dex-faq > div,
div#dex-faq > .dex-faq-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure each FAQ item by index is visible */
#dex-faq > div:nth-child(1),
#dex-faq > div:nth-child(2),
#dex-faq > div:nth-child(3),
#dex-faq > div:nth-child(4),
#dex-faq > div:nth-child(5) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Reduce space after FAQ/GetStarted section - aggressive */
[class*="GetStarted"],
section[class*="GetStarted"],
div[class*="GetStarted"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    max-height: fit-content !important;
    height: auto !important;
}

[class*="GetStarted"] > div,
[class*="GetStarted"] > div > div:not(#dex-faq):not(.dex-faq-item):not(:has(#faq-label)) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Hide blue square / broken app icon - more specific */
[class*="GetStarted"] [class*="icon"],
[class*="GetStarted"] [class*="Icon"],
[class*="GetStarted"] svg,
[class*="GetStarted"] img:not(.dex-logo-img),
[class*="GetStarted"] img[src*="app"],
[class*="GetStarted"] img[alt*="app"],
[class*="GetStarted"] picture,
img[src*="get-started"],
img[src*="GetStarted"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Completely collapse hidden app/image areas - but keep FAQ visible */
[class*="GetStarted_app"],
[class*="GetStarted_image"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ====== RESPONSIVE PRICING CARDS FOR HOW.HTML ====== */
/* Mobile responsive styles from pricing.html and index.html */

@media screen and (max-width:900px) {
    .__11-choose_Choose_card__0AF__ {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        width: 100% !important;
    }

    .__11-choose_Choose_card__0AF__>div {
        width: 100% !important;
        max-width: 320px !important;
        flex: none !important;
        margin: 0 auto !important;
    }

    .__11-choose_swiper__UOoAw.__11-choose_active__RsaWO {
        max-width: 100% !important;
    }
}

@media screen and (max-width:767px) {
    .swiper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #pricing-sub {
        max-width: 100% !important;
        white-space: normal !important;
    }

    .button_Button__Feu4K.button_star__pwSXl:after {
        display: none !important;
    }

    .swiper-backface-hidden .swiper-slide {
        width: 100% !important;
        margin: 0px !important;
    }

    [class*="Choose"], [class*="choose"] {
        margin-top: 70px !important;
        padding-top: 0px !important;
        gap: 0px !important;
    }

    .__11-choose_Choose_card__0AF__ {
        margin-top: 0px !important;
    }

    [class*="Choose_card"] > *, [class*="card_Card__"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0px !important;
    }
}