/* Simple Mobile Menu - Complete Rewrite */

/* Hide hamburger icon on desktop */
@media only screen and (min-width: 992px) {
    .header-one #simple_mobile_btn {
        display: none !important;
    }
}

/* Only applies to mobile devices */
@media only screen and (max-width: 991px) {
    /* Hide the complex template menu structure */
    .header-one .main-menu-wrapper {
        display: none !important;
    }

    /* Center the header logo on mobile */
    .header-one .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .header-one .navbar-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Make hamburger menu icon bigger and more visible */
    .header-one .navbar-header .bar-icon {
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-one .navbar-header .bar-icon i {
        font-size: 28px;
    }

    /* Create our own simple mobile menu */
    .simple-mobile-menu {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background-color: #ffffff;
        z-index: 9999;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
    }

    /* Dark mode support */
    .dark-mode .simple-mobile-menu {
        background-color: #1F2937;
    }

    /* Menu shown state */
    .simple-mobile-menu.show {
        left: 0;
    }

    /* Menu header */
    .simple-mobile-menu-header {
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent;
    }

    .dark-mode .simple-mobile-menu-header {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Close button */
    .simple-mobile-close {
        font-size: 24px;
        color: white;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    .dark-mode .simple-mobile-close {
        color: white;
    }

    /* Menu items container */
    .simple-mobile-nav {
        padding: 20px;
    }

    /* Menu items */
    .simple-mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .simple-mobile-nav li {
        margin-bottom: 5px;
    }

    .simple-mobile-nav a {
        display: block;
        padding: 12px 15px;
        color: #333;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .dark-mode .simple-mobile-nav a {
        color: #E5E7EB;
    }

    .simple-mobile-nav a:hover,
    .simple-mobile-nav li.active a {
        background-color: #FFF5F7;
        color: #FF4667;
    }

    .dark-mode .simple-mobile-nav a:hover,
    .dark-mode .simple-mobile-nav li.active a {
        background-color: #374151;
        color: #FF4667;
    }

    /* Login buttons section */
    .simple-mobile-buttons {
        padding: 20px;
        border-top: 1px solid #eee;
        margin-top: 20px;
    }

    .dark-mode .simple-mobile-buttons {
        border-top: 1px solid #374151;
    }

    .simple-mobile-buttons .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 10px 20px;
        font-weight: 600;
        border-radius: 8px;
    }

    /* Match desktop button styling */
    .simple-mobile-buttons .btn-primary {
        background-color: #FF4667 !important;
        border-color: #FF4667 !important;
        color: white !important;
    }

    .simple-mobile-buttons .btn-outline-primary {
        background-color: transparent !important;
        border: 2px solid white !important;
        color: white !important;
    }

    .dark-mode .simple-mobile-buttons .btn-outline-primary {
        border-color: white !important;
        color: white !important;
    }

    /* Overlay */
    .simple-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        display: none;
    }

    .simple-mobile-overlay.show {
        display: block;
    }

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

/* Ensure desktop view is not affected */
@media only screen and (min-width: 992px) {
    .simple-mobile-menu,
    .simple-mobile-overlay {
        display: none !important;
    }
}