/* ============================================
           🎯 UEESHOP COMPATIBLE VERSION - V6 OPTIMIZED
           ============================================
           Updates:
           1. Removed Step 3 (Pre-Design Fee Payment)
           2. Step 2 now uses single image instead of grid
           3. Updated Step 6, 9, 10 images and titles
           4. Optimized mobile timeline icon size
           5. Renumbered all steps sequentially (1-9)
        ============================================ */
        
        /* ============================================
           Global Reset & Base Styles
        ============================================ */
        .ifp-solution-page * {
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }
        
        .ifp-solution-page {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
            line-height: 1.6 !important;
            color: #333 !important;
            background: #fff !important;
            width: 100% !important;
            overflow-x: hidden !important;
        }
        
        .ifp-solution-page img {
            max-width: 100% !important;
            height: auto !important;
            display: block !important;
        }
        
        .ifp-solution-page a {
            text-decoration: none !important;
            color: inherit !important;
        }
        
        /* ============================================
           Brand Color System
        ============================================ */
        .ifp-solution-page {
            --ifp-primary: #30A0FF;
            --ifp-primary-dark: #2890ef;
            --ifp-primary-light: #5cb3ff;
            --ifp-cta-orange: #E85A2A;
            --ifp-cta-orange-dark: #d14b1e;
            --ifp-cta-orange-light: #ff7249;
            --ifp-text-dark: #222;
            --ifp-text-gray: #666;
            --ifp-text-light: #999;
            --ifp-bg-light: #f8f9fa;
            --ifp-border: #e0e0e0;
            --ifp-shadow: 0 2px 12px rgba(0,0,0,0.08);
            --ifp-shadow-hover: 0 8px 30px rgba(48,160,255,0.2);
        }
        
        /* ============================================
           Container & Layout
        ============================================ */
        .ifp-container {
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 0 20px !important;
            width: 100% !important;
        }
        
        .ifp-section {
            padding: 40px 0 !important;
            position: relative !important;
            width: 100% !important;
        }
        
        /* ============================================
           Typography - Responsive Font Sizes
        ============================================ */
        .ifp-solution-page h1 {
            font-size: clamp(28px, 5vw, 42px) !important;
            color: #fff !important;
            font-weight: 700 !important;
            margin-bottom: 20px !important;
            line-height: 1.3 !important;
        }
        
        .ifp-solution-page h2 {
            font-size: clamp(24px, 4vw, 36px) !important;
            color: var(--ifp-text-dark) !important;
            font-weight: 700 !important;
            margin-bottom: 15px !important;
            line-height: 1.3 !important;
        }
        
        .ifp-solution-page h3 {
            font-size: clamp(18px, 2.5vw, 24px) !important;
            color: var(--ifp-text-dark) !important;
            font-weight: 600 !important;
            margin-bottom: 12px !important;
            line-height: 1.4 !important;
        }
        
        .ifp-solution-page p {
            font-size: clamp(14px, 1.8vw, 16px) !important;
            color: var(--ifp-text-gray) !important;
            margin-bottom: 15px !important;
            line-height: 1.7 !important;
        }
        
        /* ============================================
           Hero Section
        ============================================ */
        .ifp-hero {
            background: linear-gradient(135deg, #30A0FF 0%, #1e7ec8 100%) !important;
            color: #fff !important;
            text-align: center !important;
            padding: 80px 0 60px !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        .ifp-hero::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px) !important;
            background-size: 50px 50px !important;
            opacity: 0.5 !important;
        }
        
        .ifp-hero-content {
            position: relative !important;
            z-index: 1 !important;
        }
        
        .ifp-subtitle {
            font-size: clamp(16px, 2.5vw, 20px) !important;
            color: rgba(255,255,255,0.95) !important;
            margin-bottom: 40px !important;
            line-height: 1.6 !important;
        }
        
        .ifp-video-container {
            max-width: 900px !important;
            margin: 0 auto !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
            background: #000 !important;
        }
        
        .ifp-video-container iframe {
            width: 100% !important;
            aspect-ratio: 16 / 9 !important;
            height: auto !important;
            min-height: 250px !important;
            border: none !important;
            display: block !important;
        }
        
        /* ============================================
           CENTER TIMELINE LAYOUT
        ============================================ */
        .ifp-timeline-container {
            position: relative !important;
            max-width: 1400px !important;
            margin: 0 auto !important;
            padding: 60px 20px !important;
        }
        
        /* Center vertical line */
        .ifp-timeline-container::before {
            content: '' !important;
            position: absolute !important;
            left: 50% !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 4px !important;
            background: linear-gradient(to bottom, 
                var(--ifp-primary) 0%, 
                var(--ifp-primary-light) 50%, 
                var(--ifp-primary) 100%) !important;
            transform: translateX(-50%) !important;
            box-shadow: 0 0 20px rgba(48,160,255,0.3) !important;
        }
        
        /* ============================================
           Timeline Step Card - Alternating Layout
        ============================================ */
        .ifp-timeline-step {
            position: relative !important;
            margin-bottom: 80px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .ifp-timeline-step:last-child {
            margin-bottom: 0 !important;
        }
        
        /* Card container - takes ~45% width on each side */
        .ifp-step-card {
            width: 45% !important;
            background: #fff !important;
            border-radius: 16px !important;
            padding: 35px !important;
            box-shadow: var(--ifp-shadow) !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            border: 2px solid transparent !important;
        }
        
        .ifp-step-card:hover {
            box-shadow: var(--ifp-shadow-hover) !important;
            transform: translateY(-8px) scale(1.02) !important;
            border-color: var(--ifp-primary) !important;
        }
        
        /* Left-side cards */
        .ifp-timeline-step:nth-child(odd) .ifp-step-card {
            margin-right: auto !important;
            margin-left: 0 !important;
        }
        
        /* Right-side cards */
        .ifp-timeline-step:nth-child(even) .ifp-step-card {
            margin-left: auto !important;
            margin-right: 0 !important;
        }
        
        /* ============================================
           Timeline Center Icon/Number
        ============================================ */
        .ifp-timeline-icon {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 70px !important;
            height: 70px !important;
            background: linear-gradient(135deg, var(--ifp-primary) 0%, var(--ifp-primary-light) 100%) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 28px !important;
            font-weight: 700 !important;
            color: #fff !important;
            box-shadow: 0 8px 25px rgba(48,160,255,0.4), 0 0 0 8px #fff !important;
            z-index: 10 !important;
            transition: all 0.4s ease !important;
        }
        
        .ifp-timeline-step:hover .ifp-timeline-icon {
            transform: translate(-50%, -50%) scale(1.15) rotate(360deg) !important;
            box-shadow: 0 12px 35px rgba(48,160,255,0.6), 0 0 0 8px #fff !important;
        }
        
        /* ============================================
           Card Content Layout
        ============================================ */
        .ifp-step-header {
            margin-bottom: 20px !important;
        }
        
        .ifp-step-title {
            font-size: clamp(18px, 2.5vw, 24px) !important;
            color: var(--ifp-text-dark) !important;
            font-weight: 600 !important;
            margin-bottom: 12px !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }
        
        .ifp-step-title::before {
            content: '' !important;
            width: 6px !important;
            height: 24px !important;
            background: linear-gradient(to bottom, var(--ifp-primary), var(--ifp-primary-light)) !important;
            border-radius: 3px !important;
            flex-shrink: 0 !important;
        }
        
        .ifp-step-desc {
            font-size: clamp(14px, 1.8vw, 16px) !important;
            color: var(--ifp-text-gray) !important;
            line-height: 1.7 !important;
            margin-bottom: 25px !important;
        }
        
        /* ============================================
           Image Container - 50% Screen Width on Desktop
        ============================================ */
        .ifp-step-image {
            width: 100% !important;
            margin-top: 20px !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            background: var(--ifp-bg-light) !important;
            position: relative !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
            transition: all 0.4s ease !important;
        }
        
        .ifp-step-card:hover .ifp-step-image {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
        }
        
        .ifp-step-image img {
            width: 100% !important;
            height: auto !important;
            display: block !important;
            object-fit: contain !important;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .ifp-step-card:hover .ifp-step-image img {
            transform: scale(1.05) !important;
        }
        
        /* Image placeholder for empty frames */
        .ifp-image-placeholder {
            width: 100% !important;
            aspect-ratio: 1000 / 800 !important;
            background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: clamp(14px, 2vw, 18px) !important;
            color: var(--ifp-text-light) !important;
            border: 2px dashed var(--ifp-border) !important;
            border-radius: 8px !important;
            padding: 20px !important;
            text-align: center !important;
        }
        
        /* ============================================
           CTA Contact Section - Vibrant Orange #E85A2A
        ============================================ */
        .ifp-contact-section {
            background: linear-gradient(135deg, var(--ifp-cta-orange) 0%, var(--ifp-cta-orange-dark) 100%) !important;
            color: #fff !important;
            text-align: center !important;
            padding: 80px 0 !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        .ifp-contact-section::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
                radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px) !important;
            background-size: 800px 800px, 600px 600px, 40px 40px !important;
            opacity: 0.8 !important;
            animation: ifp-float 20s ease-in-out infinite !important;
        }
        
        @keyframes ifp-float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, -30px) rotate(5deg); }
            66% { transform: translate(-20px, 20px) rotate(-5deg); }
        }
        
        .ifp-contact-content {
            position: relative !important;
            z-index: 1 !important;
        }
        
        .ifp-contact-section h2 {
            color: #fff !important;
            font-size: clamp(26px, 4.5vw, 40px) !important;
            margin-bottom: 20px !important;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        }
        
        .ifp-contact-section p {
            font-size: clamp(16px, 2vw, 18px) !important;
            color: rgba(255,255,255,0.95) !important;
            margin-bottom: 40px !important;
            max-width: 700px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            text-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        }
        
        .ifp-contact-info {
            display: flex !important;
            flex-direction: column !important;
            gap: 20px !important;
            max-width: 500px !important;
            margin: 0 auto 40px !important;
        }
        
        .ifp-contact-item {
            background: rgba(255,255,255,0.2) !important;
            border: 2px solid rgba(255,255,255,0.4) !important;
            border-radius: 50px !important;
            padding: 18px 30px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px !important;
            font-size: clamp(15px, 1.8vw, 17px) !important;
            font-weight: 500 !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            cursor: pointer !important;
            backdrop-filter: blur(10px) !important;
        }
        
        .ifp-contact-item:hover {
            background: rgba(255,255,255,0.3) !important;
            border-color: rgba(255,255,255,0.7) !important;
            transform: translateY(-5px) scale(1.03) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
        }
        
        .ifp-contact-icon {
            font-size: clamp(20px, 2.5vw, 24px) !important;
        }
        
        /* CTA Buttons with Gradient Matching Orange Theme */
        .ifp-btn {
            display: inline-block !important;
            padding: 16px 40px !important;
            font-size: clamp(15px, 1.8vw, 17px) !important;
            font-weight: 600 !important;
            border-radius: 50px !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            cursor: pointer !important;
            text-align: center !important;
            line-height: 1.4 !important;
            text-decoration: none !important;
            margin: 8px !important;
            position: relative !important;
            overflow: hidden !important;
            border: 3px solid rgba(255,255,255,0.9) !important;
            background: linear-gradient(135deg, 
                rgba(255,255,255,0.15) 0%, 
                rgba(255,255,255,0.05) 100%) !important;
            color: #fff !important;
            backdrop-filter: blur(10px) !important;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
        }
        
        .ifp-btn::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -100% !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(120deg, 
                transparent, 
                rgba(255,255,255,0.3), 
                transparent) !important;
            transition: left 0.6s ease !important;
        }
        
        .ifp-btn:hover {
            background: linear-gradient(135deg, 
                rgba(255,255,255,0.95) 0%, 
                rgba(255,255,255,0.85) 100%) !important;
            color: var(--ifp-cta-orange) !important;
            transform: translateY(-5px) scale(1.05) !important;
            box-shadow: 0 12px 35px rgba(0,0,0,0.3) !important;
            border-color: rgba(255,255,255,1) !important;
        }
        
        .ifp-btn:hover::before {
            left: 100% !important;
        }
        
        .ifp-btn-group {
            display: flex !important;
            gap: 15px !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            align-items: center !important;
        }
        
        /* ============================================
           Responsive Design - Mobile Optimized
        ============================================ */
        @media (max-width: 768px) {
            /* Timeline becomes vertical on mobile */
            .ifp-timeline-container::before {
                left: 20px !important;
                transform: none !important;
            }
            
            .ifp-timeline-step {
                margin-bottom: 40px !important;
            }
            
            .ifp-step-card {
                width: calc(100% - 70px) !important;
                margin-left: 70px !important;
                margin-right: 0 !important;
                padding: 25px !important;
            }
            
            /* Always on right side for mobile */
            .ifp-timeline-step:nth-child(odd) .ifp-step-card,
            .ifp-timeline-step:nth-child(even) .ifp-step-card {
                margin-left: 70px !important;
                margin-right: 0 !important;
            }
            
            /* Smaller timeline icon for mobile - OPTIMIZED */
            .ifp-timeline-icon {
                left: 20px !important;
                width: 45px !important;
                height: 45px !important;
                font-size: 18px !important;
                box-shadow: 0 4px 15px rgba(48,160,255,0.4), 0 0 0 5px #fff !important;
            }
            
            .ifp-timeline-step:hover .ifp-timeline-icon {
                transform: translate(-50%, -50%) scale(1.1) rotate(360deg) !important;
                box-shadow: 0 6px 20px rgba(48,160,255,0.5), 0 0 0 5px #fff !important;
            }
            
            .ifp-hero {
                padding: 50px 0 40px !important;
            }
            
            .ifp-section {
                padding: 30px 0 !important;
            }
            
            .ifp-timeline-container {
                padding: 40px 15px !important;
            }
            
            .ifp-contact-section {
                padding: 50px 0 !important;
            }
            
            .ifp-btn-group {
                flex-direction: column !important;
                width: 100% !important;
            }
            
            .ifp-btn {
                width: 100% !important;
                max-width: 350px !important;
            }
            
            .ifp-contact-item {
                font-size: 14px !important;
                padding: 15px 20px !important;
            }
        }
        
        @media (min-width: 769px) and (max-width: 1024px) {
            .ifp-step-card {
                width: 46% !important;
                padding: 30px !important;
            }
            
            .ifp-timeline-icon {
                width: 65px !important;
                height: 65px !important;
                font-size: 26px !important;
            }
        }
        
        /* ============================================
           Print Optimization
        ============================================ */
        @media print {
            .ifp-timeline-container::before {
                background: #ccc !important;
            }
            
            .ifp-step-card {
                break-inside: avoid !important;
                box-shadow: none !important;
                border: 1px solid #ddd !important;
            }
        }