/* Footer Menu */
.footer-menu {
    z-index: 3;
    position: fixed;
    bottom: 5px;
    /* Small space from the bottom */
    left: 50%;
    transform: translateX(-50%);
    /* Center the footer horizontally */
    width: 80%;
    /* Slightly narrow for a sleeker look */
    background: var(--footer-bg-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 15px;
    /* Reduced padding */
    border-radius: 30px;
    /* Smooth rounded corners */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Icon styles (compact & smooth) */
.footer-menu .icon {
    font-size: 28px;
    /* Adjusted for better visibility */
    font-weight: bold;
    color: var(--icon-color);
    background-color: var(--icon-bg);
    border-radius: 50%;
    /* Perfectly round */
    padding: 6px 10px;
    /* Slightly increased padding */
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Icon hover effect (smooth and compact) */
.footer-menu .icon:hover {
    transform: translateY(-5px) scale(1.1);
    background-color: var(--icon-hover-bg);
    color: var(--icon-hover-color);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

/* Active Icon state (smooth and subtle) */
.footer-menu .icon.active {
    transform: scale(1.15);
    /* Slightly larger when active */
    z-index: 1;
    background-color: var(--icon-hover-bg);
    color: var(--icon-hover-color);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

/* Sliding Menu */
.sliding-menu {
    z-index: 3;
    position: fixed;
    left: 0;
    bottom: -100%;
    /* Initially off-screen */
    width: 100%;
    height: 60%;
    background-color: var(--sliding-menu-bg);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
    transition: bottom 0.3s ease-in-out;
    padding-top: 0px;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* The 'show' class to bring the menu into view */
.sliding-menu.show {
    bottom: 0;
}

/* Menu Header */
.menu-header {
    display: flex;
    align-items: center;
    /* Vertically align text and close button */
    justify-content: space-between;
    /* Space out the text and close button */
    padding: 0 15px;
    /* Add some padding to the left and right */
    color: var(--sliding-menu-text-color);
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--sliding-menu-border-color);
    margin-bottom: 10px;
    /* Space between header and menu items */
}

/* Text Label (Shortcuts) */
.menu-header-text {
    font-size: 18px;
    color: var(--sliding-menu-text-color);
    font-weight: bold;
    text-transform: capitalize;
}

/* Close Button */
.close-btn {
    font-size: 30px;
    color: var(--close-btn-color);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    padding: 5px 10px;
}

.close-btn:hover {
    color: var(--close-btn-hover-color);
}

/* Menu Buttons Grid */
.menu-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 items per row */
    gap: 10px;
    /* Space between items */
    padding: 0 15px;
    /* Add padding to avoid edge touching */
    margin-top: 10px;
    /* Space from the header */
    box-sizing: border-box;
}

/* Menu Item Styling */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    /* Fixed height for square shape */
    background-color: var(--sliding-menu-item-bg);
    border-radius: 8px;
    padding: 10px;
    color: var(--sliding-menu-text-color);
    text-decoration: none;
    border: 1px solid var(--sliding-menu-border-color);
    transition: background-color 0.3s, transform 0.2s ease-in-out;
    position: relative;
    box-sizing: border-box;
}

.menu-item:hover {
    background-color: var(--sliding-menu-hover-bg);
    transform: translateY(-5px);
    /* Lift on hover */
}

/* Icon Styling inside the menu item */
.menu-item i {
    font-size: 30px;
    /* Icon size */
    margin-bottom: 8px;
    /* Space between icon and text */
    color: var(--icon-color);
    transition: color 0.3s ease;
}

/* Text Styling inside the menu item */
.menu-item .menu-text {
    font-size: 14px;
    /* Text size */
    font-weight: 500;
    color: var(--sliding-menu-text-color);
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Hover effect for Icon and Text */
.menu-item:hover i,
.menu-item:hover .menu-text {
    color: var(--sliding-menu-text-color);
}

/* Icon Button to Toggle Menu */
.icon {
    font-size: 24px;
    color: var(--icon-color);
    background: var(--icon-bg);
    border-radius: 50%;
    padding: 12px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.icon:hover {
    background-color: var(--icon-hover-bg);
    transform: scale(1.1);
}

/* Light Mode Styles */
[data-theme-version="light"] {
    --footer-bg-color: rgba(255, 255, 255, 0.85);
    --icon-color: #333;
    --icon-bg: rgba(52, 152, 219, 0.1);
    --icon-hover-bg: rgba(52, 152, 219, 0.2);
    --icon-hover-color: #3498db;
    --sliding-menu-bg: #ffffff;
    --sliding-menu-text-color: #333;
    --sliding-menu-border-color: #ddd;
    --sliding-menu-hover-bg: #3498db;
    --close-btn-color: #333;
    --close-btn-hover-color: #e74c3c;
}

/* Dark Mode Styles */
[data-theme-version="dark"] {
    --footer-bg-color: rgba(28, 30, 33, 0.85);
    --icon-color: #f1f1f1;
    --icon-bg: rgba(255, 255, 255, 0.2);
    --icon-hover-bg: rgba(243, 156, 18, 0.2);
    --icon-hover-color: #f39c12;
    --sliding-menu-bg: #333;
    --sliding-menu-text-color: #f1f1f1;
    --sliding-menu-border-color: #444;
    --sliding-menu-hover-bg: #f39c12;
    --close-btn-color: #f1f1f1;
    --close-btn-hover-color: #e74c3c;
}

/* Default Styles (when no theme is specified) */
[data-theme-version=""]:not([data-theme-version="light"]):not([data-theme-version="dark"]) {
    --footer-bg-color: rgba(240, 240, 240, 0.85); /* Lightish default */
    --icon-color: #555;
    --icon-bg: rgba(0, 0, 0, 0.1);
    --icon-hover-bg: rgba(0, 0, 0, 0.2);
    --icon-hover-color: #000;
    --sliding-menu-bg: #f5f5f5;
    --sliding-menu-text-color: #333;
    --sliding-menu-border-color: #ddd;
    --sliding-menu-hover-bg: #3498db;
    --close-btn-color: #333;
    --close-btn-hover-color: #e74c3c;
}