/* =====================================================================
 * Bricks Smart Ajax Search — Frontend styles
 *
 * - Full-screen overlay with fade animation (300ms)
 * - All colors via CSS custom properties defined inline by plugin
 * - Fully responsive: 1 col mobile, 2 col tablet, up to 4 col desktop
 * ===================================================================== */

/* Body scroll lock when popup is open */
body.bsas-noscroll {
        overflow: hidden;
        /* Position fixed causes page to jump to top on mobile — use sticky-free approach
           with the overlay using position: fixed covering the viewport via dvh units. */
}

/* Lock scroll on html too — prevents body scroll chain on iOS */
html.bsas-noscroll {
        overflow: hidden;
        height: 100%;
}

/* ---------- Overlay container ---------------------------------------- */
.bsas-overlay {
        position: fixed;
        /* Use 100dvh where supported — adjusts to browser chrome (address bar hide/show).
           Fallback to 100vh then 100% for older browsers. */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 99999;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transition: opacity 300ms ease, visibility 0s linear 300ms;
        font-family: var(--bsas-font-family, 'Barlow Condensed', sans-serif);
}

/* Force Barlow Condensed on every descendant — override theme's font inheritance. */
.bsas-overlay,
.bsas-overlay *,
.bsas-overlay *::before,
.bsas-overlay *::after {
        font-family: var(--bsas-font-family, 'Barlow Condensed', sans-serif) !important;
}

/* Letter-spacing tweak — condensed sans-serifs read better with a tiny tightening. */
.bsas-overlay {
        letter-spacing: 0.01em;
}

.bsas-overlay.is-open {
        visibility: visible;
        opacity: 1;
        transition: opacity 300ms ease, visibility 0s linear 0s;
}

.bsas-overlay__backdrop {
        position: absolute;
        inset: 0;
        background: var(--bsas-overlay-bg, rgba(15, 15, 20, 0.92));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
}

.bsas-overlay__panel {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 1100px;
        /* Use dvh so panel always fits within visible viewport on mobile
           (accounting for address bar that appears/disappears in Safari/Chrome). */
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        background: var(--bsas-content-bg, #ffffff);
        color: var(--bsas-text-color, #1a1a1a);
        box-shadow: var(--bsas-shadow, 0 20px 60px -10px rgba(0, 0, 0, 0.25));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(-12px);
        transition: transform 300ms ease;
}

.bsas-overlay.is-open .bsas-overlay__panel {
        transform: translateY(0);
}

/* ---------- Header (search form + close button) --------------------- */
.bsas-overlay__header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 24px;
        border-bottom: 1px solid var(--bsas-border-color, #e5e7eb);
        background: var(--bsas-content-bg, #ffffff);
        position: sticky;
        top: 0;
        z-index: 5;
}

.bsas-search-form {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        background: var(--bsas-input-bg, #ffffff);
        border: 1px solid var(--bsas-border-color, #e5e7eb);
        border-radius: var(--bsas-radius, 12px);
        padding: 0 16px;
        min-height: 56px;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bsas-search-form:focus-within {
        border-color: var(--bsas-accent-color, #2563eb);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.bsas-search-form__icon {
        width: 22px;
        height: 22px;
        color: var(--bsas-muted-color, #6b7280);
        flex: 0 0 auto;
}

.bsas-search-form__input {
        flex: 1 1 auto;
        border: none;
        background: transparent;
        font-size: 20px;
        line-height: 1.4;
        color: var(--bsas-text-color, #1a1a1a);
        outline: none;
        padding: 12px 0;
        min-width: 0;
        font-family: var(--bsas-font-family, 'Barlow Condensed', sans-serif);
        font-weight: 500;
}

.bsas-search-form__input::placeholder {
        color: var(--bsas-muted-color, #6b7280);
}

.bsas-search-form__input::-webkit-search-cancel-button {
        display: none;
}

.bsas-search-form__clear {
        flex: 0 0 auto;
        display: none;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: var(--bsas-muted-color, #6b7280);
        cursor: pointer;
        border-radius: 50%;
        transition: background 0.15s ease, color 0.15s ease;
        padding: 0;
}

.bsas-search-form__clear:hover {
        background: var(--bsas-highlight-bg, #eff6ff);
        color: var(--bsas-text-color, #1a1a1a);
}

.bsas-search-form__clear svg {
        width: 18px;
        height: 18px;
}

.bsas-search-form__clear.is-visible {
        display: flex;
}

.bsas-overlay__close {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--bsas-border-color, #e5e7eb);
        background: transparent;
        color: var(--bsas-text-color, #1a1a1a);
        cursor: pointer;
        border-radius: var(--bsas-radius, 12px);
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        padding: 0;
}

.bsas-overlay__close:hover {
        background: var(--bsas-highlight-bg, #eff6ff);
        border-color: var(--bsas-accent-color, #2563eb);
        color: var(--bsas-accent-color, #2563eb);
}

.bsas-overlay__close svg {
        width: 20px;
        height: 20px;
}

/* ---------- Body (results container) -------------------------------- */
.bsas-overlay__body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px;
        scroll-behavior: smooth;
}

/* ---------- State screens (idle/loading/empty/error) ---------------- */
.bsas-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 60px 24px;
        text-align: center;
        color: var(--bsas-muted-color, #6b7280);
        min-height: 240px;
}

.bsas-state svg {
        width: 48px;
        height: 48px;
        opacity: 0.5;
}

.bsas-state__hint {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 500;
}

/* Spinner */
.bsas-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--bsas-border-color, #e5e7eb);
        border-top-color: var(--bsas-accent-color, #2563eb);
        border-radius: 50%;
        animation: bsas-spin 0.7s linear infinite;
}

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

/* ---------- Blocks: categories / products --------------------------- */
.bsas-block {
        margin-bottom: 28px;
}

.bsas-block__title {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--bsas-muted-color, #6b7280);
        margin: 0 0 12px;
        padding: 0;
}

.bsas-block--categories + .bsas-block--products {
        border-top: 1px solid var(--bsas-border-color, #e5e7eb);
        padding-top: 24px;
}

/* ---------- Categories list ----------------------------------------- */
.bsas-cats {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
}

.bsas-cat {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border: 1px solid var(--bsas-border-color, #e5e7eb);
        border-radius: var(--bsas-radius, 12px);
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        background: transparent;
}

.bsas-cat:hover,
.bsas-cat.bsas-result--active {
        background: var(--bsas-highlight-bg, #eff6ff);
        border-color: var(--bsas-accent-color, #2563eb);
}

.bsas-cat__image {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--bsas-border-color, #e5e7eb);
        display: flex;
        align-items: center;
        justify-content: center;
}

.bsas-cat__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.bsas-cat__body {
        flex: 1 1 auto;
        min-width: 0;
}

.bsas-cat__name {
        font-size: 16px;
        font-weight: 600;
        color: var(--bsas-text-color, #1a1a1a);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
}

.bsas-cat__count {
        font-size: 13px;
        color: var(--bsas-muted-color, #6b7280);
        margin-top: 2px;
}

/* ---------- Products list ------------------------------------------- */
.bsas-products {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 10px;
}

.bsas-product-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border: 1px solid var(--bsas-border-color, #e5e7eb);
        border-radius: var(--bsas-radius, 12px);
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        background: transparent;
}

.bsas-product-card:hover,
.bsas-product-card.bsas-result--active {
        background: var(--bsas-highlight-bg, #eff6ff);
        border-color: var(--bsas-accent-color, #2563eb);
}

.bsas-product-card__image {
        position: relative;
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--bsas-border-color, #e5e7eb);
        display: flex;
        align-items: center;
        justify-content: center;
}

.bsas-product-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.bsas-product-card__badge {
        position: absolute;
        top: 2px;
        left: 2px;
        background: var(--bsas-accent-color, #2563eb);
        color: var(--bsas-accent-text, #ffffff);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1;
}

.bsas-product-card__body {
        flex: 1 1 auto;
        min-width: 0;
}

.bsas-product-card__title {
        font-size: 16px;
        font-weight: 500;
        color: var(--bsas-text-color, #1a1a1a);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.bsas-product-card__price {
        font-size: 16px;
        font-weight: 700;
        color: var(--bsas-accent-color, #2563eb);
        margin-top: 4px;
}

.bsas-product-card__price del {
        color: var(--bsas-muted-color, #6b7280);
        font-weight: 400;
        margin-right: 6px;
}

.bsas-product-card__price ins {
        background: none;
        text-decoration: none;
}

/* ---------- Highlight match ----------------------------------------- */
.bsas-cat__name mark,
.bsas-product-card__title mark {
        background: transparent;
        color: var(--bsas-accent-color, #2563eb);
        font-weight: 700;
        padding: 0;
}

/* ---------- View all results ---------------------------------------- */
.bsas-view-all {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--bsas-border-color, #e5e7eb);
        text-align: center;
}

.bsas-view-all__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        background: var(--bsas-accent-color, #2563eb);
        color: var(--bsas-accent-text, #ffffff);
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-radius: var(--bsas-radius, 12px);
        transition: opacity 0.15s ease, transform 0.15s ease;
}

.bsas-view-all__link:hover {
        opacity: 0.92;
        transform: translateY(-1px);
}

.bsas-view-all__link svg {
        width: 16px;
        height: 16px;
}

/* =====================================================================
 * Responsive: tablet (≤ 768px)
 *
 * Key mobile fix: turn "View all results" into a sticky bar at the
 * bottom of the panel so it stays visible above mobile browser chrome
 * (address bar in Safari/Chrome that appears/disappears during scroll).
 * Uses safe-area-inset-bottom for iPhone X+ home indicator clearance.
 * ===================================================================== */
@media (max-width: 768px) {
        .bsas-overlay__panel {
                max-width: 100%;
                max-height: 100vh;
                max-height: 100dvh;
                height: 100vh;
                height: 100dvh;
                border-radius: 0;
        }

        .bsas-overlay__header {
                padding: 14px 16px;
                gap: 8px;
                /* safe-area-inset-top fallback for notch */
                padding-top: calc(14px + env(safe-area-inset-top, 0px));
                padding-left: calc(16px + env(safe-area-inset-left, 0px));
                padding-right: calc(16px + env(safe-area-inset-right, 0px));
        }

        .bsas-search-form {
                min-height: 48px;
                padding: 0 12px;
        }

        .bsas-search-form__input {
                font-size: 16px; /* iOS Safari ≥16px prevents zoom */
                padding: 10px 0;
        }

        .bsas-overlay__close {
                width: 40px;
                height: 40px;
        }

        .bsas-overlay__body {
                padding: 16px;
                /* Leave room for the sticky "View all" bar at the bottom.
                   Reduced from 80px to 64px so the bar sits closer to the viewport edge. */
                padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        }

        .bsas-state {
                padding: 40px 16px;
                min-height: 180px;
        }

        .bsas-cats {
                grid-template-columns: 1fr;
                gap: 8px;
        }

        .bsas-products {
                grid-template-columns: 1fr;
                gap: 8px;
        }

        .bsas-cat,
        .bsas-product-card {
                padding: 8px;
        }

        .bsas-block__title {
                font-size: 12px;
        }

        /* ---- Sticky "View all" bar — pinned to the very bottom of the viewport ---- */
        .bsas-view-all {
                position: sticky;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 10;
                /* No top margin — pin flush against the last result */
                margin: 0 -16px;
                margin-top: 8px;
                /* Minimal top padding; bottom padding hugs the screen edge + safe area */
                padding: 10px 16px;
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
                border-top: 1px solid var(--bsas-border-color, #e5e7eb);
                background: var(--bsas-content-bg, #ffffff);
                box-shadow: 0 -6px 12px -4px rgba(0, 0, 0, 0.08);
                text-align: center;
        }

        .bsas-view-all__link {
                display: flex;
                width: 100%;
                justify-content: center;
                /* Slightly smaller padding so the bar sits lower */
                padding: 12px 24px;
                font-size: 15px;
        }

        /* Disable the desktop hover lift on touch */
        .bsas-view-all__link:hover {
                transform: none;
        }
}

/* =====================================================================
 * Responsive: large desktop (≥ 1200px) — wider product columns
 * ===================================================================== */
@media (min-width: 1200px) {
        .bsas-products {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }

        .bsas-cats {
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        }
}

/* =====================================================================
 * Reduced motion preference
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
        .bsas-overlay,
        .bsas-overlay__panel,
        .bsas-search-form,
        .bsas-overlay__close,
        .bsas-cat,
        .bsas-product-card,
        .bsas-view-all__link {
                transition: none !important;
                animation: none !important;
        }

        .bsas-overlay__body {
                scroll-behavior: auto;
        }
}

/* =====================================================================
 * High contrast / accessibility
 * ===================================================================== */
.bsas-cat:focus-visible,
.bsas-product-card:focus-visible,
.bsas-overlay__close:focus-visible,
.bsas-search-form__clear:focus-visible,
.bsas-view-all__link:focus-visible {
        outline: 2px solid var(--bsas-accent-color, #2563eb);
        outline-offset: 2px;
}

/* When popup is closed, prevent it from capturing tab focus */
.bsas-overlay:not(.is-open) * {
        visibility: hidden !important;
}

.bsas-overlay:not(.is-open) {
        visibility: hidden !important;
}

/* iOS safe area support (desktop / tablet landscape fallback).
   Mobile portrait safe-area paddings are handled inside the 768px media query above. */
@supports (padding: env(safe-area-inset-top)) {
        .bsas-overlay__header {
                padding-top: calc(18px + env(safe-area-inset-top));
                padding-left: calc(24px + env(safe-area-inset-left));
                padding-right: calc(24px + env(safe-area-inset-right));
        }

        .bsas-overlay__body {
                padding-bottom: calc(24px + env(safe-area-inset-bottom));
        }
}

/* On mobile (≤768px), the bottom safe-area padding is handled by the
   sticky .bsas-view-all bar — disable the duplicate rule from the
   desktop safe-area block above so it doesn't conflict. */
@media (max-width: 768px) {
        @supports (padding: env(safe-area-inset-top)) {
                .bsas-overlay__body {
                        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
                }
        }
}