/* ===== RESPONSIVE.CSS - COMPLETE WITH ALL FIXES ===== */
/* Additional responsive fixes for all devices */

/* Very small devices (380px and below) */
@media (max-width: 380px) {
    /* Product grid */
    .product-card img {
        height: 140px;
    }
    
    .product-name {
        font-size: 13px;
    }
    
    .product-price {
        font-size: 14px;
    }
    
    .trending-card {
        min-width: 160px;
        height: 210px;
    }
    
    /* Product detail page - old classes */
    .detail-name {
        font-size: 24px;
    }
    
    .detail-price {
        font-size: 26px;
    }
    
    /* ===== PRODUCT DETAIL NEW CLASSES ===== */
    body.product-details-page .product-name {
        font-size: 22px;
    }
    
    body.product-details-page .current-price {
        font-size: 24px;
    }
    
    body.product-details-page .color-box {
        width: 48px;
        height: 48px;
    }
    
    body.product-details-page .variant-box {
        padding: 8px 4px;
    }
    
    body.product-details-page .variant-ram {
        font-size: 12px;
    }
    
    body.product-details-page .variant-price {
        font-size: 11px;
    }
    
    body.product-details-page .selected-info p {
        font-size: 12px;
    }
    
    /* ===== NEW LAUNCH RESPONSIVE ===== */
    .new-launch-card {
        height: 160px;
    }
    
    .new-launch-image {
        padding: 10px;
    }
    
    .new-launch-image img {
        height: 80%;
    }
    
    .new-launch-content {
        padding: 12px 8px 12px 0;
        gap: 4px;
    }
    
    .new-launch-name {
        font-size: 14px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .new-launch-description {
        font-size: 11px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .new-launch-btn {
        padding: 5px 10px;
        font-size: 11px;
        margin-top: 2px;
    }
    
    .new-launch-badge {
        font-size: 9px;
        padding: 3px 8px;
    }
    
    .new-launch-dot {
        width: 6px;
        height: 6px;
    }
    
    .new-launch-dot.active {
        width: 18px;
    }
    
    /* ===== COMPARE BOX RESPONSIVE ===== */
    .compare-bar {
        right: 10px;
        bottom: 70px;
        min-width: 100px;
        max-width: 280px;
    }
    
    .compare-bar.collapsed {
        min-width: 100px;
        max-width: 120px;
    }
    
    .compare-bar.expanded {
        min-width: 250px;
        max-width: 280px;
    }
    
    .compare-count-badge {
        font-size: 12px;
        padding: 3px 8px;
    }
    
    .compare-header-left span:last-child {
        font-size: 12px;
    }
    
    .compare-toggle-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .compare-product-item {
        padding: 6px 8px;
    }
    
    .compare-product-image {
        width: 24px;
        height: 24px;
    }
    
    .compare-product-name {
        font-size: 11px;
    }
    
    .compare-remove-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .compare-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .clear-all-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Ultra small devices (359px and below) */
@media (max-width: 359px) {
    .new-launch-card {
        height: 150px;
    }
    
    .new-launch-name {
        font-size: 13px;
    }
    
    .new-launch-description {
        font-size: 10px;
    }
    
    .new-launch-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    body.product-details-page .color-box {
        width: 44px;
        height: 44px;
    }
    
    body.product-details-page .variant-ram {
        font-size: 11px;
    }
    
    body.product-details-page .variant-price {
        font-size: 10px;
    }
}

/* Tiny devices (280px and below) */
@media (max-width: 280px) {
    .new-launch-content {
        padding: 8px 5px 8px 0;
    }
    
    .new-launch-name {
        font-size: 12px;
    }
    
    .new-launch-description {
        display: none;
    }
    
    .new-launch-btn {
        padding: 3px 6px;
        font-size: 9px;
    }
    
    body.product-details-page .variant-grid {
        grid-template-columns: 1fr;
    }
}

/* Small mobile devices (360px to 479px) */
@media (min-width: 360px) and (max-width: 479px) {
    .new-launch-card {
        height: 170px;
    }
    
    .new-launch-name {
        font-size: 15px;
    }
    
    .new-launch-description {
        font-size: 12px;
    }
}

/* Medium mobile devices (480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .new-launch-card {
        height: 190px;
    }
    
    .new-launch-name {
        font-size: 17px;
    }
    
    .new-launch-description {
        font-size: 13px;
    }
}

/* Mobile devices (up to 767px) - General touch targets */
@media (max-width: 767px) {
    .new-launch-btn {
        min-height: 36px;
        min-width: 80px;
    }
    
    .new-launch-dot {
        min-width: 8px;
        min-height: 8px;
    }
    
    .new-launch-dot.active {
        min-width: 24px;
    }
    
    /* ===== COMPARE BOX MOBILE TOUCH TARGETS ===== */
    .compare-remove-btn {
        min-width: 40px;
        min-height: 40px;
    }
    
    .compare-toggle-icon {
        min-width: 40px;
        min-height: 40px;
    }
    
    .compare-btn {
        min-height: 44px;
    }
    
    .clear-all-btn {
        min-height: 40px;
    }
    
    /* ===== PRODUCT DETAIL MOBILE ===== */
    body.product-details-page .color-box-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 12px;
    }
    
    body.product-details-page .color-box-container::-webkit-scrollbar {
        display: none;
    }
    
    body.product-details-page .color-box {
        flex: 0 0 auto;
    }
    
    body.product-details-page .variant-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    body.product-details-page .btn-call,
    body.product-details-page .btn-whatsapp {
        height: 48px;
        font-size: 15px;
    }
}

/* Mobile specific compare box (480px and below) */
@media (max-width: 480px) {
    .compare-bar {
        right: 10px;
        left: 10px;
        bottom: 70px;
        min-width: auto;
        max-width: none;
    }
    
    .compare-bar.collapsed {
        max-width: 130px;
        min-width: 100px;
        left: auto;
        right: 10px;
    }
    
    .compare-bar.expanded {
        min-width: auto;
        max-width: none;
        left: 10px;
        right: 10px;
    }
    
    .compare-header {
        padding: 10px 12px;
    }
    
    .compare-products {
        max-height: 200px;
        padding: 8px 10px;
    }
    
    .compare-product-item {
        padding: 8px 10px;
    }
    
    .compare-actions {
        padding: 6px 10px 10px;
    }
}

/* Tablet compare box (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .compare-bar {
        right: 15px;
        bottom: 80px;
    }
    
    .compare-bar.expanded {
        min-width: 300px;
    }
}

/* Landscape orientation for short screens */
@media (orientation: landscape) and (max-height: 500px) {
    .compare-bar {
        bottom: 60px;
    }
    
    .compare-products {
        max-height: 150px;
    }
}

/* Landscape mobile and small tablets */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .new-launch-card {
        height: 240px;
    }
}

/* Tablet styles (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    body.product-details-page .product-detail {
        padding: 30px;
        gap: 30px;
    }
    
    body.product-details-page .color-box {
        width: 56px;
        height: 56px;
    }
    
    body.product-details-page .variant-box {
        padding: 12px 8px;
    }
}

/* Desktop styles (1024px and above) */
@media (min-width: 1024px) {
    body.product-details-page .product-detail {
        padding: 40px;
        gap: 40px;
    }
    
    body.product-details-page .color-box {
        width: 64px;
        height: 64px;
    }
    
    body.product-details-page .variant-box {
        padding: 14px 10px;
    }
}

/* Large desktop screens (1400px and above) */
@media (min-width: 1400px) {
    body.product-details-page .color-box {
        width: 68px;
        height: 68px;
    }
    
    body.product-details-page .variant-box {
        padding: 16px 12px;
    }
    
    body.product-details-page .variant-ram {
        font-size: 16px;
    }
    
    body.product-details-page .variant-price {
        font-size: 15px;
    }
    
    body.product-details-page .current-price {
        font-size: 38px;
    }
    
    body.product-details-page .product-name {
        font-size: 34px;
    }
}

/* Ultra-wide screens (1800px and above) */
@media (min-width: 1800px) {
    body.product-details-page .product-detail {
        padding: 50px;
        gap: 60px;
    }
    
    body.product-details-page .color-box {
        width: 72px;
        height: 72px;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    .category-btn,
    .product-card,
    .pagination-btn,
    .nav-item,
    .feature-item,
    .new-launch-card,
    .new-launch-btn,
    .compare-remove-btn,
    .compare-toggle-icon,
    .compare-btn,
    .clear-all-btn,
    body.product-details-page .color-box,
    body.product-details-page .variant-box {
        cursor: default;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn-call:active,
    .btn-whatsapp:active,
    .new-launch-btn:active,
    .compare-remove-btn:active,
    .compare-btn:active,
    .clear-all-btn:active,
    body.product-details-page .color-box:active,
    body.product-details-page .variant-box:active {
        opacity: 0.8;
    }
}

/* ===== SAFE AREA FOR NOTCHES ===== */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .sticky-header {
        padding-top: env(safe-area-inset-top);
    }
    
    .compare-bar {
        bottom: max(90px, env(safe-area-inset-bottom) + 70px);
        right: max(20px, env(safe-area-inset-right) + 10px);
    }
    
    .new-launch-section {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ===== HIGH DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .new-launch-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .new-launch-card {
        background: white !important;
        border-color: #e2e8f0 !important;
    }
    
    .new-launch-name {
        color: #1e293b !important;
    }
    
    .new-launch-description {
        color: #475569 !important;
    }
    
    .new-launch-image {
        background: rgba(255,255,255,0.05);
    }
    
    .new-launch-dot {
        background: #4a5568;
    }
    
    .new-launch-dot.active {
        background: #61dac2;
    }
    
    /* Product detail dark mode is already in style.css */
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .compare-bar {
        border: 2px solid #0f172a;
        background: rgba(255, 255, 255, 0.95);
    }
    
    .compare-remove-btn {
        background: #ef4444;
        color: white;
        border: 1px solid #7f1d1d;
    }
    
    body.product-details-page .color-box.active {
        border: 3px solid #000;
    }
    
    body.product-details-page .variant-box.active {
        border: 3px solid #000;
        background: #f0f0f0;
    }
}

/* ===== REDUCE MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .new-launch-card,
    .new-launch-dot,
    .new-launch-btn,
    .compare-bar,
    .compare-remove-btn,
    .compare-toggle-icon,
    body.product-details-page .color-box,
    body.product-details-page .variant-box {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .new-launch-section,
    .compare-bar,
    .bottom-nav,
    .cta-buttons,
    .compare-checkbox {
        display: none;
    }
    
    body.product-details-page .product-detail {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}