:root {
    --sidebar-bg: #1a4a7a;
    --sidebar-light: #2a5a8a;
    --text-light: #ffffff;
    --text-muted: #e0e0e0;
    --accent-orange: #fd7e14;
    --border-light: #3a6a9a;
}

#sidebarOffcanvas {
    background-color: var(--sidebar-bg);
    color: var(--text-light);
    border-right: 1px solid var(--border-light);
}

#sidebarOffcanvas .offcanvas-header {
    border-bottom: 1px solid var(--border-light);
    padding: 0.5rem 1rem;
}

#sidebarOffcanvas .offcanvas-title {
    color: var(--text-light);
    font-weight: bold;
}

#sidebarOffcanvas .btn-close {
    filter: invert(1);
}

#sidebarOffcanvas .search-section {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

#sidebarOffcanvas .search-section input {
    background-color: var(--sidebar-light);
    border: none;
    color: var(--text-light);
}

#sidebarOffcanvas .search-section input::placeholder {
    color: var(--text-muted);
}

#sidebarOffcanvas .nav-tabs {
    border-bottom: none;
    background-color: var(--sidebar-bg);
    margin: 0;
}

#sidebarOffcanvas .nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1rem;
    margin: 0;
}

#sidebarOffcanvas .nav-tabs .nav-link.active {
    color: var(--accent-orange);
    background-color: transparent;
    border-bottom-color: var(--accent-orange);
}

#sidebarOffcanvas .nav-tabs .nav-link:hover {
    color: var(--text-light);
    border-bottom-color: var(--accent-orange);
}

#sidebarOffcanvas .nav-link {
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}

#sidebarOffcanvas .nav-link:hover {
    background-color: var(--sidebar-light);
    color: var(--text-light);
}

#sidebarOffcanvas .nav-link i {
    margin-right: 0.5rem;
    color: var(--accent-orange);
    width: 20px;
}

#sidebarOffcanvas .accordion-button {
    color: var(--text-light);
    background-color: var(--sidebar-bg);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

#sidebarOffcanvas .accordion-button:not(.collapsed) {
    color: var(--text-light);
    background-color: var(--sidebar-light);
    box-shadow: none;
}

#sidebarOffcanvas .accordion-button::after {
    filter: invert(1) hue-rotate(30deg);
    margin-left: auto;
}

#sidebarOffcanvas .accordion-item {
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-light);
}

#sidebarOffcanvas .accordion-body {
    padding: 0;
    background-color: var(--sidebar-light);
}

#sidebarOffcanvas .nav-item {
    border-bottom: 1px solid var(--border-light);
}

#sidebarOffcanvas .tab-pane {
    padding: 0;
}

#sidebarOffcanvas .main-content {
    padding: 2rem;
}


/* Cart and heart icons in header */

#sidebarOffcanvas .header-icons {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

#sidebarOffcanvas .header-icons .btn {
    background: none;
    border: none;
    color: var(--accent-orange);
    font-size: 1.2rem;
}


/* Close button style */

#sidebarOffcanvas .offcanvas-header .btn-close {
    opacity: 0.8;
}


/* Badge for cart */

#sidebarOffcanvas .badge {
    background-color: var(--accent-orange);
    font-size: 0.7rem;
}

#sidebarTabContent .accordion-button i {
    color: var( --accent-orange);
    margin-right: 0.5rem;
}