/* ==========================================================================
   MB Belt Comparison — mb-belt-comparison.css
   v2.5.5
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Compare bar — base (desktop/tablet)
   -------------------------------------------------------------------------- */
.mb-compare-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.mb-compare-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. Inner layout
   -------------------------------------------------------------------------- */
.mb-compare-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mb-compare-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mb-compare-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid #ccc;
    padding: 4px 10px;
    font-size: 12px;
}

.mb-compare-pill-remove {
    border: none;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.mb-compare-pill-remove:hover {
    opacity: 0.7;
}

.mb-compare-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mb-compare-button,
.mb-compare-clear {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    white-space: nowrap;
}

.mb-compare-button[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* --------------------------------------------------------------------------
   3. "Add to Compare" checkbox on belt cards
   -------------------------------------------------------------------------- */
.mb-belt-compare {
    margin-top: 4px;
    font-size: 13px;
}

.mb-belt-compare input[type="checkbox"] {
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   4. Comparison table page
   -------------------------------------------------------------------------- */
.mb-belt-comparison {
    margin-top: 16px;
    overflow: visible;
}

.mb-belt-comparison * {
    max-height: none;
}

.mb-belt-comparison__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
}

.mb-print-button {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
}

.mb-uom-toggle label {
    margin-right: 10px;
    font-size: 14px;
    cursor: pointer;
}

.mb-belt-comparison__table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    font-size: 14px;
}

.mb-belt-comparison__table th,
.mb-belt-comparison__table td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: center;
}

.mb-belt-comparison__table th {
    background: #f6f6f6;
    position: sticky;
    top: 0;
    z-index: 1;
}

.mb-belt-comparison__table tbody tr:nth-child(odd) {
    background: #fafafa;
}

.mb-belt-comparison__thumb img {
    max-width: 70px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.mb-belt-comparison__view-spec {
    margin-top: 6px;
    text-align: center;
}

.mb-belt-comparison__view-spec a {
    font-size: 13px;
    text-decoration: underline;
}

.mb-belt-comparison__table th.mb-sortable {
    cursor: pointer;
    user-select: none;
}

.mb-belt-comparison__table th.mb-sortable.mb-sort-asc::after {
    content: " ▲";
    font-size: 12px;
}

.mb-belt-comparison__table th.mb-sortable.mb-sort-desc::after {
    content: " ▼";
    font-size: 12px;
}

.mb-part-cell .mb-compare-remove-row {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.mb-compare-warning {
    margin: 12px 0;
    font-weight: 600;
}

/* Elementor overflow fix */
.elementor-element .mb-belt-comparison,
#belt-compare-grid {
    overflow: visible !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   5. MOBILE — Compare bar behavior
   --------------------------------------------------------------------------

   Confirmed DOM structure inside 89d8823 (mobile-only header):

     89d8823  ← outer header container
       c37e93a    ← icon row: filter-icon | menu-icon  (grid layout)
         cafa8bd  ← compare bar shortcode (CHILD of c37e93a)
       4968653    ← logo + contact wrapper
         8137a98  ← site logo
         .contact-row ← phone + email
       90b8492    ← nav-menu row

   Desired behavior:
   • Page load: bar hidden. Full header visible top→bottom:
       [icons] [logo] [contact] [nav]
   • Bar appears: overlays the contact row. The bar's bottom edge sits at
       the same vertical position as the contact row's bottom edge.
       Logo is NOT hidden — bar appears between icon row and logo.
   • Scrolling up: logo and contact row slide upward behind the bar.
       Bar stays fixed below icon row. Green header bg remains visible.
       Page content does NOT show through the header area.
   • Bar hidden/cleared: no layout shift, no extra padding.

   Implementation:
   - 89d8823: position:sticky, holds entire header at top initially
   - c37e93a: position:sticky inside 89d8823, pins to top as scroll happens
     Green background ensures no content bleed-through once logo scrolls away
   - compare bar: position:fixed, top = adminBar + icon-row-height
     z-index above logo/contact (1) but below icon row (9950)
   - 4968653 / 90b8492: normal flow, z-index:1, scroll away naturally
   - Loop grid: margin-top = bar height only when bar is visible
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* ── Outer header: normal flow — scrolls away as user scrolls ── */
    .elementor-element-89d8823 {
        position: relative !important;
        z-index: auto !important;
    }

    /* ── Icon row: sticky at very top of viewport ── */
    .elementor-element-c37e93a {
        position: sticky !important;
        top: var(--wp-admin--admin-bar--height, 0px) !important;
        z-index: 9950 !important;
        background-color: #008345 !important;
        width: 100% !important;
    }

    /* ── Green backdrop: fixed, covers ONLY the icon row height ───────────
       Fills the gap that appears when logo+contact scroll away. The compare
       bar has its own white background and sits on top of this. The logo and
       contact rows are normal flow and scroll in front of this backdrop while
       they are still in the viewport, then slide away above it.
       ────────────────────────────────────────────────────────────────── */
    .elementor-element-c37e93a::after {
        content: '' !important;
        display: block !important;
        position: fixed !important;
        top: var(--wp-admin--admin-bar--height, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--mb-icon-row-height, 60px) !important;
        background-color: #008345 !important;
        z-index: 9920 !important; /* above page content (1), below logo (9930), bar (9940), icons (9950) */
        pointer-events: none !important;
    }

    /* ── Logo + contact wrapper: normal flow, scrolls away ──
       z-index 9930 keeps it above the backdrop (9920) while visible. */
    .elementor-element-4968653,
    .elementor-element-90b8492 {
        position: relative !important;
        z-index: 9930 !important;
    }

    /* ── Logo widget: sticky within its container ──
       As the contact row scrolls away, the logo stays pinned just below
       the icon row. Once 4968653 itself scrolls fully off screen the logo
       goes with it (correct — nothing to pin against anymore). */
    .elementor-element-8137a98 {
        position: sticky !important;
        top: var(--mb-icon-row-height, 60px) !important;
        z-index: 9935 !important;
        background-color: #008345 !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* ── Compare bar hidden: beats display:flex below ── */
    .elementor-element-cafa8bd .mb-compare-bar.mb-compare-hidden {
        display: none !important;
    }

    /* ── Compare bar: fixed below icon row, in front of logo/contact ── */
    .elementor-element-cafa8bd .mb-compare-bar {
        position: fixed !important;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--mb-bar-top-offset, 60px)) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;

        z-index: 9940 !important; /* above backdrop+logo (9920/9930), below icon row (9950) */

        background: #ffffff !important;
        border-bottom: 3px solid #008345 !important;
        padding: 8px 14px !important;

        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* ── Loop grid: push down by bar height only when bar is visible ── */
    .elementor-element-49cf22c .elementor-loop-container {
        margin-top: var(--mb-compare-offset, 0px) !important;
        transition: margin-top 0.15s ease;
    }

    /* Left side: label + pills */
    .elementor-element-cafa8bd .mb-compare-bar .mb-compare-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Pills */
    .elementor-element-cafa8bd .mb-compare-bar .mb-compare-pill {
        font-size: 11px !important;
        padding: 3px 8px !important;
        gap: 5px !important;
    }

    /* Right side: Clear + Compare */
    .elementor-element-cafa8bd .mb-compare-bar .mb-compare-right {
        flex-shrink: 0 !important;
        display: flex !important;
        gap: 6px !important;
    }

    /* Compare button */
    .elementor-element-cafa8bd .mb-compare-bar .mb-compare-button {
        background: #008345 !important;
        color: #ffffff !important;
        border-color: #008345 !important;
        border-radius: 20px !important;
        padding: 5px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .elementor-element-cafa8bd .mb-compare-bar .mb-compare-button:not([disabled]):active {
        background: #006d38 !important;
    }

    /* Clear button */
    .elementor-element-cafa8bd .mb-compare-bar .mb-compare-clear {
        padding: 5px 10px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }

    /* ── Widget wrapper: zero-size, bar escapes via overflow:visible ── */
    .elementor-element-cafa8bd,
    .elementor-element-cafa8bd .elementor-widget-container,
    .elementor-element-cafa8bd .elementor-shortcode {
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    /* ── Hide desktop compare bar on mobile ── */
    .elementor-element-aa6946b .mb-compare-bar {
        display: none !important;
    }

    /* Belt card checkboxes stay above page content */
    .mb-belt-compare {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Collapse Elementor sticky wrapper inside icon column */
    .elementor-element-c37e93a .elementor-sticky__wrapper {
        height: 0 !important;
        overflow: visible !important;
    }
}


/* --------------------------------------------------------------------------
   6. Print styles
   -------------------------------------------------------------------------- */
.mb-print-header {
    display: none;
}

@media print {
    @page { margin: 0.6in 0.5in; }

    #wpadminbar,
    header,
    .elementor-location-header,
    .site-header,
    .ast-header-break-point,
    .ast-primary-header-bar,
    .main-header-bar,
    .elementor-nav-menu,
    nav,
    footer,
    .elementor-location-footer,
    .site-footer,
    .footer,
    .ast-footer-wrap,
    .elementor-footer,
    .no-print,
    .mb-compare-bar,
    .mb-belt-comparison__toolbar,
    .mb-print-button { display: none !important; }

    .mb-print-header {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        margin: 0 0 14px 0;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #ddd;
    }

    .mb-print-header__left img,
    .mb-print-header__left .custom-logo {
        max-height: 70px;
        width: auto;
        height: auto;
        display: block;
    }

    .mb-print-header__right {
        text-align: right;
        font-size: 12px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .mb-belt-comparison__table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 11px;
    }

    .mb-belt-comparison__table th,
    .mb-belt-comparison__table td {
        padding: 6px 6px !important;
        border: 1px solid #ddd !important;
        vertical-align: top;
    }

    .mb-belt-comparison__table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .mb-belt-comparison__thumb img {
        max-width: 120px;
        height: auto;
    }
}