/* ============================================================
   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;
}
/* Hide Contact Us sidebar block (contactdetails_container) everywhere */
.contactdetails_container {
    display: none !important;
}
/* ------------------------------------------
   CTA BUTTON — VIEW ALL BATTERIES (CENTERED)
------------------------------------------- */
a.cta-button {
    display: block !important;
    width: max-content !important;
    padding: 14px 28px !important;
    font-size: 20px !important;
    margin: 25px auto !important; /* centers horizontally */
    text-align: center !important;
    background-color: #ff6a00 !important; /* WIS orange */
    color: #ffffff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

a.cta-button:hover {
    opacity: 0.85;
}
/* ------------------------------------------
   BATTERY PAGE CONTENT — ALIGN WITH NEWSLETTER
------------------------------------------- */

#content_148 .content {
    max-width: 1140px;        /* matches EvoX container width */
    margin: 0 auto !important; /* center the entire content block */
    padding: 0 20px !important; /* match internal page padding */
}

#content_148 .banner img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

#content_148 h1, 
#content_148 h2,
#content_148 p {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px;         /* keeps paragraphs readable */
    text-align: center;
}
/* ------------------------------------------
   SEARCH AUTOCOMPLETE — FIX WHITE TEXT ON WHITE
------------------------------------------- */

/* Main dropdown container */
.ajax-results,
.ajax-results.open {
    background: #ffffff !important;
    color: #1a1a1a !important; /* dark text */
}

/* Product names */
.ajax-results .result span {
    color: #1a1a1a !important;
    font-weight: 500;
}

/* Category header */
.ajax-results .categories-wrapper h3 {
    color: #1a1a1a !important;
}

/* Category names */
.ajax-results .categories-wrapper .result span {
    color: #1a1a1a !important;
}

/* Product images alignment */
.ajax-results .result img {
    max-width: 50px !important;
    height: auto !important;
    margin-right: 10px;
}
/* ------------------------------------------
   SWEETALERT — FIX WHITE TEXT ON WHITE POPUP
------------------------------------------- */

.sweet-alert,
.sweet-alert h2,
.sweet-alert p,
.sweet-alert .sa-error-container p,
.sweet-alert .sa-error-container .icon {
    color: #1a1a1a !important;  /* readable dark text */
}

/* Confirm button fix */
.sweet-alert .confirm {
    background: #005bbb !important;   /* WIS navy or adjust */
    color: #ffffff !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

/* Optional: lighten popup background for contrast */
.sweet-alert {
    background: #ffffff !important;  /* ensures clarity */
    border: 1px solid #ddd !important;
}

/* Fix the input field text color */
.sweet-alert input[type="text"],
.sweet-alert input[type="email"],
.sweet-alert input[type="password"] {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
}
/* ============================================================
   WIS CHECKOUT FIX — Continue Button White-on-White Issue
   ============================================================ */

.checkout .delivery-submit-area .button.next,
body.checkout .delivery-submit-area .button.next,
.delivery-submit-area button.button.next,
body.checkout button.button.next,
.checkout button.button.next {
    background-color: #2F699B !important;   /* WIS blue */
    color: #ffffff !important;              /* readable white text */
    border: none !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
}

/* Hover */
.checkout .delivery-submit-area .button.next:hover,
body.checkout .delivery-submit-area .button.next:hover,
.delivery-submit-area button.button.next:hover,
body.checkout button.button.next:hover,
.checkout button.button.next:hover {
    background-color: #18496D !important;   /* darker WIS blue */
    color: #ffffff !important;
}
/* FORCE FIX — EVOX CHECKOUT WHITE TEXT + WHITE BUTTON */

/* 1. BUTTON (Continue / Update) */
body.ex-checkout .panel button.button.next,
body.ex-checkout .delivery-submit-area button.button.next,
body.ex-checkout form button.button.next {
    background-color: #0c2c4a !important;
    color: #ffffff !important;
    border: 1px solid #0c2c4a !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-radius: 6px !important;
}

/* Hover */
body.ex-checkout button.button.next:hover {
    background-color: #18496d !important;
    color: #ffffff !important;
}

/* 2. PANEL TITLES (Shipping Details / Contact / Options) */
body.ex-checkout .panel-title span,
body.ex-checkout .panel-title .checkout-delivery-details-title-text,
body.ex-checkout .panel-title .checkout-contact-details-title-text,
body.ex-checkout .panel-title .checkout-delivery-options-title-text,
body.ex-checkout .panel-title .checkout-payment-method-title-text {
    color: #0a1b2e !important;
}

/* 3. FORM LABELS */
body.ex-checkout label,
body.ex-checkout .box-title,
body.ex-checkout .checkout-order-note-title,
body.ex-checkout .checkout-po-number-title {
    color: #0a1b2e !important;
}

/* 4. TEXTAREAS + INPUTS (white-on-white fix) */
body.ex-checkout textarea.form-control,
body.ex-checkout input.form-control {
    background: #ffffff !important;
    color: #0a1b2e !important;
    border: 1px solid #2f699b !important;
}

body.ex-checkout textarea.form-control::placeholder,
body.ex-checkout input.form-control::placeholder {
    color: #666 !important;
}

/* 5. "Shipping", "Tax", and muted labels */
body.ex-checkout .text-muted,
body.ex-checkout .delivery-selected span {
    color: #555 !important;
}

/* 6. TOTAL area */
body.ex-checkout .checkout-summary-total-label,
body.ex-checkout .checkout-summary-total-value {
    color: #0a1b2e !important;
}

/* 7. Selected Address text */
body.ex-checkout .selected-address * {
    color: #0a1b2e !important;
}
/* ============================================
   ACCOUNT SIDEBAR — BACKGROUND FIX
   Makes the entire sidebar a WIS dark blue
============================================ */
.nav.nav-pills.nav-stacked {
    background: var(--wis-blue-02) !important;
    padding: 15px !important;
    border-radius: 8px !important;
}
/* ============================================
   ACCOUNT SIDEBAR — GROUP TITLES (h4)
   Ensures section headers are readable
============================================ */
.nav.nav-pills.nav-stacked .group-name h4 {
    color: var(--wis-white) !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}
/* ============================================
   ACCOUNT SIDEBAR — LINK COLOR FIX
   Makes links and icons white on dark blue
============================================ */
.nav.nav-pills.nav-stacked li a {
    color: var(--wis-white) !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

/* Icons inside links */
.nav.nav-pills.nav-stacked li a i {
    color: var(--wis-white) !important;
    margin-right: 8px !important;
}
/* ============================================
   ACCOUNT SIDEBAR — HOVER + ACTIVE STYLES
   Adds orange highlight for clarity
============================================ */
.nav.nav-pills.nav-stacked li a:hover,
.nav.nav-pills.nav-stacked li.active > a {
    background: var(--wis-blue-04) !important;
    color: var(--wis-white) !important;
}

/* Icons on hover/active */
.nav.nav-pills.nav-stacked li a:hover i,
.nav.nav-pills.nav-stacked li.active a i {
    color: var(--wis-white) !important;
}
/* ============================================
   ACCOUNT SIDEBAR — LOGOUT BUTTON
   Makes logout visually distinct
============================================ */
.nav.nav-pills.nav-stacked .sidebar-logout a {
    background: rgba(255, 0, 0, 0.25) !important;
    color: #ffdddd !important;
    border: 1px solid rgba(255, 0, 0, 0.35) !important;
}

.nav.nav-pills.nav-stacked .sidebar-logout a:hover {
    background: rgba(255, 0, 0, 0.45) !important;
    color: #ffffff !important;
}
/* ============================================================
   CUSTOMER ACCOUNT FLYOUT — BACKGROUND REPLACEMENT
   Replaces EvoX white panel with WIS blue gradient
============================================================ */
.customertools-container {
    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%
    ) !important;

    color: var(--wis-white) !important;
    padding: 20px 24px 40px !important;
    border-radius: 8px !important;
}
/* ============================================================
   CUSTOMER FLYOUT — UNIVERSAL TEXT & ICON COLOR FIX
   Ensures all content becomes readable on dark gradient
============================================================ */
.customertools-container,
.customertools-container * {
    color: var(--wis-white) !important;
    fill: var(--wis-white) !important;
    stroke: var(--wis-white) !important;
}
/* ============================================================
   CUSTOMER FLYOUT — HEADER TITLE (Username)
============================================================ */
.customertools-container .your-account {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   CUSTOMER FLYOUT — CLOSE BUTTON ICON
============================================================ */
.customertools-container .close-panel i {
    color: var(--wis-white) !important;
    font-size: 20px !important;
}
/* ============================================================
   CUSTOMER FLYOUT — SECTION HEADERS
============================================================ */
.customertools-container .group-name h4 {
    font-size: 16px !important;
    color: var(--wis-text-dim) !important;
    margin: 18px 0 6px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}
/* ============================================================
   CUSTOMER FLYOUT — MENU LINK STYLING
============================================================ */
.customertools-container .nav.nav-pills.nav-stacked li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    color: var(--wis-white) !important;
    background: transparent !important;
}

/* Icons beside text */
.customertools-container .nav.nav-pills.nav-stacked li a i {
    margin-right: 10px !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   CUSTOMER FLYOUT — MENU HOVER EFFECT
============================================================ */
.customertools-container .nav.nav-pills.nav-stacked li a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   CUSTOMER FLYOUT — CLEAN DIVIDERS
============================================================ */
.customertools-container .nav.nav-pills.nav-stacked .group-name {
    border-top: 1px solid rgba(255,255,255,0.25) !important;
    padding-top: 14px !important;
    margin-top: 10px !important;
}
/* ============================================================
   CUSTOMER FLYOUT — LOGOUT BUTTON
============================================================ */
.customertools-container .sidebar-logout a {
    background: rgba(255, 0, 0, 0.3) !important;
    color: #ffecec !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
}

.customertools-container .sidebar-logout a:hover {
    background: rgba(255, 0, 0, 0.45) !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   ACCOUNT DASHBOARD — ADDRESS BOX BACKGROUND FIX
   Replaces unreadable light-grey box with darker WIS panel
============================================================ */
.myaccountdashboard_container .with-padding-trl,
.grid.simple .with-padding-trl {
    background: var(--wis-blue-02) !important;
    border-radius: 6px !important;
    padding: 15px !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   ADDRESS BOX — TEXT COLOR FIX
   Forces all nested text to white for contrast
============================================================ */
.myaccountdashboard_container .with-padding-trl *,
.grid.simple .with-padding-trl * {
    color: var(--wis-white) !important;
}
/* ============================================================
   ADDRESS BOX — SECTION TITLES
============================================================ */
.myaccountdashboard_container .with-padding-trl h4.text-muted,
.grid.simple .with-padding-trl h4.text-muted {
    color: var(--wis-text-dim) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
}
/* ============================================================
   ADDRESS BOX — ICON VISIBILITY FIX
============================================================ */
.myaccountdashboard_container .with-padding-trl i.fa,
.grid.simple .with-padding-trl i.fa {
    color: var(--wis-white) !important;
    opacity: 0.9 !important;
    margin-right: 6px !important;
}
/* ============================================================
   ADDRESS BOX — CUSTOMER NAME
============================================================ */
.myaccountdashboard_container .with-padding-trl .address-name,
.grid.simple .with-padding-trl .address-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   ADDRESS BOX — ADDRESS LINE TEXT
============================================================ */
.myaccountdashboard_container .with-padding-trl .address-lines,
.grid.simple .with-padding-trl .address-lines {
    color: var(--wis-text-light) !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}/* ============================================================
   ACCOUNT PAGE TAB STRIP — BACKGROUND FIX
   Replaces white bar with WIS gradient or solid dark blue
============================================================ */
.myaccount .nav.nav-pills.nav-title {
    background: var(--wis-blue-02) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    gap: 10px !important;
}
background: linear-gradient(
    to right,
    var(--wis-blue-01),
    var(--wis-blue-03)
) !important;
/* ============================================================
   ACCOUNT PAGE TAB STRIP — TEXT COLOR FIX
   Ensures links are always readable
============================================================ */
.myaccount .nav.nav-pills.nav-title li a {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
}
/* ============================================================
   TAB STRIP — ACTIVE TAB FIX
   Highlights the active tab using WIS orange on dark blue
============================================================ */
.myaccount .nav.nav-pills.nav-title li.active a,
.myaccount .nav.nav-pills.nav-title li.active a:focus,
.myaccount .nav.nav-pills.nav-title li.active a:hover {
    background: var(--wis-price-orange) !important;
    color: var(--wis-dark-text-1) !important;
    font-weight: 700 !important;
}
/* ============================================================
   TAB STRIP — HOVER EFFECT
   Slight lightening on hover for clarity
============================================================ */
.myaccount .nav.nav-pills.nav-title li a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: var(--wis-white) !important;
}
/* ============================================================
   ORDERS PAGE — TABLE HEADER FIX
   Makes header readable and consistent with WIS design
============================================================ */
.myaccount #ordergrid thead tr th,
.myaccount #ordergrid thead tr th * {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid rgba(0,0,0,0.1) !important;
}

/* Fix sort icons inside header */
.myaccount #ordergrid thead tr th i.fa {
    color: var(--wis-dark-text-1) !important;
    opacity: 0.75 !important;
}
/* ============================================================
   ORDERS PAGE — TABLE BACKGROUND FIX
============================================================ */
.myaccount #ordergrid {
    background: var(--wis-white) !important;
    border-radius: 6px !important;
}

.myaccount #ordergrid tbody td {
    color: var(--wis-dark-text-1) !important;
}
/* ============================================================
   ORDERS PAGE — SEARCH BAR FIX
============================================================ */
.myaccount .order-search 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;
}

.myaccount .order-search input.form-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

/* Search button icon */
.myaccount .order-search button i.fa {
    color: var(--wis-dark-text-1) !important;
}
/* ============================================================
   ORDERS PAGE — NO RESULTS MESSAGE FIX
============================================================ */
.myaccount .no_resource .big-message,
.myaccount .no_resource .big-message * {
    color: var(--wis-white) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}
/* ============================================================
   ORDERS PAGE SEARCH BAR — FIX DARK TEXT ON DARK BACKGROUND
============================================================ */
.myaccount .search-group .search-input {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px 0 0 6px !important;
    padding: 10px 14px !important;
}

/* Placeholder readability */
.myaccount .search-group .search-input::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}
/* ============================================================
   SEARCH BUTTON — FIX VISIBILITY + MATCH WIS BRAND
============================================================ */
.myaccount .search-group .btn-search {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-left: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 16px !important;
}

/* Search icon inside button */
.myaccount .search-group .btn-search .glyphicon-search,
.myaccount .search-group .btn-search span {
    color: var(--wis-dark-text-1) !important;
}
/* ============================================================
   MY ACCOUNT — SETTINGS PANEL BACKGROUND FIX
============================================================ */
.myaccount .block-grid,
.myaccount .grid-body.block-grid {
    background: var(--wis-blue-02) !important;
    color: var(--wis-white) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}
/* ============================================================
   SETTINGS PANEL — TEXT FIX
============================================================ */
.myaccount .block-grid *,
.myaccount .grid-body.block-grid * {
    color: var(--wis-white) !important;
}
/* ============================================================
   SETTINGS PANEL — FIX MUTED LABELS
============================================================ */
.myaccount .block-grid .text-muted,
.myaccount .grid-body.block-grid .text-muted {
    color: var(--wis-text-dim) !important; /* your lighter blue */
    opacity: 1 !important;
}
/* ============================================================
   SETTINGS PANEL — ICON VISIBILITY
============================================================ */
.myaccount .block-grid i.fa,
.myaccount .grid-body.block-grid i.fa {
    color: var(--wis-white) !important;
    opacity: 0.9 !important;
}
/* ============================================================
   SETTINGS PANEL — TITLE FIX
============================================================ */
.myaccount .block-grid .body-title b,
.myaccount .block-grid .body-title i {
    color: var(--wis-white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
/* ============================================================
   MY ACCOUNT — PAGE TITLE TEXT FIX (Saved Carts, Saved Orders, etc.)
============================================================ */
.myaccount .myaccount-grid-title h2,
.myaccount .myaccount-grid-title h2 span {
    color: var(--wis-white) !important;
    font-weight: 700 !important;
}
/* ============================================================
   PAGE TITLE ICON FIX
============================================================ */
.myaccount .myaccount-grid-title h2 i.fa {
    color: var(--wis-white) !important;
    opacity: 1 !important;
}
/* ============================================================
   MY ACCOUNT — ID BADGE FIX (light background + dark text)
============================================================ */
.myaccount .id-card,
.myaccount .id-card span {
    background-color: #add8e6 !important; /* keep current badge color */
    color: var(--wis-dark-text-1) !important; /* dark navy text */
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 25px !important;
    display: inline-block !important;
}
/* ============================================================
   MY ACCOUNT — quick grid
============================================================ */
/* ==========================================================================
   MY ACCOUNT TABLE HEADER PANELS — WIS DARK BLUE STYLE
   Applies to Quick Lists, Orders, Saved Carts, Addresses, Quotations, etc.
   ========================================================================== */

/* Header cells */
.myaccount .gridcontent th,
.myaccount .gridcontentnew th {
    background: #0d2342 !important;         /* WIS deep blue */
    color: var(--wis-white) !important;      /* white text */
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-right: none !important;           /* remove EvoX stray grey lines */
    border-radius: 8px !important;           /* rounded corners */
    padding: 12px 14px !important;
}

/* Last header cell gets a proper right border */
.myaccount .gridcontent th:last-child,
.myaccount .gridcontentnew th:last-child {
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* First header cell rounded left */
.myaccount .gridcontent th:first-child,
.myaccount .gridcontentnew th:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Inputs inside header cells */
.myaccount .gridcontent th input.form-control,
.myaccount .gridcontent th select.form-control,
.myaccount .gridcontentnew th input.form-control,
.myaccount .gridcontentnew th select.form-control {
    background: #173961 !important;           /* slightly lighter blue */
    color: var(--wis-white) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;            /* rounded corners */
}

/* Placeholder text color */
.myaccount .gridcontent th input::placeholder,
.myaccount .gridcontentnew th input::placeholder {
    color: rgba(255,255,255,0.75) !important;
}
/* ==========================================================================
   REMOVE EMPTY LAST COLUMN IN GRID TABLES
   (EvoX inserts a blank <th> and <td> for action buttons)
   ========================================================================== */

/* Hide the last <th> (the blank header) */
.myaccount table.dataset thead th:last-child {
    display: none !important;
}

/* Hide the matching empty table cells (<td>) */
.myaccount table.dataset tbody td:last-child {
    display: none !important;
}

/* Fix column borders so the row doesn't look cut */
.myaccount table.dataset {
    border-collapse: separate !important;
}
/* ==========================================================================
   MAKE SORT ICONS VISIBLE ON DARK WIS HEADER BACKGROUND
   ========================================================================== */

.myaccount table.dataset th i.fa-sort,
.myaccount table.dataset th i.fa-sort-asc,
.myaccount table.dataset th i.fa-sort-desc {
    color: var(--wis-white) !important;   /* white icons */
    opacity: 0.85 !important;             /* slightly softened */
    margin-left: 6px !important;
    font-size: 14px !important;
}

/* Hover effect (clean WIS orange accent) */
.myaccount table.dataset th:hover i.fa-sort,
.myaccount table.dataset th:hover i.fa-sort-asc,
.myaccount table.dataset th:hover i.fa-sort-desc {
    color: var(--wis-price-orange) !important;
    opacity: 1 !important;
}
/* When EvoX uses a pseudo-element for the search icon */
.myaccount .gridcontent th input.form-control[data-type="text"]::after,
.myaccount .gridcontentnew th input.form-control[data-type="text"]::after {
    color: var(--wis-white) !important;
    opacity: 1 !important;
}
/* ==========================================================================
   FIX HOVER & EXPANDED ROW HIGHLIGHT (white-on-white problem)
   Applies to all My Account dataset tables
   ========================================================================== */

/* Normal table row text */
.myaccount table.dataset tbody tr td,
.myaccount table.dataset tbody tr span.content_value {
    color: var(--wis-white) !important;
}

/* Hover highlight (instead of white) */
.myaccount table.dataset tbody tr:hover {
    background: #0d2342 !important;   /* WIS deep blue */
    color: var(--wis-white) !important;
}

/* Expanded row highlight (EvoX 'accordion' rows) */
.myaccount table.dataset tbody tr.tr-header,
.myaccount table.dataset tbody tr.tr-header.collapsed,
.myaccount table.dataset tbody tr.tr-header:not(.collapsed) {
    background: #173961 !important;   /* slightly lighter blue */
    color: var(--wis-white) !important;
}

/* Ensure icons remain visible */
.myaccount table.dataset tbody tr i {
    color: var(--wis-white) !important;
    opacity: 0.85;
}
/* ================================
   CONTRACT ITEMS FILTER PANEL FIX
   Make all text/icons visible on dark WIS theme
   ================================ */

/* Filter panel container */
.filter-container,
.filterswrapper,
.filter-title.theme-2 span,
.filter-section h5,
.empty-result,
.empty-result i {
    color: var(--wis-white) !important;
}

/* Background of filter card */
.filter-container {
    background: #0d233f !important; /* WIS dark blue */
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Search & Filter header */
.filter-title.theme-2 {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* Toggle label text */
.filter-section .filter-static {
    color: var(--wis-white) !important;
}

/* Toggle switch outline */
.filter-section .switch label {
    border-color: var(--wis-white) !important;
}

/* Toggle switch background active/inactive */
.cmn-toggle-round-flat:checked + label {
    background-color: #1e90ff !important; /* nice bright blue */
}

/* Placeholder text (Search, No filter available) */
.filter-container ::placeholder,
.empty-result {
    color: rgba(255,255,255,0.6) !important;
}

/* The downward arrow */
.arrow-down {
    border-top-color: var(--wis-white) !important;
}
/* Contract Items Page Title Fix */
.myaccount-title h2,
.myaccount-title h2 span,
.myaccount-title h2 i {
    color: var(--wis-white) !important;      /* bright white */
    font-weight: 600 !important;             /* stronger title */
}

/* Optional: Slight text shadow for contrast on gradient background */
.myaccount-title h2 {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
/* --------------------------------------------- */
/* Fix: Date Range Picker – Light Text on Light BG */
/* --------------------------------------------- */

/* Range list (Today, Yesterday, Last 7 Days, etc.) */
.daterangepicker .ranges li,
.daterangepicker .ranges li.active {
    color: #0a0a0a !important;        /* dark readable text */
}

/* Calendar days */
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th,
.daterangepicker .month {
    color: #0a0a0a !important;
}

/* Active selection (blue box) numbers */
.daterangepicker td.active,
.daterangepicker td.active span,
.daterangepicker .start-date,
.daterangepicker .end-date {
    color: #ffffff !important;        /* white on blue */
}

/* Header arrows */
.daterangepicker .prev span,
.daterangepicker .next span {
    border-color: #0a0a0a !important;
}

/* Labels under calendars */
.daterangepicker .drp-selected {
    color: #0a0a0a !important;
}

/* Clear / Apply buttons */
.daterangepicker .applyBtn,
.daterangepicker .cancelBtn {
    color: #ffffff !important;
}

/* Base text color override (catch-all) */
.daterangepicker {
    color: #0a0a0a !important;
}
/* Disable any scroll snapping that can cause jumpy scroll */
html, body,
.wrapper, .page-wrapper,
.main-container, .content {
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
}

/* Keep anchor jumps smooth (optional) */
html {
    scroll-behavior: smooth !important;
}
/* Fix white text on white background in all My Account input fields */
.myaccount input.form-control,
.myaccount select.form-control,
.myaccount textarea.form-control {
    color: #000 !important;           /* Dark readable text */
    background-color: #ffffff !important; 
}

/* Also force placeholder text to be visible */
.myaccount input.form-control::placeholder,
.myaccount select.form-control::placeholder,
.myaccount textarea.form-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

/* Email field specifically */
input[type="email"].form-control {
    color: #000 !important;
}
/* Fix "Additional Info" section text color */
.m yaccount #details .right-details h4,
.myaccount #details .right-details p,
.myaccount #details .right-details label {
    color: #ffffff !important; /* bright white text */
}

/* Fix muted text (they force it gray by default) */
.myaccount #details .right-details .text-muted {
    color: #d0d0d0 !important; /* light gray for subtext */
}
/* Fix dark <h4> headers inside My Account pages */
.myaccount.users form h4,
.myaccount #details .right-details h4 {
    color: #ffffff !important; /* bright white */
}
/* Fix text contrast in modals (Save to Quick List, Add to Cart, Compare, etc.) */
.modal-content,
.modal-body,
.modal-body * {
    color: #1e1e1e !important; /* strong dark grey, readable on white */
}

/* Fix modal labels */
.modal-body label {
    color: #000 !important;
    font-weight: 600;
}

/* Fix product title inside modal */
.modal-body .bolder,
.modal-body .name a {
    color: #000 !important;
}

/* Fix "Save to Quick List" heading text */
#addtoquicklistform label,
#addtoquicklistform h4,
#addtoquicklistform .form-group label {
    color: #000 !important;
}
/* FIX MODAL HEADER TEXT */
.modal-content h3,
.modal-body h3,
.modal-header h3 {
    color: #000 !important;     /* solid black, readable on white */
    font-weight: 600 !important;
}

/* FIX PRIMARY BUTTON TEXT INSIDE MODALS */
.modal-content .btn-primary,
.modal-body .btn-primary {
    color: #ffffff !important;  /* ensure white text on blue button */
    font-weight: 600;
}

/* Optional: improve button hover contrast */
.modal-content .btn-primary:hover,
.modal-body .btn-primary:hover {
    color: #ffffff !important;
    opacity: 0.9;
}
/* Make the modal header match WIS blue */
#addtoquicklistModal .modal-header {
    background: #0a2740 !important;   /* your WIS dark blue */
    border-bottom: none !important;
}

/* Keep the header text white */
#addtoquicklistModal .modal-header h3,
#addtoquicklistModal .modal-header .text-center {
    color: #ffffff !important;
}

/* Make the X button white */
#addtoquicklistModal .modal-header .close,
#addtoquicklistModal .modal-header .close span {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* Remove default gray hover */
#addtoquicklistModal .modal-header .close:hover {
    color: #e6e6e6 !important;
}