/* Global Styles */
:root {
    --primary-color: #7D19FF;
    --secondary-color: #F4CA81;
    --background-color: #1a1b1e; /*#1a1b1e*/
    --text-color: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-bg:  #1a1b1e;  /*#1a1b1e;*/
    --card-bg: #25262b;
    --hover-bg: #2c2e33;
    --border-color: #2c2e33;
    --z-navbar: 1030;
    --z-dropdown: 1020;
    --z-dropdown-content: 1010;
    --z-backdrop: 1000;
}

html, body {
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
} 


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

main {
    min-height: calc(100vh - 70px);
    padding: 2rem;
} 

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

p {
    color: var(--text-color);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-center.text-muted i {
    opacity: 0.5;
    margin-bottom: 1rem;
}

.server-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.server-info small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
}

.server-switch i {
    font-size: 1rem;
    opacity: 0.7;
}

.server-switch:hover i {
    opacity: 1;
    color: var(--secondary-color);
}

.color-preview {
    width: 40px;
    transition: background-color 0.2s ease;
}

/* Analytics Status Text */
.analytics-status {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Emoji styles */
.emoji {
    font-style: normal;
    margin-left: 4px;
    color: var(--secondary-color);
}

.discord-logo {
    width: 100px;
    margin-bottom: 1.5rem;
}

/* Emoji animation in title, for pricing page */
.display-4 span {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.display-4 span:last-child {
    animation-delay: 0.5s;
}

.pricing-amount h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    line-height: 1;
}

.pricing-amount .small {
    font-size: 0.875rem;
    opacity: 0.6;
    margin-top: 0.5rem;
}
/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.channel-list::-webkit-scrollbar, .mod-list::-webkit-scrollbar, .verification-list::-webkit-scrollbar {
    width: 4px;
}

.channel-list::-webkit-scrollbar-track, .mod-list::-webkit-scrollbar-track, .verification-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.channel-list::-webkit-scrollbar-thumb, .mod-list::-webkit-scrollbar-thumb,.verification-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.channel-list::-webkit-scrollbar-thumb:hover,.mod-list::-webkit-scrollbar-thumb:hover, .verification-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   Basic Utility Classes
   ========================================================================== */

.mb-2 {
    margin-bottom: 0.75rem !important;
}

.bg-sidebar {
    background-color: #2c2c2c;
}

.premium-badge {
    font-size: 0.75rem;
    opacity: 0.7;
}

.container.mt-5 {
    margin-top: 3rem !important;
}

.settings-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.settings-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-title {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
}


/* ==========================================================================
   badges Components
   ========================================================================== */
/* Badge Styles */
.badge {
    padding: 0.5em 0.8em;
    font-weight: 500;
    font-size: 0.75rem;
}

.badge.bg-success {
    background-color: rgba(25, 135, 84, 0.9) !important;
}

.badge.bg-primary {
    background-color: rgba(125, 25, 255, 0.9) !important;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.badge.bg-secondary {
    background-color: rgba(108, 117, 125, 0.9) !important;
}

/*for pricing amount*/
.most-popular-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(125, 25, 255, 0.3);
}

/* Category Badge Styling in server listing */
.server-categories .badge {
    background-color: var(--primary-color);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
}

/* ==========================================================================
   Basic Layout
   ========================================================================== */

.wrapper {
    min-height: 100vh;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wrapper > .container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    /*overflow: hidden; Overflow impedes sticky pricing header */
}

.wrapper > .container-fluid > .row {
    flex: 1;
    /*overflow: hidden; Overflow impedes sticky pricing header */
}

.page-container {
    padding-top: 64px;
    min-height: calc(100vh - 64px);
    width: 100vw;
    margin: 0;
    overflow-x: hidden;
}

.content-row {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 64px);
}

/* ==========================================================================
   Navigation Components
   ========================================================================== */

/* Main Content for base */
.main-content {
    margin-left: 250px; /* Match sidebar width */
    min-height: calc(100vh - 64px);
    padding: 2rem;
    background-color: var(--background-color);
}

.server-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.server-switch:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
    text-decoration: none;
}

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 300;
    width: 100%;
    display: flex;
}

.header-container .navbar {
    width: 100%;
    height: 64px;
    padding: 0;
    flex: 1;
}

.header-container .container-fluid {
    padding-left: 0;  /* Remove left padding */
    margin: 0;
    display: flex;
    width: 100%;
    align-items: center;
    height: 100%;
}

/* Navbar */
.navbar {
    background: rgba(20, 20, 35, 0.95) !important; /* Dark with slight transparency */
    backdrop-filter: blur(10px); /* Adds frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    height: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
}

.navbar > .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

.navbar-brand img {
    height: 40px;
    width: auto;
}

.nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-item.dropdown.show .nav-link {
    color: #fff !important;
}

/* Add this to your existing navbar styles section */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.navbar-nav.ms-auto {
    margin-left: auto !important; /* Restore the right alignment */
}

.navbar-nav .nav-item {
    display: flex;
    align-items: center;
    margin: 0;
}

.navbar-nav .nav-link {
    padding: 0.5rem 0.35rem;
    line-height: 1;
    margin: 0;
}

/* Adjust the premium button to match the nav links height */
.navbar-nav .btn-premium {
    margin: 0 0.35rem;
    height: fit-content;
    line-height: 1;
    padding: 0.5rem 0.75rem;
}

/* Remove the general ms-auto override */
/* .ms-auto {
    margin: 0 !important;
} */

.navbar-nav > li {
    padding: 0;
}


/* User Avatar Styles */
.user-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

.nav-item.dropdown:hover .user-avatar {
    border-color: var(--primary-color);
}

/* Dropdown Menu Styles */
.dropdown-menu {
    background: rgba(20, 20, 35, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* Add this line to ensure dropdown appears above other elements */
    padding: 0.5rem 0;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

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

/* Adjust the navbar spacing for the avatar */
.navbar-nav .nav-item.dropdown {
    margin-left: 0.5rem;
}

.navbar-nav .dropdown-toggle::after {
    display: none;
}

/* Sidebar */
.sidebar {
    width: 250px;
    top: 64px;
    height: calc(100vh - 64px);
    position: fixed;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: all 0.3s ease;
    z-index: var(--z-navbar);
}

.sidebar-logo {
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.sidebar .nav-item {
    padding: 0.5rem 1rem;
    margin: 0.25rem 0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sidebar .nav-item:hover {
    background-color: var(--hover-bg);
}

.sidebar .nav-item.active {
    background-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(125, 25, 255, 0.3);
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    -webkit-tap-highlight-color: transparent;
}

.sidebar .nav-link:hover {
    color: var(--secondary-color);
}

.sidebar .nav-link:active {
    background-color: transparent;
}

.sidebar a.nav-link {
    color: var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar a.nav-link:hover {
    color: var(--secondary-color);
}

.sidebar a.active {
    color: var(--text-color);
}

.sidebar .nav-link.active {
    color: #fff !important;
    font-weight: 500;
}

/* Additional hover effects */
.sidebar a.nav-link {
    color: var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}


.sidebar a.active {
    background-color: var(--primary-color);
    color: var(--text-color);
}


.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 500;
}

/* ==========================================================================  
Moble Components
========================================================================== */

/* Mobile Sidebar Toggle Button */
.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: calc(var(--z-navbar) + 1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    transform: scale(1.1);
    background: #6610f2;
}

.sidebar-toggle i {
    font-size: 1.25rem;
}

/* ==========================================================================  
Sidebar top Components
========================================================================== */


/* Sidebar Server Section */
.sidebar-top {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-top .server-switch {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sidebar-top .server-switch:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.sidebar-top .server-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.sidebar-top .server-info small {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
}

.sidebar-top .server-switch i {
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.sidebar-top .server-switch:hover i {
    color: var(--primary-color);
}



/* ==========================================================================  
Form Components
========================================================================== */

/* Form Controls */
.form-control, .form-select {
 background: rgba(0, 0, 0, 0.2);
 border: 1px solid rgba(255, 255, 255, 0.1);
 color: var(--text-color);
 padding: 0.75rem;
 border-radius: 6px;
}

.form-control:focus, 
.form-select:focus {
 background: rgba(0, 0, 0, 0.3);
 border-color: var(--primary-color);
 box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.25);
 color: var(--text-color);
}

.form-control::placeholder,
.form-select::placeholder {
 color: rgba(255, 255, 255, 0.3) !important;
 font-weight: 300;
}

/* Form Switch */
.form-check.form-switch {
    display: flex;
    align-items: center;
}

.form-check.form-switch .form-check-label {
    margin-top: 2px;  /* Fine-tune vertical alignment */
}

.form-check-input[type="checkbox"].form-check-input {
    height: 1.5em;
    width: 3em;
    margin-left: -3.5em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.85%29'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    border-color: rgba(125, 25, 255, 0.25);
    box-shadow: 0 0 0 0.15rem rgba(125, 25, 255, 0.25);
}

.form-check-input:not(:checked):not(:focus) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}


.custom-checkbox .form-check-input {
    width: 0.3em;
    height: 0.3em;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.custom-checkbox .form-check-label {
    margin: 0;
    line-height: 1;
    font-size: 0.9em;
}


/* ==========================================================================
   Toggle Components
   ========================================================================== */

/* Common toggle container styles */
.analytics-toggle,
.spark-toggle,
.collab-toggle {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 100;
}

/* Common form switch padding */
.analytics-toggle .form-check.form-switch,
.spark-toggle .form-check.form-switch,
.collab-toggle .form-check.form-switch {
    padding-left: 3.5em;
}

/* Common toggle input styles */
.form-switch.analytics-toggle,
.collab-toggle .form-check.form-switch,
#sparkToggle.form-check-input[type="checkbox"].form-check-input,
#analyticsToggle.form-check-input[type="checkbox"].form-check-input, 
#hypeEngineToggle.form-check-input[type="checkbox"].form-check-input,
#collabToggle.form-check-input[type="checkbox"].form-check-input {
    height: 1.5em;
    width: 3em;
    margin-left: -3.5em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.85%29'/%3e%3c/svg%3e");
}

/* Common toggle states */
.form-switch.analytics-toggle .form-check-input:checked,
#sparkToggle.form-check-input:checked,
#analyticsToggle.form-check-input:checked,
#hypeEngineToggle.form-check-input:checked,
#collabToggle.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Specific styles for feature toggles */
#sparkToggle.form-check-input[type="checkbox"].form-check-input:checked,
#analyticsToggle.form-check-input[type="checkbox"].form-check-input:checked,
#hypeEngineToggle.form-check-input[type="checkbox"].form-check-input:checked,
#collabToggle.form-check-input[type="checkbox"].form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch.analytics-toggle .form-check-input:focus,
#sparkToggle.form-check-input:focus,
#analyticsToggle.form-check-input:focus,
#hypeEngineToggle.form-check-input:focus,
#collabToggle.form-check-input:focus {
    border-color: rgba(125, 25, 255, 0.25);
    box-shadow: 0 0 0 0.15rem rgba(125, 25, 255, 0.25);
}

.form-switch.analytics-toggle .form-check-input:not(:checked):not(:focus),
#sparkToggle.form-check-input:not(:checked):not(:focus),
#analyticsToggle.form-check-input:not(:checked):not(:focus),
#hypeEngineToggle.form-check-input:not(:checked):not(:focus),
#collabToggle.form-check-input:not(:checked):not(:focus) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Add specific styles for the spark toggle container */
.spark-toggle {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 100;
}

.spark-toggle .form-check.form-switch {
    padding-left: 3.5em;
}

/* ==========================================================================
   Toggle Components for collabs and everything else
   ========================================================================== */
#collabToggle.form-check-input[type="checkbox"].form-check-input,
#sparkToggle.form-check-input[type="checkbox"].form-check-input, 
#analyticsToggle.form-check-input[type="checkbox"].form-check-input,
#hypeEngineToggle.form-check-input[type="checkbox"].form-check-input
/* Form Labels */
.form-label {
 color: rgba(255, 255, 255, 0.9);
 margin-bottom: 0.5rem;
}


/* ==========================================================================  
Custom checkbox for the web3 or not on overvoew page
========================================================================== */
.custom-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

/* ==========================================================================  
card Components
========================================================================== */

/* Base Card Styles */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    color: var(--text-color);
    height: 100%;  /* Make all cards same height */
    --bs-card-cap-padding-y: 1.25rem;  /* Add custom card header padding */
    position: relative;
    z-index: auto;
}



/* Card Elements */
.card-body {
    padding: 1.5rem;
}

.card-header {
    padding: var(--bs-card-cap-padding-y) 1.5rem;
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-color);
    z-index: 1; /* Lower z-index for the visibility settings section */
    position: relative; /* Add this to create a new stacking context */
}

.card-img-top {
    object-fit: contain;
    height: 128px;
    padding: 1rem;
}

.card-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0.8;

}

.card-title {
    color: var(--text-color);
    margin-bottom: var(--bs-card-cap-padding-y);
    font-size: 1.5rem;
    font-weight: 600;

}

/* Config Card Styles */
.config-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.config-card:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
}

.config-card:hover .server-icon img {
    border-color: var(--primary-color);
}

.config-card:hover .default-icon {
    background: rgba(125, 25, 255, 0.2);
    border-color: var(--primary-color);
}


/* ==========================================================================  
login Components
========================================================================== */

/* Login Card */
.login-container {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

/* ==========================================================================  
pricing Components
========================================================================== */

/* Pricing container and grid */
.pricing-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Update pricing row styles */
.pricing-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin: -1rem;
    padding-bottom: 2rem; /* Add padding at bottom for better spacing */
}

.pricing-col {
    flex: 0 0 auto;
    padding: 1rem;
    width: 310px;
    transition: all 0.3s ease;
    display: flex;
}

/* Make Premium plan stand out */
.pricing-col:nth-child(2) {
    transform: translateY(-30px);
    margin-bottom: -60px;
    z-index: 2;
}

.pricing-col:nth-child(2) .pricing-card {
    background: linear-gradient(145deg, rgba(125, 25, 255, 0.1) 0%, rgba(149, 65, 255, 0.05) 100%);
    position: relative;
    height: calc(100% + 60px);
}

/* Add gradient border effect for premium card */
.pricing-col:nth-child(2) .pricing-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #7D19FF 0%, #F4CA81 100%);
    border-radius: inherit;
    z-index: -1;
    transition: all 0.3s ease;
}

/* Add inner background to cover gradient except border */
.pricing-col:nth-child(2) .pricing-card::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: var(--card-bg);
    border-radius: inherit;
    z-index: -1;
}

/* Pricing Card */
.pricing-card {
    min-width: 310px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--card-bg) 0%, rgba(44, 46, 51, 0.9) 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: none;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.pricing-col:nth-child(2) .pricing-card:hover::before {
    background: linear-gradient(135deg, #9541FF 0%, #FFE169 100%);
    filter: brightness(1.1);
}


.pricing-card .card-body {
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

.pricing-card .card-title {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.pricing-amount {
    text-align: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    background: linear-gradient(145deg, rgba(125, 25, 255, 0.05) 0%, rgba(149, 65, 255, 0.02) 100%);
}

.pricing-amount h2 {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1;
}

.most-popular-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(125, 25, 255, 0.3);
}

/* Feature groups styling */
.feature-group {
    margin-bottom: 2rem;
}

.feature-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feature-group ul li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-size: 0.9rem;
}


.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
}

.pricing-card .card-body {
    padding: 2rem 1.5rem;
}

.pricing-card .card-title {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.pricing-amount {
    text-align: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.pricing-amount h2 {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    line-height: 1;
}

.pricing-amount small {
    color: var(--text-muted);
    font-size: 1rem;
}

.pricing-amount .small {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.feature-group {
    margin-bottom: 2rem;
}

.feature-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feature-group ul {
    margin: 0;
    padding: 0;
}

.feature-group ul li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-size: 1.2rem;
}

.feature-group ul li i.fa-check {
    color: #4CAF50;
    font-size: 1rem;
}

.feature-group ul li i.fa-times {
    color: #f44336;
    font-size: 1rem;
}

.most-popular-badge {
    position: absolute;
    top: 1rem;
    right: -2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    color: white;
    padding: 0.5rem 3rem;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(125, 25, 255, 0.3);
    z-index: 1;
}

/* Pricing page header animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.pricing-header {
    text-align: center;
    margin-bottom: 4rem;
}

.pricing-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-header p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Button styling */
.pricing-card .btn {
    width: 100%;
    padding: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pricing-card .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #9541FF 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(125, 25, 255, 0.3);
}

.pricing-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(125, 25, 255, 0.4);
}

.pricing-card .btn-outline-primary {
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
}

.pricing-card .btn-outline-primary:hover {
    background-color: var(--hover-bg);
    border-color: var(--primary-color);
    color: var(--secondary-color);
}



/* ==========================================================================  
permission card Components
========================================================================== */

/*Bot Permission Card*/
.permission-status {
    font-size: 1.2em;
}
.permission-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.permission-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
}

/* Response Time Card */
.response-time-config {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 6px;
}

/* Permission Modal */
#permissionsSummary,
#permissionsError {
    margin-top: 1.5rem;
    border-radius: 8px;
    padding: 1rem;
}
/* Permission Check Messages */
#permissionsSummary {
    background: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

#permissionsError {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.permission-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#permissionWarningBadge {
    font-size: 0.8em;
    padding: 0.3em 0.6em;
    border-radius: 0.25rem;
    background-color: rgba(255, 193, 7, 0.1);
    transition: all 0.2s ease-in-out;
}

#permissionWarningBadge:hover {
    background-color: rgba(255, 193, 7, 0.2);
}

.cursor-pointer {
    cursor: pointer;
}
    



/* Rules Card for spark */
#rulesContainer {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 1rem;
}

#rulesContainer .card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    margin-bottom: 0;
    transition: background-color 0.2s ease;
}

#rulesContainer .card:hover {
    background: rgba(255, 255, 255, 0.05);
}

#rulesContainer .card:last-child {
    border-bottom: none;
}

#rulesContainer .card-body {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#rulesContainer .card p {
    margin: 0;
    line-height: 1.5;
    color: var(--text-color);
    font-size: 0.9rem;
}

#rulesContainer .card p strong {
    color: var(--text-muted);
    margin-right: 0.5rem;
    font-weight: 500;
}


/* ==========================================================================
   Modal Components
   ========================================================================== */

/* Base Modal Styles */
.modal-content.bg-dark {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Modal Sections */
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-color: var(--border-color);
    padding: 1.25rem;
}

.modal-body {
    padding: 1.25rem;
}


.modal-footer {
    border-top: none;
    padding: 1.25rem;
    display: flex;
    align-items: center; /* Keep this for vertical centering */
    justify-content: center;
    gap: 0.75rem;
}

.modal-footer .btn,
.modal-footer a.btn,
.modal-footer #fixPermissionsBtn {  /* Add specific styling for fix permissions button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    height: 38px;
    margin: 0;
    text-decoration: none;
    vertical-align: middle; /* Add this to ensure vertical alignment */
    margin-bottom: 1rem;
}

/* Ensure secondary button has consistent styling */
.modal-footer .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

.modal-footer .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Update button styles in modal footer */
.modal-footer .btn i {
    font-size: 0.875rem;
    line-height: 1;
}

/* Modal Form Elements */
.modal-body .form-control {
    background: #1a1b1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem;
    border-radius: 6px;
}

.modal-body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.modal-body .form-control:focus {
    border-color: #7d19ff;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.25);
}

.modal-body .form-label {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

/* Analytics Modal */
.analytics-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: auto;
}

.analytics-step[style*="display: none"] {
    opacity: 0;
    transform: translateY(10px);
}



/* ==========================================================================
   dropdown/multiple select Components, specicially for channels
   ========================================================================== */
/* Channel Selection for the dropdown */
.channel-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-top: 0.5rem;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform-origin: top;
    animation: dropdownFade 0.2s ease;

}

.analytics-channel-select.active .channel-dropdown-content {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;


}

/*channel search styles*/
.channel-search,
.mod-search,
.verification-search {
    position: relative;
    padding: 0.75rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    z-index: 9999;
}


.channel-search input,
.mod-search input,
.verification-search input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    width: 100%;
    border-radius: 4px;
    font-size: 0.9rem;
}

.channel-search input:focus,
.mod-search input:focus,
.verification-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.25);
}



.channel-search input::placeholder,
.mod-search input::placeholder,
.verification-search input::placeholder {
    color: var(--text-muted);
}

/* Search Icon Styles */
.channel-search i,
.mod-search i,
.verification-search i {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}



/* Channel Selection Display */
.selected-channels-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
}


/* Ensure parent containers have proper stacking context */
.analytics-channel-select,
.moderator-roles,
.verification-roles {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 1000;
}


.selected-channels-display:hover {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.3);
}

.selected-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}


/* Channel Badge Styling */
.channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.channel-badge:hover {
    background: #6610f2;
}

.channel-badge .remove-channel {
    background: none;
    border: none;
    color: white;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.channel-badge .remove-channel:hover {
    opacity: 1;
}

/* Dropdown Arrow */
.dropdown-arrow {
    color: var(--text-muted);
    padding: 0 0.5rem;
    transition: transform 0.2s ease;
}

.analytics-channel-select.active .dropdown-arrow {
    transform: rotate(180deg);
}


/* Channel List Styling */
.channel-list, .mod-list, .verification-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem 0;
    background: var(--card-bg);
    position: relative;
}

.channel-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.channel-item i {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.channel-item:hover {
    background: rgba(125, 25, 255, 0.1);
}

.channel-item.selected {
    background: var(--primary-color);
    color: white;
}

.channel-item.selected i {
    color: white;
}

/* Multiple Select Styling */
select[multiple] {
    min-height: 200px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

select[multiple] option {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}

select[multiple] option:checked {
    background: var(--primary-color) linear-gradient(0deg, var(--primary-color) 0%, var(--primary-color) 100%);
    color: white;
}

select[multiple] option:hover {
    background: rgba(125, 25, 255, 0.1);
}



/* ==========================================================================
   mod roles selections for dropdown
   ========================================================================== */

.moderator-role, .verification-roles {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 100; /*for verification role, z-index is at 1000*/

}

.moderator-roles-display,.verification-roles-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.moderator-roles-display:hover,.verification-roles-display:hover {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.3);
}

.selected-mod-badges, .selected-verification-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.moderator-badge, .verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.moderator-badge:hover,.verification-badge:hover {
    background: #6610f2;
}

.moderator-badge .remove-channel, .verification-badge .remove-channel {
    background: none;
    border: none;
    color: white;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.moderator-badge .remove-channel:hover, .verification-badge .remove-channel:hover  {
    opacity: 1;
}

.moderator-roles.active .mod-dropdown-content, .verification-roles.active .verification-dropdown-content {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10000;
}


/* Moderator List Styling during the dropdown query */

.mod-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.mod-item i {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.mod-item:hover {
    background: rgba(125, 25, 255, 0.1);
}

.mod-item.selected {
    background: var(--primary-color);
    color: white;
}

.mod-item.selected i {
    color: white;
}

.mod-dropdown-content {
    display: none;
    z-index: 10000;
}



/* ==========================================================================
   verification roles selections for dropdown & some final overwrite
   ========================================================================== */
.verification-roles {
    position: relative;
}

.verification-dropdown-content {
    display: none; /* Hidden by default */
}

/* Only show the dropdown content when parent has active class */
.verification-roles.active .verification-dropdown-content {
    display: block;
}


.analytics-channel-select.active,
.moderator-roles.active {
    z-index: 1000; /* Match dropdown z-index when active */
}

/* Add backdrop overlay when dropdown is active */
.analytics-channel-select.active::before,
.moderator-roles.active::before,
.verification-roles.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    pointer-events: none;
}

/* Exclude blacklist channels from backdrop */
.blacklist-channels .analytics-channel-select.active::before {
    display: none;
}

/* Ensure parent containers have proper stacking context */
.analytics-channel-select,
.moderator-roles,
.verification-roles {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 1;
}

/* Increase z-index when active to ensure dropdown appears above other content */
.analytics-channel-select.active {
    z-index: 1000;
}

/* Ensure dropdown content appears above everything */
.channel-dropdown-content {
    z-index: 10000;
}

/* Step 3 Section */
#step3Section {
    position: static; /* Change from relative to static */
    z-index: auto; /* Remove z-index */
}

/* These z-index values need to be standardized */
.navbar { z-index: 1000; }
.verification-roles { z-index: 1000; }
.verification-roles.active { z-index: 10000; }
.verification-dropdown-content { z-index: 10001; }
.verification-list { z-index: 20000; }
.dropdown-menu { z-index: 10000; } /* Match other high z-index values */

/* Base styles for all dropdown containers */
.analytics-channel-select,
.moderator-roles,
.verification-roles {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 1000;
}

/* Active state for all dropdowns */
.analytics-channel-select.active,
.moderator-roles.active,
.verification-roles.active {
    z-index: 99999;
}

/* Dropdown content styles */
.channel-dropdown-content,
.mod-dropdown-content,
.verification-dropdown-content {
    position: fixed;
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    display: none;
}

/* Show dropdown content when parent is active */
.analytics-channel-select.active .channel-dropdown-content,
.moderator-roles.active .mod-dropdown-content,
.verification-roles.active .verification-dropdown-content {
    display: block;
}

/* Backdrop handling */
.analytics-channel-select.active::before,
.moderator-roles.active::before,
.verification-roles.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    pointer-events: none;
}

/* Exclude blacklist channels from backdrop */
.blacklist-channels .analytics-channel-select.active::before {
    display: none;
}

/* Section z-index hierarchy */
#step2Section {
    position: relative;
    z-index: 20;
}

#step3Section {
    position: relative;
    z-index: 15;
}

#step4Section {
    position: relative;
    z-index: 10;
}

#step5Section {
    position: relative;
    z-index: 1;
}

.settings-section {
    position: relative;
}



/* ==========================================================================
   card feature inside of /overview.html
   ========================================================================== */
  
/* Add these styles for the overview page cards */
.overview-feature-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.overview-feature-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.overview-feature-card .card-text {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.overview-feature-card .btn {
    align-self: flex-start;
    margin-top: 0px;
}





/* ==========================================================================
   Category Components inside of /overview.html
   ========================================================================== */
   .category-select-wrapper {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 100;
}

.selected-categories-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.selected-categories-display:hover {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.3);
}

.selected-category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.category-badge:hover {
    background: #6610f2;
}

.category-badge .remove-category {
    background: none;
    border: none;
    color: white;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.category-badge .remove-category:hover {
    opacity: 1;
}

.category-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.category-select-wrapper.active .category-dropdown-content {
    display: block;
}

.category-search {
    position: relative;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-list {
    max-height: 190px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.category-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.category-item i {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.category-item:hover {
    background: rgba(125, 25, 255, 0.1);
}

.category-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}




/* ==========================================================================
   Save Changes Component
   ========================================================================== */
   .save-changes-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    background: var(--primary-color);
    border-top: 1px solid var(--border-color);
    padding: 16px;
    transition: all 0.3s ease;
    z-index: 1040;  /* Higher than navbar (1030) */
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.save-changes-bar.show {
    transform: translateY(-100px);
    animation: saveBarPulse 2s ease-in-out infinite;
    box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.35);
    opacity: 1;
    visibility: visible;
}

@keyframes saveBarPulse {
    0% {
        box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.35);
    }
    50% {
        box-shadow: 0 -4px 32px rgba(125, 25, 255, 0.5);
    }
    100% {
        box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.35);
    }
}

@keyframes saveBarShake {
    0%, 100% {
        transform: translateY(-100px);
    }
    25% {
        transform: translateY(-98px);
    }
    75% {
        transform: translateY(-102px);
    }
}

.save-changes-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.save-changes-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.save-changes-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .save-changes-bar {
        padding: 12px;
        background: linear-gradient(to right, var(--primary-color), #9d4edd);
    }

    

    .save-changes-content {
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
        text-align: center;
    }

    .save-changes-text {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .save-changes-actions {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .save-changes-actions button {
        flex: 1;
        min-width: 140px;
        max-width: 180px;
        padding: 12px 20px;
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        height: 48px;
        border-radius: 8px;
        align-items: center;
    }

    .save-changes-actions .btn-outline-light {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .save-changes-actions .btn-primary {
        background: #ffffff;
        border: 2px solid #ffffff;
        color: var(--primary-color);
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .save-changes-bar {
        padding: 16px 12px;
    }

    .save-changes-actions button {
        min-width: 120px;
        max-width: 160px;
        padding: 10px 16px;
        font-size: 14px;
        height: 44px;
        align-items: center;
    }
}



/* ==========================================================================
   Server Components for server listing
   ========================================================================== */

/* Server Actions Layout inside of /servers */
.server-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    flex-wrap: wrap; /* Allow buttons to wrap */
}

.server-actions .btn {
    flex: 1; /* Allow buttons to grow */
    min-width: 120px; /* Minimum width for buttons */
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* Adjust button sizes at different breakpoints */
@media (max-width: 1200px) {
    .server-actions {
        gap: 0.35rem;
    }
    
    .server-actions .btn {
        min-width: 110px;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 1024px) {
    .server-actions {
        flex-direction: column;
        width: 100%;
    }

    .server-actions .btn {
        width: 100%;
        min-width: unset;
    }
}

/* Mobile optimization */
@media (max-width: 576px) {
    .server-actions {
        gap: 0.5rem;
    }

    .server-actions .btn {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
}

/* Server Card Layout */
.server-card {
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 200px;  /* Set minimum height */


}

.server-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px);
    opacity: 0.5;
    transform: scale(1.5);
}

.server-card .card-body {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0.2) 0%, 
        rgba(0, 0, 0, 0.4) 100%);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.server-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color);
}

.server-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-right: 0.7rem;
}


.server-stats .stat-item i {
    width: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.server-stats .stat-item i.text-success {
    font-size: 0.6rem;
    color: #3ba55c !important;
    margin-top: 2px;

}

.server-stats .stat-item span {
    color: var(--text-color);
    font-weight: 500;
}

/* Server Icon */
.server-card .rounded-circle {
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
    width: 48px;
    height: 48px;
}

.server-card .card-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
}


.server-card .server-actions {
    margin-top: auto;
    padding-top: 1rem;
}



/* Collab tabs */
#collabTabs .nav-link {
    color: var(--text-color);
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

#collabTabs .nav-link:hover {
    color: var(--primary-color);
    background: rgba(125, 25, 255, 0.1);
    border: none;
}

#collabTabs .nav-link.active {
    color: var(--primary-color);
    background: rgba(125, 25, 255, 0.15);
    border: none;
    font-weight: 600;
}

/* Matched Subtabs Styles */
#matchedSubtabs {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

#matchedSubtabs .nav-link {
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

#matchedSubtabs .nav-link:hover {
    background: rgba(125, 25, 255, 0.1);
    border-color: var(--primary-color);
}

#matchedSubtabs .nav-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Tab Content Animation */
.tab-pane {
    animation: fadeIn 0.3s ease;
}


/* ==========================================================================
   Dropdown for actions in collab 
   ========================================================================== */
.dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dropdown-item {
    color: var(--text-color);
}

.dropdown-item:hover {
    background: rgba(125, 25, 255, 0.1);
    color: var(--text-color);
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* ==========================================================================
   Discover content style /collab page
   ========================================================================== */

   .discover-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.discover-content .fa-compass {
    color: var(--primary-color);
    animation: pulse 2s ease-in-out infinite;
}

.discover-content .btn-lg {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.discover-content .btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

/* ==========================================================================
   Server Icon Style /collab page
   ========================================================================== */

.server-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    transition: border-color 0.2s ease;
}


.default-icon {
    width: 100%;
    height: 100%;
    background: rgba(125, 25, 255, 0.1);
    border: 2px solid rgba(125, 25, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

/* ==========================================================================
   Calender style /collab page
   ========================================================================== */
.fc {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-color);
}

.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--border-color);
}

.fc .fc-daygrid-day {
    cursor: pointer;
}

.fc .fc-daygrid-day.available {
    background-color: rgba(25, 135, 84, 0.1);
}

.fc .fc-daygrid-day.unavailable {
    background-color: rgba(220, 53, 69, 0.1);
    cursor: not-allowed;
    opacity: 0.7;
}

.fc .fc-daygrid-day.selected {
    background-color: rgba(125, 25, 255, 0.2);
    border: 2px solid var(--primary-color);
}

.fc .fc-scrollgrid {
    border: none;
}
/* Calendar Header Styles */
.fc .fc-toolbar-title {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
}


/* Calendar Day Styles */
.fc .fc-daygrid-day-top {
    padding: 4px;
}

.fc .fc-daygrid-day-number {
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
}

.fc .fc-day-today {
    background-color: rgba(125, 25, 255, 0.1) !important;
}

.fc .fc-day-past {
    opacity: 0.5;
}

.fc .fc-day-future {
    opacity: 1;
}

/* Calendar Header Cells */
.fc .fc-col-header-cell {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px 0;
}

.fc .fc-col-header-cell-cushion {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 8px;
}

/* Calendar Legend Styles */
.calendar-legend {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
}

.calendar-legend.available {
    background-color: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.3);
}

.calendar-legend.unavailable {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    opacity: 0.7;
}

.calendar-legend.selected {
    background-color: rgba(125, 25, 255, 0.2);
    border: 2px solid var(--primary-color);
}

/* Calendar Hover Effects */
.fc .fc-daygrid-day:not(.unavailable):hover {
    background-color: rgba(125, 25, 255, 0.1);
}

.fc .fc-daygrid-day.available:hover {
    background-color: rgba(25, 135, 84, 0.2);
}


/* ==========================================================================
   pricing card components
   ========================================================================== */

.pricing-amount {
    text-align: center;
    padding: 1rem 0;
    position: relative;
}

.feature-group {
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}

.feature-title {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-group ul li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-size: 1.2rem;
}

.feature-group ul li i {
    width: 16px;
    text-align: center;
    font-size: 0.8rem;
}

.feature-group ul li i.fa-check {
    color: #28a745;
}

.feature-group ul li i.fa-times {
    color: #dc3545;
}


/* ==========================================================================
   server stats in select_server page
   ========================================================================== */

.server-stats {
    font-size: 0.9rem;
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 1rem 0;
}

.server-stats i {
    width: 16px;
    text-align: center;
    margin-right: 0.25rem;
}

/* Server Description Styling */
.server-description {
    font-size: 0.875rem;
    line-height: 1.4;
    max-height: none;
    overflow: visible;
}

.server-description p {
    margin-bottom: 0;
    overflow: visible;
    display: block;
    white-space: normal;
    text-overflow: clip;
    height: auto;
    max-height: none;
    -webkit-box-orient: unset;
}

.server-description .description-text {
    font-size: 0.9rem;
    color: #F6F6F6;
    margin: 0;
    line-height: 1.4;
    display: block;
    white-space: normal;
    text-overflow: clip;
    height: auto;
    max-height: none;
    -webkit-box-orient: unset;
}


/* Search and Filter Section */
.search-filters {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Pagination in select_server page
   ========================================================================== */
   .pagination {
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagination.justify-content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination.justify-content-center .page-item {
    display: flex;
    align-items: center;
}

.pagination .page-link {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    cursor: default;
    min-width: 80px;
    height: 36px;
}

.pagination .page-link:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(125, 25, 255, 0.2);
}

.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
    opacity: 0.6;
    cursor: not-allowed;
}

.pagination .page-item.disabled .page-link:hover {
    transform: none;
    box-shadow: none;
    background-color: transparent;
}

/* Pagination icons */
.pagination .page-link i {
    font-size: 0.875rem;
}

/* ==========================================================================
   Noticaion tab on /servers
   ================================= */
.notification-tab {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.5rem;
    border-top-right-radius: 16px; /* Match server card border radius */
    border-bottom-left-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 20;
    width: 40%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.notification-tab i {
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

/* Update notification variants */
.notification-tab.scheduled {
    background: var(--primary-color);
    color: white;
}

.notification-tab.ongoing {
    background: #28a745;
    color: white;
}

.notification-tab.recollab {
    background: #17a2b8;
    color: white;
}

.notification-tab.likes {
    background: #ff6b6b;
    color: white;
}

.notification-tab.matched {
    background: #51cf66;
    color: white;
}

.notification-tab.collabed {
    background: #6c757d;
    color: white;
}

/* Remove hover effect since it's now flush with the card */
.notification-tab:hover {
    transform: none;
    box-shadow: none;
}

/* Ensure server card handles overflow properly */
.server-card {
    position: relative;
    overflow: visible;
}
  
/* ==========================================================================
   Long search tab on /servers
   ================================= */
   .search-container {
    width: 100%;
    margin: 0 auto;
}

.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
}

.search-input {
    position: relative;
    width: 100%;
    padding: 16px 24px;
    font-size: 18px;
    background: transparent;
    border: none;
    color: var(--text-color);
    outline: none;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-button {
    background-color: var(--primary-color);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    color: white;
    cursor: pointer;
    margin-right: 4px;
    transition: all 0.2s ease;
}

.search-button:hover {
    background-color: #6610f2;
    transform: translateY(-1px);
}

.search-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.25);
}

/* ==========================================================================
   Tags on /servers
   ================================= */

.filter-tags {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}


.primary-tags,
.secondary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.show-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.show-more-btn i {
    transition: transform 0.3s ease;
}

.show-more-btn.active i {
    transform: rotate(180deg);
}

.tag {
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.tag:hover {
    background-color: rgba(125, 25, 255, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.tag.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

.tag-select {
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.7)'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

.tag-select:hover {
    background-color: rgba(125, 25, 255, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tag-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.25);
}

.tag-select option {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 8px;
}


/* ==========================================================================
   File upload on /sparks
   ================================= */
   .file-upload-item {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px 12px;
    width: 220px;
    display: flex;
    align-items: center;
    position: relative;
}

.file-icon-container {
    width: 32px;
    height: 32px;
    margin-right: 0.5rem;
}

.file-icon-wrapper {
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-icon {
    font-size: 16px;
    color: white;
}

.file-info {
    text-overflow: ellipsis;
    overflow: hidden;
    flex-grow: 1;
}

.file-name {
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.file-type {
    font-size: 12px;
    color: var(--text-muted);
}

/* File Action Buttons */
.file-action-buttons {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.file-action-buttons .btn {
    padding: 2px 6px;
    font-size: 12px;
}

/* File Delete Button */
.file-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.file-delete-btn i {
    font-size: 12px;
    color: white;
}

/* Knowledge File Button */
.knowledge-file-btn {
    background: rgba(125, 25, 255, 0.1);
    border: 1px dashed var(--primary-color);
    color: var(--primary-color);
    padding: 1rem;
    border-radius: 6px;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.knowledge-file-btn:hover {
    background: rgba(125, 25, 255, 0.2);
    border-style: solid;
    color: white;
}



/* ==========================================================================
   Button Components
   ========================================================================== */

/* Base Button Styles */
.btn {
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

/* Primary Button */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;

}

.btn-primary:hover {
    background-color: #6610f2;
    border-color: #6610f2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

/* Outline Light Button */
.btn-outline-light {
    color: var(--text-color);
    border-color: var(--border-color);
    background-color: transparent;
    transition: all 0.2s ease;

}

.btn-outline-light:hover {
    background-color: var(--hover-bg);
    border-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Outline Primary Button */
.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    gap: 0.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    align-items: center;

}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);

}

.btn-outline-primary i {
    font-size: 0.875rem;
}

.btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}



/* Premium Button */
.btn-premium {
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%);
    color: #fff;
    font-weight: 600;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(65, 88, 208, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Add specific styling for navbar premium button */
.navbar-nav .btn-premium {
    padding: 0.35rem 1rem;
    font-size: 0.875rem;
    margin: 0.5rem 0.75rem;
    border-radius: 8px;
}

.navbar-nav .btn-premium i {
    font-size: 0.75rem;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(65, 88, 208, 0.4);
    background: linear-gradient(135deg, #3449c3 0%, #b845b8 50%, #ffb84d 100%);
    color: #fff;
}

.btn-premium:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(65, 88, 208, 0.3);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(270deg, #4158D0, #C850C0, #FFCC70);
    background-size: 200% 200%;
    border-radius: 14px;
    z-index: -1;
    animation: shimmer 3s ease-in-out infinite;
}

/* Update Premium Badge colors to match new button */
.premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.15) 0%, rgba(200, 80, 192, 0.15) 100%);
    border: 1px solid rgba(65, 88, 208, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4158D0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.premium-tag i {
    color: #C850C0;
    font-size: 0.875rem;
}

/* Update Premium Feature colors */
.premium-feature {
    position: relative;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.05) 0%, rgba(200, 80, 192, 0.05) 100%);
    border: 1px solid rgba(65, 88, 208, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.premium-feature:hover {
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.1) 0%, rgba(200, 80, 192, 0.1) 100%);
    border-color: rgba(65, 88, 208, 0.2);
    transform: translateY(-2px);
}

.premium-feature::before {
    content: '⭐';
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
    padding: 0.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(65, 88, 208, 0.3);
    color: white;
}

/* Discord Button */
.discord-btn {
    background-color: #7289da;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;

}

.discord-btn:hover {
    background-color: #5b73c7;
    color: white;
    text-decoration: none;
}

/* Analytics Button */
.analytics-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.1) 0%, rgba(200, 80, 192, 0.1) 100%);
    border: 1px solid rgba(65, 88, 208, 0.3);
    color: var(--text-color);
    position: relative;
    overflow: visible;
}

.analytics-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.15) 0%, rgba(200, 80, 192, 0.15) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(65, 88, 208, 0.2);
    border-color: rgba(65, 88, 208, 0.4);
}

.analytics-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(65, 88, 208, 0.15);
}

.analytics-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: linear-gradient(135deg, rgba(65, 88, 208, 0.05) 0%, rgba(200, 80, 192, 0.05) 100%);
}

.analytics-btn .content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.analytics-btn .fas {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.analytics-btn:hover:not(:disabled) .fas {
    transform: rotate(180deg);
}

.analytics-btn .crown {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.1rem;
    padding: 0.35rem;
    border-radius: 50%;
    animation: float 3s ease-in-out infinite;
    z-index: 2;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
}

/* Add glow animation for crown */
@keyframes float {
    0% { 
        transform: translateY(0px);
        filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
    }
    50% { 
        transform: translateY(-3px);
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    }
    100% { 
        transform: translateY(0px);
        filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
    }
}



.analytics-btn .premium-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    background: rgba(255, 193, 7, 0.15);
    color: #FFE169;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.analytics-btn .premium-badge i {
    font-size: 0.75rem;
    color: #FFE169;
}

/* File Delete Button */
.file-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.file-delete-btn i {
    font-size: 12px;
    color: white;
}

/* Knowledge File Button */
.knowledge-file-btn {
    background: rgba(125, 25, 255, 0.1);
    border: 1px dashed var(--primary-color);
    color: var(--primary-color);
    padding: 1rem;
    border-radius: 6px;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.knowledge-file-btn:hover {
    background: rgba(125, 25, 255, 0.2);
    border-style: solid;
    color: white;
}

/* Fix Permissions Button */
#fixPermissionsBtn {
    margin-top: 1rem;
    transition: all 0.2s ease;
    align-self: center; /* Ensure button is centered within flex container */
    position: relative; /* Add this to ensure proper stacking */
    top: 0; /* Reset any top positioning */
    margin-bottom: 1rem;
}

#fixPermissionsBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.2);
}

/* Save Changes Action Buttons */
.save-changes-actions .btn {
    padding: 8px 16px;
    font-weight: 500;
}
/* Adjust button colors for better contrast on purple background */
.save-changes-actions .btn-primary {
    background: white;
    color: var(--primary-color);
    border: none;
}

.save-changes-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
}

.save-changes-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
}

.save-changes-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
}
button[name="step2_submit"] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

button[name="step2_submit"][style*="display: none"] {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.pricing-card .btn {
    opacity: 0.9;
    transition: all 0.3s ease;
}

.pricing-card:hover .btn {
    opacity: 1;
}

/* Server Actions Styling */
.server-actions .btn {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

.server-actions .btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: all;
    transition: none;
}


/* Disabled State Styles */
.server-actions .btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: all;
    transition: none;
}


.server-actions .btn.disabled:hover {
    transform: none;
    box-shadow: none;
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}

/* Join Server Button */
.join-server-btn {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.join-server-btn:hover {
    background-color: #6610f2;
    border-color: #6610f2;
}

.join-server-btn.disabled {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    opacity: 0.6;
    pointer-events: none;
}

/* Collab Button */
.collab-btn {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

.collab-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.collab-btn.disabled {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.collab-btn.scheduled:disabled,
.collab-btn.ongoing:disabled {
    opacity: 0.8;
}


/* Collab Button States */
.collab-btn.scheduled,
.collab-btn.ongoing {
    background-color: var(--primary-color);
    color: white;
    opacity: 0.8;
    cursor: not-allowed;
}

.collab-btn.confirm {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.collab-btn.confirm:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.collab-btn.recollab {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.collab-btn.recollab:hover {
    background-color: #138496;
    border-color: #117a8b;
}

.collab-btn.liked {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.collab-btn.matched {
    border-color: var(--success);
    color: var(--success);
    opacity: 0.8;
}

/* Button Icons */
.collab-btn.liked i.fa-heart {
    color: var(--primary-color);
}

.collab-btn.matched i.fa-check-circle {
    color: var(--success);
}

.collab-btn:disabled i.fa-lock {
    color: var(--text-muted);
}

/*calender button*/
.fc .fc-button-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.fc .fc-button-primary:hover {
    background-color: #6610f2;
    border-color: #6610f2;
}

.fc .fc-button-primary:disabled {
    background-color: rgba(125, 25, 255, 0.5);
    border-color: rgba(125, 25, 255, 0.5);
}

/*for collab page, dropdown of recollab actions*/
.dropdown-toggle.btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.server-card .btn-primary {
    background: var(--primary-color);
    border: none;
    padding: 0.75rem 1.25rem;
    margin: 0rem 0rem;
}

.server-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

.server-card .btn-primary.active {
    background: #4CAF50;
    pointer-events: none;
}



/* ==========================================================================
   Alert
   ========================================================================== */

   .alert {
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    border: 1px solid transparent;
}

/* Warning Alert (Yellow) */
.alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #FFE169;
}

/* Danger Alert (Red) */
.alert-danger {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #FF8B9A;
}

/* Success Alert (Green) */
.alert-success {
    background: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.4);
    color: #75F0A5;
}

/* Info Alert (Blue) */
.alert-info {
    background: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.4);
    color: #8BE8FF;
}

/* Alert Icons */
.alert i {
    margin-right: 0.5rem;
    opacity: 0.9;
}

/* Alert Links */
.alert a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.9;
}

.alert a:hover {
    opacity: 1;
}


/* Toast Styling */
.toast {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    z-index: 99999 !important; /* Ensure toasts appear above everything */
}

/* Position fixed container for toasts */
.position-fixed {
    z-index: 99999 !important; /* Match toast z-index */
}

.toast-container {
    z-index: 99999 !important; /* Match toast z-index */
}

/* Rest of toast styles remain the same */
.toast .toast-header {
    border-bottom: 1px solid var(--border-color);
    z-index: 99999 !important;
}

.toast .toast-body {
    background-color: var(--card-bg);
    color: var(--text-color);
    z-index: 99999 !important;
}

/* Add a new stacking context for the main content */
.container.mt-5 {
    position: relative;
    z-index: 1;
}

/* Ensure modals appear below toasts but above other content */
.modal {
    z-index: 99990 !important;
}

.modal-backdrop {
    z-index: 99989 !important;
}


/* ==========================================================================
   Basic Animations
   ========================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.25);
    }
    50% {
        box-shadow: 0 -4px 32px rgba(125, 25, 255, 0.35);
    }
    100% {
        box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.25);
    }
}


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

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}



@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Add shimmer animation for premium button */
@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* ==========================================================================
   Basic Media Queries
   ========================================================================== */

/* Desktop (> 768px) - Default styles remain as is */

/* Responsive adjustments */
@media (max-width: 1400px) {
    .pricing-container {
        max-width: 1000px;
    }
}

/* Tablet view - Premium on top, Ultra and Essential below */
@media (max-width: 1252px) and (min-width: 768px) {
    .pricing-container {
        max-width: 900px;
        padding: 0 2rem;
    }
    
    .pricing-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        margin: 0;
    }
    
    /* Premium card - smaller width on top */
    .pricing-col:nth-child(2) {
        width: 100%;
        max-width: 550px;
        transform: translateY(0);
        margin-bottom: 3rem;
        order: -1;
        padding: 0;
    }
    
    /* Ultra and Essential cards - side by side below */
    .pricing-col:nth-child(1),
    .pricing-col:nth-child(3) {
        width: 300px;
        max-width: 300px;
        margin: 0 0.5rem;
        padding: 0;
    }
    
    .pricing-col:nth-child(2) .pricing-card {
        height: auto;
        margin: 0 auto;
    }

    /* Keep gradient border on premium */
    .pricing-col:nth-child(2) .pricing-card::before {
        opacity: 1;
    }
    
    /* Adjust card widths */
    .pricing-card {
        min-width: unset;
        width: 100%;
    }
}


@media (max-width: 768px) {
    /* Remove any existing navbar styles from this breakpoint */
    /* And add these specific navbar styles */
    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--sidebar-bg);
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        z-index: var(--z-navbar);
    }
    
    .row {
        margin: -0.5rem;
    }
    /* Sidebar & Navigation */
    .col-md-4 {
        padding: 0.5rem;
    }
    
    .sidebar {
    transform: translateX(-100%);
    width: 100%;
    max-width: 100%;
    background-color: var(--sidebar-bg);
    box-shadow: none;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar.show ~ .col .main-content {
        display: none;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
        padding: 1rem;
    }

    /* Add this to your existing CSS */
.no-sidebar .main-content {
    margin-left: 0 !important;
}


    .main-wrapper {
        margin-left: 0;
        padding: 1rem;
    }
    /* Navigation Elements */
    .navbar-brand img {
        height: 32px;
    }

    .server-switch {
        padding: 1rem;
    }

    .server-info h4 {
        font-size: 0.9rem;
    }

    .server-info small {
        font-size: 0.7rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    /* Calendar Mobile Responsiveness */
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }

    /*pricing cards*/
    .row-cols-md-4 {
        row-gap: 2rem;
    }
    
    .pricing-card {
        max-width: 95%;
        min-width: 0;
        margin: 1rem 0;
        
    
    }

    .pricing-amount h2 {
        font-size: 2rem;
    }

    /*buttons*/
    .btn {
        padding: 0.4rem 0.8rem; /* Slightly smaller padding on mobile */
    }
    
    .discord-btn {
        padding: 10px 20px;
        font-size: 1rem;
    }

    .server-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .server-actions .btn {
        width: 100%;
    }

    .modal-dialog {
        margin: 0.75rem;
    }
    
    .selected-channels-display {
        flex-direction: column;
        align-items: stretch;
    }
    
    .channel-badge {
        width: 100%;
    }

    .pricing-col:nth-child(2) .pricing-card::before {
        box-shadow: 0 5px 15px rgba(125, 25, 255, 0.1);
    }

    .pricing-col {
        width: 100%;
        max-width: 100%;
    }
    
    .pricing-row {
        align-items: start;
        margin: 0;
    }
    
    /* Reorder cards on mobile */
    .pricing-col:nth-child(1) { order: 2; }
    .pricing-col:nth-child(2) { 
        order: 1; 
        transform: translateY(0);
        margin-bottom: 1rem;
    }
    .pricing-col:nth-child(3) { order: 3; }
    
    .pricing-col:nth-child(2) .pricing-card {
        height: auto;
    }
    
    .pricing-container {
        padding: 0 1rem;
    }
    
    .pricing-card .card-body {
        padding: 2rem;
    }

    /* Button styles for mobile */
    .pricing-card .btn {
        font-size: 1.3rem;
        padding: 1rem 1.5rem;
        margin: 1.25rem 0;
    }

    .pricing-col:nth-child(2) .pricing-card .btn {
        font-size: 1.6rem;
        padding: 1.25rem 2rem;
        margin: 1.5rem 0;
        font-weight: 600;
    }

    /* Increase text sizes for mobile */
    .pricing-card .card-title {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }

    /* Add these navbar-specific styles */
    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--sidebar-bg);
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        z-index: var(--z-navbar);
    }

    .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .navbar-nav .btn-premium {
        width: 100%;
        margin: 0.5rem 0;
        justify-content: center;
    }

    .navbar-nav .dropdown {
        width: 100%;
    }

    .navbar-nav .dropdown-menu {
        width: 100%;
        margin-top: 0.5rem;
        position: static;
    }

    /* Adjust the navbar toggler button */
    .navbar-toggler {
        display: block;
        margin-left: auto;
        margin-right: 1rem;
    }


    /* Ensure the collapsed menu appears below */
    .navbar .container-fluid {
        flex-wrap: wrap;
    }

    .navbar-collapse {
        flex-basis: 100%;
    }
    
    .analytics-btn .crown {
        font-size: 1rem;
        top: -7px;
        right: -7px;
        padding: 0.3rem;
    }
    .server-stats {
        padding: 0.5rem;
        margin: 0.75rem 0;
    }
    
    .server-stats .stat-item {
        font-size: 0.8rem;
    }


    
}

@media (max-width: 480px) {
    .file-delete-btn {
        display: flex !important;
    }
    /* Container & Layout */
    .container {
        padding: 0 0.75rem;
    }

    /* Navigation Elements */
    .navbar-brand img {
        height: 28px;
    }

    .navbar-nav .btn-premium {
        padding: 0.25rem 0.75rem;
        font-size: 0.8rem;
        margin: 0.25rem 0.5rem;
    }

    /* Sidebar Elements */
    .sidebar .nav-link {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .sidebar .btn-premium {
        margin: 0.75rem 1rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Cards & Components */
    .card {
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Buttons */
    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 1.4rem;
    }

    .server-actions {
        gap: 0.375rem;
    }

    /* Forms & Inputs */
    .form-control, .form-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* File Management */
    .file-delete-btn {
        display: flex !important;
        width: 18px;
        height: 18px;
    }

    .file-upload-item {
        width: 100%;
    }

    /* Calendar */
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .fc .fc-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    .analytics-btn .crown {
        font-size: 0.9rem;
        top: -6px;
        right: -6px;
        padding: 0.25rem;
    }

    .analytics-btn {
        margin-bottom: 0.5rem;  /* Add more space between buttons */
    }

    /* Adjust analytics status spacing */
    .analytics-status {
        margin-top: -1.0rem !important;  /* Reduce top margin */
        margin-bottom: 0.7rem !important;  /* Add bottom margin before next button */
        font-size: 0.8rem;  /* Slightly smaller font size on mobile */
    }

    /* Adjust column spacing in mobile view */
    #step3Section .col-md-6 {
        margin-bottom: 1rem;  /* Add space between columns when stacked */
    }

    /* Remove margin from last column */
    #step3Section .col-md-6:last-child {
        margin-bottom: 0;
    }  
}




/* ==========================================================================
   Shop Items Styling
   ========================================================================== */

/* Shop Items Container */
.shop-items-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual Shop Item Card */
.shop-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}

#manage-subscription-btn {
    padding: 0.75rem 2rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

#manage-subscription-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

#manage-subscription-btn i {
    margin-right: 0.5rem;
}

#rulesContainer .btn-danger {
    padding: 0.25rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    opacity: 0.6;
    transition: all 0.2s ease;
}

#rulesContainer .btn-danger:hover {
    opacity: 1;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

#rulesContainer .btn-danger i {
    font-size: 0.875rem;
}

/* Add this to your existing CSS */

.btn-invite-bot {
    background: linear-gradient(135deg, #7289DA 0%, #5865F2 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(89, 101, 242, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-invite-bot:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(89, 101, 242, 0.4);
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    color: white;
}

.btn-invite-bot:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(89, 101, 242, 0.3);
}

.btn-invite-bot i {
    font-size: 1.1em;
    margin-right: 0.3em;
}

/* Server Card Actions */
.server-card .btn {
    transition: all 0.3s ease;
    border-radius: 8px;
}

.server-card .btn-primary {
    background: var(--primary-color);
    border: none;
    padding: 0.75rem 1.25rem;
    margin: 0rem 0rem;
}

.server-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

.server-card .btn-primary.active {
    background: #4CAF50;
    pointer-events: none;
}



/* ==========================================================================
   Alert
   ========================================================================== */

   .alert {
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    border: 1px solid transparent;
}

/* Warning Alert (Yellow) */
.alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #FFE169;
}

/* Danger Alert (Red) */
.alert-danger {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #FF8B9A;
}

/* Success Alert (Green) */
.alert-success {
    background: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.4);
    color: #75F0A5;
}

/* Info Alert (Blue) */
.alert-info {
    background: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.4);
    color: #8BE8FF;
}

/* Alert Icons */
.alert i {
    margin-right: 0.5rem;
    opacity: 0.9;
}

/* Alert Links */
.alert a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.9;
}

.alert a:hover {
    opacity: 1;
}


/* Toast Styling */
.toast {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    z-index: 99999 !important; /* Ensure toasts appear above everything */
}

/* Position fixed container for toasts */
.position-fixed {
    z-index: 99999 !important; /* Match toast z-index */
}

.toast-container {
    z-index: 99999 !important; /* Match toast z-index */
}

/* Rest of toast styles remain the same */
.toast .toast-header {
    border-bottom: 1px solid var(--border-color);
    z-index: 99999 !important;
}

.toast .toast-body {
    background-color: var(--card-bg);
    color: var(--text-color);
    z-index: 99999 !important;
}

/* Add a new stacking context for the main content */
.container.mt-5 {
    position: relative;
    z-index: 1;
}

/* Ensure modals appear below toasts but above other content */
.modal {
    z-index: 99990 !important;
}

.modal-backdrop {
    z-index: 99989 !important;
}


/* ==========================================================================
   Basic Animations
   ========================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.25);
    }
    50% {
        box-shadow: 0 -4px 32px rgba(125, 25, 255, 0.35);
    }
    100% {
        box-shadow: 0 -4px 24px rgba(125, 25, 255, 0.25);
    }
}


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

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}



@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Add shimmer animation for premium button */
@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* ==========================================================================
   Basic Media Queries
   ========================================================================== */

/* Desktop (> 768px) - Default styles remain as is */

/* Responsive adjustments */
@media (max-width: 1400px) {
    .pricing-container {
        max-width: 1000px;
    }
}

/* Tablet view - Premium on top, Ultra and Essential below */
@media (max-width: 1252px) and (min-width: 768px) {
    .pricing-container {
        max-width: 900px;
        padding: 0 2rem;
    }
    
    .pricing-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        margin: 0;
    }
    
    /* Premium card - smaller width on top */
    .pricing-col:nth-child(2) {
        width: 100%;
        max-width: 550px;
        transform: translateY(0);
        margin-bottom: 3rem;
        order: -1;
        padding: 0;
    }
    
    /* Ultra and Essential cards - side by side below */
    .pricing-col:nth-child(1),
    .pricing-col:nth-child(3) {
        width: 300px;
        max-width: 300px;
        margin: 0 0.5rem;
        padding: 0;
    }
    
    .pricing-col:nth-child(2) .pricing-card {
        height: auto;
        margin: 0 auto;
    }

    /* Keep gradient border on premium */
    .pricing-col:nth-child(2) .pricing-card::before {
        opacity: 1;
    }
    
    /* Adjust card widths */
    .pricing-card {
        min-width: unset;
        width: 100%;
    }
}


@media (max-width: 768px) {
    /* Remove any existing navbar styles from this breakpoint */
    /* And add these specific navbar styles */
    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--sidebar-bg);
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        z-index: var(--z-navbar);
    }
    
    .row {
        margin: -0.5rem;
    }
    /* Sidebar & Navigation */
    .col-md-4 {
        padding: 0.5rem;
    }
    
    .sidebar {
    transform: translateX(-100%);
    width: 100%;
    max-width: 100%;
    background-color: var(--sidebar-bg);
    box-shadow: none;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar.show ~ .col .main-content {
        display: none;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
        padding: 1rem;
    }

    /* Add this to your existing CSS */
.no-sidebar .main-content {
    margin-left: 0 !important;
}


    .main-wrapper {
        margin-left: 0;
        padding: 1rem;
    }
    /* Navigation Elements */
    .navbar-brand img {
        height: 32px;
    }

    .server-switch {
        padding: 1rem;
    }

    .server-info h4 {
        font-size: 0.9rem;
    }

    .server-info small {
        font-size: 0.7rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    /* Calendar Mobile Responsiveness */
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }

    /*pricing cards*/
    .row-cols-md-4 {
        row-gap: 2rem;
    }
    
    .pricing-card {
        max-width: 95%;
        min-width: 0;
        margin: 1rem 0;
        
    
    }

    .pricing-amount h2 {
        font-size: 2rem;
    }

    /*buttons*/
    .btn {
        padding: 0.4rem 0.8rem; /* Slightly smaller padding on mobile */
    }
    
    .discord-btn {
        padding: 10px 20px;
        font-size: 1rem;
    }

    .server-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .server-actions .btn {
        width: 100%;
    }

    .modal-dialog {
        margin: 0.75rem;
    }
    
    .selected-channels-display {
        flex-direction: column;
        align-items: stretch;
    }
    
    .channel-badge {
        width: 100%;
    }

    .pricing-col:nth-child(2) .pricing-card::before {
        box-shadow: 0 5px 15px rgba(125, 25, 255, 0.1);
    }

    .pricing-col {
        width: 100%;
        max-width: 100%;
    }
    
    .pricing-row {
        align-items: stretch;
        margin: 0;
    }
    
    /* Reorder cards on mobile */
    .pricing-col:nth-child(1) { order: 2; }
    .pricing-col:nth-child(2) { 
        order: 1; 
        transform: translateY(0);
        margin-bottom: 1rem;
    }
    .pricing-col:nth-child(3) { order: 3; }
    
    .pricing-col:nth-child(2) .pricing-card {
        height: auto;
    }
    
    .pricing-container {
        padding: 0 1rem;
    }
    
    .pricing-card .card-body {
        padding: 2rem;
    }

    /* Button styles for mobile */
    .pricing-card .btn {
        font-size: 0.95rem;
        padding: 1rem 1.5rem;
        margin: 1.25rem 0;
    }

    .pricing-col:nth-child(2) .pricing-card .btn {
        font-size: 1.6rem;
        padding: 1.25rem 2rem;
        margin: 1.5rem 0;
        font-weight: 600;
    }

    /* Increase text sizes for mobile */
    .pricing-card .card-title {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }

    /* Add these navbar-specific styles */
    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--sidebar-bg);
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        z-index: var(--z-navbar);
    }

    .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .navbar-nav .btn-premium {
        width: 100%;
        margin: 0.5rem 0;
        justify-content: center;
    }

    .navbar-nav .dropdown {
        width: 100%;
    }

    .navbar-nav .dropdown-menu {
        width: 100%;
        margin-top: 0.5rem;
        position: static;
    }

    /* Adjust the navbar toggler button */
    .navbar-toggler {
        display: block;
        margin-left: auto;
        margin-right: 1rem;
        order: 2;
    }

    /* Ensure the logo stays visible */
    .navbar-brand {
        order: 1;
    }

    /* Ensure the collapsed menu appears below */
    .navbar .container-fluid {
        flex-wrap: wrap;
    }

    .navbar-collapse {
        order: 3;
        flex-basis: 100%;
    }
    
    .analytics-btn .crown {
        font-size: 1rem;
        top: -7px;
        right: -7px;
        padding: 0.3rem;
    }
    .server-stats {
        padding: 0.5rem;
        margin: 0.75rem 0;
    }
    
    .server-stats .stat-item {
        font-size: 0.8rem;
    }


    
}

@media (max-width: 480px) {
    .file-delete-btn {
        display: flex !important;
    }
    /* Container & Layout */
    .container {
        padding: 0 0.75rem;
    }

    /* Navigation Elements */
    .navbar-brand img {
        height: 28px;
    }

    .navbar-nav .btn-premium {
        padding: 0.25rem 0.75rem;
        font-size: 0.8rem;
        margin: 0.25rem 0.5rem;
    }

    /* Sidebar Elements */
    .sidebar .nav-link {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .sidebar .btn-premium {
        margin: 0.75rem 1rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Cards & Components */
    .card {
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Buttons */
    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 1.4rem;
    }

    .server-actions {
        gap: 0.375rem;
    }

    /* Forms & Inputs */
    .form-control, .form-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* File Management */
    .file-delete-btn {
        display: flex !important;
        width: 18px;
        height: 18px;
    }

    .file-upload-item {
        width: 100%;
    }

    /* Calendar */
    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .fc .fc-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    .analytics-btn .crown {
        font-size: 0.9rem;
        top: -6px;
        right: -6px;
        padding: 0.25rem;
    }

    .analytics-btn {
        margin-bottom: 0.5rem;  /* Add more space between buttons */
    }

    /* Adjust analytics status spacing */
    .analytics-status {
        margin-top: -1.0rem !important;  /* Reduce top margin */
        margin-bottom: 0.7rem !important;  /* Add bottom margin before next button */
        font-size: 0.8rem;  /* Slightly smaller font size on mobile */
    }

    /* Adjust column spacing in mobile view */
    #step3Section .col-md-6 {
        margin-bottom: 1rem;  /* Add space between columns when stacked */
    }

    /* Remove margin from last column */
    #step3Section .col-md-6:last-child {
        margin-bottom: 0;
    }  
}




/* ==========================================================================
   Shop Items Styling
   ========================================================================== */

/* Shop Items Container */
.shop-items-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual Shop Item Card */
.shop-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.shop-item:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 25, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.shop-item .card-title {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.shop-item .card-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Shop Item Details */
.shop-item-details {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.shop-item-details p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.shop-item-details i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

/* Shop Item Modal */
.shop-item-modal .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-item-modal .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.shop-item-modal .text-danger {
    font-weight: bold;
    margin-left: 4px;
}

.shop-item-modal .form-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Section Headers in Modal */
.shop-item-modal .border-bottom {
    border-color: rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

/* Add Item Button */
#addShopItemBtn {
    background: var(--primary-color);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

#addShopItemBtn:hover {
    background: rgba(125, 25, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.2);
}

#addShopItemBtn i {
    font-size: 0.8rem;
}

/* Shop Item Actions */
.shop-item .btn-group {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.shop-item:hover .btn-group {
    opacity: 1;
}

.shop-item .btn-outline-primary,
.shop-item .btn-outline-danger {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.shop-item .btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.shop-item .btn-outline-danger:hover {
    background: #dc3545;
    border-color: #dc3545;
}

/* Empty State */
.shop-items-container .text-center {
    padding: 3rem 1rem;
}

.shop-items-container .fa-store {
    color: var(--primary-color);
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .shop-item .row {
        flex-direction: column;
    }
    
    .shop-item .col-md-4 {
        margin-top: 1rem;
    }
    
    .shop-item-details {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .shop-item-details p {
        margin: 0;
        flex: 1;
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    #addShopItemBtn {
        padding: 0.35rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .shop-item .card-body {
        padding: 0.75rem;
    }
    
    .shop-item-details {
        padding: 0.5rem;
    }
    
    .shop-item-details p {
        font-size: 0.8rem;
        min-width: 120px;
    }
}

/* Purchase Requirements Section */
.shop-item-modal .mb-4 h6.border-bottom {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Required Role Select */
.shop-item-modal #requiredRoleId {
    margin-bottom: 0.25rem;
}

.shop-item-modal .form-label {
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 500;
}

.shop-item-modal .text-muted {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Spacing between sections */
.shop-item-modal .row + .mb-4 {
    margin-top: 1.5rem;
}

/* Shop Item Card Styles */
.shop-item.card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(33, 37, 41, 0.6);
    backdrop-filter: blur(10px);
    transition: transform 0.2s, box-shadow 0.2s;
}

.shop-item.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.shop-item .card-body {
    padding: 1.5rem;
}

.shop-item .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
}

.shop-item .card-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25rem;
}

.shop-item .shop-item-details {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.shop-item .shop-item-details p {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.shop-item .shop-item-details p:last-child {
    margin-bottom: 0;
}

.shop-item .shop-item-details i {
    width: 20px;
    color: #ffc107;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .shop-item .card-body {
        padding: 1rem;
    }

    .shop-item .row {
        flex-direction: column;
    }

    .shop-item .col-md-8,
    .shop-item .col-md-4 {
        width: 100%;
    }

    .shop-item .shop-item-details {
        margin-top: 1rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .shop-item .shop-item-details p {
        margin: 0;
        flex: 1 1 auto;
        min-width: 150px;
    }
}

/* ==========================================================================
   toggle for enable features
   ========================================================================== */


/* Update the toggle styles for hype engine */
.settings-section .form-check.form-switch {
    padding-left: 3.5em;
}

.settings-section .form-check-input[type="checkbox"].form-check-input {
    height: 1.5em;
    width: 3em;
    margin-left: -3.5em;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.85%29'/%3e%3c/svg%3e");
}

.settings-section .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.settings-section .form-check-input:focus {
    border-color: rgba(125, 25, 255, 0.25);
    box-shadow: 0 0 0 0.15rem rgba(125, 25, 255, 0.25);
}

.settings-section .form-check-input:not(:checked):not(:focus) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Update the toggle container styles */
.settings-section .d-flex.align-items-center {
    position: relative;
    width: 100%;
    cursor: pointer;
    z-index: 100;
}

/* Update the toggle label styles */
.settings-section .form-check-label {
    color: var(--text-color);
    cursor: pointer;
}

/* Update toggle styles for card headers */
.card-header .form-check.form-switch {
    padding-left: 0;  /* Remove default padding */
    min-height: auto; /* Remove min-height */
}

.card-header .form-check-input[type="checkbox"].form-check-input {
    margin-left: 0;  /* Remove default margin */
    height: 1.5em;   /* Match the size of other toggles */
    width: 3em;      /* Match the size of other toggles */
    cursor: pointer;
}

/* Ensure header alignment */
.card-header.bg-dark {
    padding: 1rem 1.5rem;  /* Consistent padding */
}



/* Update card header responsive styles */
@media (max-width: 576px) {
    .card-header.bg-dark {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;  /* Reduced from 1rem to 0.5rem */
        border-bottom: none;
    }

    .card-header.bg-dark h3 {
        font-size: 1.25rem;
        width: 100%;
    }

    .card-header .form-check.form-switch {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding-top: 0.25rem;  /* Reduced from 0.5rem to 0.25rem */
        padding-left: 0rem;
    }

    /* Override margin for toggle switches in mobile view */
    .card-header .form-check-input[type="checkbox"].form-check-input,
    #sparkToggle.form-check-input[type="checkbox"].form-check-input,
    #analyticsToggle.form-check-input[type="checkbox"].form-check-input,
    #hypeEngineToggle.form-check-input[type="checkbox"].form-check-input,
    #collabToggle.form-check-input[type="checkbox"].form-check-input {
        margin-left: 0;
    }

    /* Adjust warning badge position on mobile */
    .card-header #permissionWarningBadge {
        display: inline-block;
        margin-top: 0.5rem;
    }
}


/* ==========================================================================
   premium modal
   ========================================================================== */


/* Add these styles for premium modal */
.premium-modal .modal-content {
    background: linear-gradient(145deg, var(--card-bg) 0%, rgba(44, 46, 51, 0.95) 100%);
    border: 1px solid rgba(125, 25, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.premium-modal .modal-header {
    border-bottom: 1px solid rgba(125, 25, 255, 0.2);
    padding: 1.5rem;
}

.premium-modal .modal-body {
    padding: 2rem;
    text-align: center;
}

.premium-modal .modal-footer {
    border-top: 1px solid rgba(125, 25, 255, 0.2);
    padding: 1.5rem;
    justify-content: center;
    gap: 1rem;
}

.premium-modal .premium-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: float 3s ease-in-out infinite;
    display: inline-block;
}

.premium-modal h5 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.premium-modal p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.premium-modal .btn-upgrade {
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%);
    border: none;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(65, 88, 208, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-decoration: none;  /* Add this to ensure links don't lose styling */
}

.premium-modal .btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(65, 88, 208, 0.4);
    background: linear-gradient(135deg, #3449c3 0%, #b845b8 50%, #ffb84d 100%);
    color: #fff;
    text-decoration: none;  /* Add this to ensure links don't lose styling on hover */
}

.premium-modal .btn-upgrade i {
    margin-right: 0.5rem;
}

.premium-modal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 2rem;
    font-weight: 500;
    font-size: 1.1rem;
}

.premium-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Add shimmer animation for premium modal */
@keyframes modalShimmer {
    0% {
        background-position: 200% 50%;
    }
    100% {
        background-position: -200% 50%;
    }
}

/* Responsive styles for premium modal */
@media (max-width: 576px) {
    .premium-modal .modal-body {
        padding: 1.5rem;
    }
    
    .premium-modal .premium-icon {
        font-size: 2.5rem;
    }
    
    .premium-modal h5 {
        font-size: 1.25rem;
    }
    
    .premium-modal p {
        font-size: 1rem;
    }
    
    .premium-modal .modal-footer {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .premium-modal .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   Login Page Styles
   ========================================================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        rgba(26, 27, 30, 0.85), 
        rgba(26, 27, 30, 0.85)
    ), url("/static/images/website_background.4691557fa1d3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 1rem;
    padding-top: 64px;
}

.login-container {
    margin-top: -64px;
    background-color: rgba(37, 38, 43, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-container {
    background-color: var(--card-bg);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.5s ease;
}

.login-container h2 {
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.login-container p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.discord-logo {
    width: 80px;
    height: auto;
    margin-bottom: 2rem;
    animation: float 3s ease-in-out infinite;
}

.discord-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.discord-btn:hover {
    transform: translateY(-2px);
    background-color: #6610f2;
    color: white;
}

.discord-btn:active {
    transform: translateY(0);
}

.discord-btn i {
    font-size: 1.2rem;
}

/* Login animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive styles */
@media (max-width: 480px) {
    .login-container {
        padding: 2rem 1.5rem;
    }

    .login-container h2 {
        font-size: 1.75rem;
    }

    .login-container p {
        font-size: 0.9rem;
        padding: 0;
    }

    .discord-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .discord-logo {
        width: 60px;
        margin-bottom: 1.5rem;
    }
}

body.no-sidebar .sidebar {
    display: none;
}

body.no-sidebar .main-content {
    margin-left: 0;
}

/* Add this to your existing CSS */
.btn-refresh {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem;
    margin: 0 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-refresh:hover {
    color: var(--primary-color);
    transform: rotate(180deg);
}

.btn-refresh.spinning i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Refresh channels section */
.refresh-channels-section {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.refresh-channels-section .btn-outline-primary {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.refresh-channels-section .btn-outline-primary i {
    transition: transform 0.3s ease;
}

.refresh-channels-section .btn-outline-primary.spinning i {
    animation: spin 1s linear infinite;
}

/* Refresh button */
#refreshServerBtn {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

#refreshServerBtn i {
    transition: transform 0.3s ease;
}

#refreshServerBtn.spinning i {
    animation: spin 1s linear infinite;
}


/* Help Center Modal Styles */
.help-section {
    padding: 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text content */
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.help-section:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.help-section h6 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.help-section h6 i {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.9;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

.help-section p {
    margin-bottom: 1.25rem;
    flex-grow: 1;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    width: 100%;
}

.help-section .btn {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.help-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.2);
}

.help-section .badge {
    font-size: 0.7rem;
    padding: 0.35em 0.65em;
    font-weight: 500;
    background: var(--primary-color);
    margin-top: 0.5rem; /* Add space between title and badge */
}

/* Icon hover animation */
.help-section:hover h6 i {
    transform: translateY(-2px) scale(1.1);
}

/* Help Modal Container */
#helpModal .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, var(--card-bg) 0%, rgba(44, 46, 51, 0.95) 100%);
    backdrop-filter: blur(10px);
}

#helpModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

#helpModal .modal-body {
    padding: 1.5rem;
}

#helpModal .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
}

#helpModal .modal-title i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

#helpModal .btn-close {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#helpModal .btn-close:hover {
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    #helpModal .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }
    
    .help-section {
        margin-bottom: 1rem;
        padding: 1.25rem;
    }
    
    .help-section h6 {
        font-size: 1rem;
    }
    
    .help-section p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .help-section .btn {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
    
    #helpModal .modal-header {
        padding: 1.25rem;
    }
    
    #helpModal .modal-body {
        padding: 1.25rem;
    }
    
    #helpModal .row {
        margin: -0.5rem;
    }
    
    #helpModal .col-md-4 {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    #helpModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .help-section {
        padding: 1rem;
    }
    
    .help-section h6 {
        font-size: 0.95rem;
    }
    
    .help-section h6 i {
        font-size: 1.1rem;
    }
    
    .help-section p {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }
    
    .help-section .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .help-section .badge {
        font-size: 0.65rem;
    }
    
    
    #helpModal .modal-title {
        font-size: 1.1rem;
    }
    
    #helpModal .modal-title i {
        font-size: 1.1rem;
    }
    
    #helpModal .modal-header {
        padding: 1rem;
    }
    
    #helpModal .modal-body {
        padding: 1rem;
    }
}

/* Help Section Hover Effects */
.help-section:hover h6 i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.help-section .btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Animation for modal opening */
#helpModal.fade .modal-dialog {
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease;
}

#helpModal.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* Crown emoji styling for premium features */
.crown {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
    animation: float 3s ease-in-out infinite;
    margin-right: 0rem !important;
}

@media (max-width: 480px) {
    /* ... other mobile styles ... */
    .crown {
        font-size: 0.9rem;
        top: -8px !important;
        right: -20px !important;
    }
}

/* Ensure sidebar upgrade button maintains styling */
.sidebar .btn-upgrade {
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: left;
    padding: 0.5rem 1rem;
    margin: 0;
    width: 100%;
}

.sidebar .btn-upgrade:hover {
    background: linear-gradient(135deg, #3449c3 0%, #b845b8 50%, #ffb84d 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(65, 88, 208, 0.4);
}

.sidebar .p-3 {
    padding: 0 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* Ensure modal upgrade button maintains styling */
.modal-footer .btn-upgrade {
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%) !important;
    color: #fff !important;
    border: none !important;
}

.modal-footer .btn-upgrade:hover {
    background: linear-gradient(135deg, #3449c3 0%, #b845b8 50%, #ffb84d 100%) !important;
}

/* Update card header responsive styles */
@media (max-width: 576px) {
    .card-header.bg-dark {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
    }

    .card-header.bg-dark h3 {
        font-size: 1.25rem;
        width: 100%;
        margin-bottom: 0.5rem;  /* Add space between title and button */
    }

    /* Handle both direct button and button in container */
    .card-header .d-flex.align-items-center.gap-3,
    .card-header #refreshServerBtn {
        width: 100%;
        justify-content: flex-start;  /* Left align the button container */
    }

    .card-header #refreshServerBtn {
        width: auto;  /* Let button take natural width */
        padding: 0.5rem 0.75rem;
        margin-left: 0;  /* Remove any left margin */
        margin-right: 1rem;  /* Add right margin */
    }

    /* Ensure consistent button alignment regardless of container */
    .card-header.bg-dark > #refreshServerBtn,
    .card-header.bg-dark > div > #refreshServerBtn {
        align-self: flex-start;
        margin-right: 1rem;  /* Add right margin */
    }
}

/* Analytics Mobile Styles */
@media (max-width: 576px) {
    /* Open Analytics Dashboard button */
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.25rem;
    }

    /* Analytics action buttons */
    .analytics-btn {
        font-size: 0.9rem;
        padding: 0.625rem 1rem;
    }

    .analytics-btn .content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
    }

    .analytics-btn i {
        font-size: 0.9rem;
    }

    /* Adjust crown position and size */
    .analytics-btn .crown {
        font-size: 0.9rem;
        position: absolute;
        top: -6px;
        right: -6px;
    }

    /* Add spacing between buttons in mobile view */
    .col-md-6:not(:last-child) {
        margin-bottom: 1rem;
    }

    /* Adjust status text size */
    .analytics-status,
    .text-muted {
        font-size: 0.8rem;
    }
}

/* Even smaller screens */
@media (max-width: 360px) {
    .btn-lg,
    .analytics-btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    .analytics-btn .crown {
        font-size: 0.8rem;
        top: -5px;
        right: -5px;
    }
}

/* ==========================================================================
   Migration Notice Styling
   ========================================================================== */

.alert.alert-info {
    background: rgba(13, 202, 240, 0.1);
    border: 1px solid rgba(13, 202, 240, 0.2);
    border-radius: 12px;
}

.alert.alert-info .fa-info-circle {
    color: #0dcaf0;
    font-size: 1.2rem;
}

.alert.alert-info h6 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alert.alert-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.alert.alert-info .btn-outline-primary {
    background: transparent;
    border: 1px solid rgba(13, 202, 240, 0.5);
    color: #0dcaf0;
    transition: all 0.3s ease;
}

.alert.alert-info .btn-outline-primary:hover {
    background: rgba(13, 202, 240, 0.1);
    border-color: #0dcaf0;
    transform: translateY(-2px);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .alert.alert-info {
        padding: 1rem;
    }

    .alert.alert-info .d-flex {
        gap: 0.75rem;
    }

    .alert.alert-info h6 {
        font-size: 1rem;
    }

    .alert.alert-info p {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .alert.alert-info .btn-outline-primary {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .alert.alert-info {
        padding: 0.875rem;
    }

    .alert.alert-info .d-flex {
        gap: 0.5rem;
    }

    .alert.alert-info .fa-info-circle {
        font-size: 1.1rem;
    }

    .alert.alert-info h6 {
        font-size: 0.95rem;
    }

    .alert.alert-info p {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    .alert.alert-info .btn-outline-primary {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Collab Page Introduction Styles */
.steps-container {
    max-width: 800px;
    margin: 0 auto;
}

.step-item {
    position: relative;
    padding: 2rem 1.5rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
}

.step-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(125, 25, 255, 0.15);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #9541FF);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(125, 25, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.step-item h5 {
    color: var(--text-color);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.step-item p {
    color: var(--text-muted);
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Intro section icon styling */
.card-body .fa-handshake {
    background: linear-gradient(135deg, var(--primary-color), #9541FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(125, 25, 255, 0.3));
}

/* Start Discovering button styling */
.btn-primary.btn-lg {
    background: linear-gradient(135deg, var(--primary-color), #9541FF);
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(125, 25, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-primary.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(125, 25, 255, 0.4);
    background: linear-gradient(135deg, #9541FF, var(--primary-color));
}

/* Animation for the compass icon */
.fa-compass {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .step-item {
        padding: 1.75rem 1.25rem 1.25rem;
        margin-top: 1.75rem;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        top: -17px;
    }

    .step-item h5 {
        font-size: 1rem;
    }

    .step-item p {
        font-size: 0.9rem;
    }

    .btn-primary.btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: 0.95rem;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .config-card .dropdown {
        position: static;  /* Allow dropdown to position relative to card */
    }

    .config-card .dropdown-menu {
        width: calc(100% - 2rem);  /* Full width minus padding */
        margin: 0.5rem 1rem;
        position: absolute;
        left: 0;
        right: 0;
    }

    .config-card .btn-outline-secondary.btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .config-card .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .config-card .dropdown {
        position: static;  /* Allow dropdown to position relative to card */
    }

    .config-card .dropdown-menu {
        width: calc(100% - 2rem);  /* Full width minus padding */
        margin: 0.5rem 1rem;
        position: absolute;
        left: 0;
        right: 0;
    }

    .config-card .btn-outline-secondary.btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .config-card .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Tablet and mobile layout for config cards */
@media (max-width: 576px) {
    .config-card.mb-3 {
        padding: 1rem;
        margin-bottom: 1rem !important;
    }

    .config-card .d-flex {
        flex-direction: column;
    }

    .config-card .d-flex.align-items-start {
        align-items: center !important;
    }

    .config-card .server-icon {
        margin-bottom: 1rem;
        margin-right: 0 !important;
        align-self: center;
    }

    .config-card .server-icon img,
    .config-card .server-icon .default-icon {
        width: 48px;
        height: 48px;
    }

    .config-card .flex-grow-1 .d-flex {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }

    .config-card h5.mb-2 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem !important;
    }

    .config-card .text-muted.mb-2 {
        margin-bottom: 0.75rem !important;
    }

    .config-card .badge {
        margin-bottom: 1rem;
    }

    .config-card .dropdown {
        width: 100%;
    }

    .config-card .dropdown button {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    /* Browse Servers button */
    .btn.btn-primary {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        width: 100%;  /* Make button full width */
    }

    .btn.btn-primary .fa-search {
        font-size: 0.875rem;
    }

    .config-card .dropdown {
        position: static;  /* Allow dropdown to position relative to card */
    }
}

/* Tablet and mobile layout for config cards */
@media (max-width: 576px) {
    /* Center visibility settings header and toggle */
    .card-header.bg-dark.text-white.d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    .card-header h5.mb-0 {
        margin-bottom: 0.5rem !important;
        text-align: center;
    }

    .form-check.form-switch.mb-0 {
        display: flex;
        width: 100%;
    }
}

/* Browse Servers button loading state */
.btn.btn-primary .loading-spinner {
    display: inline-block;
    margin-left: 0.5rem;
}

.btn.btn-primary.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn.btn-primary.loading span:not(.loading-spinner) {
    opacity: 0.7;
}

.btn.btn-primary.loading .loading-spinner {
    display: inline-block !important;
}

.btn.btn-primary .fa-circle-notch {
    font-size: 0.875rem;
}

/* ==========================================================================
   Server Listing Cards
   ========================================================================== */

/* Server Card Banner/Header */
.server-card .card-banner {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.server-card .card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.server-card:hover .card-banner img {
    transform: scale(1.05);
}

/* Update existing server-card styles */
.server-card {
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* Remove the default card-img-top styles for server cards */
.server-card .card-img-top {
    display: none;
}

/* Add these styles to the Server Listing Cards section */

/* Notification Tab Styles */
.notification-tab {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.5rem;
    border-top-right-radius: 16px; /* Match server card border radius */
    border-bottom-left-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 20;
    width: 40%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Notification Tab Variants */
.notification-tab.scheduled {
    background: var(--primary-color);
    color: white;
}

.notification-tab.ongoing {
    background: #28a745;
    color: white;
}

.notification-tab.recollab {
    background: #17a2b8;
    color: white;
}

.notification-tab.likes {
    background: #ff6b6b;
    color: white;
}

.notification-tab.matched {
    background: #51cf66;
    color: white;
}

.notification-tab.collabed {
    background: #6c757d;
    color: white;
}

/* Remove hover effect since it's now flush with the card */
.notification-tab:hover {
    transform: none;
    box-shadow: none;
}

/* Ensure server card handles overflow properly */
.server-card {
    position: relative;
    overflow: visible;
}

.server-card .card-banner {
    position: relative;
    z-index: 2; /* Above the card background */
    overflow: hidden;
}

.server-card .card-body {
    position: relative;
    z-index: 2; /* Above the card background */
    overflow: hidden;
}

/* Add margin to the server info header */
.server-card .d-flex.align-items-center {
    margin-top: 0.75rem; /* Add space above the server name */
}

/* Keep the server icon and name aligned */
.server-card .d-flex.align-items-center img.rounded-circle {
    margin-right: 0.75rem;
}

.server-card .card-title {
    margin: 0;
    line-height: 1.2;
}

/* Only add margin to server info when notification tab exists */
.notification-tab + .card-body .d-flex.align-items-center {
    margin-top: 0.75rem; /* Add space above the server name only when notification tab exists */
}

/* Keep other alignments consistent */
.server-card .d-flex.align-items-center img.rounded-circle {
    margin-right: 0.75rem;
}

.server-card .card-title {
    margin: 0;
    line-height: 1.2;
}

/* Calendar Styles */
.fc {
    background: #2a2d3a;
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Header and title styles */
.fc .fc-toolbar-title {
    color: #ffffff;
    font-size: 1.2rem;
}

/* Calendar grid styles */
.fc-theme-standard td, .fc-theme-standard th {
    border-color: rgba(255, 255, 255, 0.1); /* Subtle grid lines */
}

/* Day cell styles */
.fc .fc-daygrid-day {
    background: #353849; /* Slightly lighter than base */
    transition: background-color 0.2s;
}

/* Today's date */
.fc .fc-day-today {
    background-color: rgba(66, 133, 244, 0.15) !important; /* Subtle blue for today */
}


/* Make Mondays visually distinct */
.fc .fc-daygrid-day.fc-day-monday {
    border-left: 2px solid var(--primary-color);
}

/* Style available Mondays */
.fc .fc-daygrid-day.available {
    background-color: rgba(52, 199, 89, 0.15); /* Softer green */
    cursor: pointer;
}

.fc .fc-daygrid-day.available:hover {
    background-color: rgba(52, 199, 89, 0.25); /* Brighter on hover */
}


/* Style unavailable dates */
.fc .fc-daygrid-day.unavailable {
    background-color: rgba(255, 69, 58, 0.1); /* Softer red */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Style selected week */
.fc .fc-daygrid-day.selected {
    background-color: rgba(94, 92, 230, 0.25); /* Purple highlight */
    border: 2px solid var(--primary-color);
}
/* Day numbers */
.fc .fc-daygrid-day-number {
    color: #e1e1e6;
    padding: 8px;
}

/* Header cells (day names) */
.fc .fc-col-header-cell {
    background: #2a2d3a;
    padding: 8px 0;
}

.fc .fc-col-header-cell-cushion {
    color: #ffffff;
    font-weight: 500;
}

/* Calendar buttons */
.fc .fc-button-primary {
    background-color: #4a4d5e !important;
    border-color: #4a4d5e !important;
    color: #ffffff;
}

.fc .fc-button-primary:hover {
    background-color: #5e5ce6 !important;
    border-color: #5e5ce6 !important;
}

.fc .fc-button-primary:disabled {
    background-color: #3a3d4e !important;
    border-color: #3a3d4e !important;
    opacity: 0.7;
}

/* Add a legend container */
.calendar-legend-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: #2a2d3a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Legend color boxes */
.calendar-legend {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.calendar-legend.available {
    background-color: rgba(52, 199, 89, 0.15);
    border: 1px solid rgba(52, 199, 89, 0.5);
}

.calendar-legend.unavailable {
    background-color: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.5);
}

.calendar-legend.selected {
    background-color: rgba(94, 92, 230, 0.25);
    border: 1px solid #5e5ce6;
}

/* Calendar Loading Styles */
.calendar-container {
    position: relative;
    min-height: 400px; /* Ensure container has height while loading */
}

.calendar-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
    border-radius: 8px;
}

/* Customize the spinner */
.calendar-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.25em;
    color: var(--primary-color) !important;
}

/* Update Config Card Mobile Styles */
@media (max-width: 768px) {
    .config-card {
        padding: 1.5rem;  /* Increase padding */
    }

    .config-card .d-flex.align-items-start {
        gap: 0rem;  /* Increase gap between icon and content */
    }

    .config-card .server-icon {
        flex-shrink: 0;  /* Prevent icon from shrinking */
    }

    .config-card .server-icon img,
    .config-card .default-icon {
        width: 48px;  /* Slightly larger icons */
        height: 48px;
    }

    .config-card h5.mb-2 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem !important;
    }

    .config-card .text-muted.mb-2 {
        font-size: 0.9rem;
        margin-bottom: 0.75rem !important;
    }

    /* Improve dropdown button spacing */
    .config-card .dropdown {
        margin-left: auto;  /* Push to the right */
        margin-top: -0.5rem;  /* Move up slightly */
    }

    .config-card .dropdown-toggle {
        padding: 0.4rem 0.8rem;  /* Slightly larger click target */
        font-size: 0.85rem;
    }

    .config-card .dropdown-menu {
        min-width: 160px;  /* Ensure menu is wide enough */
        margin-top: 0.5rem;
    }

    .config-card .dropdown-item {
        padding: 0.6rem 1rem;  /* Larger click target */
        font-size: 0.9rem;
    }

    /* Add space between badge and dropdown */
    .config-card .badge {
        margin-right: 1rem;
    }

    /* Improve spacing in the flex container */
    .config-card .flex-grow-1 {
        min-width: 0;  /* Allow text truncation */
    }

    .config-card .d-flex.justify-content-between {
        gap: 1rem;  /* Add space between elements */
    }
}

/* Additional adjustments for very small screens */
@media (max-width: 480px) {
    .config-card {
        padding: 1.25rem;
    }

    .config-card .d-flex.align-items-start {
        gap: 0em;
    }

    .config-card .server-icon img,
    .config-card .default-icon {
        width: 40px;
        height: 40px;
    }

    .config-card h5.mb-2 {
        font-size: 1rem;
    }

    .config-card .text-muted.mb-2 {
        font-size: 0.85rem;
    }

    .config-card .dropdown-toggle {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
    }

    /* Stack badge and dropdown on very small screens */
    .config-card .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .config-card .dropdown {
        margin-top: 0;
        width: 100%;
    }

    .config-card .dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    .config-card .dropdown-menu {
        width: 100%;
    }
}

/* Server Card Updated Styles */
.server-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Banner Section */
.card-banner {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.server-card:hover .card-banner img {
    transform: scale(1.05);
}

/* Online Members Overlay */

/* Tags Section */
.tags-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    margin-right: 6px;
    margin-bottom: 6px;
}

.tag.web3 {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

.tag.web2 {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.tag.more {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

/* Server Stats */
.server-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Rewards Section */
.rewards-section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.premium-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    background: linear-gradient(45deg, #f6d365 0%, #fda085 100%);
    color: #000;
    font-weight: 600;
}

.premium-badge .fa-crown {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Quests Disabled Notice */
.quests-disabled {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.disabled-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    background: rgba(255, 59, 48, 0.1);
    color: rgba(255, 59, 48, 0.8);
    border: 1px solid rgba(255, 59, 48, 0.2);
}

.disabled-notice i {
    font-size: 0.8rem;
}

/* Server Header Container */
.server-header-container {
    display: flex;
    align-items: flex-start;  /* Change from center to flex-start to handle wrapped text better */
    gap: 12px;
    width: 100%;  /* Ensure container takes full width */
}

.server-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.server-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;  /* Allow flex item to shrink below content size */
    flex: 1;  /* Take up remaining space */
}

.server-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    word-wrap: break-word;  /* Allow long words to break */
    overflow-wrap: break-word;  /* Modern version of word-wrap */
    max-width: 100%;  /* Ensure text stays within container */
    line-height: 1.3;  /* Improve readability of wrapped text */
}

.online-members-count {
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.online-members-count .fa-circle {
    font-size: 0.6rem;
}

/* Analytics Required Modal */
#analyticsRequiredModal .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#analyticsRequiredModal .modal-header {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

#analyticsRequiredModal .modal-title {
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#analyticsRequiredModal .modal-title i {
    color: var(--primary-color);
}

#analyticsRequiredModal .modal-body {
    color: var(--text-color);
    padding: 1.5rem;
}

#analyticsRequiredModal .modal-body p {
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

#analyticsRequiredModal .modal-footer {
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
}

#analyticsRequiredModal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

#analyticsRequiredModal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

#analyticsRequiredModal .btn-primary {
    background: var(--primary-color);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#analyticsRequiredModal .btn-primary:hover {
    background: #8f2dff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.25);
}

#analyticsRequiredModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Disable Analytics Modal */
#disableAnalyticsModal .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#disableAnalyticsModal .modal-header {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

#disableAnalyticsModal .modal-title {
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#disableAnalyticsModal .modal-title i {
    color: #dc3545; /* Bootstrap danger color */
}

#disableAnalyticsModal .modal-body {
    color: var(--text-color);
    padding: 1.5rem;
}

#disableAnalyticsModal .modal-body p {
    color: var(--text-muted);
    line-height: 1.5;
}

#disableAnalyticsModal .modal-footer {
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
}

#disableAnalyticsModal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

#disableAnalyticsModal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

#disableAnalyticsModal .btn-danger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#disableAnalyticsModal .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}

#disableAnalyticsModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark Theme Modal Styles */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal .modal-header {
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.modal .modal-title {
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal .modal-body {
    color: var(--text-color);
    padding: 1.5rem;
}

.modal .modal-body p {
    color: var(--text-muted);
    line-height: 1.5;
}

.modal .modal-footer {
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.1);
    padding: 2rem 1.5rem;
}

.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modal Button Styles */
.modal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

.modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Specific Modal Customizations */
#analyticsRequiredModal .modal-title i {
    color: var(--primary-color);
}

#analyticsRequiredModal .btn-primary {
    background: var(--primary-color);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#analyticsRequiredModal .btn-primary:hover {
    background: #8f2dff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.25);
}

#disableAnalyticsModal .modal-title i {
    color: #dc3545;
}

#disableAnalyticsModal .btn-danger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#disableAnalyticsModal .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}

/* Account Tier Badge Styles */
.bg-gradient-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
}

.dropdown-item-text {
    padding: 0.5rem 1rem;
}

.dropdown-item-text small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-item-text .badge {
    font-size: 0.8rem;
    padding: 0.35em 0.65em;
    font-weight: 500;
}

/* Account Tier Badge Styles */
.bg-secondary-plus {
    background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
    color: white;
}

/* Premium Button States */
.btn-premium.disabled {
    opacity: 0.8;
    cursor: default;
    background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%);
    border: none;
    color: white;
    pointer-events: none;
}

.btn-premium.disabled:hover {
    transform: none;
    box-shadow: none;
}

@media (max-width: 576px) {
    .sidebar .btn-upgrade {
        font-size: 0.875rem;
        padding: 0.4rem 0.875rem;
    }
}

/* Update the navbar-collapse styles for mobile */
@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--sidebar-bg);
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        z-index: var(--z-navbar);
    }

    .navbar-collapse .navbar-nav {
        gap: 0.5rem;
    }

    .navbar-collapse .nav-item {
        width: 100%;
        text-align: center;
    }

    .navbar-collapse .nav-link {
        padding: 0.5rem 1rem;
    }

    /* Ensure dropdown menus appear properly on mobile */
    .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        text-align: center;
    }
}

/* Dropdown Menu Styling */
.nav-item.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Profile and Logout Layout */
.nav-item.dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
}

/* User Avatar Styling */
.user-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

/* Dropdown Menu Container */
.dropdown-menu {
    min-width: 220px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    animation: dropdownFade 0.2s ease;
}

/* Dropdown Animation */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Items */
.dropdown-item {
    padding: 0.75rem 1rem;
    color: var(--text-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

.dropdown-item i {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Dropdown Divider */
.dropdown-divider {
    margin: 0.5rem 0;
    border-color: var(--border-color);
}

/* Server Info in Dropdown */
.dropdown-item-text {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.dropdown-item-text small {
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .nav-item.dropdown {
        width: 100%;
        justify-content: left;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
        box-shadow: none;
    }

    .dropdown-item {
        justify-content: left;
    }
}

/* Logout Link Styling */
.nav-item.dropdown .nav-link.me-3 {
    color: var(--text-color);
    opacity: 0.8;
    transition: opacity 0.2s ease;
    padding: 0.5rem 0;
}

.nav-item.dropdown .nav-link.me-3:hover {
    opacity: 1;
    color: var(--secondary-color);
}

/* Profile and Logout Container */
.nav-item.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem !important; /* Reduce gap between items */
}

/* Profile Picture Link */
.nav-item.dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 0.25rem; /* Small right margin */
}

/* User Avatar */
.user-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

/* Logout Link */
.nav-item.dropdown .nav-link {
    padding: 0.25rem 0.5rem;
    color: var(--text-color);
    opacity: 0.8;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.nav-item.dropdown .nav-link:hover {
    opacity: 1;
    color: var(--secondary-color);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .nav-item.dropdown {
        justify-content: center;
        gap: 0.75rem !important; /* Slightly larger gap on mobile for better touch targets */
    }
}

/* Add these styles for large screen width constraints */

/* Container max-widths for large screens */
@media (min-width: 1400px) {
    /* Hero section */
    .hero-section {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Stats section */
    .stats-section {
        width: 100%;
    }
    
    .stats-section-inner {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Features section */
    .features-section {
        width: 100%;
    }
    
    .features-section-inner {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Interactive features section */
    .interactive-features {
        width: 100%;
    }
    
    .interactive-features-inner {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Blog section */
    .blog-section {
        width: 100%;
    }
    
    .blog-section-inner {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Press section */
    .press-section {
        width: 100%;
    }
    
    .press-section-inner {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Footer section */
    .footer-section {
        width: 100%;
    }
    
    .footer-content {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    /* Navbar container */
    .navbar > .container-fluid {
        max-width: 1400px;
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Add a larger breakpoint for extra wide screens */
@media (min-width: 1600px) {
    .hero-content,
    .stats-section-inner,
    .features-section-inner,
    .interactive-features-inner,
    .blog-section-inner,
    .press-section-inner,
    .footer-content,
    .navbar > .container-fluid {
        max-width: 1600px;
    }
}

/* Override for dashboard pages: remove max-width restriction on navbar container when sidebar is shown */
@media (min-width: 1400px) {
    body:has(.sidebar) .navbar > .container-fluid {
        max-width: none !important;
    }
}

/* Dropdown Navigation Styles */
.nav-item.dropdown {
    position: relative;
}

/* Style the dropdown toggle and arrow */
.nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: #fff !important; /* Match the nav-link color */
}

/* Custom arrow styling */
.nav-link.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: -0.25rem; /* Reduced from 0.5rem to 0.25rem */
    border: none;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

/* Active/Hover state for dropdown toggle */
.nav-item.dropdown:hover .nav-link.dropdown-toggle,
.nav-item.dropdown.show .nav-link.dropdown-toggle {
    color: #fff !important; /* Match the nav-link hover color */
}

/* Rotate arrow when dropdown is shown */
.nav-item.dropdown.show .nav-link.dropdown-toggle::after {
    transform: rotate(-135deg) ;
}

/* Dropdown menu styling */
.dropdown-menu {
    display: none; /* Hide by default */
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Show dropdown menu only when .show class is present */
.nav-item.dropdown.show .dropdown-menu {
    display: block;
    animation: dropdownFade 0.2s ease;
}

/* Dropdown animation */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style dropdown items */
.dropdown-item {
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--secondary-color);
}

/* Adjust navbar spacing */

/* Make sure dropdowns appear above other content */
.navbar {
    z-index: 1030;
}

.dropdown-menu {
    z-index: 1031;
}

/* Navbar Layout Adjustments */
.navbar-nav {
    gap: 0rem; /* Reduced from 0.5rem */
}

/* Left side nav items */
.navbar-nav.me-auto {
    margin-left: 0.5rem; /* Reduced from 1rem */
    display: flex;
    gap: 0; /* Remove gap between nav items */
}

/* Individual nav items in the left side */
.navbar-nav.me-auto .nav-item {
    margin-right: 0.25rem; /* Add small spacing between items */
}


/* Ensure proper vertical alignment */
.navbar-nav.align-items-center {
    height: 100%;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .navbar-nav.me-auto,
    .navbar-nav.ms-auto {
        margin: 1rem 0;
        width: 100%;
        text-align: center;
    }
    
    .navbar-nav .nav-item {
        width: 100%;
    }
    
    .navbar-nav.ms-auto {
        border-top: 1px solid var(--border-color);
        padding-top: 1rem;
    }
}

/* Add this to your existing CSS */
.navbar-nav .nav-item .nav-link {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-item .nav-link:hover {
    color: var(--primary-color);
}

/* Style for dropdown toggle to match other nav links */
.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 400;
}

.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle:hover {
    color: var(--primary-color);
}

/* Navbar Invite Bot Button */
.navbar-nav .nav-item .btn.btn-primary {
    padding: 0.375rem 0.75rem;  /* Smaller padding */
    height: 32px;  /* Match height with other nav items */
    font-size: 0.875rem;  /* Smaller font size */
    font-weight: 500;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #7D19FF 0%, #F4CA81 100%);  /* blue purple background */
    color: var(--text-color);
    transition: all 0.2s ease;
}

.navbar-nav .nav-item .btn.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* Features Dropdown Styling */
.features-menu {
    min-width: 300px;
    padding: 0.5rem;
}

.nav-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    margin-bottom: 0.25rem;
}

.nav-feature-item:hover, 
.nav-feature-item:active,
.nav-feature-item:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(125, 25, 255, 0.3);
}

.nav-feature-item:hover .nav-feature-icon,
.nav-feature-item:active .nav-feature-icon,
.nav-feature-item:focus .nav-feature-icon {
    background: rgba(125, 25, 255, 0.2);
}

.nav-feature-item:hover .nav-feature-title,
.nav-feature-item:active .nav-feature-title,
.nav-feature-item:focus .nav-feature-title {
    color: #fff;
}

.nav-feature-item:hover .nav-feature-description,
.nav-feature-item:active .nav-feature-description,
.nav-feature-item:focus .nav-feature-description {
    color: rgba(255, 255, 255, 0.9);
}

.nav-feature-item:hover .nav-feature-icon i,
.nav-feature-item:active .nav-feature-icon i,
.nav-feature-item:focus .nav-feature-icon i {
    color: #fff;
}

.nav-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(125, 25, 255, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.nav-feature-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-feature-title {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.85rem;
}

.nav-feature-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.nav-feature-item:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Resources Dropdown Styling */
.resources-menu {
    min-width: 600px;
    padding: 1rem;
}

.resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.resources-column {
    padding: 0;
}

.resources-header {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 1rem 0.5rem;
    margin-bottom: 0.5rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .resources-menu {
        min-width: 100%;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .resources-column:not(:last-child) {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}