/* =====================================================================
   Mulhern Advanced Search — SITE-WIDE styles
   Version: 1.0.0 (2026-10)

   Loaded on every front-end page: the Advanced Search link (desktop nav +
   mobile icon), the modal with its Belts / Fabrications choice, the result
   status, and the progress / clearing dialogs.

   Most rules moved here unchanged from advanced-search-modal-system.css,
   which now holds only the listing-page layout rules. New rules for the
   type choice and form loading are at the end.
   ===================================================================== */

/* =====================================================================
   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;
}

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

.mb-search-modal {
    z-index: 99999 !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;
}


/* 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;
    }
}

/* =====================================================================
   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 #belts-search-button-bottom,
.mb-search-modal__body #belts-reset-search-bottom,
.mb-search-modal__body #belts-expand-all-bottom,
.mb-search-modal__body #belts-collapse-all-bottom,
.mb-search-modal__body #fabrications-search-button-bottom,
.mb-search-modal__body #fabrications-reset-search-bottom,
.mb-search-modal__body #fabrications-expand-all-bottom,
.mb-search-modal__body #fabrications-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;
}

/* =====================================================================
   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);
    }
}

/* =====================================================================
   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 / FABRICATIONS CHOICE (between the modal title and the form)
   ===================================================================== */
.mb-search-modal__type {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 24px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
}

.mb-search-modal__type-label {
    font-weight: 600;
    color: #333;
    margin-right: 4px;
}

.mb-search-type-option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.mb-search-type-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.mb-search-type-option span {
    display: inline-block;
    padding: 6px 20px;
    border: 2px solid var(--mb-primary-color);
    border-radius: 20px;
    color: var(--mb-primary-color);
    background: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mb-search-type-option input:checked + span {
    background: var(--mb-primary-color);
    color: #fff;
}

.mb-search-type-option:hover input:not(:checked) + span {
    background: #eef7f2;
}

.mb-search-type-option input:focus-visible + span {
    outline: 2px solid #333;
    outline-offset: 2px;
}

/* One panel per form type; only the chosen one is shown */
.mb-search-modal__panel[hidden] {
    display: none !important;
}

.mb-search-modal__loading,
.mb-search-modal__error {
    text-align: center;
    padding: 40px 0;
    color: #555;
    font-size: 16px;
}

.mb-search-modal__loading .mb-clearing-spinner {
    margin-bottom: 12px;
}

.mb-search-modal__error button {
    margin-top: 12px;
    background: var(--mb-primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 18px;
    cursor: pointer;
}

/* Forms loaded into the modal on other pages: keep them visible and
   full width (the listing pages' FOUC rules don't apply there). */
.mb-search-modal__body .mb-search-root {
    display: block;
    width: 100%;
}

@media (max-width: 767px) {
    .mb-search-modal__type {
        padding: 8px 20px;
    }
}

/* =====================================================================
   DESKTOP HEADER PLACEMENT — under the quick search box
   The [advanced_search_desktop] shortcode widget sits in the middle
   column of the logo row (header 198462, section 752c9f24), directly
   below the "Belt Search..." quick search widget.
   ===================================================================== */
.elementor-198462 .elementor-element-752c9f24 .elementor-widget:has(+ .elementor-widget .mb-advanced-search-link-nav) {
    margin-bottom: 0 !important;   /* no widget gap between the two */
}

.elementor-198462 .elementor-element-752c9f24 .mb-advanced-search-link-nav {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.elementor-198462 .elementor-element-752c9f24 .mb-advanced-search-link-nav__anchor {
    padding: 4px 8px !important;
}

.elementor-198462 .elementor-element-752c9f24 .mb-search-result-status {
    padding: 0 0 2px;
}