/**
 * theme-dark.css — Dark Theme Override
 *
 * Overrides variables.css and component styles for the dark storefront theme.
 * Black (#000000) primary background, dark gray (#1a1a1a) secondary background,
 * white text, dimmed-white links, 5px button border-radius, outlined transparent buttons.
 *
 * Load this file LAST in App.razor (frontend else block) so it cascades over everything.
 */

/* ============================================================
   1. CSS VARIABLE OVERRIDES
   ============================================================ */
:root {
    /* Core Colors */
    --color-primary:            #000000;
    --color-primary-dark:       #000000;
    --color-secondary:          #1a1a1a;
    --color-primary-rgb:        0, 0, 0;

    /* Text */
    --color-text:               #ffffff;
    --color-text-light:         #b0b0b0;
    --color-text-muted:         #888888;
    --color-text-dark:          #ffffff;

    /* Borders */
    --color-border:             #333333;

    /* Backgrounds */
    --bg-primary:               #000000;
    --bg-secondary:             #1a1a1a;
    --bg-light:                 #1a1a1a;
    --bg-white:                 #0d0d0d;
    --bg-dark:                  #000000;

    /* Grays */
    --color-light-gray:         #1a1a1a;
    --color-medium-gray:        #2a2a2a;
    --color-dark-gray:          #3a3a3a;
    --color-dark-nardo:         #888888;

    /* Form inputs */
    --form-select-bg:           #1a1a1a;
    --input-color:              #ffffff;
    --input-border-color:       #333333;
    --input-disabled-bg:        #2a2a2a;
    --input-disabled-border-color: #333333;
    --form-select-disabled-bg:  #2a2a2a;
    --form-select-disabled-border-color: #333333;
    --form-check-input-bg:      #1a1a1a;
    --form-check-input-border:  1px solid #444444;
    --form-check-label-color:   #ffffff;

    /* Form select arrow — white chevron for dark bg */
    --form-select-indicator:    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* Borders radius for buttons */
    --btn-border-radius:        5px;

    /* Shadows — subtler on dark backgrounds */
    --shadow-sm:                0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md:                0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg:                0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl:                0 16px 32px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   2. GLOBAL BODY & PAGE BACKGROUND
   ============================================================ */
html,
body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Generic section/div backgrounds that use light colors */
.bg-white,
.bg-light {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.bg-light-gray,
.bg-medium-gray {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* ============================================================
   3. LINKS
   ============================================================ */
a {
    color: #b0b0b0;
}

a:hover,
a:focus {
    color: #ffffff;
}

/* Links inside buttons keep button color — don't override */
.btn a,
a.btn {
    color: inherit;
}

/* ============================================================
   4. BUTTONS — rounded corners + dark-theme styles
   ============================================================ */

/* Apply 5px radius to ALL buttons globally */
.btn {
    border-radius: 5px !important;
}

.btn-primary {
    background-color: #000000;
    color: #ffffff;
    border-color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background-color: #1a1a1a;
    border-color: #cccccc;
    color: #ffffff;
}

.btn-secondary {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #444444;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #2a2a2a;
    border-color: #666666;
    color: #ffffff;
}

.btn-light {
    background-color: #2a2a2a;
    color: #ffffff;
    border-color: #444444;
}

.btn-light:hover:not(:disabled) {
    background-color: #3a3a3a;
    border-color: #555555;
    color: #ffffff;
}

.btn-dark {
    background-color: #000000;
    color: #ffffff;
    border-color: #555555;
}

.btn-dark:hover:not(:disabled) {
    background-color: #1a1a1a;
    border-color: #888888;
    color: #ffffff;
}

/* --- Outlined Transparent Buttons (new dark-theme variants) --- */

/* Generic outlined transparent on dark background */
.btn-outline-white {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px !important;
}

.btn-outline-white:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
}

/* Override existing outlined buttons for dark background */
.btn-outline-primary {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: #cccccc;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #b0b0b0;
    border-color: #555555;
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: #888888;
}

.btn-outline-light {
    background-color: transparent;
    color: #b0b0b0;
    border-color: #555555;
}

.btn-outline-light:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: #888888;
}

.btn-outline-dark {
    background-color: transparent;
    color: #b0b0b0;
    border-color: #555555;
}

.btn-outline-dark:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Dimmed / ghost button — fully transparent, border only */
.btn-ghost {
    background-color: transparent;
    color: #b0b0b0;
    border: 1px solid #444444;
    border-radius: 5px !important;
}

.btn-ghost:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: #888888;
}

/* ============================================================
   5. HEADER
   ============================================================ */
.site-header,
.header-main,
.header-top-bar,
.header-sticky {
    background-color: #000000 !important;
    border-bottom-color: #222222 !important;
    color: #ffffff;
}

.header-top-bar {
    background-color: #0d0d0d !important;
    border-bottom: 1px solid #222222 !important;
}

.top-bar-links a,
.header-nav a,
.nav-link {
    color: #b0b0b0 !important;
}

.top-bar-links a:hover,
.header-nav a:hover,
.nav-link:hover {
    color: #ffffff !important;
}

/* Desktop top-level nav items — white text */
.desktop-nav .main-menu > li > a {
    color: #ffffff !important;
}

.desktop-nav .main-menu > li > a:hover {
    color: #cccccc !important;
}

/* Underline indicator — white */
.desktop-nav .main-menu > li > a::after {
    background-color: #ffffff !important;
}

/* Header action buttons (search, wishlist, compare, cart, burger) */
.header-action-btn {
    color: #ffffff !important;
}

.header-action-btn:hover {
    color: #cccccc !important;
    opacity: 1 !important;
}

/* Mobile burger lines */
.mobile-menu-toggle span {
    background-color: #ffffff !important;
}

/* Navigation dropdown menus */
.nav-dropdown,
.dropdown-menu,
.mega-menu {
    background-color: #0d0d0d !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

.dropdown-item,
.mega-menu a {
    color: #b0b0b0 !important;
}

.dropdown-item:hover,
.mega-menu a:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Search box in header */
.header-search .form-control,
.search-input {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #4a4a4a !important;
}

.header-search .form-control::placeholder,
.search-input::placeholder {
    color: #666666 !important;
}

/* Mobile menu */
.mobile-nav,
.mobile-menu {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.mobile-nav a {
    color: #b0b0b0 !important;
}

.mobile-nav a:hover {
    color: #ffffff !important;
}

/* ============================================================
   6. FOOTER
   ============================================================ */
.site-footer,
footer {
    background-color: #000000 !important;
    color: #b0b0b0 !important;
    border-top: 1px solid #222222 !important;
}

.footer-bottom {
    background-color: #0d0d0d !important;
    border-top: 1px solid #1a1a1a !important;
    color: #888888 !important;
}

.site-footer a,
footer a {
    color: #888888 !important;
}

.site-footer a:hover,
footer a:hover {
    color: #ffffff !important;
}

.footer-heading,
.footer-title {
    color: #ffffff !important;
}

/* ============================================================
   7. CARDS & PRODUCT CARDS
   ============================================================ */
.card,
.product-card,
.product-card-v1 {
    background-color: #0d0d0d !important;
    border-color: #222222 !important;
    color: #ffffff !important;
}

.card-body,
.product-card__body,
.product-card-v1__body {
    background-color: transparent !important;
    color: #ffffff !important;
}

.card-header,
.card-footer {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.product-card__title,
.product-card-v1__title,
.card-title {
    color: #ffffff !important;
}

.product-card__price,
.product-card-v1__price {
    color: #ffffff !important;
}

.product-card__price--old,
.product-card-v1__price--old {
    color: #888888 !important;
}

/* ============================================================
   8. FORMS & INPUTS
   ============================================================ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #4a4a4a !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #666666 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #555555 !important;
}

.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled {
    background-color: #111111 !important;
    color: #555555 !important;
    border-color: #2a2a2a !important;
}

.form-label,
label {
    color: #cccccc !important;
}

.input-group-text {
    background-color: #1a1a1a !important;
    color: #b0b0b0 !important;
    border-color: #4a4a4a !important;
}

/* Checkbox & Radio */
.form-check-input {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
}

.form-check-input:checked {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    /* Override the white SVG checkmark with a black one so it's visible on white bg */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000000'/%3e%3c/svg%3e") !important;
}

.form-check-label {
    color: #cccccc !important;
}

/* ============================================================
   9. TABLES
   ============================================================ */
table,
.table {
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

.table th,
.table td,
thead th {
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #0d0d0d !important;
}

.table-hover tbody tr:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

thead,
.table thead tr {
    background-color: #1a1a1a !important;
}

/* ============================================================
   10. MODALS
   ============================================================ */
.modal-content {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
}

.modal-header {
    background-color: #000000 !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #ffffff !important;
}

.modal-footer {
    background-color: #000000 !important;
    border-top: 1px solid #2a2a2a !important;
}

.modal-title {
    color: #ffffff !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Close button (×) in modal */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* ============================================================
   11. MINI CART
   ============================================================ */
.mini-cart,
.mini-cart__panel,
.cart-drawer {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-left: 1px solid #2a2a2a !important;
}

.mini-cart__item {
    border-bottom: 1px solid #1a1a1a !important;
    color: #ffffff !important;
}

.mini-cart__title,
.mini-cart__header {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.mini-cart__empty {
    color: #888888 !important;
}

/* ============================================================
   12. SEARCH MODAL
   ============================================================ */

/* Overlay backdrop */
.search-modal__overlay {
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(8px) !important;
}

/* Content panel */
.search-modal__content {
    background: #0d0d0d !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8) !important;
}

/* Input wrapper */
.search-modal__input-wrapper {
    border-bottom-color: #2a2a2a !important;
    background: #0d0d0d !important;
}

.search-modal__icon {
    color: #888888 !important;
}

.search-modal__input {
    background: transparent !important;
    color: #ffffff !important;
}

.search-modal__input::placeholder {
    color: #555555 !important;
}

/* Clear button */
.search-modal__clear {
    color: #888888 !important;
}

.search-modal__clear:hover {
    color: #ff6b6b !important;
}

/* Close button */
.search-modal__close {
    background: #1a1a1a !important;
    color: #cccccc !important;
    border: 1px solid #2a2a2a !important;
}

.search-modal__close:hover {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

/* Results container */
.search-modal__results {
    background: #0d0d0d !important;
}

.search-modal__results::-webkit-scrollbar-track {
    background: #0d0d0d !important;
}

.search-modal__results::-webkit-scrollbar-thumb {
    background: #2a2a2a !important;
}

.search-modal__results::-webkit-scrollbar-thumb:hover {
    background: #444444 !important;
}

/* Section titles */
.search-modal__section-title {
    color: #888888 !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding-bottom: 0.5rem;
}

/* Product cards in results */
.search-product-card {
    background: #111111 !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.search-product-card:hover,
.search-product-card.selected {
    background: #1a1a1a !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.search-product-card__image {
    background: #1a1a1a !important;
}

.search-product-card__title {
    color: #ffffff !important;
}

.search-product-card__category {
    color: #888888 !important;
}

.search-product-card__price {
    color: #ffffff !important;
}

/* List items (brands / categories sidebar) */
.search-modal__list-item {
    color: #cccccc !important;
    background: transparent !important;
}

.search-modal__list-item:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.search-modal__count {
    color: #555555 !important;
}

/* Tags */
.search-modal__tag {
    background: transparent !important;
    border-color: #2a2a2a !important;
    color: #cccccc !important;
}

.search-modal__tag:hover {
    background: #1a1a1a !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.search-modal__tag--popular {
    border-color: #555555 !important;
    color: #ff6b6b !important;
}

/* Empty / loading states */
.search-modal__empty-state,
.search-modal__loading,
.search-modal__empty {
    color: #555555 !important;
}

.search-modal__empty h3 {
    color: #888888 !important;
}

/* Keyboard hints bar */
.search-modal__hints {
    border-top-color: #2a2a2a !important;
    background: #0d0d0d !important;
    color: #555555 !important;
}

.search-modal__hints kbd {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #cccccc !important;
}

/* ============================================================
   13. PRODUCT DETAIL
   ============================================================ */
.product-detail,
.product-detail__wrapper {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.product-detail__title {
    color: #ffffff !important;
}

.product-detail__price {
    color: #ffffff !important;
}

.product-detail__price--old {
    color: #888888 !important;
}

.product-detail__description,
.product-detail__meta {
    color: #b0b0b0 !important;
}

/* ============================================================
   14. PRODUCT VARIATIONS
   ============================================================ */

/* Legacy selectors */
.variation-option,
.size-option,
.color-option__label {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.variation-option:hover,
.size-option:hover {
    border-color: #ffffff !important;
    background-color: #2a2a2a !important;
}

.variation-option.selected,
.size-option.selected {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

/* --- Size / Text option buttons (.btn-size-option) ---
   Default : outlined white border + white text
   Selected: white fill + black text
   ------------------------------------------ */
.btn-size-option {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-size-option:not(.disabled):not(.selected):hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-size-option.selected {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

.btn-size-option.disabled {
    border-color: #555555 !important;
    background-color: transparent !important;
    color: #555555 !important;
    opacity: 0.5 !important;
}

/* --- Color swatch: white selection ring on dark background --- */
.btn-color-swatch.selected {
    box-shadow: 0 0 0 2px #111111, 0 0 0 5px #ffffff !important;
}

/* --- Variation image thumbnail --- */
.btn-variation-image {
    background: #000000 !important;
    border-color: #444444 !important;
}

.btn-variation-image .no-image {
    color: #888888 !important;
}

.btn-variation-image.selected {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

.btn-variation-image .selected-check {
    color: #ffffff !important;
    background: #000000 !important;
}

/* --- Selected variation info block --- */
.selected-variation-info {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
    border-left-color: #ffffff !important;
}

/* --- Variation selector label (selected value) --- */
.variation-selector .text-primary {
    color: #aaaaaa !important;
}

/* ============================================================
   15. BREADCRUMBS & PAGINATION
   ============================================================ */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item a {
    color: #888888 !important;
}

.breadcrumb-item a:hover {
    color: #ffffff !important;
}

/* Custom .breadcrumbs nav (product detail, collections) */
.breadcrumbs a {
    color: #888888 !important;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
    color: #ffffff !important;
    opacity: 1 !important;
}

.breadcrumb-separator {
    color: #444444 !important;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: #666666 !important;
}

.page-link {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #b0b0b0 !important;
}

.page-link:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.page-item.active .page-link {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

.page-item.disabled .page-link {
    background-color: #0d0d0d !important;
    border-color: #222222 !important;
    color: #444444 !important;
}

/* ============================================================
   16. HERO SECTION
   ============================================================ */
.hero,
.hero-section {
    background-color: #000000 !important;
}

.hero__title,
.hero__subtitle {
    color: #ffffff !important;
}

/* ============================================================
   17. FILTER SIDEBAR
   ============================================================ */
.filter-sidebar,
.sidebar {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.filter-sidebar__title,
.sidebar-title {
    color: #ffffff !important;
    border-bottom-color: #2a2a2a !important;
}

.filter-sidebar a,
.sidebar a {
    color: #b0b0b0 !important;
}

.filter-sidebar a:hover,
.sidebar a:hover {
    color: #ffffff !important;
}

/* noUiSlider (price range) */
.noUi-target {
    background: #2a2a2a !important;
    border-color: #333333 !important;
}

.noUi-connect {
    background: #ffffff !important;
}

.noUi-handle {
    background: #ffffff !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
}

/* ============================================================
   18. CART PAGE
   ============================================================ */
.cart-page,
.cart-table,
.cart-summary {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.cart-item {
    border-bottom: 1px solid #1a1a1a !important;
}

.cart-summary__box,
.order-summary {
    background-color: #0d0d0d !important;
    border: 1px solid #2a2a2a !important;
    color: #ffffff !important;
}

/* ============================================================
   19. BADGES
   ============================================================ */
.badge.bg-light,
.badge.bg-white {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.badge.text-dark {
    color: #ffffff !important;
}

/* ============================================================
   20. ALERTS & TOASTS
   ============================================================ */
.alert {
    border-color: #333333 !important;
}

.alert-light,
.alert-white {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ============================================================
   21. HORIZONTAL RULES & DIVIDERS
   ============================================================ */
hr,
.divider {
    border-color: #2a2a2a !important;
    opacity: 1 !important;
}

/* ============================================================
   22. SCROLLBAR (Webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0d0d0d;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* ============================================================
   23. COOKIE CONSENT
   ============================================================ */
#cc-banner #cc-bar {
    background-color: #111111;
    border-top: 1px solid #2a2a2a;
}

#cc-banner #cc-bar-title {
    color: #e0e0e0;
}

#cc-banner #cc-bar-desc {
    color: #a0a0a0;
}

#cc-banner #cc-bar-desc a {
    color: #cccccc;
}

#cc-banner #cc-panel {
    background-color: #0d0d0d;
    border-top: 1px solid #2a2a2a;
}

#cc-banner #cc-panel-title {
    color: #e0e0e0;
}

#cc-banner .cc-cat {
    background-color: #1a1a1a;
    border-color: #2a2a2a;
}

#cc-banner .cc-cat-name {
    color: #e0e0e0;
}

#cc-banner .cc-cat-desc {
    color: #888888;
}

#cc-banner .cc-btn-ghost {
    color: #a0a0a0;
    border-color: #3a3a3a;
}

#cc-banner .cc-btn-ghost:hover {
    color: #e0e0e0;
    border-color: #888888;
}

/* ============================================================
   24. HEADER DROPDOWNS — Account, Culture, Currency
   ============================================================ */

/* --- Shared dropdown panel base --- */
.user-account-dropdown,
.culture-dropdown,
.currency-dropdown {
    background-color: #111111 !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
}

/* ── User Account Widget ─────────────────────────────── */

/* Toggle button */
.user-account-toggle {
    color: #ffffff !important;
}

/* Dropdown header bar */
.user-account-header {
    background-color: #1a1a1a !important;
    border-bottom-color: #2a2a2a !important;
}

.user-account-header i {
    color: #ffffff !important;
}

.user-name {
    color: #ffffff !important;
}

/* Menu items */
.user-account-link {
    color: #cccccc !important;
    background: transparent !important;
}

.user-account-link:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Logout */
.user-account-logout {
    color: #ff6b6b !important;
}

.user-account-logout:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #ff6b6b !important;
}

/* Divider */
.user-account-divider {
    border-color: #2a2a2a !important;
    background-color: #2a2a2a !important;
}

/* ── Culture / Language Selector ─────────────────────── */

.culture-item {
    color: #cccccc !important;
}

.culture-item:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ── Currency Selector ───────────────────────────────── */

/* Toggle button text/symbol */
.currency-toggle {
    color: #ffffff !important;
}

/* Dropdown header */
.currency-dropdown-header {
    background-color: #1a1a1a !important;
    border-bottom-color: #2a2a2a !important;
    color: #888888 !important;
}

/* Scrollbar track/thumb */
.currency-list::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}

.currency-list::-webkit-scrollbar-thumb {
    background: #333333 !important;
}

/* Currency items */
.currency-item {
    color: #cccccc !important;
    background: transparent !important;
}

.currency-item:hover:not(:disabled) {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Active/selected currency */
.currency-item.active,
.currency-item[data-is-active="true"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.currency-item .currency-code,
.currency-item .text-muted {
    color: #888888 !important;
}

.currency-item.active .currency-code {
    color: #cccccc !important;
}

/* ============================================================
   25. PRODUCT COMPARISON
   ============================================================ */
.comparison-table {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.comparison-table th,
.comparison-table td {
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.comparison-table thead th {
    background-color: #1a1a1a !important;
}

/* ============================================================
   26. PAGE BUILDER SECTIONS
   ============================================================ */
.pb-section,
.page-builder-section {
    background-color: #000000;
    color: #ffffff;
}

/* Alternating region using the gray tone */
.pb-section--alt,
.page-builder-section--alt,
.section-gray {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ============================================================
   27. OWL CAROUSELS (New Arrivals, Popular, Trending, Top Rated)
   ============================================================ */

/* Section background — was var(--bg-light) which is white/light */
.new-arrivals-carousel-section {
    background-color: #000000 !important;
}

/* Alternating sections use the dark gray */
.new-arrivals-carousel-section:nth-of-type(even) {
    background-color: #1a1a1a !important;
}

/* Section title & nav arrows */
.new-arrivals-carousel-title {
    color: #ffffff !important;
}

.owl-nav-btn {
    color: #ffffff !important;
}

.owl-nav-btn:hover {
    color: var(--color-accent) !important;
}

.owl-nav-btn:disabled {
    color: #444444 !important;
}

/* Product card — was var(--color-white) */
.carousel-product-card {
    background-color: #000000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.carousel-product-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Image container — was var(--color-light-gray) */
.carousel-product-images {
    background-color: #000000 !important;
}

/* Product info area */
.carousel-product-info {
    background-color: #000000 !important;
}

/* Product title & link */
.carousel-product-title a {
    color: #ffffff !important;
}

.carousel-product-title a:hover {
    color: var(--color-accent) !important;
}

/* Variation count */
.carousel-product-variations {
    color: #888888 !important;
}

/* Prices */
.price-current,
.price-from {
    color: #ffffff !important;
}

.price-old {
    color: #666666 !important;
}

/* Owl dots */
.new-arrivals-owl .owl-dot {
    background-color: #333333 !important;
}

.new-arrivals-owl .owl-dot.active {
    background-color: #ffffff !important;
}

.new-arrivals-owl .owl-dot:hover {
    background-color: var(--color-accent) !important;
}

/* "View All" button at carousel bottom */
.new-arrivals-carousel-section .btn-outline-dark {
    color: #ffffff !important;
    border-color: #555555 !important;
}

.new-arrivals-carousel-section .btn-outline-dark:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   28. PRODUCT DETAIL PAGE
   ========================================================================== */

/* --- Gallery --- */
.gallery-main-image {
    background-color: #111111 !important;
}

.gallery-thumbnails .thumbnail {
    background-color: #111111 !important;
    border-color: #444444 !important;
}

.gallery-thumbnails .thumbnail.active,
.gallery-thumbnails .thumbnail:hover {
    border-color: #ffffff !important;
}

.gallery-zoom-btn {
    background-color: #222222 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

/* --- Product category links (above product title) --- */
.product-header .product-category {
    color: #888888 !important;
}

.product-header .product-category a {
    color: #888888 !important;
}

.product-header .product-category a:hover,
.product-header .product-category a:focus {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* --- Price section borders --- */
.product-price-section {
    border-top-color: #333333 !important;
    border-bottom-color: #333333 !important;
}

/* --- Price & description text visibility --- */
.product-description,
.product-description p {
    color: #cccccc !important;
}

/* Final price span (uses text-primary class — override to white) */
.price-display .final-price-container span {
    color: #ffffff !important;
}

/* "Total incl. VAT" span inside VAT small — uses text-primary, force white */
.price-display small .text-primary,
.price-display small span.ms-2 {
    color: #cccccc !important;
}

.price-display .old-price {
    color: #888888 !important;
}

.price-display small.text-muted,
.price-display .text-muted {
    color: #888888 !important;
}

/* --- Quantity selector: outlined white, transparent background --- */
.quantity-selector {
    border: 2px solid #ffffff !important;
    background-color: transparent !important;
}

.qty-btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.qty-btn:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.qty-input {
    background-color: transparent !important;
    color: #ffffff !important;
    border-left: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* --- Product features block --- */
.product-features {
    background-color: #111111 !important;
}

/* --- Accordion --- */
.product-accordion,
.accordion-item {
    border-color: #333333 !important;
}

.accordion-header {
    color: #ffffff !important;
    background: transparent !important;
}

.accordion-header:hover {
    color: #cccccc !important;
}

.accordion-content,
.accordion-content p,
.accordion-content li,
.accordion-content strong {
    color: #cccccc !important;
}

.accordion-content a {
    color: #aaaaaa !important;
}

.accordion-content a:hover {
    color: #ffffff !important;
}

/* --- Product info table: SKU / Product Code code elements --- */
.product-info-table code {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

.product-info-table .table,
.product-info-table td {
    color: #cccccc !important;
    border-color: #333333 !important;
}

/* --- Logo invert in dark mode --- */
.header-logo img {
    filter: invert(1) brightness(2) !important;
}

/* ==========================================================================
   29. SKELETONS
   ========================================================================== */

/* --- Shimmer animation — dark variant ---
   Replaces the light #f0f0f0 / #f8f8f8 shimmer with dark tones
   ---------------------------------------- */
.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #2a2a2a 20%,
        #1a1a1a 40%,
        #1a1a1a 100%
    ) !important;
    background-size: 1000px 100% !important;
}

/* --- skeleton-text base block --- */
.skeleton-text {
    background: #2a2a2a !important;
}

.skeleton-text::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.06),
        transparent
    ) !important;
}

/* --- Gallery skeleton blocks --- */
.skeleton-main-image,
.skeleton-thumbnail {
    background: #1a1a1a !important;
}

/* --- Button / input skeleton blocks --- */
.skeleton-button,
.skeleton-input {
    background: #2a2a2a !important;
}

/* --- Product card skeleton --- */
.skeleton-product-card {
    background: #111111 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.skeleton-product-image {
    background: #1a1a1a !important;
}

/* --- Top Banner skeleton (inline section uses #f4f4f4 bg) --- */
.skeleton-banner {
    background: linear-gradient(
        90deg,
        #111111 25%,
        #222222 50%,
        #111111 75%
    ) !important;
    background-size: 200% 100% !important;
}

/* --- Landing page skeleton --- */
.landing-page-skeleton .landing-skeleton-section {
    background-color: #000000 !important;
}

.landing-page-skeleton .landing-skeleton-section.bg-light {
    background-color: #111111 !important;
}

.landing-skeleton-image {
    background-color: #1a1a1a !important;
}

/* landing-skeleton-stat */
.landing-skeleton-stat {
    background: #2a2a2a !important;
}

/* CTA section already dark (#1a1a1a) — deepen slightly */
.landing-skeleton-cta {
    background-color: #0d0d0d !important;
}

.landing-skeleton-cta .skeleton-text {
    background-color: #2a2a2a !important;
}

.landing-skeleton-button {
    background-color: #2a2a2a !important;
}

/* ============================================================
   30. CHECKOUT FLOW
   ============================================================ */

/* ----------------------------------------------------------
   30a. Bootstrap utility overrides (used across checkout)
   ---------------------------------------------------------- */

/* text-primary is #000 in our theme = invisible on dark bg */
.text-primary {
    color: #ffffff !important;
}

/* text-dark / text-black are #000 — flip to white */
.text-dark,
.text-black {
    color: #ffffff !important;
}

/* text-muted is dark gray — lighten for dark backgrounds */
.text-muted {
    color: #888888 !important;
}

/* bg-light card headers, table heads, alert-light, etc. */
.bg-light {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* bg-white used on card-header bg-white */
.bg-white {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

/* alert-light */
.alert-light {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #cccccc !important;
}

/* alert-info */
.alert-info {
    background-color: #0a1a2a !important;
    border-color: #17a2b8 !important;
    color: #7ed3e8 !important;
}

/* alert-warning */
.alert-warning {
    background-color: #1a1500 !important;
    border-color: #ffc107 !important;
    color: #ffd454 !important;
}

/* alert-danger */
.alert-danger {
    background-color: #1a0a0a !important;
    border-color: #dc3545 !important;
    color: #f08a93 !important;
}

/* alert-success */
.alert-success {
    background-color: #0a1a0a !important;
    border-color: #28a745 !important;
    color: #6dd880 !important;
}

/* Bootstrap table utilities */
.table-light,
thead.bg-light,
tfoot.bg-light,
.table thead.table-light th {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.badge.bg-light.text-dark,
.badge.bg-light {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

.badge.bg-secondary {
    background-color: #2a2a2a !important;
    color: #cccccc !important;
}

/* spinner color on dark */
.spinner-border.text-primary {
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   30b. Cart page (Cart.razor + cart-page.css)
   ---------------------------------------------------------- */
.cart-header-section {
    background-color: #0d0d0d !important;
    border-bottom: 1px solid #222222 !important;
}

.cart-main-title {
    color: #ffffff !important;
}

.empty-cart-wrapper {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Cart item row */
.cart-item {
    background-color: transparent !important;
    border-bottom-color: #222222 !important;
    color: #ffffff !important;
}

.cart-item-inner {
    background-color: transparent !important;
}

.item-title {
    color: #ffffff !important;
}

.item-subtitle {
    color: #888888 !important;
}

.item-attributes .attribute-item {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #b0b0b0 !important;
}

/* Quantity controls */
.quantity-selector {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}

.qty-btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

.qty-btn:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.qty-input {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Remove item button */
.remove-item-btn {
    background-color: transparent !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.remove-item-btn:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Order summary sidebar on cart page */
.order-summary-wrapper,
.order-summary {
    background-color: #0d0d0d !important;
    border: 1px solid #222222 !important;
    color: #ffffff !important;
}

.summary-title {
    color: #ffffff !important;
    border-bottom-color: #2a2a2a !important;
}

.summary-row,
.summary-value {
    color: #ffffff !important;
}

.summary-label {
    color: #888888 !important;
}

/* Coupon section */
.coupon-section {
    background-color: transparent !important;
    border-top-color: #222222 !important;
}

.coupon-label {
    color: #cccccc !important;
}

.coupon-input {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

.coupon-message {
    color: #b0b0b0 !important;
}

/* Security message */
.security-message {
    color: #888888 !important;
}

.checkout-btn {
    border-radius: 5px !important;
}

/* ----------------------------------------------------------
   30c. Checkout page (Checkout.razor)
   ---------------------------------------------------------- */
.checkout-page {
    background-color: #000000 !important;
    color: #ffffff !important;
    margin-top: 50px !important;
}

.checkout-header h1,
.checkout-header .h3 {
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   30d. Step indicator (CheckoutStepIndicator.razor inline styles)
       These selectors override the component's own <style> block
   ---------------------------------------------------------- */
.progress-line {
    background-color: #2a2a2a !important;
}

.progress-line-active {
    background-color: #ffffff !important;
}

.step-circle {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
    color: #888888 !important;
}

.step-item.active .step-circle {
    border-color: #ffffff !important;
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.step-item.completed .step-circle {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

.step-label strong {
    color: #888888 !important;
}

.step-item.active .step-label strong {
    color: #ffffff !important;
}

.step-item.completed .step-label strong {
    color: #b0b0b0 !important;
}

.step-label small {
    color: #666666 !important;
}

/* ----------------------------------------------------------
   30e. Checkout cards (shipping address, shipping method,
        payment method, order summary, terms)
   ---------------------------------------------------------- */
.checkout-page .card,
.checkout-page .card-header,
.checkout-page .card-body,
.checkout-page .card-footer {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.checkout-page .card-header {
    background-color: #1a1a1a !important;
    border-bottom-color: #2a2a2a !important;
}

/* card-header with bg-primary (order summary header) */
.order-summary-card .card-header.bg-primary {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333333 !important;
}

/* ----------------------------------------------------------
   30f. Payment method selection items
        (selected state: border-primary bg-light)
   ---------------------------------------------------------- */
.payment-methods .payment-method-item {
    background-color: #0d0d0d !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.payment-methods .payment-method-item.border-primary.bg-light {
    background-color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* ----------------------------------------------------------
   30g. Shipping method selection items
        (selected state: border-primary bg-light)
   ---------------------------------------------------------- */
.shipping-methods .mb-3.border {
    background-color: #0d0d0d !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.shipping-methods .mb-3.border-primary.bg-light {
    background-color: #1a1a1a !important;
    border-color: #ffffff !important;
}

/* selected method price */
.shipping-methods .text-primary {
    color: #ffffff !important;
}

/* ----------------------------------------------------------
   30h. Payment processing / success / failed pages
   ---------------------------------------------------------- */
.payment-processing-page,
.payment-success-page,
.payment-failed-page {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Failed page cards */
.payment-failed-page .card,
.payment-failed-page .card-header,
.payment-failed-page .card-body {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.payment-failed-page .card.border-0.bg-light {
    background-color: #1a1a1a !important;
}

/* ----------------------------------------------------------
   30i. Order Confirmation page (OrderConfirmation.razor)
   ---------------------------------------------------------- */
.order-confirmation,
.order-confirmation-page {
    color: #ffffff !important;
}

/* Top "Thank you for your order" success banner — force readable text on dark green bg */
.order-confirmation .alert-success,
.order-confirmation-page .alert-success,
.order-confirmation .alert-success .alert-heading,
.order-confirmation-page .alert-success .alert-heading,
.order-confirmation .alert-success p,
.order-confirmation-page .alert-success p,
.order-confirmation .alert-success strong,
.order-confirmation-page .alert-success strong {
    color: #6dd880 !important;
}

.order-confirmation .alert-success .badge.bg-primary,
.order-confirmation-page .alert-success .badge.bg-primary {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Cards on the order confirmation page */
.order-confirmation .card,
.order-confirmation-page .card {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.order-confirmation .card-header,
.order-confirmation-page .card-header,
.order-confirmation .card-header.bg-white,
.order-confirmation-page .card-header.bg-white {
    background-color: #1a1a1a !important;
    border-bottom-color: #2a2a2a !important;
    color: #ffffff !important;
}

.order-confirmation .card-body,
.order-confirmation-page .card-body {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

.order-confirmation .card-body p,
.order-confirmation-page .card-body p,
.order-confirmation .card-body strong,
.order-confirmation-page .card-body strong,
.order-confirmation .card-body h5,
.order-confirmation-page .card-body h5,
.order-confirmation .card-body h6,
.order-confirmation-page .card-body h6,
.order-confirmation .card-header h5,
.order-confirmation-page .card-header h5 {
    color: #ffffff !important;
}

/* Muted helper text (labels like "Payment Method", "Shipping Address", footers) */
.order-confirmation .text-muted,
.order-confirmation-page .text-muted,
.order-confirmation small.text-muted,
.order-confirmation-page small.text-muted,
.order-confirmation h6.text-muted,
.order-confirmation-page h6.text-muted {
    color: #b0b0b0 !important;
}

/* Order items table */
.order-items-table {
    color: #ffffff !important;
    --bs-table-bg: transparent;
    --bs-table-color: #ffffff;
    --bs-table-hover-bg: #1a1a1a;
    --bs-table-hover-color: #ffffff;
    --bs-table-border-color: #2a2a2a;
}

.order-items-table thead.table-light th,
.order-items-table tfoot.bg-light td {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

.order-items-table tbody td {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

.order-items-table tbody td .text-muted,
.order-items-table tbody td small.text-muted {
    color: #b0b0b0 !important;
}

/* "Grand Total" / line total text-primary -> use white on dark */
.order-items-table .text-primary,
.order-confirmation .text-primary,
.order-confirmation-page .text-primary,
.order-confirmation h5.text-primary,
.order-confirmation-page h5.text-primary {
    color: #ffffff !important;
}

/* "What Happens Next" / order summary "bg-light" callouts */
.order-confirmation .card.border-0.bg-light,
.order-confirmation-page .card.border-0.bg-light {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

/* Estimated delivery date strong.text-dark */
.order-confirmation strong.text-dark,
.order-confirmation-page strong.text-dark,
strong.text-dark {
    color: #ffffff !important;
}

/* alert-light border used for delivery date / email info boxes */
.order-confirmation .alert-light.border,
.order-confirmation-page .alert-light.border,
.alert-light.border {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #cccccc !important;
}

.order-confirmation .alert-light.border .text-muted,
.order-confirmation-page .alert-light.border .text-muted,
.order-confirmation .alert-light.border small {
    color: #b0b0b0 !important;
}

/* Quantity badge bg-light text-dark inside items table */
.order-confirmation .badge.bg-light.text-dark,
.order-confirmation-page .badge.bg-light.text-dark {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

/* Horizontal rule between summary rows */
.order-confirmation hr,
.order-confirmation-page hr {
    border-color: #2a2a2a !important;
    opacity: 1 !important;
}

/* Outline secondary "Print" button */
.order-confirmation .btn-outline-secondary,
.order-confirmation-page .btn-outline-secondary {
    color: #ffffff !important;
    border-color: #555555 !important;
}

.order-confirmation .btn-outline-secondary:hover,
.order-confirmation-page .btn-outline-secondary:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #777777 !important;
}

/* ----------------------------------------------------------
   30j. MyOrders / MyAccount pages
   ---------------------------------------------------------- */
.my-orders-page .card,
.my-account-page .card {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* ============================================================
   31. ABOUT US PAGE
   ============================================================ */

/* Page root text */
.about-us-page {
    color: #ffffff;
}

/* Section backgrounds */
.about-section--light {
    background: #0d0d0d !important;
}

.about-section--dark {
    background: #000000 !important;
}

.about-section--accent {
    background: #1a1a1a !important;
    /* border accent stays — no override needed */
}

/* Section title: was var(--color-primary) = #000 — invisible on dark bg */
.about-section-title {
    color: #ffffff !important;
}

/* The --light modifier was already white — keep it */
.about-section-title--light {
    color: #ffffff !important;
}

/* Body text */
.about-section-text {
    color: #b0b0b0 !important;
}

.about-section-text--light {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* Logo block: was var(--bg-light) background with light border */
.about-logo-block {
    background: #0d0d0d !important;
    border-color: #2a2a2a !important;
}

.about-logo-caption {
    color: #b0b0b0 !important;
}

/* was var(--color-primary) = #000 — invisible */
.about-logo-caption strong {
    color: #ffffff !important;
}

/* Features item text — already white in original, but guard it */
.about-features-item strong {
    color: #ffffff !important;
}

.about-features-item p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Tagline */
.about-tagline {
    color: #ffffff !important;
}

/* ============================================================
   32. OFFCANVAS PANELS
   ============================================================ */

/* ----------------------------------------------------------
   32a. Bootstrap native .offcanvas (any panel using BS5 API)
   ---------------------------------------------------------- */
.offcanvas {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

.offcanvas-header {
    background-color: #000000 !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #ffffff !important;
}

.offcanvas-title {
    color: #ffffff !important;
}

.offcanvas-body {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

/* BS5 backdrop */
.offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ----------------------------------------------------------
   32b. Mini-cart offcanvas (.mini-cart-dropdown)
        mini-cart.css uses var(--color-white) and var(--color-black)
        which don't remap cleanly — override directly
   ---------------------------------------------------------- */
.mini-cart-dropdown {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-left: 1px solid #323232 !important;
}

.mini-cart-header {
    background-color: #000000 !important;
    border-bottom-color: #2a2a2a !important;
    color: #ffffff !important;
}

.mini-cart-title {
    color: #ffffff !important;
}

.mini-cart-close {
    background: transparent !important;
    color: #b0b0b0 !important;
    border-color: #444444 !important;
}

.mini-cart-close:hover {
    color: #ffffff !important;
    border-color: #888888 !important;
}

.mini-cart-body {
    background-color: #0d0d0d !important;
}

.mini-cart-loading {
    color: #888888 !important;
}

/* Spinner inside mini cart */
.mini-cart-loading .spinner {
    border-color: #2a2a2a !important;
    border-top-color: #ffffff !important;
}

/* Individual product row in mini cart */
.mini-products-list li,
.mini-products-list .product {
    border-bottom-color: #323232 !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

.mini-products-list .product-name a,
.mini-products-list .product-title a {
    color: #b0b0b0 !important;
}

.mini-products-list .product-name a:hover,
.mini-products-list .product-title a:hover {
    color: #ffffff !important;
}

.mini-products-list .product-details,
.mini-products-list .product-price {
    color: #b0b0b0 !important;
}

/* Remove / delete button on mini cart items */
.mini-products-list .btn-remove,
.mini-products-list .remove-item {
    color: #888888 !important;
    background: transparent !important;
    border-color: transparent !important;
}

.mini-products-list .btn-remove:hover,
.mini-products-list .remove-item:hover {
    color: #dc3545 !important;
}

/* Mini cart totals row */
.mini-cart-totals .totals {
    background-color: #000000 !important;
    border-top-color: #323232 !important;
}

.mini-cart-totals .label {
    color: #b0b0b0 !important;
}

/* Total price — was text-primary (#000) */
.mini-cart-totals .price-total.text-primary,
.mini-cart-totals [data-total] {
    color: #ffffff !important;
}

.mini-cart-totals .price.text-muted,
.mini-cart-totals [data-vat] {
    color: #888888 !important;
}

.mini-cart-empty {
    background-color: transparent !important;
    color: #888888 !important;
}

/* Mini cart footer */
.mini-cart-footer {
    background-color: #000000 !important;
    border-top: 1px solid #323232 !important;
}

/* Mini cart backdrop overlay */
.mini-cart-backdrop {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* View Cart outlined button in mini cart */
.mini-cart-footer .btn-outline-dark {
    background-color: transparent !important;
    color: #b0b0b0 !important;
    border-color: #555555 !important;
}

.mini-cart-footer .btn-outline-dark:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: #888888 !important;
}

/* ----------------------------------------------------------
   32c. Filter offcanvas (_ProductCatalogGrid.razor)
        Inline <style> uses hardcoded #fff and #e9ecef —
        override by class name so the cascade wins
   ---------------------------------------------------------- */
.filter-offcanvas {
    background: #0d0d0d !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
}

.filter-offcanvas-header {
    border-bottom-color: #2a2a2a !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.filter-offcanvas-header h5,
.filter-offcanvas-header .offcanvas-title,
.filter-offcanvas-header strong {
    color: #ffffff !important;
}

/* Close button inside filter offcanvas header */
.filter-offcanvas-header button,
.filter-offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.filter-offcanvas-body {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}

/* Backdrop for filter offcanvas (already rgba black, but deepen it) */
.filter-offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* Filter options inside the panel */
.filter-offcanvas-body .form-check-label {
    color: #cccccc !important;
}

.filter-offcanvas-body .form-label,
.filter-offcanvas-body label {
    color: #cccccc !important;
}

.filter-offcanvas-body hr {
    border-color: #2a2a2a !important;
}

/* Section titles inside filter panel */
.filter-offcanvas-body .filter-group-title,
.filter-offcanvas-body h6,
.filter-offcanvas-body h5 {
    color: #ffffff !important;
    border-bottom-color: #2a2a2a !important;
}

/* FilterSidebar component (qcms-filter-* classes from filterSidebar.css) */
.filter-offcanvas-body .qcms-filter-sidebar {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.filter-offcanvas-body .qcms-filter-group {
    border-bottom-color: #2a2a2a !important;
}

.filter-offcanvas-body .qcms-filter-header {
    color: #cccccc !important;
}

.filter-offcanvas-body .qcms-filter-header:hover {
    color: #ffffff !important;
}

/* Checkboxes and radio buttons */
.filter-offcanvas-body .form-check-input {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
}

.filter-offcanvas-body .form-check-input:checked {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Price range slider */
.filter-offcanvas-body #priceRangeSlider .noUi-base {
    background: #333333 !important;
}

.filter-offcanvas-body #priceRangeSlider .noUi-connect {
    background: #ffffff !important;
}

.filter-offcanvas-body .qcms-price-label {
    color: #cccccc !important;
}

/* Brand logos inside filter */
.filter-offcanvas-body .qcms-brand-logo {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

.filter-offcanvas-body .form-check-input:checked ~ .form-check-label .qcms-brand-logo {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* Show more / less buttons */
.filter-offcanvas-body .qcms-show-more-btn {
    color: #888888 !important;
}

.filter-offcanvas-body .qcms-show-more-btn:hover {
    color: #ffffff !important;
}

/* Color swatches border */
.filter-offcanvas-body .qcms-color-swatch {
    border-color: #333333 !important;
}

.filter-offcanvas-body .qcms-color-name {
    color: #888888 !important;
}

/* Active filter count badge */
.filter-offcanvas-body .qcms-filter-selected-count {
    color: #ffffff !important;
}

/* ============================================================
   33. PRODUCT PRESENTATION MODAL ({{show-in-modal}})
   ============================================================ */

/* Trigger button below short description */
.presentation-modal-trigger {
    color: #888888 !important;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.presentation-modal-trigger:hover {
    color: #ffffff !important;
}

/* Modal shell */
.presentation-modal .modal-dialog {
    max-width: 1100px;
}

.presentation-modal-content {
    background-color: #000000 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
}

.presentation-modal-header {
    background-color: #000000 !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #ffffff !important;
    padding: 1rem 1.5rem;
}

.presentation-modal-header .modal-title {
    color: #ffffff !important;
    font-size: var(--font-size-lg);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.presentation-modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Body scrolls independently, landing page fills it */
.presentation-modal-body {
    background-color: #000000 !important;
    padding: 0 !important;
    overflow-y: auto;
    max-height: 82vh;
}

/* The rendered landing page inside the modal */
.presentation-modal-body .product-landing-page {
    background-color: #000000;
}

/* ============================================================
   34. PRODUCT SEARCH RESULTS PAGE (ProductSearchResults.razor)
   ============================================================ */

/* Products count + sort bar */
.products-count {
    color: #cccccc !important;
}

.products-count strong {
    color: #ffffff !important;
}

/* Sort select */
#sortSelect {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

#sortSelect option {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Divider below sort bar */
#productsGrid ~ hr,
.col-12.col-lg-10 > hr {
    border-color: #2a2a2a !important;
}

/* Related searches block */
.related-searches {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #cccccc !important;
}

.related-searches h6 {
    color: #ffffff !important;
}

/* Popular searches block (no-results + empty state) */
.popular-searches h6 {
    color: #ffffff !important;
}

/* Suggestions list (no-results) */
.suggestions h6 {
    color: #ffffff !important;
}

.suggestions ul li {
    color: #aaaaaa !important;
}

/* Empty state (no query) */
.col-12.col-lg-10 .text-center.py-5 h3 {
    color: #ffffff !important;
}

/* ============================================================
   34b. SEARCH FILTER SIDEBAR (SearchFilterSidebar.razor)
   ============================================================ */

/* Sticky sidebar wrapper */
.search-filter-sidebar.qcms-filter-sidebar {
    background: transparent !important;
    box-shadow: none !important;
}

/* Search info card */
.search-info-card {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #cccccc !important;
}

.search-info-card h6 {
    color: #ffffff !important;
}

.search-info-card .text-muted {
    color: #888888 !important;
}

.search-info-card hr {
    border-color: #2a2a2a !important;
}

/* Clear filters button */
#clearSearchFilters {
    color: #aaaaaa !important;
    border-color: #333333 !important;
    background: transparent !important;
}

#clearSearchFilters:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Active filters header */
.active-filters-header {
    color: #aaaaaa !important;
}

.active-filters-header h6 {
    color: #cccccc !important;
}

/* Active filters summary card (at bottom of sidebar) */
.active-filters-summary {
    background-color: #111111 !important;
    border-color: #2a2a2a !important;
}

.active-filters-summary h6 {
    color: #cccccc !important;
}

/* Filter group titles */
.search-filter-sidebar .qcms-filter-group {
    border-bottom-color: #2a2a2a !important;
}

.search-filter-sidebar .filter-title {
    color: #ffffff !important;
}

.search-filter-sidebar .qcms-filter-header {
    color: #cccccc !important;
}

.search-filter-sidebar .qcms-filter-header:hover {
    color: #ffffff !important;
}

/* Toggle chevron icon */
.search-filter-sidebar .toggle-icon {
    color: #555555 !important;
}

/* Price inputs */
.search-filter-sidebar .form-control {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #4a4a4a !important;
}

.search-filter-sidebar .form-control::placeholder {
    color: #555555 !important;
}

.search-filter-sidebar .form-label {
    color: #aaaaaa !important;
}

/* Apply price button — outlined */
.search-filter-sidebar #applyPriceFilter,
.search-filter-sidebar .btn-primary {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.search-filter-sidebar #applyPriceFilter:hover,
.search-filter-sidebar .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Checkboxes — In Stock / On Sale */
.search-filter-sidebar .form-check-input {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
}

.search-filter-sidebar .form-check-input:checked {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.search-filter-sidebar .form-check-label {
    color: #cccccc !important;
}

/* hr separators */
.search-filter-sidebar hr {
    border-color: #2a2a2a !important;
}

/* Top Spacer */
.top-spacer {
    background-color: #000000 !important;
}

/* ==========================================================================
   Section 35 — Contact Page
   ========================================================================== */
.contact-card--business .contact-card-btn:hover {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

/* ==========================================================================
   Section 36 — Bootstrap Modal (dark mode)
   ========================================================================== */
.modal-content {
    background-color: #1a1a1a;
    border-color: #333;
    color: #e0e0e0;
}

.modal-header,
.modal-footer {
    border-color: #333;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   Section 37 — Typed Related Products (Phase 2)
   ========================================================================== */
.product-accessories-section,
.product-spare-parts-section,
.cart-cross-sell-section {
    border-top-color: #2a2a2a;
}

.product-upsell-banner .d-flex.bg-light-subtle {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
    color: #e0e0e0;
}

.product-upsell-banner a {
    color: #e0e0e0;
}

.product-upsell-banner .upsell-thumb {
    border-color: #333;
}