/**
 * Stripe Foundation Compatibility Fix
 * Surgical CSS to prevent Stripe Payment Method Messaging from breaking Foundation grid centering
 * while preserving native Affirm functionality and styling
 */

/* 
 * CORE ISSUE: Stripe's iframe content can interfere with Foundation's grid centering
 * SOLUTION: Ensure Stripe elements are properly contained without affecting parent layout
 */

/* Aggressively contain Stripe messaging to prevent Foundation grid breaking */
.stripe-payment-messaging {
    /* Force responsive container behavior */
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* Prevent any transform or positioning issues */
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: auto !important;
    
    /* Force containment */
    contain: layout style !important;
    isolation: isolate !important;
    
    /* Basic spacing */
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

/* Ensure Stripe iframes are properly contained */
.stripe-payment-messaging iframe {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Prevent iframe from affecting parent positioning */
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
}

/* Aggressively protect Foundation grid centering */
.product-page.grid-container {
    /* Ensure Foundation's grid centering is never overridden */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 90rem !important; /* Foundation's default container max-width */
    
    /* Prevent any positioning interference */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    
    /* Ensure proper box model */
    box-sizing: border-box !important;
}

/* Mobile-specific aggressive constraints */
@media (max-width: 639px) {
    .product-page.grid-container {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .stripe-payment-messaging {
        /* Aggressively constrain Stripe elements on mobile */
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* Force clipping of any overflow content */
        clip-path: inset(0) !important;
    }
    
    .stripe-payment-messaging *,
    .stripe-payment-messaging iframe,
    .stripe-payment-messaging div {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Tablet-specific aggressive constraints */
@media (min-width: 640px) and (max-width: 1023px) {
    .stripe-payment-messaging {
        /* Aggressively constrain Stripe elements on tablet */
        width: 100% !important;
        max-width: 720px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* Force clipping of any overflow content */
        clip-path: inset(0) !important;
    }
    
    .stripe-payment-messaging *,
    .stripe-payment-messaging iframe,
    .stripe-payment-messaging div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Tablet and desktop Foundation protection */
@media (min-width: 640px) {
    .product-page.grid-container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 90rem !important;
        width: auto !important;
    }
}

/* Prevent any Stripe-injected styles from breaking layout */
body *[style*="position"],
body *[style*="transform"],
body *[style*="left"],
body *[style*="right"] {
    /* Only apply to potential Stripe interference, not all positioned elements */
}

/* Specific override for Stripe elements that might interfere */
div[id*="stripe"] *[style*="position: fixed"],
div[id*="stripe"] *[style*="position: absolute"],
iframe[src*="stripe"] *[style*="position"],
[data-stripe-messaging] *[style*="position"] {
    /* Prevent Stripe elements from using fixed/absolute positioning that breaks layout */
    position: relative !important;
}

/* Hide empty or broken Stripe elements gracefully */
.stripe-payment-messaging:empty {
    display: none;
}

.stripe-payment-messaging iframe[src=""] {
    display: none;
}

/* Ensure proper z-index stacking */
.stripe-payment-messaging {
    z-index: 1;
}

.product-page.grid-container {
    z-index: auto;
}

/*
 * DEBUG: Uncomment these styles to visually debug layout issues
 */
/*
.product-page.grid-container {
    border: 2px solid red !important;
}

.stripe-payment-messaging {
    border: 2px solid blue !important;
    background: rgba(0, 0, 255, 0.1) !important;
}
*/