/* Jupiter Mobile Optimization */

/* Reset and base mobile styles */
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Mobile body class styles */
body.mobile-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body.mobile-layout * {
    max-width: 100vw !important;
}

/* Mobile-first approach */
@media screen and (max-width: 768px) {
    /* Force full width layout */
    html, body, #__next {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Main container fixes */
    main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
    }
    
    /* Jupiter main content area */
    .w-full.space-y-4.lg\\:w-\\[32rem\\],
    .w-full.space-y-4 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Banner/notification area */
    .relative.flex.max-h-\\[450px\\] {
        max-height: 120px !important;
        min-height: 80px !important;
        width: 100% !important;
        margin: 0 0 16px 0 !important;
        flex-wrap: nowrap !important;
    }
    
    /* Banner image container */
    .relative.flex-shrink-0.bg-neutral-950 {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        flex-shrink: 0 !important;
    }
    
    /* Banner content */
    .flex.w-full.flex-1.flex-col.gap-1.p-3 {
        padding: 8px 12px !important;
        gap: 4px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Banner text */
    .pr-3.text-sm.font-semibold.text-primary {
        font-size: 12px !important;
        padding-right: 8px !important;
        line-height: 1.3 !important;
    }
    
    .text-xs.text-neutral-300 {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    /* Cooking section mobile */
    .space-y-4.sm\\:hidden {
        display: block !important;
        width: 100% !important;
        margin: 16px 0 !important;
    }
    
    /* Cooking header */
    .rounded-lg.border.border-neutral-850 {
        width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px 0 !important;
    }
    
    /* Token list scrolling area */
    .group.flex.gap-3.overflow-hidden {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .group.flex.gap-3.overflow-hidden::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Token items */
    .flex.w-max.shrink-0.gap-3 {
        gap: 16px !important;
        padding: 0 12px !important;
    }
    
    .flex.shrink-0.items-center.py-2\\.5 {
        padding: 8px 0 !important;
        white-space: nowrap !important;
        min-width: 80px !important;
    }
    
    /* Token images */
    .relative.z-\\[1\\].flex.shrink-0.rounded-full.mr-1.size-4 {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
    }
    
    /* Navigation tabs at bottom */
    .fixed.bottom-0 {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) 0 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Navigation items */
    .flex.items-center.justify-around {
        padding: 0 12px !important;
    }
    
    .flex.flex-col.items-center.gap-1 {
        min-width: 50px !important;
        padding: 4px !important;
    }
    
    /* Navigation text */
    .text-xs {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    
    /* Touch targets */
    button, a, [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    
    /* Form inputs */
    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        width: 100% !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    /* Modal/popup adjustments */
    [role="dialog"], .modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 12px !important;
    }
    
    /* Wallet connection modal */
    [style*="--apkt-modal-width"] {
        --apkt-modal-width: 95vw !important;
    }
    
    /* Trading interface */
    .trading-container {
        width: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
    }
    
    /* Remove any fixed widths */
    [style*="width: 92px"] {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
    
    [style*="width: 370px"] {
        width: 95vw !important;
    }
    
    /* Ensure no horizontal scroll */
    .w-0.min-w-full {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Trading interface specific */
    .space-y-4 > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Flex containers */
    .flex.min-h-0.flex-1.flex-col.items-center {
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
    
    /* Padding adjustments */
    .px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .pb-4 {
        padding-bottom: 12px !important;
    }
    
    /* Close button positioning */
    .absolute.right-3.top-3 {
        right: 8px !important;
        top: 8px !important;
        z-index: 10 !important;
    }
}

/* Extra small phones */
@media screen and (max-width: 375px) {
    /* Even more compact for small screens */
    .relative.flex-shrink-0.bg-neutral-950 {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }
    
    [style*="width: 92px"] {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }
    
    .flex.w-full.flex-1.flex-col.gap-1.p-3 {
        padding: 6px 8px !important;
    }
    
    .pr-3.text-sm.font-semibold.text-primary {
        font-size: 11px !important;
    }
    
    .text-xs.text-neutral-300 {
        font-size: 10px !important;
    }
    
    main {
        padding: 0 8px !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix iOS viewport issues */
    .fixed.bottom-0 {
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Prevent iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    textarea {
        font-size: 16px !important;
        transform: scale(1) !important;
    }
}

/* Android specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Android Chrome optimizations */
    .group.flex.gap-3.overflow-hidden {
        overflow-x: scroll !important;
        scrollbar-width: none !important;
    }
}

/* Landscape orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .relative.flex.max-h-\\[450px\\] {
        max-height: 80px !important;
        min-height: 60px !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 8px !important;
    }
}

/* Force mobile layout utility class */
.force-mobile-width {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.force-mobile-width * {
    max-width: 100% !important;
}