/* ============================================================
   WICHITA INDUSTRIAL SALES – MASTER OVERRIDE STYLESHEET
   ============================================================ */

/* ------------------------------------------
   ROOT VARIABLES — GLOBAL BRAND SYSTEM
------------------------------------------- */
:root {
    --wis-blue-01: #07192B;
    --wis-blue-02: #0C2C4A;
    --wis-blue-03: #123B63;
    --wis-blue-04: #1A4E7F;

    --wis-white: #ffffff;
    --wis-text-light: #ffffff;
    --wis-text-dim: #c8daef;

    --wis-dark-text-1: #0a1b2e;
    --wis-dark-text-2: #0d2438;

    --wis-input-border: #2f699b;
    --wis-btn-bg: #2f699b;
    --wis-btn-hover: #18496d;

    --wis-price-orange: #ffb35a;

    --wis-success-green: #0FA958;

    --wis-white-opacity-15: rgba(255,255,255,0.15);
    --wis-white-opacity-35: rgba(255,255,255,0.35);

    --wis-tile-dark-bg: #0f1b2e;

    font-size: 16px;
}

/* ============================================================
   GLOBAL INTERNAL PAGE BACKGROUND (EXCLUDING HOME)
============================================================ */
body:not(.home) {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
    background-attachment: fixed;
    background-size: cover;
    color: var(--wis-text-light);
}

body:not(.home) .container,
body:not(.home) .content-area,
body:not(.home) .page-content,
body:not(.home) .catalog-view,
body:not(.home) #main,
body:not(.home) .row,
body:not(.home) .page-wrapper {
    background: transparent;
}

/* ============================================================
   TEXT + HEADINGS
============================================================ */
body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) h5,
body:not(.home) h6,
body:not(.home) p,
body:not(.home) span,
body:not(.home) a,
body:not(.home) label,
body:not(.home) .breadcrumb a,
body:not(.home) .filter-title span {
    color: var(--wis-text-light);
}

/* ============================================================
   FORM INPUTS
============================================================ */
body:not(.home) input[type="text"],
body:not(.home) input[type="number"],
body:not(.home) select,
body:not(.home) textarea {
    background: var(--wis-white);
    color: var(--wis-dark-text-2);
    border: 1px solid var(--wis-input-border);
}

body:not(.home) input::placeholder {
    color: #444;
}

/* ============================================================
   BUTTONS
============================================================ */
body:not(.home) .btn,
body:not(.home) button,
body:not(.home) a.btn {
    background: var(--wis-btn-bg);
    color: var(--wis-text-light);
    border: 1px solid var(--wis-btn-bg);
}

body:not(.home) .btn:hover,
body:not(.home) button:hover,
body:not(.home) a.btn:hover {
    background: var(--wis-btn-hover);
}

/* CTA — REPAIR WHITE BUTTONS */
.btn-white,
a.btn-white {
    background: var(--wis-white);
    color: var(--wis-dark-text-1);
    border: 1px solid rgba(13, 36, 56, 0.2);
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 600;
}

.btn-white:hover,
a.btn-white:hover {
    background: #f0f0f0;
    color: var(--wis-dark-text-1);
}

/* ============================================================
   PRICE — ORANGE FOR MAX VISIBILITY
============================================================ */
body:not(.home) .price,
body:not(.home) .price-label,
body:not(.home) .price-label span,
body:not(.home) .product-price,
body:not(.home) .product-price span,
body:not(.home) .has-price,
body:not(.home) .footer-wrapper-price .price-area .price-label,
body:not(.home) .product-item .price,
body:not(.home) .product-item .price span {
    color: var(--wis-price-orange);
    font-weight: 700;
}

/* UOM */
body:not(.home) .uom,
body:not(.home) .uom span,
body:not(.home) .uomvalue {
    color: var(--wis-text-dim);
}

/* ============================================================
   IN STOCK LABEL
============================================================ */
body:not(.home) .in-stock {
    background: var(--wis-success-green);
    color: var(--wis-white);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
}

/* ============================================================
   OUT OF STOCK / CALL FOR QUOTE — FIX WHITE-ON-WHITE
============================================================ */
.out-stock,
strong.out-stock,
.productdetails .out-stock,
.price-area .out-stock {
    background: var(--wis-blue-03);
    color: var(--wis-white);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 700;
}

/* ============================================================
   PRODUCT CARD IMAGES — WHITE FRAME
============================================================ */
body:not(.home) .product-item img,
body:not(.home) .product-item .product-image img {
    width: 100%;
    background: var(--wis-white);
    padding: 6px;
    border-radius: 6px;
    object-fit: contain;
}

/* ============================================================
   QUICK VIEW IMAGE FIX — ALWAYS ABOVE GRADIENT
============================================================ */
#productquickview .product-image-quickview,
#productquickview .prod-image img {
    background: var(--wis-white);
    padding: 8px;
    border-radius: 8px;
    position: relative;
    z-index: 3;
}

/* Remove ghost overlays */
#productquickview .modal-overlay {
    display: none !important;
}

/* ============================================================
   CATEGORY TILE — FULL BLEED
============================================================ */
.cat-thumb-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wis-tile-dark-bg);
}

.cat-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .cat-thumb-container { height: 160px; }
}

.tile p,
.tile p span {
    color: var(--wis-text-light);
    text-align: center;
    font-weight: 600;
    margin-top: 10px;
}

/* ============================================================
   PAGINATION
============================================================ */
body:not(.home) .pagination li a,
body:not(.home) .pagination li span {
    background: var(--wis-white-opacity-15);
    color: var(--wis-text-light);
    border: 1px solid var(--wis-white-opacity-35);
}

body:not(.home) .pagination li.active span,
body:not(.home) .pagination li a:hover {
    background: var(--wis-white);
    color: var(--wis-dark-text-1);
}

/* ============================================================
   MOBILE MENU — GRADIENT
============================================================ */
#mobileVueNav,
.cd-dropdown-content {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
}

#mobileVueNav a,
.cd-dropdown-content a {
    color: var(--wis-text-light);
}

/* ============================================================
   RECAPTCHA DISCLAIMER
============================================================ */
body:not(.home) .grecaptcha-links {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
    border-radius: 6px;
    padding: 1rem;
}

/* ============================================================
   QUICK VIEW / LOGIN MODALS — GRADIENT
============================================================ */
body:not(.home) #productquickview .modal-content,
body:not(.home) #productquickview .modal-body,
body:not(.home) #loginModal .modal-content,
body:not(.home) #loginModal .modal-body {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
    color: var(--wis-text-light);
}

/* Modal form inputs */
body:not(.home) #productquickview input.form-control,
body:not(.home) #loginModal input.form-control {
    background: var(--wis-white);
    color: var(--wis-dark-text-1);
    border: 1px solid var(--wis-input-border);
    border-radius: 6px;
}
/* ============================================================
   FIX — WHITE TEXT ON WHITE LABEL (Item Code)
============================================================ */
body:not(.home) .label.label-focus,
body:not(.home) span.label-focus,
body:not(.home) .prod-sku .label-focus,
body:not(.home) .prod-sku-wrapper .label-focus {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-weight: 600 !important;
}


/* ============================================================
   FIX — PRODUCT DETAIL IMAGE SHOULD FILL BOX
============================================================ */
body:not(.home) .productimagesolo,
body:not(.home) .product-image,
body:not(.home) .product-image img,
body:not(.home) img.productimagesolo.zoom {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* fully visible inside frame */
    background: var(--wis-white) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Ensure the outer image container is flex-stable */
body:not(.home) .prod-image,
body:not(.home) .prod-image img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/**************************************************************
 FIX 1 — PRODUCT TILE IMAGES MUST FILL THE THUMBNAIL BOX
**************************************************************/

/* Force the image container to behave like a real frame */
.imgthumbnail {
    width: 100% !important;
    height: 240px !important; /* Change to your desired height */
    background: #0f1b2e !important; /* dark base so white images show cleanly */
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The actual image MUST completely fill the container */
.imgthumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* or "cover" if you want true full-bleed */
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/**************************************************************
 FIX 2 — WHITE TEXT ON WHITE BACKGROUND (Item Code Labels)
**************************************************************/

.label.label-focus,
.label-focus,
.prod-sku .label,
.prod-sku-wrapper .label-focus {
    background: rgba(0,0,0,0.35) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* Product page item code under title */
.product-sku,
.prod-sku {
    color: #ffffff !important;
}

/**************************************************************
 FIX 3 — QUICK VIEW IMAGE GETS DARKENED BY GRADIENT
**************************************************************/

/* Kill gradient overlay on image area ONLY */
#productquickview .prod-image,
#productquickview .prod-image img {
    background: #0f1b2e !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Ensure the modal gradient does NOT cover over the image */
#productquickview .modal-body::before,
#productquickview .modal-body::after,
#productquickview .modal-content::before,
#productquickview .modal-content::after {
    display: none !important;
}

/* Force the image to display normally */
#productquickview img.product-image-quickview {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    position: relative !important;
    z-index: 10 !important;
}

/**************************************************************
 FIX 4 — “CALL FOR QUOTE” WHITE ON WHITE
**************************************************************/

.out-stock,
.out-stock strong,
strong.out-stock {
    color: #ffb35a !important; /* same orange as price */
    background: rgba(0,0,0,0.4) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

/**************************************************************
 FIX 5 — PRODUCT DETAIL IMAGE SHOULD FILL STROKED BOX
**************************************************************/

.productimagesolo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* try "cover" for true full-bleed */
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ============================================================
   PATCH — PRODUCT TILE IMAGE BACKGROUND FIX
   Makes ONLY the thumbnail background white (not gradient)
   ============================================================ */

body:not(.home) .imgthumbnail {
    background: var(--wis-white) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

/* Ensure image fills the container fully but stays proportional */
body:not(.home) .imgthumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: var(--wis-white) !important;
    display: block !important;
}
/* ============================================================
   QUICK VIEW — FIX DARK IMAGE OVERLAY + WHITE GRADIENT ISSUES
   (Scoped safely to #productquickview only)
   ============================================================ */

/* 1) Remove any gradient / overlay from the image container */
#productquickview .prod-image,
#productquickview .prod-image img {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 2) Kill ALL injected overlays inside Quick View */
#productquickview .modal-overlay,
#productquickview .prod-image::before,
#productquickview .prod-image::after,
#productquickview .modal-body::before,
#productquickview .modal-body::after,
#productquickview .modal-content::before,
#productquickview .modal-content::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3) Real image behavior — show full brightness */
#productquickview img.product-image-quickview {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 20 !important;
}

/* 4) Remove the "white fade" under Description */
#productquickview .prod-description,
#productquickview .prod-description-content,
#productquickview p.prod-description,
#productquickview .prod-description .collapsible,
#productquickview .prod-description .collapsible span {
    background: transparent !important;
    color: var(--wis-text-light) !important;
    box-shadow: none !important;
}

/* 5) Fix white-on-white Item Code label inside Quick View only */
#productquickview .label.label-focus,
#productquickview span.label-focus,
#productquickview .prod-sku .label-focus,
#productquickview .prod-sku-wrapper .label-focus {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

/* 6) Fix long text wrapping */
#productquickview h3,
#productquickview p,
#productquickview span {
    white-space: normal !important;
    word-wrap: break-word !important;
}
/* ============================================================
   FIX — Product Per Page Dropdown (blue text on blue background)
   ============================================================ */
body:not(.home) select.productperpage {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-2) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    appearance: none !important; /* keeps it clean */
}

body:not(.home) select.productperpage option {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
}
/* ============================================================
   FIX — Quick View Modal Header (white text on white background)
   ============================================================ */
#productquickview .modal-header {
    background: var(--wis-blue-02) !important;   /* or var(--wis-blue-03) for darker */
    color: var(--wis-white) !important;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Text inside header */
#productquickview .modal-header h3 {
    color: var(--wis-white) !important;
}

/* Close button icon */
#productquickview .modal-header .close i {
    color: var(--wis-white) !important;
}
/* ============================================================
   FIX — REMOVE BLUE/WHITE GRADIENT UNDER DESCRIPTION (QUICK VIEW ONLY)
   ============================================================ */

/* Kill the EvoX fade-out mask */
#productquickview .prod-description.collapsible::after,
#productquickview .collapsible.prod-description::after,
#productquickview .prod-description .collapsible::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Ensure the description background is fully transparent */
#productquickview .prod-description,
#productquickview .prod-description-content,
#productquickview p.prod-description,
#productquickview p.prod-description span {
    background: transparent !important;
    color: var(--wis-text-light) !important;
}

/* Remove leftover padding/fade container if EvoX injects it */
#productquickview .prod-description .prod-description-content {
    background: transparent !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/* ============================================================
   WIS HEADER LOGO — MOBILE ALIGNMENT FIX
   This patch is fully isolated and will NOT affect any layout
   outside of the .logo element. Safe to drop in anywhere.
   ============================================================ */

/* MOBILE ONLY — nudges logo to the right by ~20px */
@media (max-width: 768px) {
    a.logo img {
        position: relative !important;
        left: 25px !important; /* adjust 18–25px if needed */
    }
}

/* OPTIONAL: For tighter centering if device width varies */
/*
@media (max-width: 768px) {
    a.logo {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}
*/
/* ============================================
   FIX — Make "Sign In" strip BLUE in mobile menu
   ============================================ */

/* Background of the bar */
.dropdown-extras {
    background: var(--wis-blue-02) !important; /* mid-blue */
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 12px 18px !important;
}

/* Text + icon styling */
.dropdown-extras .dropdown-extras-btn.userpanel {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    display: block !important;
}

/* Ensure hover looks clean */
.dropdown-extras .dropdown-extras-btn.userpanel:hover {
    color: var(--wis-text-dim) !important;
}
/* ============================================================
   FINAL FIX — REMOVE BLUE/WHITE GRADIENT BEHIND SIGN-IN STRIP
   ============================================================ */

/* Kill inherited gradient from mobile menu */
#mobileVueNav,
#mobileVueNav *,
.cd-dropdown-content,
.cd-dropdown-content * {
    background-image: none !important;
}

/* Now safely apply solid blue strip */
.dropdown-extras {
    background: var(--wis-blue-02) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 12px 18px !important;
}

/* Text styling */
.dropdown-extras .dropdown-extras-btn.userpanel {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    display: block !important;
}

/* Hover */
.dropdown-extras .dropdown-extras-btn.userpanel:hover {
    color: var(--wis-text-dim) !important;
}
/* ============================================================
   FIX — Prevent white-on-white text in mobile menu
   ============================================================ */

/* Top-level mobile menu links */
#mobileVueNav a,
.cd-dropdown-content a {
    color: var(--wis-text-light) !important; /* white text on blue */
    font-weight: 600 !important;
}

/* When background becomes white (after removing gradient), 
   force DARK BLUE text for visibility */
#mobileVueNav li,
#mobileVueNav li a {
    color: var(--wis-dark-text-1) !important;  /* dark navy blue */
}

/* Ensure hover is visible */
#mobileVueNav li a:hover {
    color: var(--wis-price-orange) !important; /* orange accent */
}
/* ================================
   FIX — Hi There! (User Menu Bubble)
   White-on-white text issue
   ================================ */

/* Force dropdown container to match WIS dark theme */
#Header div.userpanel-menu,
#Header .userpanel-menu,
.userpanel-menu {
    background: var(--wis-blue-02) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    color: var(--wis-white) !important;
    padding: 12px 16px !important;
}

/* Each link inside the dropdown */
.userpanel-menu a,
.userpanel-menu .description,
.userpanel-menu li a,
.userpanel-menu .userpanel-item {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    display: block !important;
}

/* Hover effect */
.userpanel-menu a:hover,
.userpanel-menu li a:hover {
    color: var(--wis-text-dim) !important;
}

/* Fix the white background on the triangle pointer */
.userpanel-menu::before,
.userpanel-menu::after {
    background: var(--wis-blue-02) !important;
    border: none !important;
}
/* ============================================================
   FIX — White-on-White Text in Search & Filter Modal Header
   ============================================================ */

/* Force modal header to use your blue gradient */
#filtermodal .modal-header,
#filtermodal .modal-content .modal-header,
.modal-dialog .modal-content .modal-header .filter-title h3 {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
}

/* Force the <h3> title to display correctly */
#filtermodal .modal-header h3,
.modal-content .modal-header h3,
.filter-title h3 {
    color: var(--wis-white) !important;
    font-weight: 700 !important;
}

/* Close button icon */
#filtermodal .modal-header .close i,
.modal-content .modal-header .close i {
    color: var(--wis-white) !important;
    opacity: 1 !important;
}
/* ============================================================
   FIX — Remove Gradient from reCAPTCHA Disclaimer Box
   ============================================================ */

.grecaptcha-links,
body:not(.home) .grecaptcha-links {
    background: var(--wis-white) !important;       /* clean white background */
    color: var(--wis-dark-text-1) !important;      /* readable dark blue text */
    border-radius: 6px !important;
    padding: 10px 14px !important;
}

/* Links inside the disclaimer */
.grecaptcha-links a {
    color: var(--wis-btn-bg) !important;           /* your branded blue */
    text-decoration: underline !important;
}

.grecaptcha-links a:hover {
    color: var(--wis-btn-hover) !important;
}
/* ============================================================
   FIX — SEARCH & FILTER PANEL (White-on-White Issue)
   ============================================================ */

/* Make the filter panel adopt dark WIS theme */
#filterswrapper,
.filters_container,
.filters-mobile,
.shop-filters {
    background: var(--wis-blue-01) !important;
    color: var(--wis-white) !important;
    border-radius: 6px !important;
}


/* “Search & Filter” title */
#filterswrapper .filter-title span,
#filterswrapper .filter-title,
.filter-title,
.filter-title.theme-2 span {
    color: var(--wis-white) !important;
}


/* Remove unwanted white background behind title */
#filterswrapper .filter-title,
.filter-title.theme-2 {
    background: transparent !important;
}


/* Text inside filters */
#filterswrapper h5,
#filterswrapper p,
#filterswrapper .desc,
#filterswrapper .count,
#filterswrapper label,
#filterswrapper a {
    color: var(--wis-white) !important;
}


/* Highlight counts with dimmed color */
#filterswrapper .count {
    color: var(--wis-text-dim) !important;
}


/* Filter section headers */
.filter-section-header h5 {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}


/* Remove white background from filter blocks */
.filter-section,
.filter-options,
.search-with-in,
.clean-search,
.searchlist,
.search-form {
    background: transparent !important;
}


/* “Search Within” input */
.searchlistwithin_hd,
.search-with-in input.form-control {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

.searchlistwithin_hd::placeholder {
    color: #555 !important;
}

/* Search button beside the input */
.relsearch button i {
    color: var(--wis-dark-text-1) !important;
}

.relsearch button {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
}


/* Fix the “Items in stock only” header */
.filtername-instock h5 {
    color: var(--wis-white) !important;
}


/* Toggle switch border */
.filtername-instock .switch label {
    border-color: var(--wis-white-opacity-35) !important;
}

/* Minus/Plus expand icon */
.showhide-indicator i {
    color: var(--wis-white) !important;
}
/* ============================================================
   HARD OVERRIDE — DESKTOP SEARCH BAR (white-on-white fix)
   ============================================================ */

/* Search input background + text color */
header input.form-control.searchlist_hd.ajax-search-control,
.top-search input.form-control.searchlist_hd.ajax-search-control {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important; /* dark text */
    border: 1px solid var(--wis-input-border) !important;
}

/* Placeholder color */
header input.form-control.searchlist_hd.ajax-search-control::placeholder,
.top-search input.form-control.searchlist_hd.ajax-search-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

/* When typing — override EvoX ghost color */
header input.form-control.searchlist_hd.ajax-search-control:focus,
.top-search input.form-control.searchlist_hd.ajax-search-control:focus {
    color: var(--wis-dark-text-1) !important;
    background: var(--wis-white) !important;
}

/* Search icon (magnifier) fix */
header .searchlist .fa-search,
.top-search .fa-search {
    color: var(--wis-dark-text-1) !important;
}

/* Search icon button itself */
header .searchlist button,
.top-search .searchlist button {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
}

/* EvoX tends to inject inline styles → nuke them */
header .searchlist input[style],
.top-search input[style] {
    background: var(--wis-white) !important !important;
    color: var(--wis-dark-text-1) !important !important;
}
/* ============================================================
   FIX — Sort By (Dropdown) Blue-on-Blue Text
   ============================================================ */

/* Dropdown SELECT */
.productorderby,
.sortby select,
.sortby .productorderby {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

/* Dropdown options text colors */
.sortby select option {
    color: var(--wis-dark-text-1) !important;
    background: var(--wis-white) !important;
}

/* “Sort by” label */
.sortby span {
    color: var(--wis-white) !important;
    font-weight: 600;
}


/* ============================================================
   FIX — LIST / GRID Icons Blue-on-Blue
   ============================================================ */

.listgrid a,
.listgrid a:visited,
.listgrid a:link {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

/* Hover */
.listgrid a:hover {
    color: var(--wis-text-dim) !important;
}

/* Icons inside the links */
.listgrid i,
.listgrid .fa,
.listgrid svg {
    color: var(--wis-white) !important;
}

/* Ensure pipe "|" is visible too */
.listgrid {
    color: var(--wis-white) !important;
}
/* ============================================================
   FIX — FORCE LIST / GRID SVG ICONS TO WHITE
   ============================================================ */

/* Target SVG icons inside list/grid view toggle */
.listgrid svg,
.listgrid svg *,
.listgrid a svg,
.listgrid a svg * {
    fill: var(--wis-white) !important;
    stroke: var(--wis-white) !important;
    opacity: 1 !important;
}

/* Make the text links white */
.listgrid a {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

/* Fix separator "|" */
.listgrid {
    color: var(--wis-white) !important;
}
/* ============================================================
   HARD FIX — Account Dropdown (Hi There) White-on-White Text
   ============================================================ */

/* Force the dropdown background to blue */
.headersection .dropdown-menu,
#header .dropdown-menu,
.userpanel .dropdown-menu,
.user-panel .dropdown-menu,
.account-dropdown,
.account-menu,
.dropdown-menu[aria-labelledby="userpanel"],
.dropdown-menu.show {
    background: var(--wis-blue-02) !important;
    color: var(--wis-white) !important;
    border: none !important;
}

/* Fix the "View your account" text */
.headersection .dropdown-menu .description,
#header .dropdown-menu .description,
.userpanel .dropdown-menu .description,
.user-panel .dropdown-menu .description,
.account-dropdown .description,
.account-menu .description,
.dropdown-menu.show .description {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

/* Fix all links inside this dropdown */
.headersection .dropdown-menu a,
#header .dropdown-menu a,
.userpanel .dropdown-menu a,
.user-panel .dropdown-menu a,
.account-dropdown a,
.account-menu a,
.dropdown-menu.show a {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

/* Hover state */
.headersection .dropdown-menu a:hover,
#header .dropdown-menu a:hover,
.userpanel .dropdown-menu a:hover,
.user-panel .dropdown-menu a:hover,
.account-dropdown a:hover,
.account-menu a:hover,
.dropdown-menu.show a:hover {
    color: var(--wis-price-orange) !important;
}
/* ============================================================
   FIX — LIST VIEW WHITE-ON-WHITE TEXT (Product Listing Page)
   ============================================================ */

/* Product name */
.product-row.product-image .product-content .product-name a {
    color: var(--wis-dark-text-1) !important;  /* readable dark blue */
}

/* Item Code label in list view */
.product-row.product-image .product-content .label.label-focus,
.product-row.product-image .product-content .product-sku .label-focus {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
}

/* Category Link */
.product-row.product-image .product-content .product-category a {
    color: var(--wis-btn-bg) !important;
}

/* Pack size and other attribute labels */
.product-row.product-image .product-content strong,
.product-row.product-image .product-content span,
.product-row.product-image .product-content p {
    color: var(--wis-dark-text-1) !important;
}

/* UOM */
.product-row.product-image .uom,
.product-row.product-image .uomvalue {
    color: var(--wis-dark-text-2) !important;
}
/* ============================================================
   LIST VIEW FIX — Action Buttons, Icons, Compare Text
   ============================================================ */

/* Compare block text */
.product-row.product-image .product-compare-action {
    color: var(--wis-dark-text-1) !important;
    font-weight: 600 !important;
}

/* Compare icons (square + checkmark) */
.product-row.product-image .product-compare-action .fa,
.product-row.product-image .product-compare-action i,
.product-row.product-image .product-compare-action svg,
.product-row.product-image .product-compare-action svg * {
    color: var(--wis-dark-text-1) !important;
    fill: var(--wis-dark-text-1) !important;
    stroke: var(--wis-dark-text-1) !important;
}

/* Quick View + Lightbox floating buttons */
.product-row.product-image .product-list-actions button,
.product-row.product-image .product-list-actions span {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

/* Quick View icon inside the button */
.product-row.product-image .product-list-actions .quickview-icon,
.product-row.product-image .product-list-actions .quickview-icon:before,
.product-row.product-image .product-list-actions .quickview-icon:after {
    background: var(--wis-dark-text-1) !important;
}

/* Lightbox icon */
.product-row.product-image .product-list-actions .lightbox-icon,
.product-row.product-image .product-list-actions .lightbox-icon:before,
.product-row.product-image .product-list-actions .lightbox-icon:after {
    background: var(--wis-dark-text-1) !important;
}

/* Add to quicklist link */
.product-row.product-image .product-shopping-actions-addtoquicklist a {
    color: var(--wis-dark-text-1) !important;
}

.product-row.product-image .product-shopping-actions-addtoquicklist a:hover {
    color: var(--wis-price-orange) !important;
}
/* ============================================================
   QUICK VIEW — FINAL FIX
   (Remove gradient, fix price box background, center price)
   ============================================================ */

/* 1) Remove ALL gradient/mask layers EvoX injects */
#productquickview .modal-body,
#productquickview .modal-content,
#productquickview .prod-description,
#productquickview .prod-description-content {
    background: none !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Kill after/before gradient overlays */
#productquickview .modal-body::before,
#productquickview .modal-body::after,
#productquickview .modal-content::before,
#productquickview .modal-content::after,
#productquickview .prod-description::before,
#productquickview .prod-description::after,
#productquickview .prod-description-content::before,
#productquickview .prod-description-content::after {
    display: none !important;
    content: none !important;
}

/* 2) Fix the price box — no white background */
#productquickview .price,
#productquickview .price .has-price {
    background: var(--wis-blue-02) !important; /* dark blue */
    color: var(--wis-price-orange) !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
}

/* Remove any white background EvoX injects */
#productquickview .price * {
    background: transparent !important;
}

/* Center UOM ("/ EA") and keep spacing clean */
#productquickview .prod-packsize {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    color: var(--wis-text-light) !important;
}

/* 3) Fix “excl. TAX” so it is not white on white */
#productquickview .price-label-inc-vat {
    color: var(--wis-text-light) !important;
    opacity: 0.85 !important;
}
/* ============================================================
   FULL FIX — Customer Dashboard (white text on white background)
   ============================================================ */

/* Restore white panel background everywhere inside dashboard */
.dashboard-sortable .grid,
.dashboard-sortable .grid-body,
.dashboard-sortable .grid-title,
.dashboard-sortable .grid-footer,
.dashboard-sortable li,
.dashboard-sortable .grid.simple {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
}

/* Restore ALL body text within dashboard */
.dashboard-sortable *,
.dashboard-sortable .row *,
.dashboard-sortable .col-sm-9,
.dashboard-sortable .col-sm-3,
.dashboard-sortable .content_value,
.dashboard-sortable .text-muted,
.dashboard-sortable .user-info-name,
.dashboard-sortable h3,
.dashboard-sortable h4,
.dashboard-sortable h5,
.dashboard-sortable h6,
.dashboard-sortable p,
.dashboard-sortable span,
.dashboard-sortable a {
    color: var(--wis-dark-text-1) !important;
}

/* Muted gray labels (Company, Email, Password, etc.) */
.dashboard-sortable .text-muted {
    color: #555 !important;
}

/* Table headers for Recent Orders */
.dashboard-sortable table th {
    color: var(--wis-dark-text-1) !important;
    font-weight: 700 !important;
}

/* Table values */
.dashboard-sortable table td,
.dashboard-sortable table td span {
    color: var(--wis-dark-text-1) !important;
}

/* Fix icons (they were turning white) */
.dashboard-sortable i.fa,
.dashboard-sortable i.fa-solid {
    color: var(--wis-dark-text-1) !important;
}

/* Footer links */
.dashboard-sortable .grid-footer a {
    color: var(--wis-btn-bg) !important;
}

.dashboard-sortable .grid-footer a:hover {
    color: var(--wis-btn-hover) !important;
}

/* Saved carts + empty state messages */
.dashboard-sortable .no_results h3,
.dashboard-sortable .no_results span {
    color: var(--wis-dark-text-1) !important;
}
/* ============================================================
   FINAL UNIVERSAL DASHBOARD TEXT FIX
   Fixes remaining white-on-white labels inside ALL dashboard cards
   ============================================================ */

.dashboard-sortable .text-muted,
.dashboard-sortable span.text-muted,
.dashboard-sortable .row span.text-muted,
.dashboard-sortable .col-md-6 span.text-muted,
.dashboard-sortable .col-sm-3 span.text-muted,
.dashboard-sortable .col-sm-9 span.text-muted {
    color: var(--wis-dark-text-1) !important;
}

/* Dollar amounts, values, etc. */
.dashboard-sortable .col-md-6,
.dashboard-sortable .col-md-6 *,
.dashboard-sortable .col-sm-6,
.dashboard-sortable .col-sm-6 * {
    color: var(--wis-dark-text-1) !important;
}

/* Icons inside this section */
.dashboard-sortable i.fa,
.dashboard-sortable i {
    color: var(--wis-dark-text-1) !important;
}