/**
 * ═══════════════════════════════════════════════════════════
 * iPhone Optimizer CSS - RealPayment System
 * ═══════════════════════════════════════════════════════════
 * 
 * סגנונות אוטומטיים שעובדים עם iphone-optimizer.js
 * נטען אוטומטית כשזיהוי iPhone מתרחש
 */

/* ═══════════════════════════════════════════════════════════
   Body Classes המוספים על ידי הסקריפט
   ═══════════════════════════════════════════════════════════ */

/* iPhone Detection */
.iphone-optimized {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ENHANCED (DNA.MDC): Safe Area Support with proper box model */
.iphone-optimized {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
}

/* ENHANCED (DNA.MDC): Ensure navbar respects safe area */
.iphone-optimized .navbar {
    padding-top: env(safe-area-inset-top);
}

/* ENHANCED (DNA.MDC): Ensure container doesn't double-pad */
.iphone-optimized .container {
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* ═══════════════════════════════════════════════════════════
   Orientation Specific
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized.orientation-portrait {
    /* Portrait specific styles */
}

.iphone-optimized.orientation-landscape {
    /* Landscape specific styles */
}

/* ═══════════════════════════════════════════════════════════
   Container Optimizations
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized .container,
.iphone-optimized .admin-container,
.iphone-optimized .auth-container,
.iphone-optimized .charge-container,
.iphone-optimized .register-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   Input Optimizations - למנוע Auto Zoom (אנושי ונוח)
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized input[type="text"],
.iphone-optimized input[type="email"],
.iphone-optimized input[type="tel"],
.iphone-optimized input[type="password"],
.iphone-optimized input[type="number"],
.iphone-optimized input[type="search"],
.iphone-optimized textarea,
.iphone-optimized select,
.iphone-optimized .form-input {
    font-size: 16px !important;
    padding: 13px 15px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
}

/* Larger padding for password fields with toggle */
.iphone-optimized input[type="password"] {
    padding-right: 48px !important;
}

/* Verification inputs */
.iphone-optimized .verification-input {
    font-size: 22px !important;
    height: 56px !important;
    padding: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   Button Optimizations - Touch Targets (Apple HIG)
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized button,
.iphone-optimized .btn,
.iphone-optimized .cta-button,
.iphone-optimized .submit-button,
.iphone-optimized .pay-button,
.iphone-optimized .generate-button,
.iphone-optimized .primary-button,
.iphone-optimized .secondary-button,
.iphone-optimized input,
.iphone-optimized select,
.iphone-optimized a.nav-item {
    min-height: 48px !important; /* Apple HIG Minimum */
    min-width: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure text remains readable inside buttons */
.iphone-optimized .btn, 
.iphone-optimized button {
    font-size: 16px !important; /* Prevent auto-zoom */
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Large action buttons (Primary CTA) */
.iphone-optimized .submit-button,
.iphone-optimized .pay-button,
.iphone-optimized .generate-button,
.iphone-optimized .btn-primary {
    min-height: 56px !important; /* Comfortable thumb reach */
    font-size: 17px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(23, 184, 160, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   Grid Optimizations
   ═══════════════════════════════════════════════════════════ */

/* Default Mobile (Portrait): Single Column for Focus */
.iphone-optimized .stats-grid,
.iphone-optimized .values-grid,
.iphone-optimized .features-grid,
.iphone-optimized .form-group-row,
.iphone-optimized .business-model-options,
.iphone-optimized .quick-actions {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

/* Fix Cards within Grid */
.iphone-optimized .stat-card,
.iphone-optimized .quick-action-card {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* Reset any margins */
}

/* ENHANCED (DNA.MDC): Forecast Chart Container */
.iphone-optimized .forecast-card,
.iphone-optimized .chart-container,
.iphone-optimized #forecastCard {
    padding: 16px !important;
    border-radius: 16px !important;
}

.iphone-optimized canvas {
    max-height: 220px !important;
    width: 100% !important;
}

/* ENHANCED (DNA.MDC): Section headers on mobile */
.iphone-optimized .section-header {
    margin-bottom: 16px !important;
}

.iphone-optimized .section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   Card Optimizations
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized .card,
.iphone-optimized .stat-card,
.iphone-optimized .value-card,
.iphone-optimized .feature-card,
.iphone-optimized .payment-card,
.iphone-optimized .auth-card,
.iphone-optimized .register-card {
    border-radius: 18px !important;
    padding: 20px 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Large Cards (Charts, Forecasts) */
.iphone-optimized .forecast-card,
.iphone-optimized .chart-card,
.iphone-optimized #forecastCard,
.iphone-optimized #futureTrendsCard {
    padding: 18px 14px !important;
    border-radius: 18px !important;
    margin: 14px 0 !important;
}

/* Welcome Container */
.iphone-optimized .welcome-container {
    padding: 18px 16px !important;
    margin-bottom: 18px !important;
    border-radius: 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   Table Optimizations
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
}

.iphone-optimized table {
    min-width: 600px !important;
    font-size: 12px !important;
}

.iphone-optimized table th,
.iphone-optimized table td {
    padding: 8px 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════
   Modal Optimizations
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized .modal-content,
.iphone-optimized .info-modal-content {
    max-width: 92vw !important;
    max-height: 85vh !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
}

.iphone-optimized .modal-actions {
    flex-direction: column !important;
    gap: 10px !important;
}

.iphone-optimized .modal-actions button {
    width: 100% !important;
}

/* Info Modal Specific */
.iphone-optimized .info-modal-title {
    font-size: 19px !important;
}

.iphone-optimized .info-modal-body {
    font-size: 14px !important;
    line-height: 1.65 !important;
}

.iphone-optimized .info-section-title {
    font-size: 15px !important;
}

/* ═══════════════════════════════════════════════════════════
   Typography Optimizations (עדין ואנושי)
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized h1,
.iphone-optimized .hero-title,
.iphone-optimized .auth-title,
.iphone-optimized .register-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}

.iphone-optimized h2,
.iphone-optimized .section-title,
.iphone-optimized .step-title {
    font-size: 21px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

.iphone-optimized h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.iphone-optimized p,
.iphone-optimized .body-text,
.iphone-optimized .step-description {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.iphone-optimized small,
.iphone-optimized .small-text,
.iphone-optimized .form-hint {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* ═══════════════════════════════════════════════════════════
   Navbar Optimizations - Mobile Scroll
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized .navbar-container {
    padding: 0 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.iphone-optimized .navbar-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.iphone-optimized .navbar-menu {
    display: flex !important;
    gap: 12px !important;
    padding: 4px 8px !important;
    width: max-content !important; /* Ensure content doesn't wrap */
}

.iphone-optimized .nav-btn {
    flex-shrink: 0 !important;
    min-width: 48px !important; /* Larger tap target */
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* Active state feedback */
.iphone-optimized .nav-btn:active {
    transform: scale(0.92) !important;
    background: rgba(23, 184, 160, 0.1) !important;
}

.iphone-optimized .nav-btn svg {
    width: 22px !important;
    height: 22px !important;
}

/* Hide text in navbar buttons on mobile to save space */
.iphone-optimized .nav-btn span:not(:first-child) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   Flex Optimizations
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized .hero-cta-group,
.iphone-optimized .button-group,
.iphone-optimized .step-navigation,
.iphone-optimized .action-buttons,
.iphone-optimized .cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.iphone-optimized .hero-cta-group > *,
.iphone-optimized .button-group > *,
.iphone-optimized .step-navigation > *,
.iphone-optimized .action-buttons > *,
.iphone-optimized .cta-buttons > * {
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════════════════════ */

/* Full width on iPhone */
.iphone-optimized .full-width-mobile {
    width: 100% !important;
}

/* Stack on iPhone */
.iphone-optimized .stack-mobile {
    flex-direction: column !important;
}

/* Hide on iPhone */
.iphone-optimized .hide-mobile {
    display: none !important;
}

/* Show only on iPhone */
.show-mobile {
    display: none !important;
}

.iphone-optimized .show-mobile {
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   Smooth Scrolling
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════
   Touch Interactions
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized * {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Allow scrolling on specific elements */
.iphone-optimized .scrollable {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════
   Performance Optimizations
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ENHANCED (DNA.MDC): GPU acceleration for smooth animations */
.iphone-optimized .animated,
.iphone-optimized button,
.iphone-optimized .card,
.iphone-optimized .stat-card,
.iphone-optimized .quick-action-card {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ENHANCED (DNA.MDC): Active/Hover states for touch */
.iphone-optimized .stat-card:active,
.iphone-optimized .quick-action-card:active,
.iphone-optimized button:active {
    transform: scale(0.98) translateZ(0);
    transition-duration: 0.1s;
}

/* ENHANCED (DNA.MDC): Smooth card transitions */
.iphone-optimized .card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ENHANCED (DNA.MDC): Loading skeleton on mobile */
.iphone-optimized .skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   Specific iPhone Models - אנושי, ברור ולא גס
   ═══════════════════════════════════════════════════════════ */

/* iPhone רגיל (13/14/15/16 - 390px-427px) */
@media (min-width: 375px) and (max-width: 427px) {
    /* Container - נשימה טובה */
    .iphone-optimized .register-container,
    .iphone-optimized .auth-container {
        padding: 16px !important;
    }
    
    .iphone-optimized .register-content,
    .iphone-optimized .auth-content {
        padding: 28px 20px !important;
    }
    
    /* Steps indicator - ברור */
    .iphone-optimized .steps-indicator {
        padding: 18px 12px !important;
    }
    
    .iphone-optimized .step-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    .iphone-optimized .step-label {
        font-size: 10px !important;
        max-width: 55px !important;
        margin-top: 6px !important;
    }
    
    /* Typography - קריא */
    .iphone-optimized .step-title {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    
    .iphone-optimized .step-description {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }
    
    .iphone-optimized .form-label {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    
    /* Inputs - נוח */
    .iphone-optimized .form-input {
        padding: 12px 14px !important;
        font-size: 16px !important;
    }
    
    /* Buttons - ברור */
    .iphone-optimized .step-button,
    .iphone-optimized .submit-button {
        padding: 13px 24px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }
    
    /* Form groups */
    .iphone-optimized .form-group {
        margin-bottom: 20px !important;
    }
    
    .iphone-optimized .form-group-row {
        gap: 16px !important;
    }
    
    /* Grids */
    .iphone-optimized .stats-grid,
    .iphone-optimized .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .iphone-optimized .stat-card {
        padding: 18px 16px !important;
    }
}

/* iPhone Pro Max (14/15/16 Pro Max - 428px+) */
@media (min-width: 428px) and (max-width: 450px) {
    /* Container - יותר מרווח */
    .iphone-optimized .register-container,
    .iphone-optimized .auth-container {
        padding: 20px !important;
    }
    
    .iphone-optimized .register-content,
    .iphone-optimized .auth-content {
        padding: 32px 24px !important;
    }
    
    /* Steps indicator - רחב יותר */
    .iphone-optimized .steps-indicator {
        padding: 20px 16px !important;
    }
    
    .iphone-optimized .step-number {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
    
    .iphone-optimized .step-label {
        font-size: 11px !important;
        max-width: 65px !important;
        margin-top: 7px !important;
    }
    
    /* Typography - גדול יותר */
    .iphone-optimized .step-title {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }
    
    .iphone-optimized .step-description {
        font-size: 15px !important;
        margin-bottom: 28px !important;
    }
    
    .iphone-optimized .form-label {
        font-size: 14px !important;
        margin-bottom: 9px !important;
    }
    
    /* Inputs - נוח */
    .iphone-optimized .form-input {
        padding: 13px 16px !important;
        font-size: 16px !important;
    }
    
    /* Buttons - נוח */
    .iphone-optimized .step-button,
    .iphone-optimized .submit-button {
        padding: 14px 28px !important;
        font-size: 16px !important;
        min-height: 50px !important;
    }
    
    /* Form groups */
    .iphone-optimized .form-group {
        margin-bottom: 22px !important;
    }
    
    .iphone-optimized .form-group-row {
        gap: 18px !important;
    }
    
    /* Grids - יכול להכיל יותר */
    .iphone-optimized .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .iphone-optimized .stat-card {
        padding: 20px 18px !important;
    }
    
    /* Quick actions - עדיין עמודה אחת לבהירות */
    .iphone-optimized .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ENHANCED (DNA.MDC): Landscape mode optimizations */
@media (max-width: 932px) and (orientation: landscape) {
    .iphone-optimized .container {
        padding-top: calc(10px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    
    .iphone-optimized .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .iphone-optimized .navbar {
        padding: 8px 0 !important;
    }
    
    .iphone-optimized .welcome-container {
        padding: 16px 20px !important;
        margin-bottom: 16px !important;
    }
    
    .iphone-optimized canvas {
        max-height: 180px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Debug Mode
   ═══════════════════════════════════════════════════════════ */

.iphone-optimized.debug-mode * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}

.iphone-optimized.debug-mode .container {
    outline: 2px solid rgba(0, 255, 0, 0.5) !important;
}

.iphone-optimized.debug-mode button {
    outline: 2px solid rgba(0, 0, 255, 0.5) !important;
}