/* Custom CSS to account for WordPress admin bar */
    body.logged-in .admin-bar-offset {
    /* This class will be added by WordPress and creates a margin-top.
    We'll use it to ensure our main content starts below the admin bar. */
    margin-top: 32px !important; /* Adjust if your admin bar height is different */
    }

        /* Ensure the navbar is always at the very top */
        .admin-bar .fixed.top-0 {
            top: 32px !important; /* Adjust if your admin bar height is different */
        }

        /* Ensure the aside is sticky right below the navbar */
        .admin-bar .sticky-aside {
            top: calc(32px + 4rem) !important; /* Admin bar height + navbar height (h-16 = 4rem) */
        }

        /* If the admin bar class is not reliable, you might need to target #wpadminbar directly */
        #wpadminbar {
            z-index: 99999 !important; /* Ensure admin bar is on top of everything */
        }
     
        .font-montserrat {
            font-family: "Montserrat", sans-serif;
        }



   .radical-shadow {
    background: radial-gradient(#ffffff75 0, #060019 65%) 0 -150px;
}
#signin-btn {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black);
    background-color: #71c84c;
    transition: all .3s;
    position: relative;
    top: 0;
    box-shadow: 0 5px #3b8d11;
}
#signin-btn:hover {
  background-color: #adfb88;
  top: -4px;
  box-shadow: 0 9px #3b8d11, 0 -1px 8px #61e31f99;
  position: relative; /* Required for top to work */
  transition: all 0.3s ease; /* Optional: smooth animation */
}

/* carousel */

                @keyframes zoom {
                    0% {
                        transform: scale(1);
                    }

                    50% {
                        transform: scale(1.2);
                    }

                    100% {
                        transform: scale(1);
                    }
                }

                /* Add left-right-left animation for overlay */
                @keyframes banner-overlay-move {
                    0% {
                        transform: translateX(0);
                    }

                    20% {
                        transform: translateX(4%);
                    }

                    50% {
                        transform: translateX(0);
                    }

                    80% {
                        transform: translateX(-4%);
                    }

                    100% {
                        transform: translateX(0);
                    }
                }

                /* Refer page image */

@keyframes bounceSoft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7.97762px);
  }
}

.bounce-soft {
  animation: bounceSoft 1.5s ease-in-out infinite;
}


/* --- Add this to your main style.css file --- */

/* Hides scrollbar for Webkit-based browsers (Chrome, Safari, Edge) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hides scrollbar for IE, Edge, and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Sidebar Toggle Styles --- */

/* 1. Smooth transitions for a professional feel */
#main-sidebar {
    /* transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out; */
     transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#main-content {
    transition: margin-left 0.3s ease-in-out;
}

/* 2. Default (Expanded) State */
#main-sidebar {
    width: 220px;
    min-width: 220px;
}

.sidebar-label {
    opacity: 1;
    transition: opacity 0.2s ease, width 0.2s ease;
    white-space: nowrap; /* Prevent text from wrapping */
}

/* 3. When the sidebar has the 'collapsed' class... */
#main-sidebar.collapsed {
    width: 70px;
    min-width: 70px;
}

/* 4. This is the key: Hide the labels when collapsed */
#main-sidebar.collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 5. Center the icons when collapsed */
#main-sidebar.collapsed .sidebar-item {
     display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 0.5rem;  
}

/* 6. Ensure icons are properly sized and centered */
#main-sidebar.collapsed .sidebar-item .flex.items-center {
    justify-content: center;
    width: 100%;
}

/* 7. Hide any additional text or elements in collapsed state */
#main-sidebar.collapsed .sidebar-item > *:not(.flex.items-center) {
    display: none;
}

/* --- Adjust main content margin --- */
#main-content {
    margin-left: 220px; /* Default margin to match sidebar width */
}
#main-sidebar.collapsed + #main-content {
    margin-left: 70px; /* Margin when sidebar is collapsed */
}

/* 9. Ensure dropdown chevrons are hidden in collapsed state */
#main-sidebar.collapsed .sidebar-item svg:not(:first-child) {
    display: none;
}

/* 10. Make sure the flex container takes full width in collapsed state */
#main-sidebar.collapsed .sidebar-item > .flex {
    justify-content: center !important;
    margin: 0 auto;
}

/* FIX FOR ALL ICON SIZING - COMPREHENSIVE */
#main-sidebar.collapsed .sidebar-item img,
#main-sidebar.collapsed .sidebar-item svg,
#main-sidebar.collapsed .sidebar-item > .flex.items-center > :first-child,
#main-sidebar.collapsed .sidebar-item > .flex.items-center > div:first-child img,
#main-sidebar.collapsed .sidebar-item > div > .flex.items-center > :first-child,
#main-sidebar.collapsed .sidebar-item > div > .flex.items-center > div:first-child img,
#main-sidebar.collapsed .sidebar-item > div.flex.items-center.gap-2.flex-1 > div:first-child,
#main-sidebar.collapsed .sidebar-item > div.flex.items-center.gap-2.flex-1 > div:first-child img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

/* Fix for nested flex structures in Bonus/General sections */
#main-sidebar.collapsed .sidebar-item > div.flex.items-center.gap-2.flex-1 {
    justify-content: center !important;
    width: 100% !important;
}

#main-sidebar.collapsed .sidebar-item .flex-1 {
    flex: 0 0 auto !important;
}

#main-sidebar.collapsed .sidebar-item .w-5.h-5,
#main-sidebar.collapsed .sidebar-item .w-6.h-6 {
    width: 18px !important;
    height: 18px !important;
}

/* Hide labels and additional elements in collapsed state */
#main-sidebar.collapsed .sidebar-item > div.flex.items-center.gap-2.flex-1 > span:not(:first-child),
#main-sidebar.collapsed .sidebar-item > span:not(:first-child) {
    display: none !important;
}

/* =============================================================== */
/* MOBILE SIDEBAR STYLES - ADD ONLY THESE NEW RULES */
/* =============================================================== */

/* Mobile overlay styles */
#mobile-sidebar-overlay {
    transition: opacity 0.3s ease-in-out;
    display: none !important; /* ← ADD THIS LINE */
}

/* Prevent body scroll when sidebar is open on mobile */
body.overflow-hidden {
    overflow: hidden;
}

/* Mobile sidebar behavior */
@media (max-width: 1023px) {
    #main-sidebar {
        transform: translateX(-100%);
        /* height: calc(100vh - 64px) !important; Full height minus header only */
        height: 100vh !important;
        top: 64px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #main-sidebar:not(.collapsed) {
        transform: translateX(0);
    }

      /* Ensure menu container takes full height */
    #main-sidebar .menu {
        min-height: 100% !important;
        padding-bottom: 80px !important; /* Space for mobile footer */
    }

       /* Ensure all labels are visible on mobile */
    #main-sidebar .sidebar-label {
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
}

/* Desktop behavior - override mobile styles */
@media (min-width: 1024px) {
    #main-sidebar {
        /* transform: translateX(0) !important; */
        transform: translateX(0) !important;
         height: 100vh !important; /* Full height on desktop */
        top: 64px !important;
    }
       #main-sidebar .menu {
        /* display: block !important; Reset flex on desktop */
        padding-bottom: 0 !important;
        /* justify-content: normal !important; */
    }
}

/* Ensure toast has proper z-index and positioning */
#toast-notification {  
    min-width: 300px;
    max-width: 400px;
    backdrop-filter: blur(10px);
    background: rgba(26, 32, 44, 0.95);
    border: 1px solid #2d3748;
    top: 80px !important;
    z-index: 10000 !important;
}


/* Reloade Refresh icon style */
/* @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
} */

/* Custom animation for the refresh button icon */
@keyframes spin-once {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Class to apply the single-spin animation */
.is-spinning {
  animation: spin-once 0.3s linear;
}


/*
 * =========================================
 *  FOOTER MENU HOVER EFFECT
 * =========================================
 */

/* 1. Target the <ul> element inside your specific wrapper. 
      The WordPress Navigation Menu widget generates a <ul> with a 'menu' class. */
.footer-menu-widget .menu {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* This creates the space between menu items */
}

/* 2. Target the links directly. This is the most important change.
      We are targeting any <a> tag that is a direct child of an <li> within our widget. 
      This is a universal structure that works for all users. */
.footer-menu-widget .menu > li > a {
    color: #9ca3af; /* Default text color (Tailwind gray-400) */
    text-decoration: none;
    font-size: 0.875rem; /* text-sm */
    position: relative; /* CRITICAL: Required for the underline */
    display: inline-block; /* Ensures underline only spans the text */
    padding-bottom: 3px; /* Creates space for the underline */
    transition: color 0.3s ease-in-out;
}

/* 3. Change the text color on hover */
.footer-menu-widget .menu > li > a:hover {
    color: #ffffff; /* text-white */
}

/* 4. Create the animated underline using the ::after pseudo-element */
.footer-menu-widget .menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; /* Starts invisible */
    height: 1px;
    background: linear-gradient(to right, #4ade80, #8b5cf6); /* from-green-400 to-purple-500 */
    transition: width 0.3s ease-in-out;
    opacity: 0;
}

/* 5. On hover, expand the underline to full width and make it visible */
.footer-menu-widget .menu > li > a:hover::after {
    width: 100%;
    opacity: 1;
}