/*
 * ML Workwear dark foundation v1
 * Final compatibility layer for legacy PrestaShop Classic colors.
 * Loaded after the existing workwear styles so old white/blue/dark-text
 * declarations cannot leak back into the redesigned dark UI.
 */
:root {
  --ww-bg: #121212;
  --ww-surface: #181818;
  --ww-surface-raised: #1f1f1f;
  --ww-surface-soft: #242424;
  --ww-border: #2a2a2a;
  --ww-border-active: #3a3a3a;
  --ww-text: #f5f5f5;
  --ww-text-secondary: #b6b6b6;
  --ww-text-muted: #818181;
  --ww-accent: #ff5500;
  --ww-accent-hover: #e64d00;
  --ww-special: #ccff00;
  --ww-text-on-accent: #101010;
}

html,
body,
#wrapper,
#main,
#content-wrapper,
.page-content,
.page-home {
  background-color: var(--ww-bg) !important;
  color: var(--ww-text);
}

/* Generic Classic surfaces that otherwise fall back to white/light gray. */
.card,
.card-block,
.block-category,
.block-categories,
#search_filters,
.faceted-filter-ui,
.pagination,
.tabs,
.tab-content,
.product-information,
.product-actions,
.cart-container,
.cart-summary,
.cart-summary-line,
.checkout-step,
.definition-list,
.contact-form,
.contact-rich,
.address,
.page-addresses .address,
.page-order-detail .box,
.page-my-account #content .links a,
.order-confirmation-table,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.dropdown-menu,
.popover,
.list-group-item,
.table,
.table-striped tbody tr:nth-of-type(odd),
#blockcart-modal .modal-content,
#product-modal .modal-content {
  background-color: var(--ww-surface) !important;
  color: var(--ww-text) !important;
  border-color: var(--ww-border) !important;
}

/* Raised / interactive surfaces. */
.dropdown-item,
.select-list,
.list-group-item,
.nav-tabs,
.input-group-addon,
.input-group-btn,
.custom-select,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
  background-color: var(--ww-surface-soft) !important;
  color: var(--ww-text) !important;
  border-color: var(--ww-border-active) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ww-text-muted) !important;
  opacity: 1;
}

/* Legacy #232323 / #363a42 text fallbacks. */
body,
p,
label,
.label,
.form-control-label,
.block-title,
.card-title,
.card-text,
.product-title,
.product-title a,
.product-description,
.product-information,
.product-actions,
.product-features,
.product-features .data-sheet,
.product-features .data-sheet dt,
.product-features .data-sheet dd,
.cart-summary,
.cart-summary-line,
.checkout-step,
.address,
.contact-rich,
.contact-form,
.modal-content,
.dropdown-menu,
.dropdown-item,
.breadcrumb,
.breadcrumb a,
.nav-link,
.tabs .nav-tabs .nav-link,
#search_filters,
#search_filters .facet-title,
#search_filters .facet-label a {
  color: var(--ww-text) !important;
}

/* Secondary Classic gray text. */
.text-muted,
.text-secondary,
.help-block,
.form-control-comment,
.product-reference,
.product-quantities,
.product-availability,
.regular-price,
.discount-percentage,
#search_filters .faceted-filter-empty,
#search_filters .facet-label .magnitude,
.breadcrumb li,
.breadcrumb li a,
.cart-summary-line .label,
.cart-summary-line .value {
  color: var(--ww-text-secondary) !important;
}

/* The old PrestaShop blue (#24b9d7) becomes the main Neon Orange accent. */
a:hover,
a:focus,
.btn-link,
.nav-link:hover,
.nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
.tabs .nav-tabs .nav-link.active,
.pagination .current a,
.pagination a:hover,
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  color: var(--ww-accent) !important;
}

:focus-visible,
.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.custom-select:focus,
#search_filters .faceted-filter-search:focus {
  border-color: var(--ww-accent) !important;
  outline-color: var(--ww-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.14) !important;
}

/* Main CTA hierarchy: Neon Orange is primary; Safety Green stays exceptional. */
.btn-primary,
.btn.add-to-cart,
.add-to-cart.btn,
.workwear-product-card__cta,
.checkout-step .continue,
.cart-detailed-actions .btn-primary,
#payment-confirmation .btn-primary {
  background: var(--ww-accent) !important;
  border-color: var(--ww-accent) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.add-to-cart:hover,
.btn.add-to-cart:focus,
.add-to-cart.btn:hover,
.add-to-cart.btn:focus,
.workwear-product-card__cta:hover,
.workwear-product-card__cta:focus,
.checkout-step .continue:hover,
.checkout-step .continue:focus,
.cart-detailed-actions .btn-primary:hover,
.cart-detailed-actions .btn-primary:focus,
#payment-confirmation .btn-primary:hover,
#payment-confirmation .btn-primary:focus {
  background: var(--ww-accent-hover) !important;
  border-color: var(--ww-accent-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 85, 0, 0.24) !important;
}

.btn-secondary,
.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--ww-border-active) !important;
  color: var(--ww-text) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: rgba(255, 85, 0, 0.10) !important;
  border-color: var(--ww-accent) !important;
  color: var(--ww-accent) !important;
}

/* Checkbox / radio / selected UI states formerly using PrestaShop blue. */
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input[type="radio"]:checked + span,
.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
.custom-radio input[type="radio"]:checked + span::after {
  border-color: var(--ww-accent) !important;
}

.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
.custom-radio input[type="radio"]:checked + span::after {
  color: var(--ww-accent) !important;
  background-color: var(--ww-accent) !important;
}

/* Faceted search is a separate CSS asset and had explicit Classic colors. */
#search_filters.faceted-filter-ui .facet {
  border-color: var(--ww-border) !important;
}

#search_filters.faceted-filter-ui .faceted-filter-toggle,
#search_filters.faceted-filter-ui .faceted-filter-toggle .facet-title {
  color: var(--ww-text) !important;
}

#search_filters.faceted-filter-ui .faceted-filter-toggle:focus {
  outline: 2px solid var(--ww-accent) !important;
  outline-offset: 2px;
}

#search_filters.faceted-filter-ui .faceted-filter-search {
  background: var(--ww-surface-soft) !important;
  border: 1px solid var(--ww-border-active) !important;
  color: var(--ww-text) !important;
}

#search_filters.faceted-filter-ui .faceted-filter-search:focus {
  border-color: var(--ww-accent) !important;
}

#search_filters.faceted-filter-ui .faceted-filter-empty {
  color: var(--ww-text-muted) !important;
}

#search_filters.faceted-filter-ui .faceted-filter-dropdown-menu {
  background: var(--ww-surface-raised) !important;
  border-color: var(--ww-border) !important;
}

/* Mobile Classic leftovers from custom.css. */
@media (max-width: 767.98px) {
  #header,
  .mobile-sticky-nav,
  body.mobile-filter-sheet-open #search_filters_wrapper,
  body.mobile-category-sheet-open #left-column > .block-categories,
  body.mobile-filter-sheet-open #search_filter_controls,
  body.mobile-filter-sheet-open #search_filters {
    background: var(--ww-surface) !important;
    color: var(--ww-text) !important;
    border-color: var(--ww-border) !important;
  }

  .mobile-category-sheet-header,
  body.mobile-filter-sheet-open #search_filter_controls::before {
    color: var(--ww-text) !important;
    border-color: var(--ww-border) !important;
  }

  #products .product-list-active-filters .faceted-active-filters {
    background: rgba(255, 85, 0, 0.08) !important;
    border-color: rgba(255, 85, 0, 0.35) !important;
  }

  #products .product-list-active-filters .active-filter-title {
    color: var(--ww-text-secondary) !important;
  }

  #products .product-list-active-filters .faceted-active-filter-chip {
    background: var(--ww-surface-soft) !important;
    color: var(--ww-text) !important;
    border-color: var(--ww-border-active) !important;
  }

  .mobile-sticky-nav__item.is-active {
    color: var(--ww-accent) !important;
  }

  .mobile-sticky-nav__item.is-active > .material-icons,
  .mobile-filter-sheet-close,
  .mobile-category-sheet-close,
  body.mobile-filter-sheet-open #search_filter_controls .ok {
    background: var(--ww-accent) !important;
    border-color: var(--ww-accent) !important;
    color: #ffffff !important;
  }
}

/* Classic alerts remain readable on dark surfaces without reintroducing white panels. */
.alert {
  border-color: var(--ww-border-active) !important;
}

.alert-info {
  background: rgba(255, 85, 0, 0.08) !important;
  color: var(--ww-text) !important;
  border-color: rgba(255, 85, 0, 0.30) !important;
}

/* Intentionally excluded: product image canvases, logos and PDF/document viewers.
 * Those may remain white because the underlying media is designed for a light canvas.
 */
/* Design audit fixes - 2026-08-29 */
:root {
  --ml-audit-bg: #121212;
  --ml-audit-panel: #181818;
  --ml-audit-raised: #20272b;
  --ml-audit-border: #343d42;
  --ml-audit-text: #f5f5f5;
  --ml-audit-muted: #b6b6b6;
  --ml-audit-green: #ccff00;
  --ml-audit-orange: #ff5500;
}
.workwear-legal-document__notice {
  color: var(--ml-audit-text) !important;
  background: rgba(204,255,0,.09) !important;
  border: 1px solid rgba(204,255,0,.34) !important;
  border-left: 4px solid var(--ml-audit-green) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.workwear-legal-document__notice,
.workwear-legal-document__notice p,
.workwear-legal-document__notice strong,
.workwear-legal-document__notice a { color: var(--ml-audit-text) !important; }
.product-miniature.workwear-product-card .product-thumbnail.workwear-product-card__image,
.product-miniature.workwear-product-card .product-thumbnail,
.js-product-miniature .product-thumbnail.workwear-product-card__image,
.js-product-miniature .product-thumbnail,
.product-miniature.workwear-product-card .product-thumbnail img,
.js-product-miniature .product-thumbnail img { background-color: var(--ml-audit-raised) !important; }
.product-miniature.workwear-product-card:hover .product-thumbnail,
.product-miniature.workwear-product-card:hover .product-thumbnail img,
.product-miniature.workwear-product-card:focus-within .product-thumbnail,
.product-miniature.workwear-product-card:focus-within .product-thumbnail img,
.js-product-miniature:hover .product-thumbnail,
.js-product-miniature:hover .product-thumbnail img,
.js-product-miniature:focus-within .product-thumbnail,
.js-product-miniature:focus-within .product-thumbnail img { background-color: #252d31 !important; }
#mlg-guide {
  --mlg-orange: var(--ml-audit-orange) !important;
  --mlg-orange-dark: #e64d00 !important;
  --mlg-orange-50: rgba(255,85,0,.08) !important;
  --mlg-ink: var(--ml-audit-text) !important;
  --mlg-muted: var(--ml-audit-muted) !important;
  --mlg-border: var(--ml-audit-border) !important;
  --mlg-surface: var(--ml-audit-panel) !important;
  color: var(--ml-audit-text) !important;
}
#mlg-guide .mlg-guide__hero {
  color: var(--ml-audit-text) !important;
  background: linear-gradient(135deg, rgba(204,255,0,.07), transparent 48%),
              linear-gradient(315deg, rgba(255,85,0,.11), transparent 55%),
              var(--ml-audit-panel) !important;
  border-color: var(--ml-audit-border) !important;
}
#mlg-guide .mlg-guide__hero::before,
#mlg-guide .mlg-guide__hero::after {
  border-color: rgba(204,255,0,.10) !important;
  opacity: .45;
}
#mlg-guide .mlg-guide__hero p { color: var(--ml-audit-muted) !important; }
body.page-cms.cms-id-6 #content-wrapper #content #mlg-guide .mlg-guide__hero {
  color: var(--ml-audit-text) !important;
  background: linear-gradient(135deg, rgba(204,255,0,.07), transparent 48%),
              linear-gradient(315deg, rgba(255,85,0,.11), transparent 55%),
              var(--ml-audit-panel) !important;
  border-color: var(--ml-audit-border) !important;
}
body.page-cms.cms-id-6 #content-wrapper #content #mlg-guide .mlg-guide__hero::before,
body.page-cms.cms-id-6 #content-wrapper #content #mlg-guide .mlg-guide__hero::after {
  border-color: rgba(204,255,0,.10) !important;
  opacity: .45 !important;
}
body.page-cms.cms-id-6 #content-wrapper #content #mlg-guide .mlg-guide__hero p {
  color: var(--ml-audit-muted) !important;
}
#mlg-guide .mlg-guide__mini-card,
#mlg-guide .mlg-guide__progress,
#mlg-guide .mlg-guide__step,
#mlg-guide .mlg-guide__technique-card,
#mlg-guide .mlg-guide__place,
#mlg-guide .mlg-guide__product-demo,
#mlg-guide .mlg-guide__product-picker,
#mlg-guide .mlg-guide__info-card,
#mlg-guide .mlg-guide__upload-demo > div,
#mlg-guide .mlg-guide__faq details {
  color: var(--ml-audit-text) !important;
  background: var(--ml-audit-panel) !important;
  border-color: var(--ml-audit-border) !important;
}
#mlg-guide .mlg-guide__before,
#mlg-guide .mlg-guide__discount,
#mlg-guide .mlg-guide__tip {
  color: var(--ml-audit-text) !important;
  background: #1b2022 !important;
  border: 1px solid var(--ml-audit-border) !important;
}
#mlg-guide .mlg-guide__technique-card.is-selected,
#mlg-guide .mlg-guide__place.is-selected,
#mlg-guide .mlg-guide__step--final {
  color: var(--ml-audit-text) !important;
  background: rgba(204,255,0,.08) !important;
  border-color: var(--ml-audit-green) !important;
  box-shadow: inset 0 0 0 1px rgba(204,255,0,.14);
}
#mlg-guide .mlg-guide__selected-mark { color: #111 !important; background: var(--ml-audit-green) !important; }
#mlg-guide .mlg-guide__inputs span,
#mlg-guide .mlg-guide__product-thumb {
  color: var(--ml-audit-text) !important;
  background: var(--ml-audit-raised) !important;
  border-color: var(--ml-audit-border) !important;
}
#mlg-guide .mlg-guide__example,
#mlg-guide .mlg-guide__footer {
  color: var(--ml-audit-text) !important;
  background: var(--ml-audit-bg) !important;
  border: 1px solid var(--ml-audit-border) !important;
}
#mlg-guide .mlg-guide__button--primary,
#mlg-guide .mlg-guide__cart-button {
  color: #fff !important;
  background: var(--ml-audit-orange) !important;
  border-color: var(--ml-audit-orange) !important;
}
#mlg-guide .mlg-guide__button--secondary,
#mlg-guide .mlg-guide__button--light {
  color: var(--ml-audit-text) !important;
  background: var(--ml-audit-raised) !important;
  border-color: var(--ml-audit-border) !important;
}
#mlg-guide h2,
#mlg-guide h3,
#mlg-guide strong,
#mlg-guide summary,
#mlg-guide .mlg-guide__place,
#mlg-guide .mlg-guide__progress a { color: var(--ml-audit-text) !important; }
#mlg-guide p,
#mlg-guide small,
#mlg-guide .mlg-guide__muted { color: var(--ml-audit-muted) !important; }