/* Mobile Alignment Comprehensive Fix - HeizOel24 */

/* Reset all mobile containers for perfect alignment */
@media (max-width: 768px) {
    /* Global Mobile Container Reset */
    .container, 
    .container-fluid,
    .awards-container,
    .payment-methods,
    .calculator,
    .hero-section,
    .comparison-section,
    .app-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Perfect Center Alignment for All Sections */
    .text-center,
    .comparison-section,
    .app-section,
    .calculator,
    .awards-container {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Grid Layout Mobile Fix */
    .awards-container,
    .payment-methods,
    .comparison-cards,
    .app-features {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        margin: 20px auto !important;
        padding: 15px !important;
    }

    /* Individual Card/Item Alignment */
    .award-item,
    .payment-method-item,
    .comparison-card,
    .app-feature {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 8px auto !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Title and Text Alignment */
    h1, h2, h3, h4, h5, h6,
    .section-title,
    .comparison-title,
    .app-title {
        text-align: center !important;
        width: 100% !important;
        margin: 15px auto !important;
        padding: 0 10px !important;
    }

    /* Button Alignment */
    .btn,
    .btn-primary,
    .btn-success,
    .btn-starten,
    .app-download-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
        display: block !important;
        text-align: center !important;
    }

    /* Form Element Alignment */
    .form-input,
    .calculator input,
    .calculator select {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px auto !important;
        box-sizing: border-box !important;
    }

    /* Image Alignment */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* App Section Mobile Fix */
    .app-section {
        padding: 30px 15px !important;
        background: #f8f9fa !important;
    }

    .app-flex,
    .comparison-flex {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        gap: 30px !important;
    }

    .app-content,
    .comparison-content {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        order: 2 !important;
    }

    .app-image,
    .comparison-image {
        width: 100% !important;
        max-width: 200px !important;
        text-align: center !important;
        order: 1 !important;
    }

    .app-features {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .app-feature {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .app-badges {
        text-align: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .app-badges a,
    .app-badges span {
        margin: 5px auto !important;
    }

    .app-platform {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 15px auto !important;
    }

    .app-btn,
    .comparison-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 20px auto !important;
        text-align: center !important;
        display: block !important;
    }

    .app-logo {
        text-align: center !important;
        margin: 20px auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .app-logo img {
        margin: 0 auto !important;
    }

    /* Comparison Section Mobile Fix */
    .comparison-section {
        padding: 30px 15px !important;
        background: white !important;
    }

    .comparison-form {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin: 20px auto !important;
    }

    /* Remove Any Left/Right Floating */
    * {
        float: none !important;
    }

    /* Fix any positioned elements */
    .positioned-element {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Perfect vertical spacing */
    .section-spacing {
        margin: 30px auto !important;
        padding: 20px 15px !important;
    }
}

/* Extra Small Mobile (320px-480px) */
@media (max-width: 480px) {
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .award-item,
    .payment-method-item,
    .comparison-card,
    .app-feature {
        max-width: 48% !important;
        min-width: 120px !important;
        margin: 5px !important;
    }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }

    .btn {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
}

/* Landscape Mobile Fix */
@media (max-width: 768px) and (orientation: landscape) {
    .awards-container,
    .comparison-cards,
    .app-cards {
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .award-item,
    .comparison-card,
    .app-card {
        flex: 0 1 45% !important;
        max-width: 45% !important;
    }
}

/* Desktop Alignment Protection */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    
    /* Ensure desktop layout stays intact */
    .container {
        max-width: 1200px !important;
    }
}