/**
 * Two-dot hamburger menu with animation
 */

/* Container for the 3-dot menu button */
.four-dot-menu {
    position: fixed !important;
    top: 10px !important;
    right: 15px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 8px !important;
    z-index: 1050 !important;
    background-color: #4338ca !important; /* Indigo color for the button */
    background-image: linear-gradient(to bottom right, #4f46e5, #3730a3) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3) !important;
}

/* The two dots */
.four-dot-menu .dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
    position: absolute !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Position dots vertically centered */
.four-dot-menu .dot:nth-child(1) {
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.four-dot-menu .dot:nth-child(2) {
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Animation for the dots when menu is open */
.four-dot-menu.open .dot:nth-child(1) {
    width: 25px !important;
    height: 3px !important;
    border-radius: 1px !important;
    background-color: #ffffff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: -1px 0 0 -12.5px !important; /* Center precisely */
    transform-origin: center !important;
    transform: rotate(45deg) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}

.four-dot-menu.open .dot:nth-child(2) {
    width: 25px !important;
    height: 3px !important;
    border-radius: 1px !important;
    background-color: #ffffff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: -1px 0 0 -12.5px !important; /* Center precisely */
    transform-origin: center !important;
    transform: rotate(-45deg) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}

/* Right-aligned mobile menu */
#mobile-menu.right-aligned {
    position: fixed !important;
    top: 60px !important;
    left: auto !important;
    right: 0 !important;
    width: 250px !important;
    max-width: 80% !important;
    height: calc(100vh - 60px) !important;
    background-color: transparent !important; /* Transparent background */
    transform-origin: top right !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    padding: 15px 0 !important;
    box-sizing: border-box !important;
}

/* Right-aligned menu animation classes */
#mobile-menu.right-aligned.hidden {
    transform: translateX(100%) !important;
    opacity: 0 !important;
}

#mobile-menu.right-aligned.visible {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Right aligned menu items */
#mobile-menu.right-aligned a {
    padding: 12px 20px !important;
    margin: 4px 15px !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: right !important;
    transition: all 0.2s ease !important;
    border: 1px solid #e5e7eb !important;
    background-color: #f9fafb !important; /* Solid light background */
    color: #1f2937 !important; /* Dark text */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#mobile-menu.right-aligned a:hover,
#mobile-menu.right-aligned a:active {
    background-color: #eef2ff !important; /* Light indigo background */
    border-color: #c7d2fe !important; /* Light indigo border */
    transform: translateX(-5px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15) !important;
}

#mobile-menu.right-aligned a i {
    order: 2 !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}

/* Animation for menu items */
#mobile-menu.right-aligned.visible a {
    animation: slideInFromRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(20px) !important;
        opacity: 0 !important;
    }
    100% {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
}

/* Stagger animation timing for each menu item */
#mobile-menu.right-aligned.visible a:nth-child(1) { animation-delay: 0.05s !important; }
#mobile-menu.right-aligned.visible a:nth-child(2) { animation-delay: 0.10s !important; }
#mobile-menu.right-aligned.visible a:nth-child(3) { animation-delay: 0.15s !important; }
#mobile-menu.right-aligned.visible a:nth-child(4) { animation-delay: 0.20s !important; }
#mobile-menu.right-aligned.visible a:nth-child(5) { animation-delay: 0.25s !important; }
#mobile-menu.right-aligned.visible a:nth-child(6) { animation-delay: 0.30s !important; }
#mobile-menu.right-aligned.visible a:nth-child(7) { animation-delay: 0.35s !important; }