﻿/* Component Styles for Blazor SSR Application
  */

#mainappbar .bi {
    font-size: 1.6rem;
    color: #fff;
}


.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 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0; 
    box-sizing: border-box;
    font-size: var(--font-size-base);
    transition: var(--bs-transition);
}
    .brv-btn-menu i,
    .brv-btn-cart i {
        margin: 0; 
        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;
}


.cartbadge {
    position: absolute;
    top: 2px; /* badge verder naar beneden */
    right: 0;
    transform: translate(50%, 0); /* alleen horizontaal schuiven */
    background-color: var(--bvrgreen);
    color: var(--bs-white);
    font-size: var(--font-size-sm);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 45%;
    min-width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
