/**
 * Unified Floating Widget Stack
 * Container for all floating widgets: admin toolbar, cart button, back-to-top
 *
 * Priority order (bottom to top): Admin > Cart > Back-to-Top
 * This ensures proper stacking without overlap or click interception
 */

/* ============================================================================
   MAIN STACK CONTAINER
   ============================================================================ */
.floating-stack {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column-reverse; /* Items stack from bottom up */
    align-items: flex-end;
    gap: 12px;
    z-index: 9000; /* Base z-index for the container */
    pointer-events: none; /* Container doesn't block clicks */
}

/* All direct children receive pointer events */
.floating-stack > * {
    pointer-events: auto;
}

/* ============================================================================
   STACK ITEMS - Base styles for all floating widgets in the stack
   ============================================================================ */
.floating-stack-item {
    /* Reset any conflicting fixed positioning from child components */
    position: relative !important;
    bottom: auto !important;
    right: auto !important;

    /* Ensure proper stacking context */
    isolation: isolate;
}

/* ============================================================================
   ADMIN TOOLBAR WRAPPER
   Admin toolbar has its own internal structure, so we just wrap it
   ============================================================================ */
.floating-stack .pg-admin-toolbar {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 3; /* Highest priority in stack */
}

/* ============================================================================
   CART BUTTON IN STACK
   ============================================================================ */
.floating-stack .floating-cart-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 2; /* Middle priority */
}

/* ============================================================================
   BACK-TO-TOP BUTTON IN STACK
   ============================================================================ */
.floating-stack .back-to-top-btn {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1; /* Lowest priority (appears at bottom of stack) */
}

/* When visible, ensure flex display works */
.floating-stack .back-to-top-btn.visible {
    display: flex;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Tablet and up - slightly more spacing */
@media (min-width: 576px) {
    .floating-stack {
        bottom: 20px;
        right: 20px;
        gap: 14px;
    }
}

/* Desktop - more spacing, adjust for larger buttons */
@media (min-width: 768px) {
    .floating-stack {
        bottom: 24px;
        right: 24px;
        gap: 16px;
    }
}

/* ============================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   Reduce vertical spacing in landscape to prevent stack overflow
   ============================================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .floating-stack {
        bottom: 12px;
        right: 12px;
        gap: 8px;
    }

    /* Smaller buttons in cramped landscape */
    .floating-stack .floating-cart-btn {
        width: 44px;
        height: 44px;
    }

    .floating-stack .back-to-top-btn {
        width: 42px;
        height: 42px;
    }

    .floating-stack .pg-admin-toggle {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }
}

/* ============================================================================
   SAFE AREA INSETS (for notched devices like iPhone)
   ============================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .floating-stack {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }

    @media (min-width: 768px) {
        .floating-stack {
            bottom: calc(24px + env(safe-area-inset-bottom));
            right: calc(24px + env(safe-area-inset-right));
        }
    }
}

/* ============================================================================
   ACCESSIBILITY: REDUCE MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .floating-stack,
    .floating-stack > * {
        transition: none;
    }
}

/* ============================================================================
   PRINT STYLES - Hide floating widgets when printing
   ============================================================================ */
@media print {
    .floating-stack {
        display: none !important;
    }
}