/* Component Styles for Blazor SSR Application
  */

.e-sidebar .nav-link {
    cursor: pointer;
    text-decoration: none !important;
    font-size: var(--font-size-lg);
}


.hero-banner {
    min-height: 250px;
    background-color: var(--bs-light);
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bs-light);
}

.main-menu-header {
    font-size: var(--font-size-md);
    font-weight: 500;
    text-align: center;
    color: var(--bs-primary);
    margin-bottom: var(--spacing-sm);
}

.closebtn {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    font-size: var(--font-size-md);
    color: var(--bs-dark);
}

.menu-content a {
    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
    font-size: var(--font-size-base);
}

    .menu-content a:hover {
        color: var(--bs-link-hover-color);
        text-decoration: underline;
    }

.e-appbar {
    background-color: var(--bs-primary);
    color: var(--bs-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-base);
}

.e-sidebar {
    background-color: var(--bs-light);
    font-size: var(--font-size-base);
}

.e-grid .e-headercell {
    color: var(--bs-dark);
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.brv-btn-menu, .brv-btn-cart {
    font-size: var(--font-size-base);
    width: 2.5rem;
    height: 2.5rem;
    transition: var(--bs-transition);
}

    .brv-btn-menu .e-btn, .brv-btn-cart .e-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .brv-btn-menu .e-icons, .brv-btn-cart .sf-icon-cart {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

        .brv-btn-menu .e-icons::before, .brv-btn-cart .sf-icon-cart::before {
            font-size: var(--font-size-lg);
            color: var(--bs-white);
            line-height: 1;
        }

    .brv-btn-menu:hover, .brv-btn-cart:hover {
        background-color: var(--bs-btn-hover-bg);
    }

.cart-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: var(--spacing-sm);
    z-index: 10;
}

.customposition {
    position: absolute;
    top: calc(-1 * var(--spacing-xs));
    right: calc(-1 * var(--spacing-sm));
    z-index: 15;
}

.cartbadge {
    background-color: var(--bvrgreen);
    color: var(--bs-white);
    font-size: var(--font-size-sm);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 50%;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}