/* Samsung Galaxy S24 Ultra and other Android Specific Fixes */
/* This file contains fixes specific to Samsung Galaxy and similar Android devices */

/* Base fixes for all mobile devices */
img, svg, canvas, picture {
    max-width: 100%;
    height: auto;
}

/* Reset negative margins and complex calculations that cause issues */
[style*="margin-left: calc"], [style*="margin-right: calc"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix content overflow */
body, html {
    width: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

.u-body {
    max-width: 100%;
}

/* Samsung Galaxy S24 Ultra specific fixes */
@media screen and (min-width: 412px) and (max-width: 915px) and (-webkit-device-pixel-ratio: 3.5) {
    /* Specific fixes for Samsung high pixel density screens */
    .u-section-1, .u-section-2, .u-section-3 {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Center all content */
    .u-text-1, .u-text-2, .u-text-3, .u-text-4, .u-text-5,
    .u-image-1, .u-image-2, .u-image-3, .u-image-4, .u-image-5, .u-image-6,
    .u-icon-1, .u-icon-2, .u-icon-3, .u-icon-4, .u-icon-5 {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        text-align: center !important;
        display: block !important;
    }
}

/* General Android Chrome fixes */
@supports (-webkit-appearance:none) {
    @media screen and (max-width: 915px) {
        /* General Android fixes */
        [class*="u-container"] {
            max-width: 100% !important;
            width: 100% !important;
        }
        
        /* Fix overlapping elements in Samsung browsers */
        .u-section-1 .u-image-1,
        .u-section-1 .u-image-2,
        .u-section-1 .u-image-3,
        .u-section-1 .u-image-4,
        .u-section-1 .u-image-5,
        .u-section-1 .u-image-6 {
            position: relative !important;
            width: 90% !important;
            height: auto !important;
            max-width: 300px !important;
            margin: 20px auto !important;
        }
        
        .u-section-1 .u-icon-1,
        .u-section-1 .u-icon-2,
        .u-section-1 .u-icon-3 {
            position: relative !important;
            width: 70% !important;
            height: auto !important;
            max-width: 200px !important;
            margin: 20px auto !important;
            display: block !important;
        }
        
        /* Fix text overlap */
        .u-section-1 .u-text-1,
        .u-section-1 .u-text-2,
        .u-section-1 .u-text-3,
        .u-section-1 .u-text-4 {
            position: relative !important;
            width: 90% !important;
            margin: 20px auto !important;
            text-align: center !important;
        }
        
        /* Fix button position */
        .u-section-1 .u-btn-1 {
            position: relative !important;
            margin: 30px auto !important;
            display: block !important;
        }
        
        /* Fix negative margin positioning */
        [style*="margin-top: -"] {
            margin-top: 20px !important;
        }
    }
}

/* Extra wide Android phones (like S24 Ultra) */
@media screen and (min-width: 400px) and (max-width: 915px) and (min-height: 800px) {
    /* Override any absolute positioning */
    .u-section-1 *,
    .u-section-2 *,
    .u-section-3 * {
        position: relative !important;
    }
    
    /* Stack all elements cleanly */
    .u-section-1 > div,
    .u-section-2 > div,
    .u-section-3 > div {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Adjust font sizes for wider screens */
    .u-text-1 {
        font-size: 1.7rem !important;
    }
    
    .u-text-2 {
        font-size: 2.8rem !important;
    }
    
    .u-text-3 {
        font-size: 1.3rem !important;
    }
    
    /* Make buttons more prominent */
    .u-btn-1, .u-btn-2 {
        padding: 15px 30px !important;
        font-size: 1.1rem !important;
        margin: 30px auto !important;
        display: block !important;
    }
}