/**
 * Mobile-Optimized Search Results CSS
 * Enhanced responsive styles for all mobile devices
 */

/* Base Mobile Optimizations */
@media (max-width: 1024px) {
    .tecalliance-results-container {
        max-width: 100%;
        padding: 10px 8px;
        margin: 0;
    }
    
    .tecalliance-results h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .tecalliance-vehicle-info {
        padding: 10px 12px;
        margin-bottom: 12px;
        font-size: 13px;
    }
    
    .tecalliance-vehicle-info p {
        font-size: 13px;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin: 4px 0;
    }
    
    .tecalliance-results-layout {
        margin-top: 10px !important;
    }
}

/* Tablet Optimizations */
@media (max-width: 768px) {
    .tecalliance-results-container {
        padding: 8px 6px;
    }
    
    .tecalliance-results h2 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
        padding: 0 2px;
    }
    
    .tecalliance-vehicle-info {
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    
    .tecalliance-results-layout {
        margin-top: 8px !important;
        gap: 10px !important;
    }
    
    /* Table wrapper with horizontal scroll */
    .tecalliance-category-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        /* Allow horizontal pan inside table; let vertical pan scroll the page */
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }
    
    /* Ensure table doesn't break layout */
    .tecalliance-parts-table {
        width: 100%;
        min-width: 600px;
        display: table;
        table-layout: fixed;
    }
    
    /* Column width distribution for mobile - 5 columns */
    .tecalliance-parts-table th:nth-child(1),
    .tecalliance-parts-table td:nth-child(1) {
        width: 8%; /* Image - smaller on mobile */
    }
    .tecalliance-parts-table th:nth-child(2),
    .tecalliance-parts-table td:nth-child(2) {
        width: 18%; /* SKU */
    }
    .tecalliance-parts-table th:nth-child(3),
    .tecalliance-parts-table td:nth-child(3) {
        width: 18%; /* Position */
    }
    .tecalliance-parts-table th:nth-child(4),
    .tecalliance-parts-table td:nth-child(4) {
        width: 28%; /* Label */
    }
    .tecalliance-parts-table th:nth-child(5),
    .tecalliance-parts-table td:nth-child(5) {
        width: 28%; /* Quality/Features */
    }
    
    .tecalliance-parts-table th {
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 8px;
    }
    
    .tecalliance-parts-table td {
        font-size: 13px;
        padding: 10px 8px;
        white-space: nowrap;
    }
    
    /* Allow text wrapping in specific columns */
    .tecalliance-parts-table td:last-child {
        white-space: normal;
        min-width: 150px;
    }
}

/* Mobile Phone Optimizations */
@media (max-width: 576px) {
    .tecalliance-results-container {
        padding: 6px 4px;
        margin: 0;
    }
    
    .tecalliance-results h2 {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
        padding: 0 2px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .tecalliance-vehicle-info {
        padding: 6px 8px;
        margin-bottom: 8px;
        border-radius: 6px;
    }
    
    .tecalliance-vehicle-info p {
        font-size: 12px;
        margin: 3px 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .tecalliance-results-layout {
        margin-top: 6px !important;
        gap: 8px !important;
    }
    
    /* Compact table for mobile */
    .tecalliance-parts-table {
        min-width: 550px;
        font-size: 12px;
    }
    
    .tecalliance-parts-table th {
        font-size: 13px;
        padding: 8px 6px;
        line-height: 1.2;
    }
    
    .tecalliance-parts-table td {
        font-size: 12px;
        padding: 8px 6px;
    }
    
    /* Optimize image column */
    .tecalliance-image-cell {
        width: 50px !important;
        min-width: 50px;
        padding: 4px !important;
    }
    
    .tecalliance-product-gallery {
        width: 45px;
        height: 45px;
    }
    
    .tecalliance-main-thumb {
        width: 45px;
        height: 45px;
        border-radius: 6px;
    }
    
    .tecalliance-thumbnail {
        border-radius: 4px;
    }
    
    .tecalliance-image-count {
        font-size: 9px;
        padding: 1px 3px;
        bottom: 1px;
        right: 1px;
    }
    
    .tecalliance-no-image {
        width: 45px;
        height: 45px;
    }
    
    .tecalliance-no-image-text {
        font-size: 9px;
    }
    
    /* Optimize feature chips */
    .ta-chip {
        font-size: 10px;
        padding: 2px 5px;
        margin: 1px 2px;
        border-radius: 8px;
        display: inline-block;
        line-height: 1.3;
    }
    
    .ta-chip strong {
        margin-right: 2px;
    }
    
    /* Error and no results messages */
    .error-message,
    .no-results {
        font-size: 14px;
        padding: 15px 10px;
        margin: 15px 0;
    }
}

/* Extra Small Devices */
@media (max-width: 400px) {
    .tecalliance-results-container {
        padding: 4px 2px;
    }
    
    .tecalliance-results h2 {
        font-size: 15px !important;
        margin-bottom: 5px !important;
        padding: 0 2px;
        line-height: 1.2 !important;
    }
    
    .tecalliance-vehicle-info {
        padding: 5px 6px;
        margin-bottom: 6px;
    }
    
    .tecalliance-vehicle-info p {
        font-size: 11px;
        line-height: 1.3;
    }
    
    .tecalliance-results-layout {
        margin-top: 5px !important;
        gap: 6px !important;
    }
    
    /* Ultra-compact table */
    .tecalliance-parts-table {
        min-width: 500px;
        font-size: 11px;
    }
    
    .tecalliance-parts-table th {
        font-size: 12px;
        padding: 6px 4px;
    }
    
    .tecalliance-parts-table td {
        font-size: 11px;
        padding: 6px 4px;
    }
    
    .tecalliance-image-cell {
        width: 40px !important;
        min-width: 40px;
        padding: 3px !important;
    }
    
    .tecalliance-product-gallery,
    .tecalliance-main-thumb {
        width: 38px;
        height: 38px;
    }
    
    .tecalliance-no-image {
        width: 38px;
        height: 38px;
    }
    
    .tecalliance-no-image-text {
        font-size: 8px;
    }
    
    .ta-chip {
        font-size: 9px;
        padding: 2px 4px;
        margin: 1px;
    }
}

/* Landscape Mobile Optimizations */
@media (max-width: 896px) and (orientation: landscape) {
    .tecalliance-results-container {
        padding: 10px;
    }
    
    .tecalliance-results h2 {
        font-size: 20px !important;
    }
    
    .tecalliance-category-header {
        padding: 10px 15px;
    }
    
    .tecalliance-category-title {
        font-size: 16px;
    }
}

/* Specific Device Optimizations */

/* iPhone SE, 5, 5S */
@media (max-width: 320px) {
    .tecalliance-results-container {
        padding: 5px 3px;
    }
    
    .tecalliance-results h2 {
        font-size: 15px !important;
    }
    
    .tecalliance-parts-table {
        min-width: 480px;
        font-size: 10px;
    }
    
    .tecalliance-parts-table th,
    .tecalliance-parts-table td {
        padding: 5px 3px;
        font-size: 10px;
    }
    
    .tecalliance-image-cell {
        width: 35px !important;
        min-width: 35px;
    }
    
    .tecalliance-product-gallery,
    .tecalliance-main-thumb,
    .tecalliance-no-image {
        width: 32px;
        height: 32px;
    }
}

/* iPhone 12/13/14 Pro Max, XS Max */
@media (min-width: 414px) and (max-width: 428px) {
    .tecalliance-parts-table {
        min-width: 580px;
    }
}

/* Samsung Galaxy S9+, S8+ */
@media (min-width: 360px) and (max-width: 412px) {
    .tecalliance-parts-table {
        min-width: 540px;
    }
}

/* Horizontal Scroll Indicator */
.tecalliance-category-content::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .tecalliance-category-content {
        position: relative;
    }
    
    .tecalliance-category-content:not(.scrolled-end)::after {
        opacity: 1;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    .tecalliance-category-header {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .tecalliance-main-thumb {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Prevent text selection on mobile for better UX */
@media (max-width: 768px) {
    .tecalliance-category-header,
    .tecalliance-category-title,
    .tecalliance-category-count {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Loading states for mobile */
@media (max-width: 768px) {
    .tecalliance-loading-spinner {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }
}

/* Modal optimizations for mobile */
@media (max-width: 768px) {
    .tecalliance-modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 15px;
    }
    
    .tecalliance-modal-body h3 {
        font-size: 18px !important;
    }
    
    .tecalliance-modal-body p {
        font-size: 14px;
    }
}

/* Lightbox mobile optimizations */
@media (max-width: 768px) {
    .tecalliance-lightbox-close {
        top: 10px;
        right: 10px;
        font-size: 32px;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .tecalliance-lightbox-prev,
    .tecalliance-lightbox-next {
        display: none;
    }
    
    .tecalliance-lightbox-thumbnails {
        bottom: 10px;
        max-width: 95%;
        padding: 8px;
    }
    
    .tecalliance-thumb-item {
        width: 40px;
        height: 40px;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .tecalliance-category-content {
        -webkit-overflow-scrolling: touch;
    }
    
    .tecalliance-parts-table {
        -webkit-transform: translateZ(0);
    }
}

/* Fix for Android Chrome */
@media (max-width: 768px) {
    .tecalliance-parts-table {
        will-change: scroll-position;
    }
}