/* Import Font Awesome for icons if you haven't already */

/* Set a recommended font, like Outfit used in the Figma design */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;600&display=swap');



:root {
    --header-bg: rgba(54, 54, 54, 0.09);
    --header-border: rgba(56, 102, 255, 0.69);
    --nav-border: rgba(104, 182, 255, 0.08);
    --search-bg: rgba(83, 93, 126, 0.18);
    --search-text: #ecf2ff;
    --btn-text: #F0F6FF;
    --wallet-border: #22398D;
    --points-bg: #0D0F32;
    --points-border: #0145FB;
    --active-nav-text: #FFC750;
    --nav-text: white;
    --nav-icon: #667085;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #010315 !important; /* Example background to see the header clearly */
    
}
* {
    scrollbar-width: thin;
    scrollbar-color: #041027 #101c3b;
}
.header {
    border-bottom: 1px solid var(--header-border);
    background-image: url("/assets/images/backgrounds/headerbg.png");
    background-size: cover;
    background-position: center;
    box-shadow: 0px 13px 48.8px 0px rgba(0, 0, 0, 0.25);
     margin-left: auto;
  margin-right: auto;
    
}
/*.main-content {
  padding-left: 5%;
  padding-right: 5%;
}*/
.header .container {
    margin: 0 auto;
    padding-left: 9%;
    padding-right: 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* add some gap between items */
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px; /* control spacing between right side buttons */
    flex-shrink: 0; /* prevent shrinking */
}

/* --- Top Bar Styling --- */
.header-top-bar {
    padding: 14px 0;
    border-bottom: 1px solid var(--nav-border);
    max-width:2200px
}

.logo img {
    width: 136px;
    display: block;
}

.search-bar {
    flex-grow: 1;
    max-width: 900px;
    position: relative;
    
}

.search-bar i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #B2B2B2;
    font-size: 18px;
}

.search-bar input {
    width: 100%;
    outline: 1px solid rgba(213, 229, 255, 0.06);
    padding: 10px 14px 10px 45px;
    font-size: 16px;
    color: var(--search-text);
    border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(83, 83, 83, 0.18);

/* Shadows/shadow-xs */
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-btn, .header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    text-decoration: none;
    color: var(--btn-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.header-btn {
    gap: 4px;
    padding: 10px 14px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.wallet-btn {
    outline: 1px solid var(--wallet-border);
}

.points-btn {
    background: var(--points-bg);
    outline: 1px solid var(--points-border);
}
.points-btn .fa-bolt {
    color: var(--active-nav-text); /* Yellow zap icon */
}

.locale-btn .flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    object-fit: cover;
}

.locale-btn .fa-chevron-down, .nav-link .fa-chevron-down {
    color: var(--nav-icon);
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    outline: 1px solid rgba(51, 62, 137, 0.76);
    color: white;
    font-size: 18px;
    border-radius: 12px;
}

.avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    outline: 4px solid rgba(152, 162, 179, 0.14);
    display: block;
}
.avatar-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}


/* --- Bottom Navigation Styling --- */
.header-bottom-nav {
    height: 64px;
    display: flex;
    align-items: center;
}

.header-bottom-nav .container {
    display: flex;
    justify-content: center; /* center horizontally */
    width: 100%;
}


.main-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--nav-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    transition: background-color 0.3s;
}

.nav-link.active {
    color: var(--active-nav-text);
}

.nav-link:hover, .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* --- UNIFIED DROPDOWN STYLING --- */

/* Parent containers for positioning */
.profile-dropdown, .locale-dropdown {
    position: relative;
}


/* Class to show the dropdown via JavaScript */
.dropdown-panel.show {
    display: block;
}

.show{
  display: flex;
    flex-direction: column;
}

/* --- Profile Dropdown Specifics --- */

.dropdown-panel .dropdown-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(46, 58, 89, 0.7);
}

.dropdown-panel .dropdown-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.dropdown-panel .user-info {
    display: flex;
    flex-direction: column;
}

.dropdown-panel .user-info strong {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
}

.dropdown-panel .user-info span {
    color: #e4e6e8;
    font-size: 15px;
}

.dropdown-panel ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.dropdown-panel ul a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #dce0e7;
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-panel ul a .fas {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: #CED4DA;
}

.dropdown-panel ul a:hover {
    background-color: rgba(37, 49, 73, 0.8);
    color: #FFFFFF;
}

.dropdown-panel ul a.active {
    background-color: #3769D1;
    color: #FFFFFF;
    font-weight: 600;
}

.dropdown-panel ul a.active .fas {
    color: #FFFFFF;
}

/* --- Locale Dropdown Specifics --- */
.dropdown-panel form {
    padding: 20px;
}

.locale-select-group:last-child {
    margin-bottom: 0;
}


.btn-confirm {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border-radius: 8px;
    background-color: #0D53FF;
    color: #FFFFFF;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 16px;
}
/* --- Main Navigation Bar --- */
.header-bottom-nav .container {
    display: flex;
    justify-content: center; /* center horizontally */
    width: 100%;
}

.navbar-menu {
    list-style: none;
    margin: 0 auto; /* auto margin for horizontal centering */
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px; /* spacing between menu items */
    width: fit-content; /* shrink to content width */
}

.nav-item {
  position: relative;
}

.nav-item .nav-link {
  color: #fff; /* Lighter text color for better readability */
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nav-item .nav-link:hover,
.nav-item.active .nav-link {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dropdown-icon {
  font-size: 12px;
}

/* --- Main Navigation Bar Item --- */
/* This is a necessary parent style for the fix to work */
.nav-item {
  position: relative;
  /* This adds an invisible 10px area below the link, creating a "bridge" for the mouse */
  padding-bottom: 10px;
  margin-bottom: -10px; /* Prevents the padding from adding extra height to the navbar */
}

/* --- Main Dropdown & Submenu Panel Style (Frosted Glass) --- */
/* By grouping .dropdown-menu and .submenu, we ensure they have the EXACT same style */
.dropdown-menu,
.submenu {
  position: absolute;
  min-width: 280px;
  list-style: none;
  padding: 8px;
  margin: 0;
  border-radius: 12px;
  z-index: 1000;
  backdrop-filter: blur(5.9px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 102, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);

  /* FIX: Use visibility and opacity for smooth transitions with a delay */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  
}

.dropdown-menu {
  top: 100%; /* Position below the main nav link */
  left: 0;
}

.submenu {
  top: -9px; /* Align with the parent item */
  left: 100%;
}

/* Show menu on hover */
.nav-item:hover > .dropdown-menu,
.dropdown-submenu:hover > .submenu {
  visibility: visible;
  opacity: 1;
  /* The delay is now for showing, making it feel responsive and preventing flicker */
  transition: opacity 0.2s ease, visibility 0s;
}
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
  
}

.nav-item:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}
/* --- Dropdown Menu & Submenu Item Styling --- */
/* Again, we group the selectors to ensure links in both menus look identical */
.dropdown-menu li a,
.submenu li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: #fff;
  font-family: 'Jost', sans-serif; /* Ensures consistent font */
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  backdrop-filter: blur(20px);
}

/* Hover state is also shared */
.dropdown-menu li a:hover,
.submenu li a:hover {
  background-color: #3769D1; /* Blue hover from design */
  color: #FFFFFF;
}

/* Icon styling is shared */
.nav-item-icon {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: #94A3B8;
}

.dropdown-menu li a:hover .nav-item-icon {
  color: #FFFFFF;
}

/* Text and Subtitle styling is shared */
.nav-item-text {
  display: flex;
  flex-direction: column;
}

.nav-item-subtitle {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 400;
}

.dropdown-menu li a:hover .nav-item-subtitle {
  color: #E2E8F0;
}

/* Submenu Arrow (>) styling */
.dropdown-subicon {
  margin-left: auto; /* Pushes the arrow to the far right */
  font-size: 14px;
  color: #94A3B8;
}

.dropdown-menu li a:hover .dropdown-subicon {
  color: #FFFFFF;
}
.header .header-bottom-nav .container {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* =============================================== */
/* Footer Styles (Complete & Consolidated)         */
/* =============================================== */



.footer-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.footer-label {
    font-size: 12px;
    font-weight: 600;
    color: #58A6FF;
    text-transform: uppercase;
    margin: 0;
}

.footer-email {
    font-size: 16px;
    color: #C9D1D9;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-email:hover {
    color: #58A6FF;
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
    display: flex;
    gap: 16px;
}

.social-links a {
    color: #8B949E;
    font-size: 18px;
    transition: color 0.2s ease;
}
.social-links a:hover {
    color: #58A6FF;
}



.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links li a {
    color: #8B949E;
    text-decoration: none;
    font-size: 15px; /* Updated Size */
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.footer-links li a::before {
    content: '\f054'; /* Font Awesome chevron-right icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    margin-right: 12px;
    color: #58A6FF;
}

.footer-links li a:hover {
    color: #F0F6FC;
}


/* --- Updates Column --- */
.updates-column {
    position: relative;
}
.updates-column p {
    font-size: 15px; /* Updated Size */
    line-height: 1.5;
    margin: 0;
}

.floating-avatar {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: 2px solid #30363D;
    border-radius: 50%;
    overflow: hidden;
}
.floating-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.subscribe-form input {
    width: 100%;
    background-color: #010409;
    border: 1px solid #30363D;
    border-radius: 25px;
    padding: 12px 100px 12px 20px;
    font-size: 14px;
    color: #F0F6FC;
    outline: none;
    transition: border-color 0.2s ease;
}
.subscribe-form input:focus {
    border-color: #58A6FF;
}

.subscribe-form button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background-color: #2F81F7;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.subscribe-form button:hover {
    background-color: #58A6FF;
}

.subscribe-message {
    font-size: 12px;
 
}
.subscribe-message.success { color: #3FB950; }
.subscribe-message.error { color: #F85149; }

/* Support Line */
.footer-support .fa-headset {
    color: #FFC750;
    
}


/* --- Bottom Bar --- */
.copyright-brand {
    font-weight: 600;
    color: #F0F6FC;
}
/* =============================================== */
/* Base & Body Foundational Styles                 */
/* =============================================== */

/* A modern CSS reset for layout consistency across all browsers */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Enables smooth scrolling when clicking on anchor links */
    scroll-behavior: smooth;
}

body {
    /* --- CRUCIAL FIXES FOR LAYOUT --- */

    /* 1. Removes the default 8px margin added by most browsers,
       which is a common cause of layout and centering issues. */
    margin: 0;
    
    /* 2. Ensures the body takes up the full width of the viewport. */
    width: 100%;

    /* 3. Prevents accidental horizontal scrollbars if an element
       is slightly too wide. This can help stabilize centering. */
    overflow-x: hidden;


    /* --- GENERAL PROJECT STYLES --- */

    /* Sets the base font and dark background for the entire project */
    font-family: 'Outfit', sans-serif;
    background-color: #12121c; /* The dark background from your design */
    color: #E2E8F0;           /* A light default text color */

    /* Improves text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.footer .container {
    padding-left: 5%; 
    padding-right: 5%; 
    padding-top:15px;
}
.copyright-text {
    font-size: 14px;
    color: #8B949E;
    margin: 0; /* Remove default paragraph margin */
    text-align: left;
}
/* =============================================== */
/* Footer Payment Methods Banner                   */
/* =============================================== */

.payment-methods-banner {
    background-color: #FFFFFF;
    padding: 24px 0;
    /* This places the banner above the main dark footer */
    border-bottom: 1px solid #e0e0e0;
}

.payment-icons-grid {
    display: flex;
    flex-wrap: wrap; /* Allows icons to wrap on smaller screens */
    justify-content: center;
    align-items: center;
    gap: 32px; /* Space between each icon */
}

.payment-icon .partner-thumb img {
    max-height: 28px; /* Controls the size of the icons */
    width: auto;
    filter: grayscale(100%) opacity(0.6); /* Makes icons grayscale by default */
    transition: filter 0.3s ease;
}

.payment-icon .partner-thumb:hover img {
    filter: grayscale(0%) opacity(1); /* Reveals full color on hover */
}


.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 18px;
}



.mobile-menu-header .logo-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.close-menu {
  font-size: 32px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.mobile-menu-list .language-select span {
  float: right;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  /* Only show real menu button */
  .header-icon-btn.menu-btn {
    display: flex !important;
  }

  /* Hide fake ones (like login icon) */
  .header-actions .header-icon-btn[href*="login"] {
    display: none !important;
  }
}





.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.logo-wrapper img {
  height: 48px;
  object-fit: contain;
}
.user-details {
  flex: 1;
  margin-left: 10px;
}

.user-details strong {
  font-size: 15px;
  display: block;
}

.user-details span {
  font-size: 12px;
  opacity: 0.85;
}

.user-balance {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 6px;
}

.mobile-menu-list li:hover {
  background: rgba(255, 255, 255, 0.04);
}
/* Default mobile menu overlay */


/* On large screens, keep it hidden completely */
@media (min-width: 900px) {
  .mobile-menu-overlay {
    display: none !important;
  }
}

@media (max-width: 900px) {
    .header .container {
    display: none !important;
  }
   .mobile-logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-260%);
    z-index: 1; /* ensures it sits on top */
}
     .logo-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: white;
  }

  .logo-icon {
    height: 24px;
    object-fit: contain;
  }
  .login-btn {
    text-decoration: none;
    color: white;
  }
  /* Optional: Remove margin/padding above body */
  body {
    margin: 0;
    padding: 0;
  }
  /* Button/icon styles */
  .logo-icon {
    height: 24px;
    object-fit: contain;
  }
  .logo-text {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
  }
  .mobile-header {
        border-top: none !important; 
    margin-top: 0 !important; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-top: 0 !important;
    border-top: none !important;
   background-image: url(/assets/images/backgrounds/headerbg.png);
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
  }
  /* Just in case some invisible element causes spacing */
  .ghost-line,
  .debug-line,
  .header-top-bar {
    display: none !important;
    border-top: none !important;
    margin-top: 0 !important;
  }
  .right-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .header-icon-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    padding: 6px;
    cursor: pointer;
  }

  body, html {
    margin: 0;
    padding: 0;
    border-top: none !important;
    background: #000; /* fallback background */
  }
  .menu-btn,
  .search-btn,
  .login-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    
  }
  .logo-icon {
    width: 114.246px;
    height: 40px;
    object-fit: contain;
  }
  .right-icons {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .close-menu {
    font-size: 32px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }

  .mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-menu-list li {
    padding: 7px 0;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;display: flex;
    
  }

  .language-select span {
    float: right;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  body.menu-open {
    overflow: hidden;
  }
  .mobile-header .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: none;
    border: none;
    color: white;
  }

  .mobile-header .logo-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 600;
        display: flex;
    align-items: center;
    text-decoration: none;
    gap: 6px;
    color: white;
  }

  .mobile-header .logo-icon {
    height: 24px;
    object-fit: contain;
        width: 114.246px;
    height: 40px;
    object-fit: contain;
  }

  .mobile-header .logo-text {
        display: none; /* Optional: hide text to match b.png */

    font-size: 18px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: white;
  }

  .logo-mini-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
  }

  .logo-mini-btn img {
    height: 22px;
    object-fit: contain;
  }
  /* Hide original search icon or other icons */
  .header-actions {
    display: none !important;
  }
}
/* ✅ Show only on mobile */
.mobile-header {
  display: flex;
      min-height: 50px;

}


@media (min-width: 900px) {
  .mobile-header {
    display: none !important;
  }
}

body.menu-open {
  overflow: hidden;
}
body.menu-open {
  overflow: hidden;
}
.mobile-menu-overlay {
  display: none; /* 🔹 Fully hidden initially */
  backdrop-filter: blur(30px);
  color: white;
  transform: translateX(0); /* No shifting */
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
    position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 390px;
  height: 100%;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  overflow-y: auto;
  padding: 20px;
    padding: 0; /* 🟢 Important: remove default padding here */


}


/* ✅ Show it only when active */
.mobile-menu-overlay.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);

}
.language-select {
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom:13px ;
}

.language-select .lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}


.search-bar.hidden {
  display: none;
}



.language-select i.fa-chevron-down {
  font-size: 12px;
  opacity: 0.7;
}
.mobile-menu-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #01031500;
}

.header-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}


/* Wrap content inside */
.mobile-menu-content {
  padding: 20px; /* Add padding back to the content (optional) */
}
.flag img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%; /* ✅ circle flag */
  border: 1px solid #fff2;
}


.mobile-menu-list a {display: flex
;
    justify-content: space-between;
    color: white;
    text-decoration: none;
    border-radius: 16px;
    border-bottom: 1px solid rgba(47, 130, 251, 0.31);
    background: #0000001f;
    min-width: 100%;
    padding: 10PX;font-size: 18px;
    width: 600px;
}
.mobile-menu-list a:hover {
  background: rgba(255, 255, 255, 0.04); /* Optional hover */
  color: #facc15; /* Optional hover color */
}

.user-card {
  display: flex;
  align-items: center;
  background: #0045FF;
  border-radius: 30px;
  padding: 12px;
  gap: 12px;
  color: white;
  overflow: hidden;
}
.buttons-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 15px;
  border: 1px solid rgba(56, 102, 255, 0.6);
  color: white;
  font-size: 14px;
}

.buttons-button i.fa-dollar-sign {
  font-size: 14px;
}

.buttons-button .text-padding {
  padding: 0 4px;
}

.buttons-button .text {
  font-weight: 600;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: white;
}

.buttons-button .img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  color:#0D53FF;
}



.user-card img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgb(255 255 255 / 9%);
}

.user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-name {
  font-weight: 700;
  font-size: 16px;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-balance {
  display: flex;
  align-items: center;
  gap: 6px;
}

.balance-amount {
  background: #184CD9;
  border-radius: 20px;
  padding: 11px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.balance-amount i {
  font-size: 14px;
}

.arrow {
  font-size: 14px;
}


.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: white;
  font-weight: bold;
}
.hidden {
  display: none !important;
}

.mobile-search-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0d0d1a;
  z-index: 9999;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.search-bar-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-bar-top input {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  background: #1a1a2e;
  color: white;
}

.search-bar-top button {
  font-size: 24px;
  background: none;
  border: none;
  color: white;
}

.search-results {
  margin-top: 20px;
  color: white;
  flex-grow: 1;
  overflow-y: auto;
}
.mobile-search-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 16px;
  overflow-y: auto;
      max-width: 430PX;
backdrop-filter: blur(16px);
}

#mobileSearchPanel {
  padding: 0; /* Remove top padding */
  margin: 0;
}

.hidden {
  display: none;
}

.search-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.close-btnn {
  background: none;
  color: white;
  font-size: 24px;
  border: none;
}

.search-results h3 {
  color: white;
  margin-bottom: 12px;
}

.search-item {
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  gap: 12px;
}

.search-item img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
}

.search-item .info {
  flex-grow: 1;
}

.search-item .title {
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.search-item .subtitle {
  color: #9da5b4;
  font-size: 12px;
}

.search-item .price {
  color: white;
  font-weight: bold;
}
.dropdown-panel.hidden {
  display: none;
}


.mobile-profile-dropdown {
  background: #10131c;
  color: white;
  padding: 16px;
  border-radius: 8px;
  margin-top: 10px;
}

.mobile-profile-dropdown.hidden {
  display: none;
}

.mobile-profile-dropdown .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-profile-dropdown .user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.mobile-profile-dropdown .dropdown-header img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.mobile-profile-dropdown .dropdown-header {
    display: flex;
    gap:5px;
    align-items:center;
}

.mobile-profile-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-profile-dropdown ul li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-profile-dropdown ul li a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-profile-container {
  position: relative;
  display: inline-block;
}

.profile-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.mobile-profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background-color: #10131c;
  color: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.5);
  width: 220px;
  z-index: 999;
}

.mobile-profile-dropdown.hidden {
  display: none;
}

.mobile-profile-dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-profile-dropdown ul li {
  padding: 8px 0;
  border-bottom: 1px solid #1f1f1f;
}

.input-icon-wrapper {
  position: relative;
  width: 100%;
}

.input-icon-wrapper i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6); /* lighter icon */
  font-size: 16px;
  pointer-events: none;
}

.input-icon-wrapper input {
  width: 100%;
  padding: 14px 16px 14px 40px; /* increased left padding */
  border: none;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.05); /* blurred background effect */
  color: #fff;
  font-size: 19px;
  outline: none;
      backdrop-filter: blur(22px);
}


.mobile-locale-panel {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.locale-select-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.locale-select-group label {
  color: #fff;
  margin-bottom: 4px;
  font-size: 14px;
    display: block;
    font-weight: 600;
}
.btn-confirm {
  width: 100%;
  padding: 10px;
  background-color: #3866ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

/* Product Card Container */
.product-mobile-card {
  background: #0f111d;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  transition: background 0.3s ease;
  margin-bottom: 10px;
}

/* Product Thumbnail */
.product-mobile-card .product-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
}

/* Product Info */
.product-mobile-card .product-info {
  flex-grow: 1;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Product Title */
.product-mobile-card .product-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

/* Product Region */
.product-mobile-card .product-region {
  font-size: 12px;
  color: #888ea2;
}

/* Pricing Area */
.product-mobile-card .product-pricing {
  text-align: right;
  font-size: 14px;
  white-space: nowrap;
}

/* Old Price (if discounted) */
.product-mobile-card .product-old-price {
  font-size: 12px;
  color: #888ea2;
  text-decoration: line-through;
  display: block;
}

/* Hover effect */
.product-mobile-card:hover {
  background: #1a1d2e;
}


.search-dropdown {
  border-radius: 16px;
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(245, 245, 245, 0.10);
    backdrop-filter: blur(20px);
}

.search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  padding: 8px 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #ffffff;
  transition: background 0.3s ease, box-shadow 0.3s ease;    


}

.search-result:hover {
  background: linear-gradient(90deg, #0045FF 0%, #002999 100%);
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}


.search-result.selected {
  background: linear-gradient(to right, #0040ff, #007bff);
  box-shadow: 0 0 12px #007bff88;
}

.pricing-item-search {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-grow: 1;
}

.pricing-img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background-color: #000;
  flex-shrink: 0;
}

.pricing-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4px;
  flex-grow: 1;
}

.pricing-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

.pricing-price {display: flex; gap: 5px;align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #ffc750;
}

.platform-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.platform-icons img {
  width: 20px;
  height: 20px;
  opacity: 0.85;
}

.search-dropdown::-webkit-scrollbar {
  width: 6px;
}
.search-dropdown::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 6px;
}
/* General footer styles */
footer {
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    background-color: #010014;
}



.footer-main .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    padding-top: 15px;
    padding-left: 9%;
    padding-right: 9%;
    max-width:2300px;
     margin-left: auto;
  margin-right: auto;
}

.footer-column {
    flex: 1 1 200px;
    min-width: 220px;
}

.brand-info .footer-logo img {
    max-width: 150px;
    margin-bottom: 15px;
}

.footer-label {
    color: #FFF;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 30px; /* 214.286% */
letter-spacing: 0.2px;
text-transform: uppercase;
}

.footer-email {
color: #0045FF;
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 150% */
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 40px;
}

.social-links li a {
    color: #fff;
    font-size: 18px;
    transition: color 0.3s ease;
}

.social-links li a:hover {
    color: #3399ff;
}

.footer-title {
    margin-bottom: 15px;
    color: #FFF;

font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
letter-spacing: -1px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #c1c1c1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.updates-column form {
    display: flex;
    align-items: center;
    background: #14172b;
    border-radius: 25px;
    overflow: hidden;
    padding: 5px 10px;
    max-width: 425px;
}

.updates-column input[type="email"] {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.updates-column button {
    background: #005eff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
}
.footer-bottom {
    border-top: 1px solid #222436;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.locale-dropdown .locale-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
}



.dropdown-panel {
    position: absolute;
    right: 0;
    top: 100%;
    padding: 10px;
    border-radius: 24px;
    z-index: 100;
    display: none;
    width: 500px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    color: white;
     min-width: 260px;
    overflow: hidden; /* Important for keeping child elements within rounded corners */
    font-family: 'Jost', sans-serif;
    backdrop-filter: blur(5.9px); /* The blur effect */
    -webkit-backdrop-filter: blur(35px); /* For Safari */
    border: 1px solid rgba(56, 102, 255, 0.3); /* Subtle border to match theme */
}
.select-groupp{display: flex;    justify-content: space-between;gap:20px;
}

.locale-dropdown:hover .dropdown-panel {
    display: block;
}

.btn-confirm {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: #005eff;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.submenu-header{font-size :19px;display: flex;align-items: flex-start;
    gap: 5PX;align-items: center;margin-bottom: 20px;}
.search-results-dropdown {
  position: absolute;
  overflow-y: auto;
  width: 100%;
  display: none; /* hide by default */
  z-index: 9999;
      top: 130%;
}
.hidden {
  display: none;
}
.back-btn{display: flex;align-items: center;gap: 5PX;
  background: #0055ff;
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: 600;
    border: 1px solid #0055ffe3;}
.icon-product-img{display: flex;align-items: center;justify-content: center;
  padding: 5px;
  border-radius: 23px;
border: 1px solid rgba(131, 131, 131, 0.15);
background: rgba(83, 83, 83, 0.18);
backdrop-filter: blur(70.9000015258789px);} 
.icon-prct-img{width: 21px;height:  21px;}

.footer-support {
        display: flex;
        align-items: center;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        gap: 10px;
        font-size: 13px;
        color: #ccc;
    }

    .footer-bottom .container {   
        flex-wrap: wrap;
        color: #aaa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px; /* Updated Size */
        align-items: center;
        text-align: center;
    }
    .locale-dropdown {
        position: relative;
    }
    .btn-confirm {
        background: #005eff;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 6px;
        font-weight: bold;
        width: 100%;
   
}

.payment-logo-bar {
    background-color: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
}

.payment-logo-wrap {
  display: flex;
  flex-wrap: nowrap; /* ✅ prevent multiple rows */
  overflow-x: auto;   /* ✅ allow horizontal scrolling */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 10px 9%;
  gap: 16px;
  -webkit-overflow-scrolling: touch; /* ✅ smooth iOS swipe */
  max-width: 2300px;
   margin-left: auto;
  margin-right: auto;
  
}

.payment-logo-wrap::-webkit-scrollbar {
  display: none; /* ✅ hides scrollbar on WebKit browsers */
}

.payment-logo-item {
  scroll-snap-align: start; /* ✅ optional for snap-to-position */
  flex: 0 0 auto;
  background-color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 36px;
  box-sizing: border-box;
}

.payment-logo-item img {
    max-height: 24px;
    max-width: 80px;
    object-fit: contain;
    display: block;
}

.region-modal {
    background: #1e2134;
    border-radius: 16px;
    padding: 30px 25px;
    width: 400px;
    color: white;
    font-family: 'Jost', sans-serif;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.region-header h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.region-logo img {
    width: 40px;
    height: 40px;
}

.close-btnn {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.region-subtext {
    font-size: 13px;
    color: #5B697D;
    margin-bottom: 20px;
    line-height: 1.4;
}

.region-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.region-field {
    width: 100%;
}

.region-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #aaa;
}

.locale-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: #141527e0;
    color: white;
    font-size: 14px;
    appearance: none;height: 45PX;border: 1px solid rgba(245, 245, 245, 0.10);


}

.btn-confirm {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #0066ff;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-confirm:hover {
    background-color: #0052cc;
}
.region-modal.hidden {
    display: none;
}

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .submenu {
  top: 0;
  left: 100%;
  position: absolute;
  min-width: 240px;
     background: rgb(25 30 52 / 34%);
  border-radius: 12px;
  padding: 8px 0;
  z-index: 9999;
  display: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
 backdrop-filter: blur(5.9px);
}

/* Show 3rd level submenu when hovering */
.dropdown-submenu:hover > .submenu {
  display: block;
}
.submenu {
  display: none;
  padding-left: 16px;
  margin-top: 8px;
  list-style: none;
}

.submenu.open {
  display: block;
}

.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: white;
  font-weight: bold;
  padding: 10px 0;
}
.svg-user-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1); /* makes black SVG appear white */
  object-fit: contain;
  display: inline-block;
}

.mobile-menu-list li.dropdown.open > ul.submenu {
  display: block !important;
  /* Add other styles like padding, margin, background if needed */
}
.dropdown.open > .submenu {
  display: block !important;
}
.mobile-menu-list li .submenu {
  display: none; /* Hide by default */
}

.mobile-menu-list li.open > .submenu {
  display: block; /* Show when parent <li> has .open */
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .payment-logo-item {
        padding: 6px 8px;
        height: 30px;
    }
    .pricing-title{font-size: 12px;}.pricing-item-search{gap:5px;}.pricing-img{width: 50px;height: 70px;}
    .payment-logo-item img {
        max-height: 20px;
        max-width: 60px;
    }

    .payment-logo-wrap {
        gap: 1px;
        padding: 3px;
    }
}
@media (max-width: 768px) {
    .subscribe-form {
        display: flex;
        flex-direction: row; /* This is key */
        align-items: center;
        justify-content: space-between;
        background: #14172b;
        border-radius: 30px;
        overflow: hidden;
        width: 100%;
        max-width: 360px;
        padding: 4px;
        margin: 0 auto;
    }
     .mobile-logo-center{transform: translateX(-240%);}
     .mobile-search-panel {max-width: 768px;}



    .subscribe-form input[type="email"] {
        flex: 1;
        padding: 12px 16px;
        border: none;
        background: transparent;
        color: #fff;
        font-size: 14px;
        outline: none;
    }

    .subscribe-form button {
        background: #005eff;
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
      .footer-links{align-items: center;}  

}






@media (max-width: 768px) {
  .footer-column{align-items: center;}
   .mobile-menu-overlay{max-width: 768px;}
  .mobile-logo-center{transform: translateX(-240%);}
  .mobile-search-panel{max-width: 768px ;}
  .brand-info .footer-logo img {padding-right: 12px;}
  .locale-select{width: auto;}.locale-select{    border: 1px solid rgba(47, 130, 251, 0.31);
    background: #031320;}
}
@media (max-width: 759px) {
  
  .mobile-logo-center{transform: translateX(-220%);}

}
@media (max-width: 699px) {
  
  .mobile-logo-center{transform: translateX(-205%);}

}

@media (max-width: 650px) {
  
  .mobile-logo-center{transform: translateX(-190%);}

}

@media (max-width: 599px) {
  
  .mobile-logo-center{transform: translateX(-170%);}
  .icon-prct-img{width: 16px;height: 16px;}

}

@media (max-width: 540px) {
  .mobile-menu-overlay {max-width: 540px ;}
  .mobile-logo-center{transform: translateX(-150%);}
  .mobile-search-panel{max-width: 540px ;}
  .pricing-img{width: 30px; height: 43px;}
  .pricing-price{font-size: 12px;}
  .icon-product-img{padding:2px;}
  .pricing-bottom{align-items: start;}
}

@media (max-width: 430px) {
  .mobile-menu-overlay {max-width: 435px ;}
  .mobile-logo-center{transform: translateX(-120%);}
  .mobile-search-panel{max-width: 430px ;}
}
@media (max-width: 425px) {
  .mobile-menu-overlay {max-width: 425px ;}
  .mobile-logo-center{transform: translateX(-120%);}
  .mobile-search-panel{max-width: 425px ;}
}


@media (max-width: 414px) {
  .mobile-menu-overlay {max-width: 420px;}
  .mobile-logo-center{transform: translateX(-114%);}
}
@media (max-width: 412px) {
  .mobile-menu-overlay {max-width: 412px;}
  .mobile-logo-center{transform: translateX(-112%);}
  .mobile-search-panel{max-width: 412px ;}
}
@media (max-width: 390px) {
  .mobile-menu-overlay {max-width: 390px;}
  .mobile-logo-center{transform: translateX(-107%);}
}

@media (max-width: 375px) {
  .mobile-menu-overlay {max-width: 375px; }
  .mobile-logo-center{transform: translateX(-120%);}
  .mobile-menu-header{margin-bottom: 0px;}
  .logo-wrapper img{height: 40px;}
}


@media (max-width: 360px) {
  .mobile-menu-overlay {max-width: 360px;}
  .mobile-logo-center{transform: translateX(-116%);}
  .mobile-search-panel{max-width: 360px ;}
  .mobile-menu-header{padding: 10px 20px;}
  #mobileSearchPanel .mobile-menu-header, #mobileSearchPanel .search-header, #mobileSearchPanel .search-results{padding: 10px;}
  .logo-wrapper img{height: 40px;}
  .input-icon-wrapper input{padding: 9px 16px 9px 40px;}
}

@media (max-width: 320px) {
  .mobile-menu-overlay {max-width: 320px; }
  .mobile-logo-center{transform: translateX(-100%);}
    .mobile-search-panel{max-width: 320px ;}

}
#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #0b1220 40%, #000000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#global-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-wrapper {
  position: relative;
  width: 75px;
  height: 75px;
}

.loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.spinner {
  width: 75px;
  height: 75px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #f1c40f; /* highlight (yellow) */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); /* glowing effect */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}@media (min-width:768px){.subscribe-form {
    position: relative;
    margin-top: 8px;
}}
/* Hide dropdowns by default */
.mobile-dropdown-menu,
.mobile-submenu {
    display: none;
}

/* Show when active */
.mobile-dropdown-menu.active,
.mobile-submenu.active {
    display: block;
}
.mobile-search-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #111418;
    padding: 10px;
    display: flex;
    align-items: center;
    z-index: 2000;
}
.mobile-search-bar input {
    flex: 1;
    padding: 8px;
    font-size: 14px;
    border: none;
    outline: none;
    border-radius: 6px;
}
.mobile-search-bar.hidden { display: none; }
.close-search {
    margin-left: 10px;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
}/* Make the menu drawer scrollable */
.mobile-menu-content {
  display: flex;
  flex-direction: column;
  height: 100%;   /* take full height */
}

/* Drawer section (scrollable) */
.mobile-menu-drawer {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px; /* leave space for bottom bar */
}

/* Bottom language section */
.selectmobile-down {
  position: sticky;
  bottom: 0;
  background: #011322; /* match your menu background */
  padding: 15px;
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 10;
}
@media (max-width: 768px) {

  /* Style only the hamburger icon */
  .header-actions .header-icon-btn:last-child {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
    border: 1px solid rgba(56, 102, 255, 0.69);
    background: transparent;
    color: white;
  }
  .updates-column  {
    position: revert-layer;
}
.subscribe-form button{transform: none !important; top: none;right: 40px;position: static !important; }



  .header-actions .header-icon-btn:last-child i::before {
    content: "\f0c9"; /* Font Awesome bars (hamburger) icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
}
@media (max-width: 820px) {.header-icon-btn{outline:none;}.navbar-menu{display: none;} .mobile-menu-overlay{max-width: 490px;}}
@media (max-width: 768px) {
  /* Hide elements not needed on mobile */
  .header .header-bottom-nav,
  .header-actions .header-icon-btn:not(:last-child),
  .navbar-menu,
  .header-actions .wallet-btn,
  .header-actions .points-btn,
  .locale-dropdown,
  .profile-dropdown {
    display: none !important;
  }

  /* Make header layout compact */
  .header .container {
    padding: 12px 16px;
    flex-wrap: nowrap;
  }

  /* Logo + text alignment */
  .logo {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .logo img {
    height: 28px;
    width: auto;
  }

  /* Adjust header actions to show only icons */
  .header-actions {
    gap: 12px;
    margin-left: auto;
  }
  /* Add compact spacing */
  .header-top-bar {
    padding: 10px 0;
    border-bottom: none;
    max-width:2200px
  }

  /* Optional: add a mobile tab bar under header */
  .mobile-tabs {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-tabs a {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
  }

  .mobile-tabs a.active {
    color: #fff;
    border-color: #facc15; /* Yellow underline */
  }
}
@media (max-width: 768px) {
  /* Reset icon button outline */
  .header-icon-btn {
    border: 1px solid rgba(56, 102, 255, 0.69);
    outline: none;
        width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
  }

  .header-icon-btn:focus,
  .header-icon-btn:active {
    outline: none;
    box-shadow: none;
  }

  /* Force only search + menu icons to show */
  .header-actions .header-icon-btn {
    display: none !important;
  }

  .header-actions .header-icon-btn.search-btn,
  .header-actions .header-icon-btn.menu-btn {
    display: flex !important;
  }

  /* Search icon style */
  .header-actions .search-btn i::before {
    content: "\f002"; /* Font Awesome search icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }

  /* Hamburger icon style */
  .header-actions .menu-btn i::before {
    content: "\f0c9"; /* Font Awesome bars icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }

  /* Maintain spacing */
  .header-actions {
    display: flex;
    gap: 12px;
  }

  .header-actions .header-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
    background: transparent;
    color: white;
  }
}
@media (max-width: 768px) {
    .menu-btn {
    font-size: 22px;
    color: white;
    background: none;
    border: none;
    padding: 0;
    margin-right: 12px;
  }
  .logo-wrapper .logo-icon {
    height: 24px;
    object-fit: contain;
  }

  .logo-wrapper .logo-text {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
  }

  .logo-mini-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
  }

  .logo-mini-btn img {
    height: 22px;
    object-fit: contain;
  }
  /* Remove all existing icon borders */
  .header-icon-btn {
    border: none !important;
    outline: none !important;
    background: transparent;
    box-shadow: none !important;
  }

  /* Hide duplicate hamburger menu icon */
  .header-actions .header-icon-btn.menu-btn:not(:first-of-type) {
    display: none !important;
  }

  /* Keep search + first menu icon only */
  .header-actions .header-icon-btn {
    display: none !important;
  }

  .header-actions .header-icon-btn.search-btn,
  .header-actions .header-icon-btn.menu-btn:first-of-type {
    display: flex !important;
  }

  /* Keep icons styled clean */
  .header-actions .header-icon-btn i {
    font-size: 18px;
    color: white;
  }
}
@media (min-width: 769px) {
  .header-actions .header-icon-btn.search-btn,
  .header-actions .header-icon-btn.menu-btn {
    display: none !important;
  }
}
#localeDropdownPanel h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.5rem;
}

#localeDropdownPanel p.region-subtext {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

/* Select Boxes */
.locale-select {
    background-color: #1f2937;
    color: #f9fafb;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    appearance: none;
}

/* Select Options (when dropdown is open - limited browser support) */
.locale-select option {
    background-color: #1f2937;
    color: #f9fafb;
}

/* Buttons */
#localeConfirmBtn {
    background-color: #3b82f6;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    margin-top: 1.5rem;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s;
}

#localeConfirmBtn:hover {
    background-color: #2563eb;
}

/* Close Button */
#closeLocalePanel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #9ca3af;
    cursor: pointer;
}

#closeLocalePanel:hover {
    color: #f87171;
}

/* Grouped Fields */
.select-groupp {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.locale-select-group {
    flex: 1 1 30%;
}
/* Base dropdown styling */
.locale-select {
  background-color: #1f2937; /* Dark gray background */
  color: #f9fafb;            /* Light text */
  border: 1px solid #374151; /* Subtle border */
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  width: 100%;
  appearance: none;

  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%207%205-7z%22%20fill%3D%22%23f9fafb%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 7px;
  padding-right: 2rem;
}

/* Option elements (in dropdown) */
.locale-select option {
  background-color: #1f2937;
  color: #f9fafb;
}
/* 🔳 Selection box (closed state) */
.select2-container--default .select2-selection--single {
  background-color: #1e293b!important; /* dark navy */
  border: 1px solid #334155!important;
  color: #f1f5f9;
  height: 42px!important;
  border-radius: 10px!important;
  display: flex!important;
  align-items: center;
  padding: 0 12px;
}

/* 🔽 Arrow icon color */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #f1f5f9 transparent transparent transparent;
}

/* 🎯 Selected text inside box */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9;
  line-height: 40px;
}

/* 📄 Dropdown container */
.select2-container--default .select2-dropdown {
  background-color: #1e293b;
  border: 1px solid #334155;
  color: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
}

/* 🔍 Search box inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #0f172a;
  color: #f1f5f9;
  border: 1px solid #334155;
  padding: 6px 10px;
  border-radius: 4px;
}

/* 📃 Dropdown items */
.select2-container--default .select2-results__option {
  background-color: #1e293b;
  color: #f1f5f9;
  padding: 8px 12px;
}

/* 🔵 Hovered or selected item */
.select2-container--default .select2-results__option--highlighted {
  background-color: #3b82f6; /* Tailwind blue-500 */
  color: white;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color: #ffffff!important;}

.select2-container--default .select2-selection--single .select2-selection__arrow{    top: auto !important;}
.footer-email {
    color: #FFFFFF; /* Pure white for maximum contrast */
    /* OR */
    color: #F8F9FA; /* Very light gray */
    /* OR */
    color: #E9ECEF; /* Light gray */
}