/*
 * Help / chat widget overlap fix.
 *
 * The Zendesk (Zopim) Web Widget launcher renders as a fixed bottom-left
 * iframe#launcher (z-index ~999998, ~110x50 px, ~20px from the edge) on the
 * storefronts that load the chat snippet. It sat on top of the cookie-consent
 * bar's action row. Keep the bar's buttons clear of it.
 *
 * Scoped with :has(iframe#launcher) so stores WITHOUT the widget are
 * untouched, and to the bottom-BAR layout (#cookie-consent-banner.bottom-0) so
 * the centred modal layout is unaffected. No change to the widget itself.
 */

/* Desktop: buttons sit in one right-aligned row -> still clear of left launcher
   by default, but reserve left room if the row wraps full-width. */
@media (min-width: 768px) {
    body:has(iframe#launcher) #cookie-consent-banner.bottom-0 .justify-end {
        padding-left: 9.5rem; /* clears the ~110px launcher + its ~20px gap */
    }
}

/* Small screens: the buttons wrap, so lift the action row above the launcher. */
@media (max-width: 767px) {
    body:has(iframe#launcher) #cookie-consent-banner.bottom-0 .justify-end {
        padding-bottom: 5rem; /* above the ~50px launcher + its bottom gap */
    }

    /* Mobile "Build your Migenic" sticky CTA is a full-width bottom bar shown
       past the hero (.is-visible added on scroll). Lift the launcher above it so
       it does not sit on the CTA's arrow. transform is not set by the widget, so
       it stacks cleanly and reverts when the CTA hides. */
    body:has(.vr-sticky-cta-mobile.is-visible) iframe#launcher {
        transform: translateY(-3.75rem) !important; /* clear the ~56px CTA bar */
        transition: transform .2s ease;
    }
}

/* Checkout terms drawer: a slide-in right panel (aria-modal). While it is open
   (x-show sets display:none when closed; :not(x-cloak) skips the pre-init flash)
   fade the launcher out so it does not float over the drawer. The .vr-terms-drawer
   element only exists on checkout, so this affects nothing elsewhere. */
body:has(.vr-terms-drawer:not([style*="display: none"]):not([x-cloak])) iframe#launcher {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease;
}