/* =====================================================================
   Mulhern Advanced Search Modal System - Styles
   Version: 1.1.3 - FINAL: Gap Fix + Viewport Modal Positioning
   
   FIXES:
   - Removed background/box-shadow from sticky header (prevents gap)
   - Modal uses viewport units (50vh/50vw) for proper centering
   - Full width sticky header on all viewports
   - Scroll boundary compatible
   ===================================================================== */

/* =====================================================================
   CSS CUSTOM PROPERTIES
   ===================================================================== */
:root {
    --mb-primary-color: #018345;
    --mb-primary-hover: #016835;
    --mb-modal-width: 600px;
    --mb-modal-max-width: 90vw;
    --mb-transition-speed: 0.3s;
    --mb-backdrop-color: rgba(0, 0, 0, 0.5);
    --mb-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --mb-border-radius: 8px;
}

/* =====================================================================
   STICKY HEADER FIX - No gap, proper layering, FULL WIDTH
   ===================================================================== */

/* Mobile ONLY - Green header with padding */
@media (max-width: 767px) {
    /* Remove default body/html margins on mobile */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Green background behind header to cover any gap */
    html {
        background-color: var(--mb-primary-color) !important;
    }
    
    /* Page content stays white */
    body {
        background-color: #fff !important;
    }
    
    /* Header is green on mobile */
    .elementor-location-header {
        background: var(--mb-primary-color) !important;
    }
    
    /* Add internal padding to header for icon spacing */
    .elementor-location-header > .elementor-section,
    .elementor-location-header > .e-con {
        padding-top: 20px !important;
        padding-bottom: 10px !important;
    }
}

/* Base header state - ALL SCREEN SIZES */
/* CRITICAL: Only set position: relative when NOT sticky */
/* This allows Elementor's sticky to change to position: fixed */
.elementor-location-header:not(.elementor-sticky--active) {
    position: relative !important;
    z-index: 9999 !important;
}

/* Z-index for both sticky and non-sticky states */
.elementor-location-header,
.elementor-sticky--active {
    z-index: 9999 !important;
}

/* Desktop - ensure no background override, let Elementor control it */
@media (min-width: 768px) {
    .elementor-location-header {
        background: none !important;  /* Don't force green on desktop */
    }
    
    .elementor-location-header > .elementor-section,
    .elementor-location-header > .e-con {
        padding-top: 0 !important;  /* No extra padding on desktop */
        padding-bottom: 0 !important;
    }
}

/* Sticky state - FORCE top: 0 to prevent gap + FULL WIDTH */
/* DESKTOP/TABLET ONLY: On mobile, nothing is sticky — the header scrolls
   with the page. This scope prevents the broad .elementor-sticky--active
   selector from affecting mobile. */
@media (min-width: 768px) {
    .elementor-sticky--active,
    .elementor-sticky--active.elementor-section,
    .elementor-sticky--active.e-con,
    .elementor-sticky--active.elementor-widget {
        position: fixed !important;
        top: 0 !important;  /* CRITICAL: Forces to top, no gap */
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;  /* Full viewport width */
        max-width: none !important;  /* Remove any max-width constraints */
        z-index: 9999 !important;
        margin: 0 !important;
    }
}

/* MOBILE: Kill Elementor sticky behavior on header elements.
   The search icon (c37e93a) and hamburger (90b8492) are individually
   position:fixed via custom-styles.css section 4. Elementor's sticky
   JS should not interfere by adding its own fixed positioning.

   Elementor's sticky JS does two things:
   1) Adds .elementor-sticky--active class to the sticky element
   2) Wraps it in a <div class="elementor-sticky__wrapper" style="position:fixed">

   We kill the wrapper's fixed positioning but NOT the icon containers'
   fixed positioning (which we set ourselves). */
@media (max-width: 767px) {
    /* Kill sticky on the header itself and inner sections */
    .elementor-location-header.elementor-sticky--active,
    .elementor-location-header > .elementor-sticky--active {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
    }

    /* Kill sticky wrapper divs — but preserve width */
    .elementor-location-header .elementor-sticky__wrapper,
    .elementor-198462 .elementor-sticky__wrapper,
    .elementor-sticky__wrapper:has(.elementor-location-header),
    .elementor-sticky__wrapper:has(.elementor-198462) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        margin: 0 !important;
    }

    /* Kill any sticky spacers */
    .elementor-location-header .elementor-sticky__spacer,
    .elementor-198462 .elementor-sticky__spacer {
        display: none !important;
        height: 0 !important;
    }

    /* 89d8823 green bar stays in normal flow */
    .elementor-198462 .elementor-element.elementor-element-89d8823 {
        position: relative !important;
    }
}

/* Desktop sticky state - no background override */
@media (min-width: 768px) {
    .elementor-sticky--active {
        background: none !important;  /* Let Elementor control desktop background */
    }
}

/* Remove Elementor's auto-calculated top offset — DESKTOP ONLY */
@media (min-width: 768px) {
    .elementor-sticky--active[style*="top"] {
        top: 0 !important;
    }
}

/* Ensure container inside sticky header expands to full width — DESKTOP ONLY */
@media (min-width: 768px) {
    .elementor-sticky--active .elementor-container {
        max-width: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure inner content wrapper also expands */
    .elementor-sticky--active .e-con-inner,
    .elementor-sticky--active .elementor-widget-wrap {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Force full width on wide viewports (> 1460px) */
@media (min-width: 1461px) {
    .elementor-sticky--active {
        width: 100vw !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .elementor-sticky--active .elementor-container,
    .elementor-sticky--active .e-con-inner {
        max-width: none !important;
        width: 100% !important;
    }
}

/* =====================================================================
   CONTENT AREA - Full width for grid expansion
   With the search widget in a modal, the grid gets the entire page.
   Remove Elementor container max-width constraints so the grid can
   fill the available space at every viewport width.
   
   Override both CSS variables AND direct properties to ensure the
   width busts through regardless of how Elementor consumes --width.
   ===================================================================== */
@media (min-width: 768px) {
    #search-parent .elementor-container,
    #search-parent .e-con,
    #search-parent .e-con-inner,
    #search-data-div .elementor-container,
    #search-data-div .e-con,
    #search-data-div .e-con-inner,
    #search-parent,
    #search-data-div {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Also bust the global kit container max-width on ALL .e-con
       elements in the search page content area                      */
    .elementor-196785 .e-con {
        --container-max-width: 100% !important;
    }
    
    .elementor-196785 .e-con > .e-con-inner {
        max-width: 100% !important;
    }
}

/* Ensure modal and backdrop stay on top */
.mb-search-modal-backdrop {
    z-index: 99998 !important;
}

.mb-search-modal {
    z-index: 99999 !important;
}

/* First content element needs proper spacing from sticky header */
.elementor-location-header ~ * {
    margin-top: 0 !important;
}

#search-parent,
#search-data-div {
    margin-top: 0 !important;
    padding-top: 8px !important;
    /* Kill Elementor kit default container padding */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
}

/* =====================================================================
   DESKTOP/TABLET: Advanced Search Link (new -nav version)
   ===================================================================== */
.mb-advanced-search-link-nav {
    display: block !important;
    text-align: center !important;
    margin: 2px 0 12px 0 !important;  /* Reduced top margin (was 8px) — Issue #4 */
    padding: 4px 0 !important;
    z-index: 10000 !important;
    position: relative !important;
    background: #fff !important;      /* Solid background prevents grid bleed-through — Issue #1 */
}

/* Ensure the shortcode WIDGET that holds the Advanced Search link
   and result status sits ABOVE the grid in the stacking order.
   Target at the widget level so it competes with sibling widgets
   in the same Elementor container. */
.elementor-widget:has(.mb-advanced-search-link-nav),
.elementor-widget-shortcode:has(.mb-advanced-search-link-nav),
.elementor-shortcode:has(.mb-advanced-search-link-nav) {
    position: relative !important;
    z-index: 100 !important;
}

/* The loop grid widget should have a lower stacking context so
   card images/shadows don't overlap the result status text above */
.elementor-widget-loop-grid {
    position: relative !important;
    z-index: 1 !important;
}

/* Grid PARENT containers (.e-con holding the loop-grid) must also
   have a lower z-index. overflow-x:hidden on .e-con creates separate
   stacking contexts, so sibling containers stack by z-index.
   The nav shortcode container (z-index:10) must beat these. — Issue #1 */
.e-con:has(.elementor-widget-loop-grid) {
    position: relative !important;
    z-index: 1 !important;
}

#search-parent {
    position: relative !important;
    z-index: 1 !important;
}

/* CRITICAL: The .e-con containers have overflow-x:hidden which creates
   separate stacking contexts. The container holding the nav shortcode
   must be ABOVE the container holding the grid. Target via :has()
   so this works on both belts and fabrications pages. */
.e-con:has(.mb-advanced-search-link-nav) {
    position: relative !important;
    z-index: 10 !important;
    background: #fff !important;
    /* Kill Elementor kit default padding (60px desktop, 45px tablet, 30px mobile)
       which creates a huge gap between nav menu and Advanced Search link */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mb-advanced-search-link-nav__anchor {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--mb-primary-color) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
}

.mb-advanced-search-link-nav__anchor:hover {
    color: var(--mb-primary-hover) !important;
    text-decoration: underline !important;
}

.mb-advanced-search-link-nav__icon {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Hide desktop link on mobile */
@media (max-width: 767px) {
    .mb-advanced-search-link-nav {
        display: none !important;
    }
}

/* =====================================================================
   DESKTOP: Search Result Status (below Advanced Search link)
   ===================================================================== */
.mb-search-result-status {
    text-align: center;
    padding: 4px 0 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

.mb-search-result-status__text {
    font-weight: 500;
    color: #333;
}

#mb-result-count {
    font-weight: 700;
    color: var(--mb-primary-color, #008345);
}

.mb-search-result-status__separator {
    margin: 0 6px;
    color: #aaa;
}

.mb-search-result-status__clear {
    color: var(--mb-primary-color, #008345);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mb-search-result-status__clear:hover {
    color: var(--mb-primary-hover, #006633);
}

/* Desktop status: still hidden on mobile (parent container is hidden anyway) */
@media (max-width: 767px) {
    .mb-search-result-status {
        display: none !important;
    }


.mb-search-result-status__text {
    font-weight: 500;
    color: #fff;
}

}

/* =====================================================================
   MOBILE: Search Result Status Bar (injected by JS)
   Fixed in the header strip between the search icon and hamburger.
   ===================================================================== */
.mb-search-result-status-mobile {
    display: none; /* shown by JS when results arrive */
    text-align: center;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.3;
    color: #fff;
    background: #008345;
    border-radius: 20px;
    white-space: nowrap;
    /* Fixed in header strip, centered between the two icons */
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
    left: 62px;
    right: 62px;
    z-index: 99998;
    margin: 0;
}

.mb-search-result-status-mobile .mb-result-count-mobile {
    font-weight: 700;
    color: #ffd700; /* yellow count */
}

.mb-search-result-status-mobile .mb-search-result-status__separator {
    margin: 0 4px;
 /*  color: rgba(255,255,255,0.6); */
    color: #fff;
}

.mb-search-result-status-mobile .mb-clear-filters-mobile {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

/* Hide mobile bar on desktop (only needed on small viewports) */
@media (min-width: 768px) {
    .mb-search-result-status-mobile {
        display: none !important;
    }
}

/* =====================================================================
   MOBILE: Compare bar sticky + spacing below status bar
   ===================================================================== */
@media (max-width: 767px) {
    #mb-compare-bar {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 60px);
        z-index: 99;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        margin-bottom: 10px;
    }
}

/* Click-outside menu dismiss handled by capture-phase JS listener — no backdrop needed */

/* =====================================================================
   SEARCH INFO PANEL — Rotating magnifying glass animation
   ===================================================================== */
.mb-search-glass {
    display: inline-block;
    vertical-align: middle;
    color: #008345;
    animation: mb-glass-spin 1.2s ease-in-out infinite;
    transform-origin: center center;
}

.mb-search-glass svg {
    display: block;
}

@keyframes mb-glass-spin {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(25deg); }
    100% { transform: rotate(0deg); }
}

/* =====================================================================
   "CLEARING FILTERS…" OVERLAY
   ===================================================================== */
.mb-clearing-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200002; /* above everything including search-info modal */
    justify-content: center;
    align-items: center;
}

.mb-clearing-overlay.visible {
    display: flex;
}

.mb-clearing-content {
    background: #fff;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 320px;
    width: 80%;
}

.mb-clearing-content p {
    margin: 12px 0 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    font-family: "Poppins", sans-serif;
}

.mb-clearing-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #e0e0e0;
    border-top: 5px solid #008345;
    border-radius: 50%;
    margin: 0 auto;
    animation: mb-clearing-spin 0.8s linear infinite;
}

@keyframes mb-clearing-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =====================================================================
   MOBILE: Advanced Search Link - No Border, Matches Hamburger
   ===================================================================== */

/* MOBILE: Ensure search icon click area is not clipped — Issue #2
   The search icon (c37e93a) is now position:fixed via custom-styles.css,
   so it's above all other content. Ensure minimum dimensions for the
   44×44 touch target. */
@media (max-width: 767px) {
    .elementor-198462 .elementor-element.elementor-element-c37e93a {
        overflow: visible !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .elementor-198462 .elementor-element.elementor-element-c37e93a .elementor-widget-container,
    .elementor-198462 .elementor-element.elementor-element-c37e93a .elementor-shortcode {
        overflow: visible !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .elementor-198462 .elementor-element.elementor-element-c37e93a > .elementor-widget-wrap,
    .elementor-198462 .elementor-element.elementor-element-c37e93a > .elementor-widget-wrap > .elementor-widget {
        overflow: visible !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}
   
/* Ensure shortcode wrapper is visible on mobile */
@media (max-width: 767px) {
    .elementor-shortcode:has(#mb-advanced-search-link) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

#mb-advanced-search-link {
    /* Base styles — mobile fixed positioning is in custom-styles.css section 4c */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: none !important;
    text-decoration: none !important;
    font-size: 0 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Issue #2: Ensure full click area is active */
    position: relative !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
}

/* Hover state */
#mb-advanced-search-link:hover {
    text-decoration: none !important;
    transform: scale(1.05) !important;
}

/* Active/pressed state */
#mb-advanced-search-link:active {
    transform: scale(0.95) !important;
}

/* Icon styling - centered in button */
#mb-advanced-search-link svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Show mobile link only on mobile */
@media (min-width: 768px) {
    #mb-advanced-search-link {
        display: none !important;
    }
}

/* =====================================================================
   MODAL BACKDROP
   ===================================================================== */
.mb-search-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mb-backdrop-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* Inert when closed — don't intercept clicks */
    transition: opacity var(--mb-transition-speed) ease,
                visibility var(--mb-transition-speed) ease;
    z-index: 99998;
}

.mb-search-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;   /* Clickable when open */
}

/* =====================================================================
   MODAL DIALOG - Clean CSS with conflict resolved
   ===================================================================== */
.mb-search-modal {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--mb-modal-width);
    max-width: var(--mb-modal-max-width);
    max-height: 90vh;
    background: #fff;
    border-radius: var(--mb-border-radius);
    box-shadow: var(--mb-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* Inert when closed — don't intercept clicks */
    transition: opacity var(--mb-transition-speed) ease,
                visibility var(--mb-transition-speed) ease,
                transform var(--mb-transition-speed) ease;
    z-index: 99999 !important;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.mb-search-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;   /* Interactive when open */
}

/* =====================================================================
   MODAL HEADER
   ===================================================================== */
.mb-search-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.mb-search-modal__title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #008345;
    text-align: center;
}

.mb-search-modal__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    background: #008345;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mb-search-modal__close:hover {
    background: #006835;
}

/* =====================================================================
   MODAL BODY
   ===================================================================== */
.mb-search-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px 24px;
}

/* Search widget inside modal — FOUC prevention restore.
   functions.php injects display:none !important on these elements
   to prevent flash before JS moves them into the modal.
   These rules explicitly restore display when inside the modal body. */
.mb-search-modal__body #search-wrapper,
.mb-search-modal__body #search-widget,
.mb-search-modal__body #belts-search-widget,
.mb-search-modal__body #fabrications-search-widget,
.mb-search-modal__body .fabrications-filters-wrapper {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Kill Elementor container default padding on #search-wrapper inside modal.
   #search-wrapper is .e-con which inherits --container-default-padding-top: 60px
   from the kit (post-7.css). That creates the big gap below the modal title. */
.mb-search-modal__body #search-wrapper,
.mb-search-modal__body #search-wrapper.e-con {
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Also kill widget-gap margin from Elementor's .elementor-widget:not(:last-child) rule */
.mb-search-modal__body .elementor-widget {
    margin-block-end: 0 !important;
}

/* =====================================================================
   STICKY TOP CONTROLS — pin Search/Reset/Chevrons to top of scroll area.
   We make all .search-controls sticky; the bottom set is hidden anyway.
   position:sticky works because .mb-search-modal__body has overflow-y:auto.
   ===================================================================== */
.mb-search-modal__body .search-controls {
    display: flex !important;  /* Restore from FOUC hide (functions.php sets display:none) */
    position: sticky !important;
    top: 0 !important;
    z-index: 10;
    background: #ffffff;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

/* Hide the empty .search-container form wrapper above controls */
.mb-search-modal__body .search-container {
    display: none;
}

/* =====================================================================
   HIDE BOTTOM CONTROLS — only top set should show in modal
   ===================================================================== */
.mb-search-modal__body #search-button-bottom,
.mb-search-modal__body #reset-search-bottom,
.mb-search-modal__body #expand-all-bottom,
.mb-search-modal__body #collapse-all-bottom {
    display: none !important;
}

/* Hide the entire bottom .search-controls container (after widget) */
.mb-search-modal__body #belts-search-widget ~ .search-controls,
.mb-search-modal__body #fabrications-search-widget ~ .search-controls,
.mb-search-modal__body .fabrications-filters-wrapper ~ .search-controls {
    display: none !important;
}

/* =====================================================================
   SINGLE SCROLLBAR — only the modal body should scroll
   ===================================================================== */
.mb-search-modal__body #belts-search-widget,
.mb-search-modal__body #fabrications-search-widget,
.mb-search-modal__body .fabrications-filters-wrapper,
.mb-search-modal__body #search-wrapper,
.mb-search-modal__body #search-widget {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* =====================================================================
   OVERLAY DIALOGS Z-INDEX — search-info and no-results must appear
   ABOVE the Advanced Search modal (z-index 99999).
   JS moves these to <body> so they aren't trapped by transform.
   ===================================================================== */
.search-modal-overlay {
    z-index: 200000 !important;
}
.search-modal-content {
    z-index: 200001 !important;
}
.no-results-modal-overlay {
    z-index: 200000 !important;
}
.no-results-modal-content {
    z-index: 200001 !important;
}

/* =====================================================================
   RESULTS GRID - Always visible on page
   After JS moves the search widget into the modal, #search-widget-div
   is empty. Hide it so it doesn't steal space from the results grid.
   ===================================================================== */

/* Hide the empty widget container (its content is now in the modal).
   Target BOTH the custom ID and Elementor's own class, since the ID
   may not be set in Elementor's panel.                                 */
#search-widget-div,
#search-widget-div.e-con,
.elementor-page-196785 .elementor-element.elementor-element-a3b1c51 {
    display: none !important;
}

/* =====================================================================
   OVERRIDE ELEMENTOR WIDTH CONSTRAINTS
   post-196785.css sets CSS variables consumed by Elementor's base CSS:
     --content-width: 80% on the outer wrapper (7940c64)
     --width: 90% on #search-parent (f5b2f50)
     --width: 0%  on #search-data-div (a8ef7a9)
   post-7.css (kit) sets:
     --container-max-width: 1120px on all .e-con
   Combined: 1120 × 0.8 × 0.9 = ~806px — only 2 cards fit.
   
   Override BOTH the CSS variables AND the computed properties directly.
   The belt-and-suspenders approach ensures the override works even if
   Elementor's base CSS consumes variables in unexpected ways.
   ===================================================================== */

/* --- Outer boxed container (7940c64) --- */
.elementor-196785 .elementor-element.elementor-element-7940c64 {
    --content-width: 100% !important;
    --container-max-width: 100% !important;
    max-width: 100% !important;
}

/* Issue #3: Add side padding so grid cards don't go edge-to-edge
   on tablet/smaller desktop viewports. Uses % so it scales with viewport.
   Mobile has its own padding in the <768px rules.
   Issue #4: Reduce top padding for less vertical space after nav menu. */
@media (min-width: 768px) {
    .elementor-196785 .elementor-element.elementor-element-7940c64 {
        padding-left: max(20px, 3%) !important;
        padding-right: max(20px, 3%) !important;
        padding-top: 8px !important;  /* Was 20px from Elementor */
    }
}
@media (max-width: 767px) {
    .elementor-196785 .elementor-element.elementor-element-7940c64 {
        padding-top: 8px !important;  /* Issue #4: Reduce mobile spacing too */
    }
}

/* The boxed container's inner wrapper — this is where --content-width
   is actually consumed as max-width by Elementor's base CSS.           */
.elementor-196785 .elementor-element.elementor-element-7940c64 > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
}

/* --- Search parent (f5b2f50) --- */
.elementor-196785 .elementor-element.elementor-element-f5b2f50 {
    --width: 100% !important;
    --container-max-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Search data div (a8ef7a9) — post-196785.css sets --width:0% --- */
.elementor-196785 .elementor-element.elementor-element-a8ef7a9 {
    --width: 100% !important;
    --container-max-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* Also override by ID for any pages using generic IDs                   */
#search-parent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 8px !important;     /* Issue #4: Reduced from 20px (60% reduction) */
    padding-bottom: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Issue #3: Side padding on search-parent for both belts & fabrications pages */
@media (min-width: 768px) {
    #search-parent {
        padding-left: max(20px, 3%) !important;
        padding-right: max(20px, 3%) !important;
    }
}

#search-data-div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* =====================================================================
   RESPONSIVE GRID COLUMNS — auto-fill replaces fixed breakpoints
   Now that the widget is in a modal the grid gets the full page width.
   auto-fill with minmax lets columns adapt to ANY viewport width
   without hard-coded breakpoint math.
   Card min-width 280px → 3 cols at ~900px, 4 at ~1200px, 5 at ~1500px
   
   Competing fixed-column rules have been removed from belts-search.css,
   fabrications-search.css, and custom-styles.css.
   
   Target through .elementor-widget-loop-grid to also beat Elementor
   Pro's widget-loop-grid.min.css which uses --grid-columns.
   ===================================================================== */
@media (min-width: 768px) {
    /* High-specificity rule to beat Elementor Pro's widget CSS */
    .elementor-widget-loop-grid .elementor-loop-container.elementor-grid,
    .elementor-widget-loop-grid .elementor-grid,
    .elementor-widget-loop-grid .e-loop-container,
    /* Fallback generic selectors */
    .elementor-loop-container.elementor-grid,
    .elementor-grid,
    .e-loop-container {
        display: grid !important;
        /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; */
        /* ^^^ DISABLED: custom-styles.css controls column count via fixed
           breakpoints (.mb-search-page .elementor-widget-loop-grid
           .elementor-loop-container) scaling 2→8 columns. This auto-fill
           rule loaded after custom-styles.css and overrode those. */
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* On small screens, single centered column */
@media (max-width: 767px) {
    .elementor-loop-container.elementor-grid,
    .elementor-grid,
    .e-loop-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
    }

    .elementor-loop-container .elementor-grid-item,
    .e-loop-container .e-loop-item,
    .elementor-grid > * {
        width: 500px !important;
        max-width: calc(100% - 40px) !important;
    }
}

/* =====================================================================
   MOBILE FLOATING BUTTON
   ===================================================================== */
/* .mb-mobile-search-btn removed — floating icons now handled by
   custom-styles.css section 4 (fixed hamburger + search icon) */

/* =====================================================================
   BODY SCROLL LOCK
   ===================================================================== */
body.mb-modal-open {
    overflow: hidden;
}

/* =====================================================================
   LOADING SPINNER (for search info modal)
   ===================================================================== */
.mb-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mb-spin 0.8s linear infinite;
}

@keyframes mb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =====================================================================
   MOBILE HAMBURGER COLOR INVERSION
   ===================================================================== */
/* Scroll-based color inversion removed — icons are always 
   white bg / green icon (styled in custom-styles.css section 4) */

/* =====================================================================
   MOBILE MENU POSITIONING FIX
   ===================================================================== */
@media (max-width: 767px) {
    /* Mobile dropdown is position:fixed in custom-styles.css.
       Just ensure z-index and scroll behavior here. */
    .elementor-location-header .elementor-nav-menu--dropdown,
    .elementor-location-header .elementor-nav-menu__container {
        transform: none !important;
    }

    /* CSS class for JS dismiss — beats any Elementor display rules */
    .elementor-nav-menu--dropdown.mb-nav-hidden {
        display: none !important;
        visibility: hidden !important;
    }
}

/* =====================================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================================== */
@media (max-width: 767px) {
    .mb-search-modal {
        width: 95vw;
        max-height: 85vh;
    }
    
    .mb-search-modal__header {
        padding: 16px 20px;
    }
    
    .mb-search-modal__title {
        font-size: 20px;
    }
    
    .mb-search-modal__body {
        padding: 0 20px 20px 20px;
    }
}

@media (max-width: 480px) {
    .mb-search-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .mb-search-modal__header {
        padding: 12px 16px;
    }
    
    .mb-search-modal__body {
        padding: 0 16px 16px 16px;
    }
}

/* =====================================================================
   KEYBOARD FOCUS STYLES
   ===================================================================== */
.mb-advanced-search-link-nav__anchor:focus,
#mb-advanced-search-link:focus,
.mb-search-modal__close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* =====================================================================
   PRINT STYLES
   ===================================================================== */
@media print {
    .mb-search-modal-backdrop,
    .mb-search-modal,
    .mb-advanced-search-link-nav,
    #mb-advanced-search-link {
        display: none !important;
    }
}

/* =====================================================================
   BELTS PAGE FIX - Remove body margin/padding
   ===================================================================== */
/* Belts page (post-196785) has body margin/padding that causes spacing issues */
body.elementor-page-196785 {
    margin: 0 !important;
    padding: 0 !important;
}

/* On mobile, still need the margins for proper layout */
@media (max-width: 767px) {
    body.elementor-page-196785 {
        margin: 0 !important;
        padding: 0 !important;
    }
}
.elementor-element {
--widgets-spacing-row: 0px !important;
}