/*--------------------------------------------------------------
Povigo - Footer Fixed Menu

@since 1.0.0
@version 1.0.0
----------------------------------------------------------------*/

/* 1. Base Resets & Transitions */
#footer-menu, 
#footer-menu * {
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#footer-menu a {
    color: inherit;
    text-decoration: none;
}

#footer-menu button {
    cursor: pointer;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Main Layout Container */
#footer-menu .fixed {
    position: fixed;
    left: 50%;
    bottom: 0.75rem;
    top: inherit;
    transform: translateX(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* 3. Navigation Bar Styling */
#footer-menu nav#bottom-navigation {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* 4. Menu Items (Links) */
#footer-menu nav#bottom-navigation a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    color:  #000000;/* text-gray-400 #9ca3af; */
}

#footer-menu nav#bottom-navigation a:hover {
    color: #4b5563;
    background-color: #f3f4f6;
}

#footer-menu .bb-icon-l {
    font-size: 29px !important;
    font-weight: 400;
}

/* 5. Toggle Button */
#menu-toggle-btn {
    min-width: 44px;
    min-height: 44px;
    width: 3rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: #9ca3af;
}

#menu-toggle-btn:hover {
    color: #4b5563;
    background-color: #fff;
}

#menu-toggle-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

#menu-toggle-btn svg.rotate-180 {
    transform: rotate(180deg);
}

/* 6. Active Link Colors (nth-child) */
#footer-menu nav a.current-menu-item,
#footer-menu nav a.active,
#footer-menu nav a:active {
    color: white !important;
}

#footer-menu nav a:nth-of-type(1).current-menu-item, #footer-menu nav a:nth-of-type(1):active { background-color: rgb(242 99 99) !important; }
#footer-menu nav a:nth-of-type(2).current-menu-item, #footer-menu nav a:nth-of-type(2):active { background-color: rgb(61 181 232) !important; }
#footer-menu nav a:nth-of-type(3).current-menu-item, #footer-menu nav a:nth-of-type(3):active { background-color: rgb(166 207 56) !important; }
#footer-menu nav a:nth-of-type(4).current-menu-item, #footer-menu nav a:nth-of-type(4):active { background-color: rgb(166 117 222) !important; }
#footer-menu nav a:nth-of-type(5).current-menu-item, #footer-menu nav a:nth-of-type(5):active { background-color: rgb(245 130 41) !important; }

/* 7. Hide Logic (Animation) */
#footer-menu .fixed.menu-is-closed {
    /* Moves the entire stack down, leaving only the button visible */
    transform: translateX(-50%) translateY(calc(100% - 44px));
}

#footer-menu .fixed.menu-is-closed #bottom-navigation {
    opacity: 0;
    pointer-events: none;
}

/* 8. Responsive Scaling */

/* Tablet (1.3x) */
@media (min-width: 768px) {
    #footer-menu .fixed { bottom: 1.0rem; }
    #footer-menu nav#bottom-navigation { padding: 0.65rem; gap: 0.325rem; }
    #footer-menu nav#bottom-navigation a { width: 3.9rem; height: 3.9rem; }
    #footer-menu .bb-icon-l { font-size: 38px !important; }
}

/* Wide Screen (1.6x) */
@media (min-width: 1200px) {
    /* #footer-menu .fixed { bottom: 2.5rem; } */
    /* #footer-menu nav#bottom-navigation { padding: 0.8rem; gap: 0.4rem; } */
    /* #footer-menu nav#bottom-navigation a { width: 4.8rem; height: 4.8rem; } */
    /* #footer-menu .bb-icon-l { font-size: 46px !important; } */
}

/* 8. Media Uploader */

.bp-media-upload-footer-menu .media-uploader-footer .bb-dropdown-wrap {
    float: left;
    margin-bottom: 0;
}

.bp-media-upload-footer-menu .media-uploader-footer #bp-media-submit {
    float: right;
}

.bp-media-upload-footer-menu .media-uploader-footer a {
    color: var(--bb-primary-button-text-regular);
    font-size: 14px;
}

.bp-media-upload-footer-menu .media-uploader-footer .bp-feedback {
    float: left;
    width: 100%;
}
.bp-media-upload-footer-menu .media-uploader-footer .bp-feedback a {
    color: var(--bb-primary-color);
    width: 100%;
}