/**
 * Mobile Layout Fixes
 * Ensures proper spacing and no overlapping elements on mobile devices
 */

/* Base mobile adjustments */
@media (max-width: 768px) {
    /* Fix body overflow and spacing */
    body {
        overflow-x: hidden;
        padding-bottom: 20px;
    }
    
    /* Trust bar adjustments - single line on mobile */
    .trust-bar {
        position: relative;
        padding: 6px 5px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    .trust-bar-content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
        min-width: fit-content;
    }
    
    .trust-item {
        flex: 0 0 auto;
        padding: 2px 4px;
        font-size: 10px;
        white-space: nowrap;
    }
    
    .trust-icon {
        font-size: 12px;
    }
    
    .trust-text {
        display: inline-block;
    }
    
    /* Navbar responsive fixes - compact on mobile */
    .navbar {
        height: auto !important;
        padding: 8px 5px;
    }
    
    .navbar-content {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .navbar-left {
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
    }
    
    .navbar-left img {
        width: 30px;
        height: 30px;
    }
    
    .navbar-title {
        font-size: 14px !important;
        line-height: 1.2;
    }
    
    .navbar-instructions {
        display: none !important;
    }
    
    .navbar-right {
        margin-top: 0;
    }
    
    .urgency-timer {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .timer-icon {
        font-size: 14px;
    }
    
    #countdown-timer {
        font-size: 12px;
    }
    
    /* Hide activity feed on mobile to prevent overlap */
    .activity-feed {
        display: none !important;
    }
    
    /* Slots warning mobile optimization */
    .slots-warning {
        margin: 15px 10px;
        padding: 12px;
    }
    
    .slots-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    /* Main content spacing */
    .main-content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* Carousel container mobile */
    .carousel-container {
        padding: 10px 10px !important;
        min-height: auto !important;
    }
    
    /* Carousel section flexbox for proper order on mobile */
    .carousel-section {
        display: flex;
        flex-direction: column;
        min-height: auto !important;
    }
    
    /* Categories container mobile spacing */
    .categories-container {
        padding: 10px;
    }
    
    /* Carousel items proper spacing - flexbox on mobile */
    .carousel-items {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important; /* Reduced gap */
        padding: 5px !important; /* Minimal padding */
        justify-content: center;
    }
    
    .carousel-item {
        padding: 6px !important; /* Much smaller padding */
        margin: 0 !important;
        flex: 0 1 calc(50% - 4px) !important;
        min-width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        min-height: unset !important; /* Remove minimum height */
    }
    
    /* Mobile-specific image styling - only for carousel items on mobile */
    .carousel-item-image {
        height: 80px !important; /* Much smaller for professional look */
        margin-bottom: 6px !important; /* Reduced margin */
        padding: 4px !important; /* Minimal padding */
    }
    
    .carousel-item-image img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
    }
    
    .carousel-item-name {
        font-size: 12px !important; /* Smaller text */
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    .carousel-item-value {
        font-size: 11px !important; /* Smaller value text */
    }
    
    /* Packs grid spacing fix */
    .packs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    
    /* Card and item spacing */
    .item-card {
        min-height: 140px;
    }
    
    /* Override for carousel items to be more compact */
    .carousel-item {
        min-height: unset !important;
        height: auto !important;
    }
    
    /* Modal adjustments */
    .modal-content-wrapper {
        width: 95%;
        max-width: 95%;
        margin: 20px auto;
        padding: 20px;
    }
    
    /* Progress bar mobile - more compact */
    .selection-progress {
        margin: 5px 5px 10px !important; /* Less margin */
        padding: 8px 10px !important; /* Smaller padding */
    }
    
    .progress-title {
        font-size: 11px !important;
    }
    
    .progress-count {
        font-size: 12px !important;
    }
    
    .selected-items-preview {
        display: none !important; /* Hide preview on mobile to save space */
    }
    
    /* Testimonials section mobile */
    .testimonials-section {
        padding: 40px 10px;
    }
    
    .testimonial-card {
        padding: 20px;
        margin: 0 10px 20px;
    }
    
    .testimonials-nav {
        gap: 10px;
    }
    
    /* Footer mobile spacing */
    .footer {
        padding: 20px 15px;
        margin-top: 20px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-links .separator {
        display: none;
    }
    
    /* Remove floating elements on mobile */
    .floating-testimonial {
        display: none !important;
    }
    
    /* Winners notification mobile - removed to use winners.css fixed positioning */
    
    /* Category header mobile */
    .category-header {
        margin-bottom: 20px !important;
    }
    
    /* Category slide mobile */
    .category-slide {
        position: static !important;
        transform: none !important;
        padding: 0 !important;
    }
    
    .category-slide.inactive {
        display: none !important;
    }
    
    /* Category slider mobile */
    .category-slider {
        min-height: auto !important;
    }
    
    /* Category name mobile */
    .category-name {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    /* Instructions text mobile */
    .category-instruction {
        font-size: 13px !important;
        padding: 0 10px;
        margin-bottom: 0 !important;
    }
    
    /* Continue button mobile */
    #continue-btn-wrapper {
        position: relative;
        width: 100%;
        padding: 20px 10px;
        bottom: auto;
    }
    
    #continue-btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Even tighter spacing for very small screens */
    .carousel-items {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .packs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .carousel-item {
        padding: 6px !important;
    }
    
    .item-name {
        font-size: 11px !important;
    }
    
    .item-value {
        font-size: 10px !important;
    }
    
    /* Trust bar on small screens - keep single line */
    .trust-bar {
        padding: 4px 3px;
    }
    
    .trust-bar-content {
        font-size: 9px;
    }
    
    .trust-item {
        padding: 2px 3px;
        font-size: 9px;
    }
    
    .trust-icon {
        font-size: 10px;
    }
    
    /* Hide less important trust items on very small screens */
    .trust-item:nth-child(2),
    .trust-item:nth-child(4) {
        display: none;
    }
    
    /* Navbar on small screens - ultra compact */
    .navbar {
        padding: 6px 4px;
    }
    
    .navbar-left img {
        width: 25px;
        height: 25px;
    }
    
    .navbar-title {
        font-size: 12px !important;
    }
    
    .urgency-timer {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .timer-icon {
        font-size: 12px;
    }
    
    #countdown-timer {
        font-size: 11px;
    }
    
    /* Testimonials adjustments */
    .testimonials-title {
        font-size: 20px !important;
    }
    
    .trust-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-number {
        font-size: 24px !important;
    }
}

/* Ensure no horizontal scroll */
@media (max-width: 768px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix specific containers that might cause horizontal scroll */
    .main-content,
    .categories-container,
    .carousel-container,
    .testimonials-section,
    .footer {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Ensure all fixed/absolute elements respect viewport */
    .modal-backdrop,
    .popup-content,
    .floating-items-container {
        max-width: 100vw;
        left: 0;
        right: 0;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .carousel-items {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    .carousel-item {
        flex: 0 1 calc(33.333% - 10px) !important;
        min-width: calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
    }
    
    .packs {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .navbar {
        padding: 10px;
    }
    
    .main-content {
        padding-top: 10px;
    }
}