/* ==========================================================================
   Express Motorcycle Parts - Theme Fixes (css/emp-fixes.css)
   Targeted overrides for ALL High and Medium severity theming inconsistencies
   identified during the comprehensive theme audit.
   Load Order: Appended last after all emp-*.css files.
   Design Tokens (from style.css):
     --emp-bg: #000000;
     --emp-surface: #101011;
     --emp-line: #30363b;
     --emp-ink: #d0d7dd;
     --emp-ink-strong: #ffffff;
     --emp-muted: #8b949e;
     --emp-accent: #4fcfff;
     --emp-accent-ink: #000000;
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Layout & Main Container
   -------------------------------------------------------------------------- */
/* Override app.css line 9348 which hardcodes #main-content to white (#fff).
   This is the primary root cause of white background blocks across all listing,
   search results, account, cart and CMS pages. */
#main-content {
	background-color: var(--emp-bg) !important;
	background: var(--emp-bg) !important;
}

/* --------------------------------------------------------------------------
   2. Search Autocomplete & Neto Instant Search Dropdowns
   -------------------------------------------------------------------------- */
/* Neto Instant Search Dropdown (app.css line 9058: background-color: white) */
.nsearchinput-pl.well {
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 6px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85) !important;
	color: var(--emp-ink) !important;
}

.nsearchinput-pl.well li a {
	color: var(--emp-ink) !important;
	border-bottom: 1px solid rgba(48, 54, 59, 0.5) !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.nsearchinput-pl.well li a:hover,
.nsearchinput-pl.well li a:focus {
	background: rgba(79, 207, 255, 0.08) !important;
	color: var(--emp-accent) !important;
	text-decoration: none !important;
}

.nsearchinput-pl.well li a .title {
	color: var(--emp-ink-strong) !important;
	font-weight: 600 !important;
}

/* jQuery-UI Autocomplete Menu (default jQuery UI background #ffffff and grey hover) */
.ui-autocomplete.ui-menu {
	background: var(--emp-surface) !important;
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 6px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85) !important;
	padding: 0.5rem 0 !important;
	z-index: 1060 !important;
}

.ui-autocomplete .ui-menu-item {
	list-style: none !important;
	color: var(--emp-ink) !important;
}

.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 0.5rem 1rem !important;
	color: var(--emp-ink) !important;
	background: transparent !important;
	border: none !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item a:hover {
	background: rgba(79, 207, 255, 0.1) !important;
	color: var(--emp-accent) !important;
	border: none !important;
}

.ui-autocomplete .title {
	color: var(--emp-ink-strong) !important;
	font-weight: 600 !important;
}

.ui-autocomplete .label-default {
	background-color: var(--emp-line) !important;
	color: var(--emp-muted) !important;
	font-size: 0.75rem !important;
	padding: 0.2em 0.5em !important;
	border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   3. Sidebar Filters & Price Slider (jQuery-UI)
   -------------------------------------------------------------------------- */
/* Sidebar category & information links with .text-dark class.
   Ensures link text is readable (--emp-ink) and glows neon blue (--emp-accent) on hover. */
#left-sidebar .list-group-item.text-dark,
#left-sidebar a.text-dark {
	color: var(--emp-ink) !important;
}

#left-sidebar .list-group-item.text-dark:hover,
#left-sidebar a.text-dark:hover,
#left-sidebar .list-group-item.text-dark:focus,
#left-sidebar a.text-dark:focus {
	color: var(--emp-accent) !important;
	background-color: rgba(79, 207, 255, 0.06) !important;
}

/* Override app.css line 8716: .price_range { color: inherit !important; } */
.price_range,
.emp-price-slider-group .price_range {
	color: var(--emp-accent) !important;
	font-weight: 700 !important;
}

/* Override app.css line 8719: .ui-widget-header { background: #adb5bd !important; } */
.emp-price-slider-group .ui-slider,
.ui-slider.ui-widget-content {
	background: var(--emp-line) !important;
	border: none !important;
	height: 4px !important;
	border-radius: 2px !important;
}

.emp-price-slider-group .ui-slider-range,
.ui-slider .ui-widget-header {
	background: var(--emp-accent) !important;
}

/* Override app.css line 8722-8728: grey handles on hover/focus */
.emp-price-slider-group .ui-slider-handle,
.ui-slider .ui-state-default,
.ui-slider .ui-state-hover,
.ui-slider .ui-state-focus,
.ui-slider .ui-state-active,
.ui-widget-content .ui-state-default,
.ui-widget-content .ui-state-hover,
.ui-widget-content .ui-state-focus {
	background: var(--emp-accent) !important;
	border: 2px solid #000000 !important;
	border-radius: 50% !important;
	width: 16px !important;
	height: 16px !important;
	top: -6px !important;
	outline: none !important;
	cursor: pointer !important;
	box-shadow: 0 0 8px rgba(79, 207, 255, 0.4) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons & Badges Consistency
   -------------------------------------------------------------------------- */
/* Unstyled .btn-default (18 template occurrences) - overrides app.css line 2418
   which set hover to light grey (#ebebeb) with dark text (#212529) */
.btn-default {
	background-color: var(--emp-surface);
	border: 1px solid var(--emp-line);
	color: var(--emp-ink);
	border-radius: 4px;
	transition: all 0.15s ease;
}

.btn-default:hover,
.btn-default:focus {
	background-color: var(--emp-line) !important;
	border-color: var(--emp-muted) !important;
	color: var(--emp-ink-strong) !important;
	box-shadow: none !important;
}

.btn-default:active,
.btn-default.active {
	background-color: var(--emp-line) !important;
	border-color: var(--emp-accent) !important;
	color: var(--emp-accent) !important;
}

.btn-default:disabled,
.btn-default.disabled {
	background-color: #16181a !important;
	border-color: var(--emp-line) !important;
	color: var(--emp-muted) !important;
	opacity: 0.6;
	cursor: not-allowed;
}

/* Unstyled .btn-outline-dark (app.css line 2558 sets #343a40 text - unreadable) */
.btn-outline-dark {
	background-color: transparent;
	border: 1px solid var(--emp-line);
	color: var(--emp-muted);
	border-radius: 4px;
	transition: all 0.15s ease;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
	background-color: var(--emp-surface);
	border-color: var(--emp-muted);
	color: var(--emp-ink-strong);
}

.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
	background-color: transparent !important;
	border-color: var(--emp-line) !important;
	color: #484f58 !important;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Badges overrides for stock Neto / Bootstrap classes */
.badge-secondary {
	background-color: #21262d !important;
	color: var(--emp-ink) !important;
	border: 1px solid var(--emp-line) !important;
}

.badge-light {
	background-color: #1a1e22 !important;
	color: var(--emp-ink-strong) !important;
	border: 1px solid var(--emp-line) !important;
}

.badge-important {
	background-color: rgba(248, 81, 73, 0.15) !important;
	color: #ff7b72 !important;
	border: 1px solid rgba(248, 81, 73, 0.3) !important;
}

/* --------------------------------------------------------------------------
   5. Product Thumbnails & List-View Styles
   -------------------------------------------------------------------------- */
/* List view product card (.thumbnail.card inside thumbs/product/list.template.html)
   Overrides app.css line 9401: .thumbnail { border: 2px solid #f3f3f3; } */
.thumbnail.card,
.thumb_list .card,
article .thumbnail {
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 6px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.thumbnail.card:hover,
.thumb_list .card:hover,
article .thumbnail:hover {
	border-color: var(--emp-accent) !important;
	box-shadow: 0 0 16px rgba(79, 207, 255, 0.2) !important;
}

.thumbnail-image img,
.thumbnail .product-image {
	background-color: var(--emp-surface) !important;
	border-radius: 4px !important;
}

.thumbnail .price,
.thumb_list .price {
	color: var(--emp-accent) !important;
	font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   6. Child Products & Specifics Variations
   -------------------------------------------------------------------------- */
/* Child product button labels (_itmspec_listitm in child_products.template.html:37) */
._itmspec_listitm {
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	color: var(--emp-ink) !important;
	border-radius: 4px !important;
	margin: 2px !important;
	padding: 0.4rem 0.75rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

._itmspec_listitm:hover,
._itmspec_listitm:focus {
	border-color: var(--emp-accent) !important;
	color: var(--emp-ink-strong) !important;
	background-color: var(--emp-line) !important;
}

._itmspec_listitm._itmspec_selected,
._itmspec_listitm.active {
	background-color: rgba(79, 207, 255, 0.15) !important;
	border-color: var(--emp-accent) !important;
	color: var(--emp-accent) !important;
	font-weight: 700 !important;
	box-shadow: 0 0 8px rgba(79, 207, 255, 0.3) !important;
}

/* --------------------------------------------------------------------------
   7. Popups, Modals & Toast/Alert Elements
   -------------------------------------------------------------------------- */
/* Neto Popup Box (.npopup) - overrides app.css line 9000 (background: #fff) */
.npopup {
	background: var(--emp-surface) !important;
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	color: var(--emp-ink) !important;
	border-radius: 8px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9) !important;
}

.npopup .header,
.npopup h3,
.npopup h4,
.npopup-title {
	color: var(--emp-ink-strong) !important;
}

.npopup-body {
	color: var(--emp-ink) !important;
}

.npopup .footer.modal-footer {
	background-color: #16181a !important;
	border-top: 1px solid var(--emp-line) !important;
}

.npopup-btn-close {
	background: #16181a !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 50% !important;
	color: var(--emp-ink-strong) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.15s ease !important;
}

.npopup-btn-close:hover {
	border-color: var(--emp-accent) !important;
	color: var(--emp-accent) !important;
}

/* Success Add Message (Add-to-cart dynamic popup) */
.successaddmessage .header {
	color: var(--emp-ink-strong) !important;
}

.successaddmessage .body .description {
	color: var(--emp-ink) !important;
}

/* Mobile Order Summary Backdrop & Card (app.css line 9180: rgba(255, 255, 255, .8)) */
@media (max-width: 991.98px) {
	.order-summary-d {
		background-color: rgba(0, 0, 0, 0.85) !important;
	}
	.order-summary-d .order-summary {
		background-color: var(--emp-surface) !important;
		border: 1px solid var(--emp-line) !important;
		border-radius: 8px !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9) !important;
	}
}

.order-summary-d .product-img .badge {
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	color: var(--emp-ink-strong) !important;
}

.order-summary-d .product-img img {
	border: 1px solid var(--emp-line) !important;
}

.order-summary-m .card {
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
}

.order-summary-m .card-body .link {
	color: var(--emp-accent) !important;
}

.order-summary-m .text-dark,
.order-summary-d .text-dark {
	color: var(--emp-ink-strong) !important;
}

/* Global Close Button - overrides app.css line 4954 (color: #000; text-shadow: 0 1px 0 #fff) */
.close {
	color: var(--emp-ink-strong) !important;
	text-shadow: none !important;
	opacity: 0.7 !important;
}

.close:hover,
.close:focus {
	color: #ffffff !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

/* Customer Payment Order #processing overlay (pay_now_confirm.template.html:123)
   Overrides hardcoded lime-yellow (#E6FEAB) background and green border */
#processing {
	background-color: var(--emp-surface) !important;
	border: 2px solid var(--emp-accent) !important;
	color: var(--emp-ink-strong) !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9) !important;
}

/* --------------------------------------------------------------------------
   8. Header Mini-Cart Dropdown
   -------------------------------------------------------------------------- */
#neto-dropdown {
	background-color: var(--emp-surface) !important;
	color: var(--emp-ink) !important;
}

#neto-dropdown #cartcontents {
	color: var(--emp-ink) !important;
}

.thumb_cart li {
	border-bottom: 1px solid var(--emp-line) !important;
	color: var(--emp-ink) !important;
}

.thumb_cart .right a {
	color: var(--emp-ink-strong) !important;
}

.thumb_cart .right a:hover {
	color: var(--emp-accent) !important;
}

.thumb_cart button,
.thumb_cart button.checkout {
	background-color: var(--emp-accent) !important;
	border-color: var(--emp-accent) !important;
	color: var(--emp-accent-ink) !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	padding: 0.5rem 1rem !important;
}

.thumb_cart button:hover,
.thumb_cart button.checkout:hover {
	background-color: #72dbff !important;
	border-color: #72dbff !important;
	color: #000000 !important;
}

/* --------------------------------------------------------------------------
   9. Form Controls, Readonly/Disabled Inputs & Datepicker
   -------------------------------------------------------------------------- */
/* Readonly and Disabled Inputs - overrides app.css line 8904 (background: #EFEFEF; color: 666;) */
input[readonly],
input:disabled,
select:disabled,
textarea:disabled,
.form-control[readonly],
.form-control:disabled {
	background-color: #16181a !important;
	border-color: var(--emp-line) !important;
	color: var(--emp-muted) !important;
	opacity: 0.8 !important;
}

/* Address form input fields (safeguard against inline JS style color modification) */
#ship_city,
#ship_state,
#bill_city,
#bill_state,
#city,
#state {
	color: var(--emp-ink-strong) !important;
}

/* Shipping Postcode Selector Dropdown - overrides app.css line 9126 (background: #fff) */
._sh_post_sel {
	background: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
	color: var(--emp-ink) !important;
}

._sh_post_sel li a {
	color: var(--emp-ink) !important;
	display: block !important;
	padding: 0.25rem 0.5rem !important;
}

._sh_post_sel li a:hover {
	background-color: rgba(79, 207, 255, 0.1) !important;
	color: var(--emp-accent) !important;
	text-decoration: none !important;
}

/* jQuery-UI Datepicker */
.ui-datepicker.ui-widget-content {
	background: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 6px !important;
	color: var(--emp-ink) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85) !important;
	padding: 0.5rem !important;
	z-index: 1055 !important;
}

.ui-datepicker-header.ui-widget-header {
	background: #16181a !important;
	border-bottom: 1px solid var(--emp-line) !important;
	color: var(--emp-ink-strong) !important;
	border-radius: 4px 4px 0 0 !important;
}

.ui-datepicker-calendar th {
	color: var(--emp-muted) !important;
}

.ui-datepicker-calendar td {
	background: transparent !important;
}

.ui-datepicker-calendar td .ui-state-default {
	background: #16181a !important;
	border: 1px solid var(--emp-line) !important;
	color: var(--emp-ink) !important;
	text-align: center !important;
	border-radius: 3px !important;
}

.ui-datepicker-calendar td .ui-state-hover {
	background: var(--emp-line) !important;
	color: var(--emp-ink-strong) !important;
	border-color: var(--emp-muted) !important;
}

.ui-datepicker-calendar td .ui-state-active {
	background: var(--emp-accent) !important;
	color: #000000 !important;
	border-color: var(--emp-accent) !important;
	font-weight: 700 !important;
}

/* Cross-browser <select> option styling */
select option {
	background-color: #16181a !important;
	color: var(--emp-ink-strong) !important;
}

/* --------------------------------------------------------------------------
   10. Tables, Popovers, Progress Bars & Footer
   -------------------------------------------------------------------------- */
/* Table light & thead-light overrides (app.css line 1488: #fdfdfe, line 1535: #ebebeb) */
.table-light,
.table-light > th,
.table-light > td {
	background-color: var(--emp-surface) !important;
	color: var(--emp-ink) !important;
	border-color: var(--emp-line) !important;
}

.table .thead-light th {
	background-color: #16181a !important;
	color: var(--emp-ink-strong) !important;
	border-bottom: 2px solid var(--emp-line) !important;
}

/* Popovers - overrides app.css line 5345 (background-color: #fff) */
.popover {
	background-color: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 6px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85) !important;
}

.popover-header {
	background-color: #16181a !important;
	border-bottom: 1px solid var(--emp-line) !important;
	color: var(--emp-ink-strong) !important;
}

.popover-body {
	color: var(--emp-ink) !important;
}

.bs-popover-top > .arrow::after {
	border-top-color: var(--emp-surface) !important;
}

.bs-popover-bottom > .arrow::after {
	border-bottom-color: var(--emp-surface) !important;
}

.bs-popover-left > .arrow::after {
	border-left-color: var(--emp-surface) !important;
}

.bs-popover-right > .arrow::after {
	border-right-color: var(--emp-surface) !important;
}

/* Progress bars - overrides app.css line 4651 (background-color: #ebebeb) */
.progress {
	background-color: #16181a !important;
	border: 1px solid var(--emp-line) !important;
}

.progress-bar {
	background-color: var(--emp-accent) !important;
	color: #000000 !important;
}

/* Payment Icons in Footer - overrides app.css line 9433 (background: #ffffff) */
footer .payment-icon-container,
.payment-icon-container {
	background: var(--emp-surface) !important;
	border: 1px solid var(--emp-line) !important;
	border-radius: 4px !important;
}