/**
 * Critical Mobile Display Fixes
 * Ensures proper rendering on all mobile devices
 */

/* Critical viewport and rendering fixes */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

/* iOS Safari scroll fix */
html {
    height: auto !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

/* iPad-specific scroll fix */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        position: static !important;
    }
    
    main, .container, .planner-container {
        overflow: visible !important;
        height: auto !important;
        position: static !important;
    }
    
    /* Remove fixed/sticky positioning that blocks scroll on iPad */
    .sacred-hero,
    .today-hero,
    .activities-section {
        position: static !important;
        overflow: visible !important;
    }
}

/* Ensure proper mobile container behavior */
.container,
.container-fluid {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 auto !important;
}

/* Critical mobile hero section fix */
.hero-sage {
    min-height: 100vh !important;
    padding: 1rem 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

.mobile-hero-section {
    background: rgba(21, 21, 48, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* CRITICAL: Mobile text input fixes */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-control,
.form-field {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    line-height: 1.5 !important;
    padding: 12px 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enhanced focus states for mobile */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-field:focus {
    outline: none !important;
    border-color: rgba(92, 219, 149, 0.8) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 10px rgba(92, 219, 149, 0.3) !important;
}

/* JOURNAL SPECIFIC: Override any conflicting styles */
#journal_title,
#journal_content {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(92, 219, 149, 0.3) !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 12px 16px !important;
    min-height: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1000 !important;
    display: block !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: text !important;
}

/* Specific textarea enhancements */
textarea {
    min-height: 120px !important;
    resize: vertical !important;
    overflow-y: auto !important;
}

/* Form labels */
.form-label,
label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 14px !important;
}
#journal_title,
#journal_content {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Enable all touch interactions */
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
    
    /* Enable touch and focus */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(92, 219, 149, 0.3) !important;
    
    /* Positioning and z-index */
    position: relative !important;
    z-index: 1000 !important;
    
    /* Prevent iOS zoom */
    font-size: 16px !important;
    
    /* Visual styling */
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: white !important;
    
    /* WebKit specific fixes */
    -webkit-user-select: text !important;
    -webkit-touch-callout: default !important;
    
    /* Ensure input is focusable */
    outline: none !important;
    cursor: text !important;
}

/* Force focus states */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid var(--sage-green, #5CDB95) !important;
    z-index: 1001 !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Ensure form containers don't interfere */
.form-group,
.form-control,
.card,
.journal-entry,
.sage-integration {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Critical: Override any conflicting styles */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

input, textarea, select {
    -webkit-tap-highlight-color: rgba(92, 219, 149, 0.3) !important;
}

/* Force journal form inputs to be functional */
.journal-form input,
.journal-form textarea,
#journal_title,
#journal_content {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(92, 219, 149, 0.4) !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 16px !important;
    padding: 16px !important;
    width: 100% !important;
    min-height: 50px !important;
    
    /* Critical mobile touch fixes */
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    z-index: 9999 !important;
    position: relative !important;
    
    /* Prevent iOS zoom and enhance interaction */
    -webkit-tap-highlight-color: rgba(92, 219, 149, 0.5) !important;
    -webkit-touch-callout: default !important;
}

/* Emergency override for all form elements */
form input[type="text"],
form input[type="email"], 
form input[type="password"],
form textarea {
    background: rgba(40, 40, 80, 0.8) !important;
    border: 2px solid #5CDB95 !important;
    color: white !important;
    font-size: 16px !important;
    padding: 16px !important;
    border-radius: 8px !important;
    outline: none !important;
    
    /* Ultra-aggressive mobile fix */
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 10000 !important;
    position: relative !important;
}

/* Fix display issues on small screens */
@media screen and (max-width: 768px) {
    /* Ensure content is visible and properly sized */
    .row {
        margin: 0 !important;
    }
    
    .col-12,
    .col-lg-6 {
        padding: 0.5rem !important;
    }
    
    /* Fix button sizing and visibility */
    .btn,
    .btn-ask-sage-primary {
        display: block !important;
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%) !important;
        color: white !important;
        border: 2px solid rgba(255,255,255,0.8) !important;
        border-radius: 12px !important;
        text-decoration: none !important;
    }
    
    /* Ensure text is readable */
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
        margin-bottom: 1rem !important;
    }
    
    p, .lead {
        color: #e0e0e0 !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Fix cosmic meditation container */
    .cosmic-meditation-container {
        max-width: 100% !important;
        margin: 0 auto 2rem auto !important;
        padding: 1rem !important;
    }
    
    .cosmic-meditation-artwork {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Ensure images don't break layout */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Fix navigation and headers */
    .navbar,
    .mobile-nav {
        width: 100% !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: rgba(21, 21, 48, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Adjust main content for fixed nav */
    main {
        padding-top: 80px !important;
    }
    
    /* Fix any overlay issues */
    .modal,
    .overlay,
    .popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important;
    }
}

/* Ultra-small screens (less than 375px) */
@media screen and (max-width: 374px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    h1 {
        font-size: 2rem !important;
    }
    
    .btn {
        padding: 0.8rem !important;
        font-size: 1rem !important;
    }
}

/* Landscape mobile orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero-sage {
        min-height: auto !important;
        padding: 0.5rem 0 !important;
    }
    
    .cosmic-meditation-container {
        margin-bottom: 1rem !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari viewport height fix */
    .hero-sage {
        min-height: -webkit-fill-available !important;
    }
    
    /* Fix iOS zoom issues */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px !important;
        pointer-events: auto !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: default !important;
        -webkit-appearance: none !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: white !important;
        padding: 12px !important;
    }
}

/* Android Chrome specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    body {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* CRITICAL MOBILE FORM FIXES */
/* Fix all form input interactions for mobile */
input, textarea, select, button {
    pointer-events: auto !important;
    -webkit-user-select: auto !important;
    user-select: auto !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: default !important;
    -webkit-appearance: none !important;
    position: relative !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 14px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
}

/* Enhanced textarea fixes for mobile */
textarea {
    min-height: 120px !important;
    max-height: 300px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-family: inherit !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/* Input field placeholder styling */
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

/* Enhanced input focus states */
input:focus, textarea:focus {
    outline: none !important;
    border-color: #5cdb95 !important;
    box-shadow: 0 0 0 3px rgba(92, 219, 149, 0.3) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    z-index: 1001 !important;
}

/* Specific fixes for feedback forms and modals */
.modal input, .modal textarea, 
.feedback-form input, .feedback-form textarea,
form input, form textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 14px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    z-index: 1000 !important;
    position: relative !important;
}

/* Checkbox and radio button fixes */
input[type="checkbox"], 
input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 8px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    position: relative !important;
    z-index: 1000 !important;
    background: white !important;
    border: 2px solid #9b5de5 !important;
}

input[type="radio"] {
    -webkit-appearance: radio !important;
    appearance: radio !important;
    border-radius: 50% !important;
}

/* Label fixes for checkboxes and radios */
label {
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    position: relative !important;
    z-index: 100 !important;
}

/* Form containers */
.form-group, .form-check, .option-item, .checkbox-item {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 50 !important;
    margin: 8px 0 !important;
    padding: 12px !important;
    background: rgba(21, 21, 48, 0.8) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
}

/* Textarea specific fixes */
textarea {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

/* Button interaction fixes */
button, .btn, .cta-button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    position: relative !important;
    z-index: 100 !important;
    min-height: 44px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* Fix any overlay interference */
.tree-background::before,
.cosmic-particles,
body::before {
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Ensure content containers allow interaction */
.content-overlay,
.container,
.feature-card,
.question-card,
.profile-card {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Focus states for accessibility */
input:focus, textarea:focus, button:focus {
    outline: 2px solid #5cdb95 !important;
    outline-offset: 2px !important;
    border-color: #5cdb95 !important;
    box-shadow: 0 0 0 3px rgba(92, 219, 149, 0.3) !important;
}

/* Make sure all clickable elements work */
[onclick], [data-toggle], .clickable {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
}