/* ==========================================================================
   Bottom Sheet Pro — v2.6
   ========================================================================== */

/* ==========================================================================
   Flash prevention — hides "initially hidden" sheets BEFORE JS runs.
   The inline style="display:none" on .bs-wrapper already covers most cases;
   this CSS rule is a belt-and-suspenders guard against any render path where
   the inline style is stripped or delayed (e.g. page builders, cache layers).
   JS removes data-bs-preload once it has taken control.
   ========================================================================== */

.bs-wrapper[data-initially-hidden="yes"][data-bs-preload] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Overlay — dims background as sheet rises
   ========================================================================== */

.bs-overlay {
    position: fixed;
    inset: 0;
    /* Color overridden by Elementor color control */
    background: rgba( 0, 0, 0, 0.5 );
    opacity: 0;
    pointer-events: none;       /* never blocks clicks — handle-only UX */
    z-index: 999998;            /* one below container — both above everything on page */
}

/* ==========================================================================
   Sheet container — fixed to bottom, height controlled by JS
   ========================================================================== */

.bs-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Default height — JS overrides immediately on init */
    height: 20vh;
    background: #fff;
    /* border-radius is driven by the --bs-border-radius CSS variable, which the
       Elementor "Top Corner Radius" control sets on {{WRAPPER}}.  The default
       here (20px 20px 0 0) is used when no Elementor value has been written yet
       (e.g. fresh page load before the stylesheet is parsed).  On the frontend
       the portalling JS copies the elementor-element-* class onto this element,
       so the Elementor-generated rule  ".elementor-element-XXXX { --bs-border-radius: … }"
       matches and overrides the fallback directly on this element. */
    border-radius: var(--bs-border-radius, 20px 20px 0 0);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Default shadow — overridden by data attribute / Elementor custom */
    box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.14 );
    /* transform-origin: bottom keeps slide anchored to the sheet's bottom edge */
    transform-origin: bottom center;
    /* Sheet starts off-screen; JS sets transform:translateY(0) on init.
       will-change:transform tells the browser to promote this element to its
       own GPU layer once — before any animation starts — so there is no
       promote/demote cost mid-animation that causes flicker. */
    will-change: transform;
    /* Transition value is set/cleared entirely by JS */
}

/* ==========================================================================
   Handle bar area — the only interactive surface
   ========================================================================== */

.bs-header {
    flex-shrink: 0;
    background: inherit;
    /* --bs-header-padding is set by the Elementor "Handle Area Padding" control.
       Fallback matches the control's own default values so the handle always
       looks correct even before Elementor's stylesheet is applied. */
    padding: var(--bs-header-padding, 10px 16px 6px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;          /* north-south resize cursor = drag affordance */
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;         /* prevent browser swipe navigation on handle */
    /* position + z-index: bs-content may contain elements with position:fixed
       that escape the container's stacking context and paint over everything.
       Making the header a stacking context root at a high z-index ensures the
       handle and close button always render above such content. */
    position: relative;
    z-index: 2;
    /* Focus ring for keyboard users */
    outline: none;
}

.bs-header:focus-visible {
    box-shadow: inset 0 0 0 2px rgba( 0, 120, 255, 0.5 );
}

/* Cursor changes during active drag */
.bs-header.bs-dragging {
    cursor: grabbing;
}

/* ==========================================================================
   Handle pill
   ========================================================================== */

.bs-handle {
    width: 48px;
    height: 5px;
    background: #d0d0d0;
    border-radius: 99px;
    pointer-events: none;       /* passes events up to .bs-header */
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Subtle "active" feedback while dragging */
.bs-header.bs-dragging .bs-handle {
    background: #aaa;
    transform: scaleX( 1.1 );
}

/* ==========================================================================
   Close button — absolutely positioned on .bs-container, overlays content
   ========================================================================== */

.bs-close {
    position: absolute;
    top: 14px;                  /* overridden by Elementor slider */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    /* Explicit dark default so the icon is always visible even without a colour setting.
       Elementor's dynamic CSS will override this when the admin picks a colour. */
    color: #333;
    cursor: pointer;
    line-height: 1;
    font-size: 18px;            /* overridden by Elementor slider */
    opacity: 0.7;
    transition: opacity 0.18s ease, background 0.18s ease;
    /* FIX (Bug 1 — mobile close button invisible):
       .bs-container is a flex column with overflow:hidden.  .bs-close is
       absolutely positioned inside it, but .bs-content is a flex child that
       comes later in DOM order.  Without an explicit stacking context on
       .bs-close, content painted by the flex algorithm lands on top of the
       button on mobile (where GPU compositing layers differ from desktop).
       Raising z-index to 100 and creating an isolation context via
       isolation:isolate ensures the button is always the topmost layer
       inside the container regardless of platform. */
    z-index: 100;
    isolation: isolate;
    -webkit-appearance: none;
    appearance: none;
}

.bs-close:hover,
.bs-close:focus-visible {
    opacity: 1;
    background: rgba( 0, 0, 0, 0.07 );
    outline: none;
}

.bs-close:focus-visible {
    box-shadow: 0 0 0 2px rgba( 0, 120, 255, 0.5 );
}

/* Placement variants — overridden by Elementor offset slider */
.bs-close--left  { left:  14px; }
.bs-close--right { right: 14px; }

/* FontAwesome <i> tag inside the button.
   FA5 sets its own font-family and sizing — we must explicitly inherit
   the button's color and font-size rather than relying on cascade alone,
   because FA stylesheets set their own values with high specificity. */
.bs-close i {
    display:     inline-flex;
    align-items: center;
    color:       inherit !important;   /* force inheritance past FA specificity */
    font-size:   inherit !important;   /* force inheritance past FA specificity */
    line-height: 1;
    pointer-events: none;
}

/* SVG icon (custom icon sets) */
.bs-close svg {
    display:         block;
    width:           1em;
    height:          1em;
    fill:            none;
    stroke:          currentColor;
    stroke-width:    2;
    stroke-linecap:  round;
    pointer-events:  none;
}

/* ==========================================================================
   Handle — hide when show_handle is off; header removed from DOM entirely
   ========================================================================== */

/* No rule needed for hiding — PHP simply doesn't render .bs-header.
   This rule is a safety net for any cached/stale markup. */
.bs-wrapper[data-show-handle="no"] .bs-header {
    display: none;
}

/* ==========================================================================
   Scrollable content area
   ========================================================================== */

.bs-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* --bs-content-padding is set by the Elementor "Content Padding" control.
       Fallback (12px 20px 16px 20px) matches the control's own default so the
       content area always has correct spacing even before Elementor's stylesheet
       is applied.  On the frontend the portalled .bs-container receives the
       elementor-element-* class from JS, which means the Elementor rule
       ".elementor-element-XXXX { --bs-content-padding: … }" also applies to
       .bs-container — and .bs-content inherits the variable from it. */
    padding: var(--bs-content-padding, 12px 20px 16px 20px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* stop scroll from bleeding to page */
    /* FIX (Bug 1 — mobile close button invisible):
       Explicitly reset z-index to 0 so this flex child stays below .bs-close
       (z-index:100) in the container's stacking context.  Without this, some
       mobile browsers promote the scrollable layer to a GPU compositing layer
       whose implicit stacking order lands above the absolutely-positioned
       .bs-close button. */
    position: relative;
    z-index: 0;
}

/* Prevent content scroll from triggering drag on header */
.bs-content * {
    touch-action: auto;
}

/* ==========================================================================
   State: sheet is expanded (at least one snap above initial)
   ========================================================================== */

.bs-wrapper.bs-is-expanded .bs-handle {
    background: #b0b0b0;
}

/* ==========================================================================
   Prevent page scroll while dragging handle
   ========================================================================== */

body.bs-no-select {
    -webkit-user-select: none;
    user-select: none;
    /* Do NOT set overflow:hidden here — that would jump the page layout */
}

/* ==========================================================================
   Elementor editor mode — render sheet visible for comfortable design
   ========================================================================== */

.elementor-editor-active .bs-wrapper[data-bs-preload] {
    display: block !important;
    visibility: visible !important;
}

.elementor-editor-active .bs-container {
    position: relative !important;
    height: auto !important;
    min-height: 180px;
    box-shadow: 0 0 0 2px #93b1e9 inset !important;
    /* border-radius is no longer set here.
       It is owned by --bs-border-radius in .bs-container { }, which the
       Elementor "Top Corner Radius" control writes via the {{WRAPPER}} selector.
       Removing the old !important override was the fix for Bug 1: the !important
       blocked the Elementor dynamic CSS from ever taking effect in the editor. */
}

.elementor-editor-active .bs-overlay {
    display: none !important;
}

/* ==========================================================================
   Accessibility: reduced motion
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
    .bs-container {
        transition: none !important;
    }
    .bs-overlay {
        transition: none !important;
    }
}

/* ==========================================================================
   Responsive: on very small screens, limit max width so sheet looks native
   ========================================================================== */

@media ( min-width: 600px ) {
    .bs-container {
        /* Optional: uncomment to centre sheet like a bottom drawer on desktop */
        /* max-width: 480px; left: 50%; transform: translateX(-50%); */
    }
}

/* ==========================================================================
   Dismissed state — sheet fully hidden after dragging off bottom
   Triggered by JS when height reaches 0 after a downward dismiss drag.
   Re-opened via external trigger (data-bs-open / trigger class).
   ========================================================================== */

.bs-wrapper.bs-dismissed {
    /* Hide completely — no pointer events, no layout space for the container */
    pointer-events: none;
}

.bs-wrapper.bs-dismissed .bs-container {
    /* Sheet is off-screen via transform:translateY(100%) set by JS.
       Keep overflow:hidden so no content bleeds during the transition.
       Box-shadow:none avoids a shadow strip visible at the bottom edge. */
    overflow: hidden;
    transition: none !important;
    box-shadow: none !important;
}

.bs-wrapper.bs-dismissed .bs-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* When an external trigger re-opens a dismissed sheet,
   JS removes .bs-dismissed before animating back up */