/* ================================
   iPhone specific fixes – FINAL
   Fixes fixed-logo overlay issue
   ================================ */

@media only screen and (min-device-width: 375px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {

    .section-1 {
        background-position: center 50% !important;
        padding-top: 0 !important;
        min-height: 100vh;
        justify-content: flex-start !important;
    }

    /* LOGO FIX – image based, centered, NOT fixed */
    img.top-logo {
        position: relative !important;
        left: 41% !important;
        transform: translateX(-50%) !important;
        width: 85vw !important;
        max-width: 360px !important;
        height: auto !important;
        margin-top: max(10px, env(safe-area-inset-top)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* HEADLINE */
    .section-1 h1 {
        font-size: 15px !important;
        margin-top: 18px !important;
        padding: 0 20px;
        line-height: 1.2;
    }

    .ball-container {
        width: 300px !important;
        height: 300px !important;
        margin: 15px auto !important; 
        margin-top:0px !important;
        margin-bottom: 0px !important;
    }

    .button-container {
        gap: 10px !important;
        margin: 10px 0 !important;
        padding: 0 25px;
    }

    .action-btn {
        font-size: 12px !important;
        padding: 10px 20px !important;
        z-index: 3;
    }

    .disclaimer-text {
        font-size: 10px !important;
        margin: 5px 0;
    }

    .terms-container {
        margin: 8px 0 !important;
    }

    .slide-container {
        margin: 15px auto 10px !important;
        width: 80%;
    }
    
    /* VIDEO SECTION FIX */
    .video-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    .video-player {
        height: 200px !important;
        margin-bottom: 12px !important;
    }
    
    .video-thumbnails {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 8px 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .thumbnail-item {
        min-width: 110px !important;
        max-width: 110px !important;
        height: 75px !important;
        flex-shrink: 0 !important;
    }
    
    .thumbnail-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ================================
   iPhone 14 / 15 Pro Max
   ================================ */

@media only screen and (min-device-width: 428px) and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {

    .section-1 h1 {
        font-size: 16px !important;
        margin-top: 18px !important;
    }

    .ball-container {
        width: 250px !important;
        height: 250px !important;
    }
    
    .reward-img {
        max-width: 400px !important;
    }
    
    .hands {
        width: 250px !important;
        margin-top:25px;
    }
    
    .action-btn {
        z-index: 3;
    }
    
    /* VIDEO FIX for larger iPhones */
    .video-player {
        height: 230px !important;
    }
    
    .thumbnail-item {
        min-width: 125px !important;
        max-width: 125px !important;
        height: 85px !important;
    }

    .upload-btn-wrapper {
        height:100% !important;
    }
}

/* ================================
   iPhone 12 / 13 / 14 Pro
   ================================ */

@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {

    .section-1 {
        background-position: center 48% !important;
    }

    .section-1 h1 {
        margin-top: 18px !important;
    }
    
    .video-player {
        height: 210px !important;
    }
    
    .thumbnail-item {
        min-width: 115px !important;
        max-width: 115px !important;
        height: 78px !important;
    }
}

/* ================================
   iPhone SE / iPhone 8
   ================================ */

@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {

    img.top-logo {
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80vw !important;
        max-width: 320px !important;
        height: auto !important;
        margin-top: max(8px, env(safe-area-inset-top)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .section-1 h1 {
        font-size: 14px !important;
        margin-top: 14px !important;
    }

    .ball-container {
        width: 170px !important;
        height: 170px !important;
        margin: 10px auto !important;
    }

    .button-container {
        gap: 8px !important;
        padding: 0 20px;
    }

    .action-btn {
        font-size: 11px !important;
        padding: 8px 16px !important;
    }

    .slide-container {
        width: 85%;
        margin: 12px auto 8px !important;
    }
    
    /* VIDEO FIX for smaller iPhones */
    .video-player {
        height: 170px !important;
    }
    
    .thumbnail-item {
        min-width: 100px !important;
        max-width: 100px !important;
        height: 68px !important;
    }
}

/* ================================
   Safe-area handling (iOS notch)
   ================================ */

@supports (padding: max(0px)) {
    .section-1 h1 {
        margin-top: max(18px, calc(env(safe-area-inset-top) + 10px)) !important;
    }
}

/* ================================
   iOS Safari height fix
   ================================ */

@supports (-webkit-touch-callout: none) {
    .section-1,
    .section {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================================
   iOS iPhone FULL-PROOF DROP-IN
   Works even when iPhone uses Display Zoom (320px layout)
   Paste at END of CSS
   ========================================================== */

/* iPhone Safari / iOS phones */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 430px) and (pointer: coarse) {

        html, body {
            overflow-x: hidden !important;
        }
        /* Stable height on iOS */
        .section-1,
        .section {
            min-height: 100svh !important;
            min-height: 100dvh !important;
            min-height: -webkit-fill-available !important;
        }

        .section-1 {
            padding-top: 0 !important;
            justify-content: flex-start !important;
            background-position: center 50% !important;
        }
        /* LOGO: always centered, no hacks */
        img.top-logo {
            display: block !important;
            position: relative !important;
            width: clamp(260px, 86vw, 360px) !important;
            height: auto !important;
            margin: max(10px, env(safe-area-inset-top)) auto 0 !important;
            z-index: 2 !important;
            pointer-events: none !important;
        }
        /* Section-1 headline */
        .section-1 h1 {
            font-size: 15px !important;
            line-height: 1.2 !important;
            padding: 0 20px !important;
            margin-top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
        }
        /* Ball: responsive across 320–430 widths */
        .ball-container {
            width: clamp(220px, 70vw, 300px) !important;
            height: clamp(220px, 70vw, 300px) !important;
            margin: 18px auto 0 !important;
        }

        .button-container {
            gap: 10px !important;
            margin: 10px 0 !important;
            padding: 0 20px !important;
        }

        .action-btn {
            font-size: 12px !important;
            padding: 10px 20px !important;
            position: relative !important;
            z-index: 3 !important;
        }

        .slide-container {
            width: 82% !important;
            margin: 15px auto 10px !important;
        }
        /* Section 2/3 background: always covers, prevents seams */
        .section-2,
        .section-3 {
            background-repeat: no-repeat !important;
            background-size: cover !important;
            background-position: center 100% !important;
            overflow: hidden !important;
        }
        /* Video sizing */
        .video-container {
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 15px !important;
            box-sizing: border-box !important;
        }

        .video-player {
            position: relative !important;
            width: 100% !important;
            aspect-ratio: 16 / 9 !important;
            height: auto !important;
            overflow: hidden !important;
            margin-bottom: 12px !important;
        }

            .video-player iframe {
                width: 100% !important;
                height: 100% !important;
            }

        .video-thumbnails {
            display: flex !important;
            gap: 8px !important;
            overflow-x: auto !important;
            padding: 8px 0 !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .thumbnail-item {
            min-width: clamp(100px, 30vw, 125px) !important;
            max-width: clamp(100px, 30vw, 125px) !important;
            aspect-ratio: 16 / 9 !important;
            height: auto !important;
            flex-shrink: 0 !important;
            overflow: hidden !important;
            position: relative !important;
        }

            .thumbnail-item iframe {
                width: 100% !important;
                height: 100% !important;
            }

        .thumbnail-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }
    }
}