/* Mobile UI Fixes - Additional optimizations for better mobile experience */

/* Ensure navbar always stays on top */
.navbar-modern {
    z-index: 9999 !important;
    /* Maximum priority */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(253, 252, 248, 1.0) !important;
    /* Fully opaque - no blur needed */
}

/* FIX: Remove rogue CSS-based backdrop overlay on mobile */
/* This was causing "greyed out" pages on Login/Product/etc because .panel-minimized class is missing there */
body:not(.panel-minimized)::before {
    content: none !important;
    display: none !important;
}

body::before {
    content: none !important;
}

/* FIX: Disable backdrop-filter globally on mobile to prevent blurry/grey look */
.glass-card,
.navbar-modern,
.premium-search-input,
.notification-popup {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #FFFFFF !important;
    /* Ensure solid background */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.navbar-modern {
    background: rgba(253, 252, 248, 1.0) !important;
}

.notification-popup {
    background: rgba(255, 255, 255, 0.98) !important;
}

/* Ensure all interactive elements meet minimum touch target size (44px) */
@media (max-width: 768px) {

    /* Side panel positioning - maximize space usage */
    #side-panel:not(.minimized) {
        top: 70px !important;
        /* Increased from 40px to clear navbar */
        /* Just below navbar */
        height: calc(100vh - 75px) !important;
        /* Adjusted for new top */
        /* Use maximum available height */
        max-height: none !important;
        /* Remove height restrictions */
        padding: 10px 15px !important;
        /* Optimize padding */
        z-index: 1000 !important;
        /* Much lower than navbar */
        background: #FDFCF8 !important;
        /* Solid background - no transparency */
        backdrop-filter: none !important;
        /* Remove any blur */
        -webkit-backdrop-filter: none !important;
        /* Remove any blur */
    }

    #side-panel.minimized {
        top: 40px !important;
        z-index: 1000 !important;
        background: #FDFCF8 !important;
        /* Solid background */
        backdrop-filter: none !important;
        /* Remove any blur */
        -webkit-backdrop-filter: none !important;
        /* Remove any blur */
    }

    /* Blog feed section - use all available space */
    .blog-feed-section {
        max-height: calc(100vh - 200px) !important;
        /* Use more vertical space */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 8px !important;
    }

    /* Close panel button - make it larger and easier to tap */
    .close-panel {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        transition: background-color 0.2s ease !important;
    }

    .close-panel:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* Ensure side panel is never blurred - AGGRESSIVE OVERRIDE */
    #side-panel,
    #side-panel:not(.minimized),
    #side-panel.minimized {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        opacity: 1 !important;
        background: #FDFCF8 !important;
        /* Ensure solid background */
        /* Removed transform to fix stacking context issues */
        z-index: 2000 !important;
        /* Explicitly above backdrop (900) */
    }

    /* Apply color reset only to container, let children inherit or override */
    #side-panel {
        color: #2D2D2D !important;
    }

    /* FIX: Hide DEALS label when panel is open */
    #side-panel:not(.minimized) .minimized-label {
        display: none !important;
    }

    /* FIX: Ensure processing status is hidden by default, but allow JS to show it */
    #side-panel .search-progress-container {
        display: none;
    }

    /* Only show if JS explicitly adds a class or inline style - wait, inline style needs to win. 
       We should not use !important for display:none if we want JS to show it via style="display:flex".
       But mobile_fixes.css uses !important everywhere. 
       Let's use a class based toggle if possible, or just trust JS. 
       The problem is JS sets style.display. 
       If I set display: none !important, JS cannot show it. 
       So I will NOT use !important for display:none on progress container.
    */
    #side-panel .search-progress-container {
        margin-bottom: 15px;
    }

    /* Ensure panel content is visible */
    #side-panel .side-panel-body,
    #side-panel .feed-toggle,
    #side-panel .toggle-btn,
    #side-panel .blog-search-input,
    /* .blog-feed-section REMOVED to allow toggling */
    #side-panel .panel-item-card,
    #side-panel .blog-list-item {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        opacity: 1 !important;
        color: #2D2D2D !important;
    }

    /* Feed toggle buttons - better spacing and touch targets with close button */
    .feed-toggle {
        gap: 8px !important;
        margin-bottom: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .toggle-btn {
        min-height: 40px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
        flex: 0 0 auto !important;
    }

    .toggle-btn.active {
        background: var(--accent-color) !important;
        color: white !important;
    }

    /* Close button in feed toggle - Hide desktop version on mobile */
    .close-panel.desktop-only {
        display: none !important;
    }

    /* Back Button - Ensure it's visible and touch-friendly */
    .feed-toggle button[title="Back to Globe"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    /* Close button in feed toggle */
    .feed-toggle .close-panel {
        min-width: 36px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        transition: background-color 0.2s ease !important;
        cursor: pointer !important;
    }

    .feed-toggle .close-panel:hover {
        background: rgba(0, 0, 0, 0.1) !important;
    }

    /* Blog search input - better mobile styling */
    .blog-search-input {
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 15px !important;
        min-height: 44px !important;
    }

    /* Panel item cards - Compact for density */
    .panel-item-card {
        min-height: 48px !important;
        padding: 8px 10px !important;
        /* Reduced padding */
        margin-bottom: 6px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.5) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
    }

    .panel-item-card:hover {
        background: rgba(249, 115, 22, 0.1) !important;
        transform: translateY(-1px) !important;
    }

    /* Panel item images - Smaller icons */
    .panel-item-img {
        width: 36px !important;
        /* Reduced from 50px */
        height: 36px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    /* Panel item info - better typography */
    .panel-item-info {
        flex: 1 !important;
        margin-left: 10px !important;
    }

    .panel-item-name {
        font-size: 11px !important;
        /* Reduced from 13px */
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
        font-weight: 500 !important;
    }

    .panel-item-price {
        font-size: 11px !important;
        /* Reduced from 12px */
        color: var(--accent-color) !important;
        font-weight: 600 !important;
    }

    /* Blog feed section - better scrolling */
    .blog-feed-section {
        max-height: calc(100vh - 300px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 8px !important;
    }

    /* FIX: Explicitly hide inactive feed sections */
    .blog-feed-section:not(.active) {
        display: none !important;
    }

    /* Blog list items - improved mobile layout */
    .blog-list-item {
        padding: 10px 10px !important;
        /* Reduced vertical padding */
        margin-bottom: 5px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
        min-height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .blog-list-item:hover {
        background: rgba(249, 115, 22, 0.1) !important;
        transform: translateY(-1px) !important;
    }

    .blog-list-title {
        font-size: 11px !important;
        /* Reduced from 13px */
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
        font-weight: 500 !important;
    }

    .blog-list-meta {
        font-size: 10px !important;
        /* Reduced from 11px */
        color: var(--muted-color) !important;
    }

    /* Scroll hint - better mobile positioning */
    .scroll-hint {
        font-size: 11px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        color: var(--muted-color) !important;
        letter-spacing: 0.1em !important;
    }

    /* Search wrapper - better mobile layout */
    .search-wrapper {
        margin-bottom: 20px !important;
    }

    /* Notification popup - mobile optimized */
    .notification-popup {
        max-width: 85% !important;
        padding: 16px !important;
        border-radius: 12px !important;
        bottom: 25% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .notification-img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 6px !important;
    }

    .notification-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .notification-btn {
        font-size: 11px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        min-height: 32px !important;
    }

    /* Side panel header - completely hidden to save space */
    .side-panel-header {
        display: none !important;
    }

    /* Progress container - mobile optimized */
    .search-progress-container {
        margin-bottom: 15px !important;
        padding: 12px !important;
        background: rgba(249, 115, 22, 0.05) !important;
        border-radius: 8px !important;
    }

    .progress-status {
        font-size: 11px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    .progress-bar-bg {
        height: 4px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 2px !important;
        overflow: hidden !important;
    }

    .progress-bar-fill {
        height: 100% !important;
        background: var(--accent-color) !important;
        transition: width 0.3s ease !important;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 375px) {
    .ui-layer {
        padding-left: 55px !important;
        padding-right: 15px !important;
    }

    .premium-search-input {
        font-size: 16px !important;
        padding: 16px 18px !important;
    }

    #side-panel:not(.minimized) {
        width: 95vw !important;
        left: 2.5vw !important;
        max-width: none !important;
    }

    .toggle-btn {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    .panel-item-name {
        font-size: 12px !important;
    }

    .blog-list-title {
        font-size: 12px !important;
    }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    #side-panel:not(.minimized) {
        height: calc(100vh - 35px) !important;
        /* Use almost full height in landscape */
        max-height: none !important;
        top: 35px !important;
        /* Very close to navbar in landscape */
        z-index: 1000 !important;
    }

    .blog-feed-section {
        max-height: calc(100vh - 120px) !important;
        /* More space in landscape */
    }

    .ui-layer {
        padding-top: 40px !important;
        /* Less padding in landscape */
    }

    .navbar-modern {
        padding: 0.8rem 0 !important;
        /* Reduce navbar height in landscape */
    }
}