/* --- Original User CSS --- */
#dropdown_for_search {
  display: none; /* Hidden by default */
  max-height: 600px; /* Maximum height */
  overflow-y: auto; /* Vertical scrolling if the dropdown is long */
  overflow-x: hidden; /* Hide horizontal scrolling */
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  margin-top: 5px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  white-space: normal; /* Text will wrap to the next line if it's long */
  word-wrap: break-word; /* Words will break if they're too long */
}

.dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Will wrap to the next line if items don't fit */
  white-space: normal; /* Text inside dropdown will wrap */
  word-break: break-word; /* Long words will break and wrap */
}

.badge.service_id_badge {
  margin-right: 8px; /* Gap between the badge and name */
  font-size: 12px; /* Badge text size */
}

#dropdown_for_search .text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px; /* Correct positioning for the message */
  font-weight: bold;
}
/* --- End of Original CSS --- */


/* --- Sidebar Menu Hover Animation --- */
.sidebar_menu .menu_item {
    transition: all 0.2s ease-in-out;
}

.sidebar_menu .menu_item:hover {
    transform: translateX(10px);
}
/* --- End of Hover Animation --- */


/* 
============================================
--- LIGHT MODE STYLES (Purple & Yellow Accents) ---
These styles ONLY apply when 'nightmode' class is NOT present.
============================================
*/

body:not(.nightmode) {
    --light-purple-accent: #6d28d9;
    --light-purple-hover: #5b21b6;
    --light-yellow-accent: #ffb400; /* New yellow accent color */
    --light-background: #f4f4f9;
    --light-sidebar-bg: #4f15d8; /* The main purple from the sidebar */
    --light-card-bg: #ffffff;
    --light-text-primary: #1f2937;
    --light-text-secondary: #6b7280;
    --light-border-color: #e5e7eb;
    --light-input-bg: #ffffff;
    --light-balance-bg: #3a0f9d; /* The darker purple for the inner card */

    background-color: var(--light-background) !important;
    color: var(--light-text-primary) !important;
}

/* Sidebar */
body:not(.nightmode) .sidebar {
    background: var(--light-sidebar-bg); /* Use purple sidebar bg */
    border-right: 1px solid var(--light-border-color);
}
body:not(.nightmode) .sidebar .sidebar_menu .menu_item {
    color: #ffffff; /* Set inactive menu item text to white */
}
body:not(.nightmode) .sidebar .sidebar_menu .menu_item .menu_icon i {
    color: #ffffff; /* Set inactive menu icon to white */
}

/* Sidebar Active/Hover - Kept Purple as per the image */
body:not(.nightmode) .sidebar .sidebar_menu .menu_item.active,
body:not(.nightmode) .sidebar .sidebar_menu .menu_item:hover {
    background-color: var(--light-purple-accent);
    color: #ffffff !important;
}
body:not(.nightmode) .sidebar .sidebar_menu .menu_item.active .menu_icon i,
body:not(.nightmode) .sidebar .sidebar_menu .menu_item:hover .menu_icon i,
body:not(.nightmode) .sidebar .sidebar_menu .menu_item.active .menu_name,
body:not(.nightmode) .sidebar .sidebar_menu .menu_item:hover .menu_name {
    color: #ffffff !important;
}

/* User Info in Sidebar - UPDATED to match Image 2 */
body:not(.nightmode) .user_data h5,
body:not(.nightmode) .user_data .v2_user_info h5 {
    color: #ffffff; /* Set username to white */
}
body:not(.nightmode) .user_data .user_balance {
    color: #ffffff; /* White text on the dark bar */
    background-color: #3a0f9d;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}
body:not(.nightmode) .user_data .balance {
    color: var(--light-yellow-accent); /* Yellow accent for currency */
    background-color: transparent;
}


/* Main Content Area */
body:not(.nightmode) .content_area {
    background: var(--light-background);
}
body:not(.nightmode) .top_header {
    background-color: var(--light-card-bg);
    border-bottom: 1px solid var(--light-border-color);
}

/* Top Header Buttons */
body:not(.nightmode) .top_header .telegram {
    background-color: var(--light-yellow-accent) !important;
    color: #111827 !important;
    border: none;
}
body:not(.nightmode) .top_header .telegram:hover {
    background-color: var(--light-purple-accent) !important;
    color: #ffffff !important;
}
body:not(.nightmode) #currencyToggler2 {
    background-color: var(--light-yellow-accent) !important;
    color: #111827 !important;
    border: none;
}
body:not(.nightmode) #currencyToggler2:hover {
    background-color: var(--light-purple-accent) !important;
    color: #ffffff !important;
}

/* Page Info bar */
body:not(.nightmode) #page_info {
    background-color: var(--light-card-bg);
    border-bottom: 1px solid var(--light-border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
body:not(.nightmode) #page_info h4,
body:not(.nightmode) .stat-text {
    color: var(--light-text-primary); /* Changed from grey */
}
body:not(.nightmode) #page_info .sp_text_primary {
    color: var(--light-purple-accent) !important;
}

/* General Cards & Forms */
body:not(.nightmode) .card {
    background-color: var(--light-card-bg);
    border: 1px solid var(--light-border-color);
}
body:not(.nightmode) .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--light-border-color);
    color: var(--light-text-primary);
}
body:not(.nightmode) label,
body:not(.nightmode) .form-label {
    color: var(--light-text-primary);
}
body:not(.nightmode) .form-control,
body:not(.nightmode) .form-select,
body:not(.nightmode) .bootstrap-select .btn {
    background-color: var(--light-input-bg) !important;
    color: var(--light-text-primary) !important;
    border: 1px solid var(--light-border-color) !important;
}
body:not(.nightmode) .form-control:focus {
    border-color: var(--light-purple-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(109, 40, 217, 0.25);
}
body:not(.nightmode) .btn-primary {
    background-color: var(--light-purple-accent) !important;
    border-color: var(--light-purple-accent) !important;
    color: #ffffff !important;
}
body:not(.nightmode) .btn-primary:hover {
    background-color: var(--light-purple-hover) !important;
    border-color: var(--light-purple-hover) !important;
}

/* Tables */
body:not(.nightmode) .table {
    color: var(--light-text-primary);
    background-color: var(--light-card-bg);
}
body:not(.nightmode) .table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--light-background);
    color: var(--light-text-primary);
}
body:not(.nightmode) .table > :not(caption) > * > * {
    background-color: transparent;
}
body:not(.nightmode) .table thead th,
body.not(.nightmode) .table tbody td,
body.not(.nightmode) .table tbody th {
    border-color: var(--light-border-color);
}


/* 
============================================
--- DARK MODE HOVER FIX (Mint Green) ---
============================================
*/
body.nightmode .top_header .telegram:hover,
body.nightmode #currencyToggler2:hover {
    background-color: #00ffa3 !important;
    color: #111827 !important; /* Dark text for contrast on mint background */
}

/* 
============================================
--- SMOOTH MOBILE NAVIGATION (PERFORMANCE FIX) ---
============================================
*/

@media (max-width: 991.98px) {
    body.noAuth .navbar-collapse.collapsing,
    body.noAuth .navbar-collapse.collapse.show {
        /* PERFORMANCE FIX: Using a simple transparent background instead of the heavy blur filter */
        background: rgba(34, 35, 66, 0.95); /* Semi-transparent version of #222342 card color */
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

        /* THE LAG-CAUSING LINES HAVE BEEN REMOVED */
        /* backdrop-filter: blur(8.5px); */
        /* -webkit-backdrop-filter: blur(8.5px); */
        
        border-radius: 10px;
        border: 1px solid rgba(74, 77, 128, 0.4);
        padding: 20px;
        margin-top: 15px;
        overflow: hidden;
    }

    body.noAuth .navbar-collapse .navbar-nav {
      opacity: 0;
    }

    body.noAuth .navbar-collapse.show .navbar-nav {
      opacity: 1;
      transition: opacity 0.2s ease-in 0.15s;
    }

    /* Set link color to white for better readability on the dark background */
    body.noAuth .navbar-collapse .nav-link {
        font-weight: 500;
        padding-top: 8px;
        padding-bottom: 8px;
        color: #ffffff;
    }
}

/* 
============================================
--- AUTH PAGE STYLES (Sign Up/Login) ---
============================================
*/

/* Page title */
body.noAuth .sigup_title h1 {
    color: #00ffa3;
    font-weight: bold;
}

/* Main form box */
body.noAuth .card {
    background-color: #222342 !important;
    border: none !important;
}

/* Form labels */
body.noAuth .card .control-label,
body.noAuth .card .checkbox label,
body.noAuth .rememberme {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Form input fields */
body.noAuth .form-control {
    background-color: #2e3052 !important;
    border: 1px solid #4a4d80 !important;
    color: #ffffff !important;
}

body.noAuth .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

/* Bottom Links */
body.noAuth .card p, body.noAuth .card p a,
body.noAuth .dont_have_an_acc, body.noAuth .dont_have_an_acc a,
body.noAuth .restpassword, body.noAuth .restpassword a,
body.noAuth .forgot__pass_phone, body.noAuth .forgot__pass_phone a {
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: 1rem;
}
body.noAuth .card p a, body.noAuth .dont_have_an_acc a,
body.noAuth .restpassword a, body.noAuth .forgot__pass_phone a {
    color: #00ffa3 !important;
    font-weight: 500;
}

/* Primary "Sign up/in" button styling */
body.noAuth .btn-primary, body.noAuth .btn__signin {
    background-color: #00ffa3 !important;
    border-color: #00ffa3 !important;
    color: #111827 !important;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
}
body.noAuth .btn-primary:hover, body.noAuth .btn__signin:hover {
    background-color: #00e08e !important;
    border-color: #00d4f1 !important;
}

/* The "OR" separator */
body.noAuth .or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    margin: 1.25rem 0;
}
body.noAuth .or-separator::before,
body.noAuth .or-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #4a4d80;
}
body.noAuth .or-separator:not(:empty)::before {
    margin-right: .25em;
}
body.noAuth .or-separator:not(:empty)::after {
    margin-left: .25em;
}

/* 
============================================
--- FINAL GOOGLE AUTH BUTTON STYLES (SEPARATE & CORRECTED) ---
============================================
*/

/* --- Hide the line break on the login page --- */
body.noAuth #hero_v3 .google-auth-container br:first-child {
    display: none !important;
}

/* --- Style for Login Page Button (System-Generated) --- */
body.noAuth #hero_v3 .google-auth-container button#login-with-google-btn {
    width: 100% !important;
    max-width: 100% !important; 
    background-color: #00ffa3 !important;
    color: #111827 !important;
    border-color: #00ffa3 !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    border-radius: 5px !important;
    transition: background-color 0.2s ease !important;
}

body.noAuth #hero_v3 .google-auth-container button#login-with-google-btn:hover {
    background-color: #00e08e !important;
    border-color: #00d4f1 !important;
}

body.noAuth #hero_v3 .google-auth-container button#login-with-google-btn i.fa-google {
    font-size: 20px !important;
    margin-right: 12px !important;
    color: #111827 !important; 
}


/* --- Style for Signup Page Button (Custom-Made) --- */
body.noAuth section#signUp a.auth-btn-google {
    background-color: #00ffa3 !important;
    border: 1px solid #00ffa3 !important;
    color: #111827 !important;
    font-weight: bold !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    width: 100% !important;
}

body.noAuth section#signUp a.auth-btn-google svg {
    height: 22px !important;
    width: 22px !important;
    margin-right: 12px;
}

body.noAuth section#signUp a.auth-btn-google:hover {
    background-color: #00e08e !important;
    border-color: #00d4f1 !important;
}