/* Minimal Mobile Fixes - Just the essentials */

/* Global box-sizing fix */
* {
    box-sizing: border-box !important;
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Basic mobile styles */
@media (max-width: 768px) {
    /* Fix navbar positioning - MOBILE ONLY */
    nav.fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* Add padding for fixed nav */
    body {
        padding-top: 56px;
    }
    
    /* Fix hero section - AGGRESSIVE mobile fixes */
    .jsx-a5d101b3537924f7 {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Hero container specific fix */
    div[class*="relative min-h-"][class*="bg-gradient-to-br"] {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Inner hero content container */
    div[class*="relative min-h-"][class*="bg-gradient-to-br"] > div {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Fix the grid container */
    .grid.grid-cols-1 {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Fix pricing card */
    .bg-white.rounded-2xl.shadow-xl {
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    /* Fix inner content boxes */
    .bg-white\/90.backdrop-blur-sm {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Force text content to fit */
    h1, h2, h3, p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Remove the broken sticky order buttons */
    .fixed.top-0:not(nav):not(#mobile-menu) {
        display: none !important;
    }
    
    /* Basic responsive images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix button container centering */
    .flex.flex-col.sm\:flex-row {
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Ensure buttons are full width on mobile */
    .flex.flex-col.sm\:flex-row > a,
    .flex.flex-col.sm\:flex-row > div {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    /* Fix stars/rating alignment and visibility */
    .flex.text-yellow-400 {
        justify-content: center !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Ensure star SVGs are visible */
    .flex.text-yellow-400 svg {
        width: 16px !important;
        height: 16px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        fill: currentColor !important;
        color: #facc15 !important; /* Force yellow color */
    }
    
    /* Fix star container parent */
    .bg-white\\/90.backdrop-blur-sm .flex.items-center {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force star paths to be visible */
    .flex.text-yellow-400 svg path {
        visibility: visible !important;
        opacity: 1 !important;
        fill: currentColor !important;
    }
    
    /* Fix the entire rating container */
    .jsx-a5d101b3537924f7.flex.text-yellow-400 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #facc15 !important;
        min-width: 80px !important; /* Ensure space for stars */
    }
    
    /* Override Tailwind width classes that might be hiding stars */
    .text-yellow-400 .w-4,
    .text-yellow-400 .w-5,
    .text-yellow-400 .h-4,
    .text-yellow-400 .h-5 {
        width: 16px !important;
        height: 16px !important;
        display: inline-block !important;
    }
    
    
    /* Fix the "Learn More About Smart Savings" button */
    button[class*="w-full"][class*="bg-blue-600"] {
        max-width: 100% !important;
    }
    
    /* Fix the bottom CTA section on mobile */
    .bg-gradient-to-r.from-red-50.to-red-100 {
        padding: 1.5rem !important;
    }
    
    /* Fix the three checkmark items to display horizontally */
    .bg-gradient-to-r.from-red-50.to-red-100 .flex.flex-col.sm\\:flex-row {
        flex-direction: row !important;
        justify-content: space-around !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    
    /* Make checkmark items more compact on mobile */
    .bg-gradient-to-r.from-red-50.to-red-100 .flex.items-center {
        flex-direction: row !important;
        white-space: nowrap !important;
    }
    
    /* Ensure checkmarks and text stay together */
    .bg-gradient-to-r.from-red-50.to-red-100 .flex.items-center span {
        font-size: 0.7rem !important;
        margin-left: 2px !important;
    }
    
    /* Ensure checkmark SVGs are visible and sized properly */
    .bg-gradient-to-r.from-red-50.to-red-100 svg {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide the entire rating box on mobile */
    .bg-gradient-to-r.from-red-50.to-red-100 .bg-white\\/50.rounded-lg {
        display: none !important;
    }
    
    /* Fix the entire CTA section layout */
    .bg-gradient-to-r.from-red-50.to-red-100 .space-y-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* Center the Get 70% OFF button */
    .bg-gradient-to-r.from-red-50.to-red-100 a[href="order.html"] {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 200px !important;
        width: 100% !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Center the checkmarks container */
    .bg-gradient-to-r.from-red-50.to-red-100 .flex.flex-col.sm\\:flex-row.items-center.justify-center {
        margin-top: 0.5rem !important;
    }
    
    /* Fix checkmark list items */
    .flex.items-center svg {
        flex-shrink: 0 !important;
    }
    
    /* Fix the badge at top */
    .inline-flex.items-center.bg-red-100 {
        white-space: nowrap !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Chat page mobile improvements */
    .chat-container {
        margin: 10px !important;
        padding: 16px !important;
        max-width: 100% !important;
    }
    
    /* Make order details more compact */
    #orderDetails {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    #orderDetails .space-y-2 > div {
        padding: 4px 0 !important;
    }
    
    /* Optimize chat messages area */
    #chatMessages {
        height: calc(100vh - 360px) !important;
        margin: 12px 0 !important;
        padding: 8px !important;
    }
    
    /* Make messages more compact */
    .message {
        max-width: 85% !important;
        padding: 8px 12px !important;
        margin: 6px 0 !important;
        font-size: 14px !important;
    }
    
    /* Optimize chat input area - more careful approach */
    .chat-input-container {
        padding: 8px !important;
        gap: 4px !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    #chatInput {
        padding: 10px 12px !important;
        font-size: 14px !important;
        flex: 1 !important;
        min-width: 0 !important; /* Allow input to shrink */
    }
    
    /* Make buttons more touch-friendly but not too wide */
    .chat-input-container button {
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        margin: 0 !important; /* Remove any margins */
    }
    
    /* Specific fix for upload button */
    #uploadBtn {
        margin-left: 0 !important;
    }
    
    /* Tracking container mobile optimization */
    .tracking-container-wrapper {
        margin: 0 !important;
        padding: 0 10px 10px !important;
    }
    
    .tracking-container-inner {
        border-radius: 12px !important;
    }
    
    .tracking-header {
        padding: 12px !important;
    }
    
    .tracking-header h3 {
        font-size: 18px !important;
    }
    
    /* Make tracking content more compact */
    .tracking-main {
        padding: 12px !important;
    }
    
    .tracking-eta {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .tracking-eta-time {
        font-size: 20px !important;
    }
    
    /* Optimize map for mobile */
    .tracking-map {
        height: 200px !important;
        margin-bottom: 10px !important;
    }
    
    /* Make progress steps smaller */
    .tracking-step-dot {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    
    .tracking-step-label {
        font-size: 11px !important;
    }
    
    /* Order items section */
    .tracking-order-items {
        padding: 10px !important;
    }
    
    .tracking-order-item {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }
    
    /* Hide less important info on mobile */
    .tracking-info-grid {
        display: none !important;
    }
    
    /* File upload button */
    #uploadBtn {
        flex-shrink: 0 !important; /* Prevent button from shrinking */
    }
    
    /* On very small screens, make input/buttons stack */
    @media (max-width: 400px) {
        .chat-input-container {
            flex-direction: column !important;
        }
        
        #chatInput,
        .chat-input-container button {
            width: 100% !important;
        }
    }
}

/* Mobile menu styles */
#mobile-menu {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}

/* Profile dropdown on mobile */
.profile-dropdown.show {
    position: fixed !important;
    top: 60px !important;
    right: 16px !important;
    left: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 300px !important;
}