﻿.additionalMenu {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    /*border-top: 0px solid #4a4a4a;
    border: 1px solid #4a4a4a;*/
    height: var(--additionalmenu-height) !important;
    background: var(--additionalmenu-background) !important;
}

.additionalmenu-header {
    background-color: var(--additionalmenu-background) !important;
    /*border-color: #013942 !important;*/
    color: #fff;
    margin: 1px;
    text-align: center;
}

.menu-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.menu-scroll {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    align-items: center;
    padding: 0 .25rem;
}

    .menu-scroll::-webkit-scrollbar {
        display: none;
    }

    .menu-scroll a {
        color: #fff;
        padding: .25rem .5rem;
        text-decoration: none;
        display: inline-block;
        white-space: nowrap;
        line-height: 1.5;
        border-radius: .25rem;
        transition: background-color 0.2s ease;
    }

        .menu-scroll a:hover {
            background-color: rgba(255, 255, 255, 0.15);
            text-decoration: none;
        }

/* ========== SCROLL BUTTONS (shared) ========== */
.scroll-btn, .scroll-btn-offcanvas {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 12pt;
    width: var(--scroll-btn-width) !important;
    height: var(--scroll-btn-height) !important;
    padding: 0;
    margin: 0 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .scroll-btn:hover, .scroll-btn-offcanvas:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .scroll-btn.left, .scroll-btn-offcanvas.left {
        border-radius: .25rem 0 0 .25rem;
    }

    .scroll-btn.right, .scroll-btn-offcanvas.right {
        border-radius: 0 .25rem .25rem 0;
    }


/* ---------------------------------UPDATES------------------------------------------ */
.additionalMenu {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: var(--additionalmenu-height) !important;
    background: var(--additionalmenu-background) !important;
}

.menu-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.swiper-wrapper {
    display: flex;
    align-items: center;
    padding: 0 .25rem;
}

.swiper-slide {
    flex: 0 0 auto;
    width: auto; /* Fix: prevent full-width slides */
    color: #fff;
    padding: .25rem .5rem;
    text-decoration: none;
    border-radius: .25rem;
    white-space: nowrap;
    transition: background-color .2s ease;
}

    .swiper-slide:hover {
        background-color: rgba(255,255,255,0.15);
    }

.scroll-btn {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 12pt;
    width: var(--scroll-btn-width) !important;
    height: var(--scroll-btn-height) !important;
    padding: 0;
    margin: 0 2px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .scroll-btn:hover {
        background: rgba(255,255,255,0.3);
    }

.additionalMenuInsideCardBody {
    display: flex;
    align-items: center;
    overflow: hidden;
    /*    height:  !important;*/ 
    border: 1px outset rgba(255, 255, 255, 0.15) !important;
    background: #7c6454 !important;
}
