/* ============================================
   MOBILE SERVICE MODAL OPTIMIZATION
   Make cost estimation popup fit in one page
   No scrolling required
   ============================================ */

/* ===== GLOBAL PULL-TO-REFRESH DISABLE (ALL DEVICES) ===== */
* {
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
}

html {
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
}

body {
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
}

/* All scrollable elements */
div, section, main, article {
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
}

@media (max-width: 768px) {
    /* ===== PREVENT ACCIDENTAL RELOAD - AGGRESSIVE ===== */

    /* Lock body completely when modal is open */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    /* Modal container - prevent all overscroll */
    .modal {
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    /* Only allow vertical scroll inside modal content */
    .modal-content.service-modal-content {
        overscroll-behavior: contain !important;
        overscroll-behavior-y: contain !important;
        overscroll-behavior-x: none !important;
        touch-action: pan-y !important;
    }

    /* ===== MODAL CONTAINER ===== */

    .modal {
        padding: 0 !important;
        align-items: flex-start !important;
    }

    .modal-content.service-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 16px !important;
        touch-action: pan-y !important;
    }

    /* ===== COMPACT HEADER ===== */

    .service-modal-header {
        padding: 16px 0 12px 0 !important;
        margin-bottom: 12px !important;
        text-align: center;
    }

    .service-modal-header .service-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        margin: 0 auto 10px auto !important;
    }

    .service-modal-header h2 {
        font-size: 1.4rem !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .service-modal-header p {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }

    /* ===== COMPACT BODY ===== */

    .service-modal-body {
        padding: 0 !important;
    }

    .service-modal-body > p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .service-modal-body h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }

    /* ===== FEATURES SECTION - COMPACT ===== */

    .service-feature {
        padding: 10px !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .service-feature-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.9rem !important;
    }

    .service-feature h4 {
        font-size: 0.9rem !important;
        margin-bottom: 3px !important;
    }

    .service-feature p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* ===== BENEFITS - COMPACT ===== */

    .service-benefit {
        font-size: 0.8rem !important;
        padding: 6px 0 !important;
        margin-bottom: 6px !important;
    }

    .service-benefit i {
        font-size: 0.75rem !important;
    }

    /* ===== HIDE STATS ON MOBILE ===== */

    .service-modal-body .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .service-stat {
        display: none !important;
    }

    /* ===== MINI CALCULATOR - ULTRA COMPACT ===== */

    .service-mini-calc {
        padding: 14px !important;
        margin-bottom: 16px !important;
        margin-top: 16px !important;
    }

    .service-mini-calc h3 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .mini-calc-step p {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }

    /* Calculator options - ultra compact */
    .mini-calc-option {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        min-height: auto !important;
    }

    .mini-calc-option i {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    .mini-calc-option p {
        font-size: 0.75rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .mini-calc-option .text-xs {
        font-size: 0.7rem !important;
    }

    /* Step grids - single column for space efficiency */
    #miniStep1-ai-automation,
    #miniStep1-cybersecurity,
    #miniStep1-web-development,
    #miniStep1-mobile-development,
    #miniStep1-cloud-solutions,
    #miniStep1-api-development,
    [id^="miniStep1-"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #miniStep2-ai-automation,
    #miniStep2-cybersecurity,
    #miniStep2-web-development,
    #miniStep2-mobile-development,
    #miniStep2-cloud-solutions,
    #miniStep2-api-development,
    [id^="miniStep2-"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    #miniStep3-ai-automation,
    #miniStep3-cybersecurity,
    #miniStep3-web-development,
    #miniStep3-mobile-development,
    #miniStep3-cloud-solutions,
    #miniStep3-api-development,
    [id^="miniStep3-"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    /* Progress indicator - more compact */
    .mini-calc-progress-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .mini-calc-progress-line {
        height: 2px !important;
        flex: 1;
    }

    .flex.items-center.gap-2.mb-4 {
        gap: 4px !important;
        margin-bottom: 10px !important;
    }

    /* Result box - compact */
    .service-mini-calc .p-4 {
        padding: 12px !important;
    }

    .service-mini-calc .text-2xl {
        font-size: 1.3rem !important;
    }

    .service-mini-calc .text-sm {
        font-size: 0.75rem !important;
    }

    /* ===== CTA SECTION - COMPACT ===== */

    .service-cta {
        padding: 14px 0 !important;
        margin-top: 16px !important;
        text-align: center;
    }

    .service-cta h3 {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }

    .service-cta p {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
    }

    .service-cta .flex {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .service-cta .btn-primary,
    .service-cta .btn-outline {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* ===== BACK BUTTON IN MODAL ONLY ===== */

    /* Hide by default */
    .back-to-home-btn {
        display: none !important;
    }

    /* Show only when modal is open */
    body.modal-open .back-to-home-btn {
        display: flex !important;
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 10001 !important;
        background: rgba(0, 230, 118, 0.2) !important;
        border: 2px solid rgba(0, 230, 118, 0.5) !important;
        border-radius: 14px !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        color: #00e676 !important;
        font-size: 1.4rem !important;
        box-shadow: 0 6px 20px rgba(0, 230, 118, 0.3) !important;
        text-decoration: none !important;
    }

    body.modal-open .back-to-home-btn:active {
        transform: scale(0.92) !important;
        background: rgba(0, 230, 118, 0.3) !important;
    }

    body.modal-open .back-to-home-btn i {
        color: #00e676 !important;
    }
    /* ===== HIDE MODAL CLOSE BUTTONS ===== */

    .close-modal.close-service-modal,
    .modal-back-button {
        display: none !important;
    }

    /* ===== REDUCE VERTICAL SPACING ===== */

    .service-modal-body .mb-8 {
        margin-bottom: 14px !important;
    }

    .service-modal-body .mb-6 {
        margin-bottom: 12px !important;
    }

    .service-modal-body .mb-4 {
        margin-bottom: 10px !important;
    }

    .service-modal-body .mb-3 {
        margin-bottom: 8px !important;
    }

    .service-modal-body .mb-2 {
        margin-bottom: 6px !important;
    }

    /* ===== GRID ADJUSTMENTS ===== */

    .service-modal-body .grid.gap-6 {
        gap: 12px !important;
    }

    .service-modal-body .grid.gap-3 {
        gap: 8px !important;
    }

    /* ===== SCROLLBAR STYLING ===== */

    .service-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .service-modal-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .service-modal-content::-webkit-scrollbar-thumb {
        background: rgba(0, 230, 118, 0.3);
        border-radius: 2px;
    }
}

/* ===== SMALL PHONES (< 375px) ===== */
@media (max-width: 375px) {
    .service-modal-content.service-modal-content {
        padding: 12px !important;
    }

    .service-modal-header h2 {
        font-size: 1.2rem !important;
    }

    .service-modal-header p {
        font-size: 0.8rem !important;
    }

    .service-modal-body > p {
        font-size: 0.8rem !important;
    }

    .service-modal-body h3 {
        font-size: 1rem !important;
    }

    .service-feature h4 {
        font-size: 0.85rem !important;
    }

    .service-feature p {
        font-size: 0.7rem !important;
    }

    .mini-calc-option {
        padding: 8px 10px !important;
    }

    .mini-calc-option p {
        font-size: 0.7rem !important;
    }

    .service-cta .btn-primary,
    .service-cta .btn-outline {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .service-modal-content.service-modal-content {
        max-height: 100vh !important;
    }

    .service-modal-header {
        padding: 12px 0 10px 0 !important;
    }

    .service-mini-calc {
        padding: 12px !important;
        margin: 12px 0 !important;
    }
}

/* ===== FIT EVERYTHING OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Hide "What We Deliver" heading to save space */
    .service-modal-body h3:first-of-type {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    /* Reduce feature list to max 3 items visible */
    .service-feature:nth-child(n+4) {
        display: none !important;
    }

    /* Reduce benefits list */
    .service-benefit:nth-child(n+5) {
        display: none !important;
    }

    /* Ensure modal content uses available height efficiently */
    .service-modal-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .service-modal-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ===== HIDE BACK BUTTON ON DESKTOP ===== */
@media (min-width: 769px) {
    .back-to-home-btn {
        display: none !important;
    }
}