/* Light Theme Colors */

.light-theme .navbar, .light-theme .footer {
    color: #6CA6CD;
    background-color: #001f3f;
}

/* Light-Medium Shade for Table Headers */
.light-theme th {
    background-color: #9DC1D9;
}

/* Light Shaded A Href Color */
.light-theme a, p, div, li, strong {
    color: #001f3f; 
}

/* Light Grey-Blue Background Color */
.light-theme body {
    background-color: #ECEFF4;
}

/* Styles for light and dark themes */
.light-theme {
    /* Add styles for the light theme */
    background-color: #ECEFF4;
    color: #001f3f; 
}

/* Style for the toggle switch based on the theme */
.light-theme #moon, 
.dark-theme #sun {
    opacity: 1;
}

#moon {
    display: inline-block; /* or 'none' based on your initial preference */
}

#sun {
    display: none; /* or 'inline-block' based on your initial preference */
}

.item-status.text-success {
    color: green;
    font-weight: bolder;
}

.item-status.text-danger {
    color: red;
    font-weight: bolder;
}

/* Style for Back Button */
.back-button {
    font-size: 18px; /* Adjust the font size as needed */
    font-weight: bold;
    text-decoration: none;
    color: #001f3f;/* Set the color as needed */
    margin-right: 10px; /* Adjust the margin as needed */
}

/* Style for Back to Top Button */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 18px; /* Adjust the font size as needed */
    font-weight: bold;
    background-color: #007bff; /* Set the background color as needed */
    color: #F5EBFF; /* Set the text color as needed */
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

/* Shopping Cart Styles*/

.shopping-cart-icon {
    padding-left: 10px;
    background-color: transparent !important;
}

#shopping-cart-icon {
    position: relative;
}

.cart-item-count {
    position: absolute;
    top: 1px;
    left: 11px;
    background-color: #007bff;
    color: #F5EBFF;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 0px;
    padding: 1px 1px; /* Adjust padding as needed */
    font-size: 10px; /* Adjust font size as needed */
    cursor: pointer; /* Add this line to make it clickable */
    z-index: 2; /* Ensure it's above the shopping cart icon */
}
.cart-item-count:hover + #shopping-cart-icon i,
#shopping-cart-icon:hover,
.shopping-cart-icon:hover,
#shopping-cart-icon i:hover,
.shopping-cart-icon i:hover {
    background-color: transparent !important;
}

/* TO BE MIGRATED */
/* AD Admin */
.admin-bg {
    background-color: #001f3f;
    color: #6CA6CD;
}

.text-end.admin-bg {
    background-color: #001f3f;
    color: #6CA6CD;
}

.text-white.admin-bg {
    background-color: #001f3f;
    color: #6CA6CD;
}

/* Override Bootstrap styles for AD Admin navbar */
.navbar.navbar-expand-lg.navbar-light.bg-light.admin-bg {
    background-color: #001f3f;
}

/* Set color for AD Admin navbar links */
.navbar.navbar-expand-lg.navbar-light.bg-light.admin-bg .navbar-nav .nav-link {
    color: #6CA6CD;
}

/* Override Bootstrap styles for AD Admin navbar */
.custom-navbar {
    background-color: #001f3f;
}

/* Set color for AD Admin navbar links */
.custom-navbar .navbar-nav .nav-link {
    color: #6CA6CD;
}

.table thead tr th.custom-thead {
    background-color: #001f3f !important;
    color: #6CA6CD !important;
}

.input-group-prepend, .input-group-append {
    margin: 0;
}

.form-control {
    border: none;  
    border-radius: 0;
}

.btn-primary {
    border-radius: 0;
}

.add-new-btn {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #001f3f;
}

.add-new-btn:hover,
.add-new-btn:focus {
    background-color: #6ea8fe;
    color: #001f3f;
    border-color: #001f3f;
}

.btn-purple {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #001f3f !important;
}

.btn-purple:hover,
.btn-purple:focus {
    background-color: #6ea8fe !important;
    color: #001f3f !important;
    border-color: #001f3f !important;
}

.admin-logo {
    color:#6CA6CD;
}

.admin-logo:hover {
    color:white;
}

.footer {
    flex-shrink: 0; /* Prevent the footer from shrinking */
    margin-top: 8px; /* tightened spacing to remove large gaps */
    background-color: #001f3f;
    color: #6CA6CD;
    padding: 20px 0;
    text-align: center; /* Center the content within the footer */
    border-top: 1px solid #6CA6CD;
}

.footer table {
    margin: auto;
}

.footer td {
    text-align: center;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer li {
    margin-bottom: 10px;
}

.footer a {
    text-decoration: none; /* Remove underlines */
    color: #6CA6CD;
    font-weight: bold; /* Make the text bold */
    margin: 0 10px; /* Add some spacing between links */
    display: block; /* Remove the default bullet points */
}

.footer a:hover {
    text-decoration: none; /* Remove underlines */
    color: white;
    font-weight: bold; /* Make the text bold */
}

.footer p {
    margin-top: 20px;
    text-align: center; /* Added to center-align */
    color: white !important;
    font-weight: bolder !important;
}

.footer-copyright {
    margin-top: 20px;
    text-align: center;
    color: white !important;
    font-weight: bolder !important;
}

.adminnav {
    border-bottom: 1px solid #6CA6CD;
}

/* Navbar */
/* navbar.css */

/* navbar */
.navbar {
    padding: 0;
    border-bottom: 1px solid #6CA6CD;
}

.navbar a {
    color: #6CA6CD;
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underlines */
}
.navbar a:hover {
    color: #fff;
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underlines */
}

.custom-btn {
    height: 20px;
    font-size: 12px;
    padding: 4px 8px;
}

.custom-filter-btn {
    border-radius: 0 5px 5px 0; /* Adjust the border-radius for the filter button */
    color: #6CA6CD !important;
    background-color: #2f343a;
    border-color: #2f343a;
}

.custom-filter-btn:hover {
    background-color: #6CA6CD;
    color: #001f3f !important;
}

.custom-form-control {
    font-size: 12px;
}

.custom-user-links {
    font-size: 12px;
}

.custom-button-group {
    display: flex;
    align-items: stretch;
}

.custom-input-group {
    height: 30px;
}

.custom-btn,
.custom-form-control {
    height: 100%;
}

.navbar-nav.user-links {
    margin-left: auto;
}

/* Adjust padding for the navbar brand and navigation links */
.navbar-brand,
.navbar-nav {
    padding: 0;
}

/* Ensure that the navbar elements are vertically aligned */
.navbar-nav,
.navbar-collapse {
    display: flex;
    align-items: center;
}

/* Adjust the padding for the dropdown menu */
.navbar-nav .dropdown-menu {
    padding: 10px;
}

.navbar.navbar-expand-lg {
    padding-top: 0; /* Adjust as needed */
    padding-bottom: 0; /* Adjust as needed */
}

.navbar.navbar-expand-lg .container-fluid {
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-info .not-authenticated {
    color: #6CA6CD;  /* Choose an appropriate color for your design */
    background-color: red;  /* Choose an appropriate background color for your design */
    padding: 5px;
    border-radius: 5px;
}

.nav-link.debug-info {
    color: red; /* Set text color to white */
    font-weight: bold;
    background-color: black; /* Set background color to black */
    padding: 5px; /* Add some padding for better readability */
}

.nav-info.debug-info {
    color: #6CA6CD; /* Set text color to white */
    font-weight: bold;
    background-color: black; /* Set background color to black */
    padding: 5px; /* Add some padding for better readability */
}

/* Username Link Menu */
.user-links-container {
    display: none;
    position: absolute;
    background-color: #000; /* Change background color to black */
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    padding-left: 10px;
    transition: left 0.3s ease, width 0.3s ease; /* Add transition for smooth animation */
    max-width: 100px; /* Set a maximum width for the dropdown */
}

#userMenu:hover .user-links-container {
    left: calc(100% - 100px); /* Align with the right edge of the Account link */
    width: 100px; /* Set the desired width */
    text-align: center;
    font-size: 14px;
}

body.light-theme[data-authenticated="false"] #userMenu .user-links-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

body.light-theme[data-authenticated="false"] #userMenu .user-link {
    text-align: center !important;
}

.user-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Display links in a column */
}

.user-link {
    color: #6CA6CD !important; /* Change text color to white */
    text-decoration: none;
    display: block;
    font-weight: bolder;
    padding: 8px 0; /* Add padding to the links */
}

.user-link:hover {
    background-color: #2f343a !important; /* Change background color on hover */
    color: white !important;
    border-color: #ffffff !important;
}

.user-link + .user-link {
    border-top: 1px solid #333; /* Add top border to separate links */
}

.user-links-list li {
    flex: 1; /* Distribute available space evenly among the list items */
    padding: 5px 0; /* Add padding to improve visibility of the divider */
}

/* Use a text-based white close icon on dark modal headers in the light theme.
   Some pages remove Bootstrap's default SVG background, so relying on filter alone
   can leave the button blank or too dark to see. */
body.light-theme .modal-header.text-white .btn-close,
body.light-theme .modal-header.admin-bg .btn-close,
body.light-theme .modal-header.bg-dark .btn-close,
body.light-theme #productQuickViewModal .modal-header .btn-close,
body.light-theme #productDetailsModal .modal-header .btn-close,
body.light-theme #customizeNewModal .modal-header .btn-close,
body.light-theme #customizeFandomModal .modal-header .btn-close,
body.light-theme #createFandomModal .modal-header .btn-close,
body.light-theme #createCharacterModal .modal-header .btn-close {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.light-theme .modal-header.text-white .btn-close::before,
body.light-theme .modal-header.admin-bg .btn-close::before,
body.light-theme .modal-header.bg-dark .btn-close::before,
body.light-theme #productQuickViewModal .modal-header .btn-close::before,
body.light-theme #productDetailsModal .modal-header .btn-close::before,
body.light-theme #customizeNewModal .modal-header .btn-close::before,
body.light-theme #customizeFandomModal .modal-header .btn-close::before,
body.light-theme #createFandomModal .modal-header .btn-close::before,
body.light-theme #createCharacterModal .modal-header .btn-close::before {
    content: "×" !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

body.light-theme .modal-header.text-white .btn-close::after,
body.light-theme .modal-header.admin-bg .btn-close::after,
body.light-theme .modal-header.bg-dark .btn-close::after,
body.light-theme #productQuickViewModal .modal-header .btn-close::after,
body.light-theme #productDetailsModal .modal-header .btn-close::after,
body.light-theme #customizeNewModal .modal-header .btn-close::after,
body.light-theme #customizeFandomModal .modal-header .btn-close::after,
body.light-theme #createFandomModal .modal-header .btn-close::after,
body.light-theme #createCharacterModal .modal-header .btn-close::after {
    display: none !important;
}

/* Ensure the site navbar matches the project's light-theme titlebar color (dark blue) */
body.light-theme .site-navbar {
    background-color: #001f3f !important;
    border-bottom: 1px solid #6CA6CD !important;
}

body.light-theme .site-navbar .navbar-brand,
body.light-theme .site-navbar .nav-link,
body.light-theme .site-navbar a {
    color: #6CA6CD !important;
}

/* Security notice should remain high-contrast on light theme */
body.light-theme .security-notice {
    color: #ffffff !important;
}

.user-links-list li:last-child {
    border-top: 1px solid #333; /* Add top border to the last link as a divider */
}

/* Filter and Admin dropdowns */
.filter-links-container,
.admin-links-container {
    display: none;
    position: absolute;
    /* Prefer right-aligning dropdowns so they appear under the corresponding button
       (fallback for cases where JS positioning isn't applied). */
    right: 0;
    left: auto;
    background-color: #000;
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    min-width: 120px;
    padding-left: 10px;
    padding-right: 10px;
    transition: opacity 0.3s ease; /* Add transition for smooth opacity change */
}


.custom-admin-btn {
    border: none; /* Remove the border */
    background-color: transparent; /* Make the background transparent */
    color: #6CA6CD; /* Set text color to white */
    padding: 4px 8px; /* Adjust padding as needed */
    font-size: 12px; /* Adjust font size as needed */
    font-weight: bolder;
}

.custom-admin-btn:hover {
    color: white;
    background-color: transparent;
    border-color: #ffffff;
}

#filterDropdown:hover .filter-links-container,
#adminDropdown:hover .admin-links-container {
    display: block;
    /* Keep right alignment as a sensible default; JS will compute precise left/top when available. */
    right: 0;
    left: auto;
    opacity: 1;
}


.filter-links-list,
.admin-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#filterDropdown:hover .filter-link,
#adminDropdown:hover .admin-link {
    opacity: 1; /* Change opacity on hover */
}

.filter-link,
.admin-link {
    color: #6CA6CD !important; /* Set text color to white */
    text-decoration: none;
    display: block;
    padding: 8px 0;
    opacity: 0; /* Initialize opacity to 0 */
    transition: opacity 0.3s ease; /* Add transition for smooth opacity change */
    max-width: none; /* Remove the max-width property */
}

.filter-link:hover,
.admin-link:hover {
    background-color: #2f343a;
    color: white !important;
    border-color: #ffffff !important;
}

.filter-link + .filter-link,
.admin-link + .admin-link {
    border-top: 1px solid #333;
}

.filter-links-list li,
.admin-links-list li {
    flex: 1;
    padding: 5px 0;
}

.filter-links-list li:last-child,
.admin-links-list li:last-child {
    border-top: 1px solid #333;
}

/* Center-justify text in dropdown menus */
.filter-links-list,
.admin-links-list,
#product-dropdown {
    text-align: center;
}

.filter-link,
.admin-link,
#product-dropdown a {
    display: block;
    padding: 8px 0;
    color: #6CA6CD;
    text-decoration: none;
}

.filter-link:hover,
.admin-link:hover,
#product-dropdown a:hover {
    display: block;
    padding: 8px 0;
    color: white;
    text-decoration: none;
    background-color: #2f343a;
    border-color: #ffffff;
}

/* Search */
.search-container .input-group,
.search-container .input-group-prepend,
.search-container .input-group-append,
.search-container .form-control,
.search-container .btn {
    height: 100%;
}

.custom-search-btn {
    border-radius: 5px 0 0 5px; /* Adjust the border-radius for the search button */
    color: #6CA6CD !important;
    background-color: #2f343a;
    border-color: #2f343a;
}

.custom-search-btn:hover {
    border-radius: 5px 0 0 5px; /* Adjust the border-radius for the search button */
    background-color: #6CA6CD;
    color: #001f3f !important;
}

.custom-search-container {
    align-items: center;
}

.search-container {
    padding: 5px;  
    margin-top: 0;  
}

.search-container .btn, 
.search-container .form-control {
    padding: 0.15rem 0.5rem;  /* Adjust the padding as needed */
    font-size: 12px;  /* Adjust the font size as needed */
}

.search-container .dropdown-toggle {
    padding: 0.175rem 0.75rem;  /* Adjust the padding as needed */
    font-size: 12px;  /* Adjust the font size as needed */
}
/* Dropdowns */
.input-group {
    background-color: #000;
    border: 1px solid #ced4da; 
    border-radius: 5px;
}

.dropdown-toggle {
    border-radius: 0;
}

.dropdown-menu {
    top: 100%;
    
    max-height: 200px; /* Set a maximum height for the dropdown menu */
    overflow-y: auto; /* Enable vertical scrolling if needed */
}

.custom-dropdown {
    left: 0 !important;
    right: auto !important;
    padding: 100px; /* Adjust the padding as needed */
}

.dropdown-item {
    margin-bottom: 5px; /* Adjust the margin as needed */
    padding: 10px; /* Adjust the padding as needed */
    font-weight: bolder;
}

.dropdown-item:hover {
    color: white !important;
    font-weight: bolder;
}

.dropdown-menu-end {
    right: 0;
}

/* Services, Learning, Community, and About Menus */
#servicesDropdown:hover #services-dropdown,
#learningDropdown:hover #learning-dropdown,
#communityDropdown:hover #community-dropdown,
#aboutDropdown:hover #about-dropdown {
    display: block;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

#services-dropdown,
#learning-dropdown,
#community-dropdown,
#about-dropdown {
    display: none;
    position: absolute;
    background-color: #000;
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    padding-left: 10px;
    transition: left 0.3s ease, width 0.3s ease;
    max-width: 100px;
}

#services-dropdown div,
#learning-dropdown div,
#community-dropdown div,
#about-dropdown div {
    color: #6CA6CD;
    text-decoration: none;
    display: block;
    padding: 8px 0;
}

#services-dropdown div:hover,
#learning-dropdown div:hover,
#community-dropdown div:hover,
#about-dropdown div:hover {
    background-color: #1A1A2E;
}

/* Multi-column dropdowns */

/* For larger screens, display in multiple columns */
@media (min-width: 768px) {
    #productDropdown {
        display: flex;
        /*grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
        gap: 20px;
        position: relative;
    }

    #product-dropdown {
        box-sizing: border-box;
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        position: absolute; /* Position the dropdown absolutely */
        top: 100%; /* Position below the parent */
        left: 0; /* Align with the left edge of the parent */
        z-index: 1000;
        background-color: #000;
        border: 1px solid #ddd;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        max-width: 100%; /* Ensure the dropdown does not extend beyond the screen */
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.3s ease, height 0.3s ease;
    }

    #productDropdown:hover #product-dropdown {
        visibility: visible;
        opacity: 1;
        /* Adjust the max-height as needed */
        max-height: 600px;
        overflow-y: auto;
    }
}

/* For smaller screens, revert to a single column */
@media (max-width: 767px) {
    #productDropdown {
        position: static;
        /*max-width: none;*/
    }

    #product-dropdown {
        flex: 0 0 100%;
        position: static;
        visibility: visible;
        opacity: 1;
        transition: none;
    }
}

/* Show dropdown on hover */
#productDropdown:hover #product-dropdown {
    display: block;
}

/* Hide dropdown when not hovering */
#product-dropdown {
    display: none;
}

/* Ensure the dropdown hides when not hovering over the menu */
#productDropdown:not(:hover) #product-dropdown {
    display: none;
}

/* Product */
.site-navbar {
    margin-bottom: 0 !important;
}

.ad-admin-navbar {
    margin-top: 0 !important;
}

.products-table {
    width: 80%; /* Adjust the width as needed */
    margin: auto; /* Center the table */
}
.custom-thead {
    background-color: #001f3f !important;
    color: #6CA6CD !important;
}
.product-name,
.product-description,
.product-actions {
    text-align: center;
}

.product-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-description {
    max-width: 60px;
    word-wrap: break-word; /* Word wrap for description */
    line-height: 1.2; /* Adjust line height for better spacing */
}

.product-actions a {
    margin: 0 5px;
}

.product-border {
    border: 3px solid #001f3f !important;
}

/* Ensure consistent background color for the entire row */
.products-table tbody tr {
    background-color: #f8f9fa; /* Adjust the background color as needed */
}

/* Adjust spacing between rows */
.products-table tbody tr td {
    padding-top: 10px; /* Adjust top padding as needed */
    padding-bottom: 10px; /* Adjust bottom padding as needed */
}

/* Improve hover effect */
.products-table tbody tr:hover {
    background-color: #1A1A2E; /* Adjust the hover background color as needed */
}

#product-dropdown {
    display: none;
    position: absolute;
    background-color: #000;
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    padding-left: 10px;
    transition: left 0.3s ease, width 0.3s ease;
    max-width: 100px;

}

.nav-item:hover #product-dropdown {
    display: block;
}

#product-dropdown {
    background-color: #000;
}

#product-dropdown a {
    color: #6CA6CD;
    font-size: 14px;
}

#product-dropdown a:hover,
#product-dropdown a:active {
    background-color: #2f343a;
    color: white;
    border-color: #ffffff;
}

/* Styles for the toggle switch */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 5px;  /* Adjust the gap value as needed */
}

.toggle-label {
    margin-right: 5px;
}

.theme-switch {
    display: none;
}

.toggle-icon {
    font-size: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
/* Ensure Theme label and icons are visible and clickable in the navbar */
.theme-toggle,
.site-navbar .theme-toggle,
.theme-toggle .toggle-icon,
.theme-toggle > span {
    color: #fff !important;
    cursor: pointer !important;
}


/* Styles */
/* styles.css */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make sure the body covers at least the full height of the viewport */
    margin: 0;
}

.wrapper {
    flex: 1;
}

.mt-3 {
    margin-top: 0;  
}

.centered-title {
    text-align: center;
    margin-top: 20px; /* Adjust the margin as needed */
}

.custom-img-class {
    /* Add your custom styling here */
    max-width: 100%; /* Ensures the image doesn't exceed its container */
    height: auto;    /* Ensures the image maintains its aspect ratio */
    /* Add any other styling you need */
}

.custom-p-class {
    font-size: 20px;
}

.category-button {
    background-color: #6CA6CD;
    color: #001f3f;
}

/* Ensure theme toggle spacing consistent (use light-theme spacing) */
.site-navbar .theme-toggle,
.theme-toggle {
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.theme-toggle .toggle-icon {
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
  font-size: 1em !important;
}
.theme-toggle-nav { gap: 8px !important; }


/* Toggle icon visibility: only show icon for current theme */
.toggle-icon { display: inline-block !important; }
body.light-theme .toggle-icon#moon { display: none !important; }
body.light-theme .toggle-icon#sun { display: inline-block !important; }
body.dark-theme .toggle-icon#sun { display: none !important; }
body.dark-theme .toggle-icon#moon { display: inline-block !important; }


/* Invert theme icons (show action icon, not state) + normalize spacing */
.theme-toggle { gap: 6px !important; display: inline-flex !important; align-items: center !important; }
.theme-toggle .toggle-icon { margin: 0 !important; line-height: 1 !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; font-size: 1em !important; width: 1.2em !important; padding: 0 !important; }
.theme-toggle-nav { gap: 8px !important; }

/* Icon visibility: show opposite icon to indicate action (action, not current state) */
.toggle-icon { display: inline-block !important; }
body:not(.dark-theme) .toggle-icon#sun { display: none !important; }
body:not(.dark-theme) .toggle-icon#moon { display: inline-block !important; }
body.dark-theme .toggle-icon#moon { display: none !important; }
body.dark-theme .toggle-icon#sun { display: inline-block !important; }


/* Normalize custom user links spacing */
.site-navbar .custom-user-links { margin-left: 6px !important; display:inline-flex !important; align-items:center !important; gap:0.4rem !important; }

/* Ensure theme-toggle sits flush to account menu */
.site-navbar .theme-toggle-nav { margin-right: 0 !important; }

/* Tighter label spacing */
.theme-toggle { margin-right: 0 !important; }



/* Ensure consistent spacing between shopping cart and account menu */
.site-navbar #shopping-cart-icon { margin-right: 6px !important; }
.site-navbar .theme-toggle-nav { margin-left: 0 !important; margin-right: 0 !important; }
.site-navbar .custom-user-links { margin-left: 6px !important; }