/**
 * 24H Pneus - Comprehensive Responsive Fixes
 * Version: 1.0.0
 * Mobile-First Responsive Enhancement
 *
 * This file contains all responsive fixes organized by breakpoint
 * to ensure proper display on all devices.
 */

/* ============================================
   BASE RESPONSIVE TYPOGRAPHY
   Using clamp() for fluid typography
============================================ */
:root {
    /* Fluid font sizes */
    --fs-display: clamp(2rem, 5vw + 1rem, 4rem);
    --fs-h1: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
    --fs-h2: clamp(1.5rem, 3vw + 0.5rem, 2.75rem);
    --fs-h3: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
    --fs-h4: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);
    --fs-h5: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
    --fs-body: clamp(0.875rem, 1vw + 0.5rem, 1rem);
    --fs-small: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);

    /* Responsive spacing */
    --space-xs: clamp(0.25rem, 1vw, 0.5rem);
    --space-sm: clamp(0.5rem, 2vw, 1rem);
    --space-md: clamp(1rem, 3vw, 2rem);
    --space-lg: clamp(1.5rem, 4vw, 3rem);
    --space-xl: clamp(2rem, 5vw, 4rem);
    --space-2xl: clamp(3rem, 6vw, 6rem);

    /* Container padding */
    --container-padding: clamp(1rem, 3vw, 2rem);
}

/* ============================================
   CONTAINER RESPONSIVE FIXES
============================================ */
.container {
    width: 100%;
    max-width: 1540px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ============================================
   EXTRA SMALL DEVICES (< 576px)
   Mobile phones in portrait
============================================ */
@media (max-width: 575.98px) {
    /* Typography */
    h1, .h1 { font-size: var(--fs-h1); }
    h2, .h2 { font-size: var(--fs-h2); }
    h3, .h3 { font-size: var(--fs-h3); }
    h4, .h4 { font-size: var(--fs-h4); }
    h5, .h5 { font-size: var(--fs-h5); }

    /* Container */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Header */
    .header-modern .header-main {
        padding: 10px 0;
    }

    .header-modern .header-inner {
        gap: 10px;
    }

    .header-modern .header-logo img {
        height: 30px;
    }

    .header-modern .header-actions {
        gap: 4px;
    }

    .header-modern .header-action-btn {
        padding: 6px;
    }

    .header-modern .header-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .header-modern .cart-count {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        top: 0;
        right: 2px;
    }

    /* Hero Section */
    .tf-hero-premium .hero-grid {
        padding: 30px 0 40px;
        gap: 20px;
    }

    .tf-hero-premium .hero-title {
        font-size: clamp(24px, 6vw, 36px);
        line-height: 1.2;
    }

    .tf-hero-premium .hero-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .hero-features {
        gap: 8px;
        margin-bottom: 16px;
    }

    .feature-pill {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .feature-pill svg {
        width: 14px;
        height: 14px;
    }

    .hero-trust-badge {
        padding: 6px 12px;
        font-size: 10px;
        margin-bottom: 16px;
    }

    /* Finder Card */
    .finder-card,
    .finder-card-modern,
    .hero-finder {
        padding: 16px;
        border-radius: 16px;
    }

    .finder-header {
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .finder-icon {
        width: 40px;
        height: 40px;
    }

    .finder-icon svg {
        width: 20px;
        height: 20px;
    }

    .finder-title {
        font-size: 16px;
    }

    .finder-subtitle {
        font-size: 12px;
    }

    .finder-col select,
    .tf-select,
    .finder-v2-select {
        padding: 12px 14px;
        font-size: 14px;
        border-radius: 10px;
        height: 46px;
    }

    .finder-col .label-text,
    .field-label {
        font-size: 11px;
    }

    #tyre-finder-submit,
    .finder-v2-submit {
        height: 48px;
        font-size: 13px;
        border-radius: 10px;
    }

    /* Avantages Grid */
    .tf-avantages {
        padding: 30px 0;
    }

    .avantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .avantage-item {
        padding: 16px 12px;
        border-radius: 12px;
    }

    .avantage-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .avantage-icon svg {
        width: 20px;
        height: 20px;
    }

    .avantage-content h4 {
        font-size: 12px;
    }

    .avantage-content p {
        font-size: 10px;
        display: none; /* Hide description on very small screens */
    }

    /* Services Grid */
    .tf-services-section {
        padding: 50px 0;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .service-card {
        padding: 20px 12px;
        border-radius: 14px;
    }

    .service-icon-wrap {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }

    .service-title {
        font-size: 13px;
    }

    .service-desc {
        font-size: 11px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .service-price .price-value {
        font-size: 18px;
    }

    .service-arrow {
        display: none;
    }

    /* Popular Categories */
    .tf-popular-section {
        padding: 50px 0;
    }

    .popular-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .popular-card {
        padding: 20px 12px;
        border-radius: 14px;
    }

    .popular-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .popular-icon svg {
        width: 28px;
        height: 28px;
    }

    .popular-title {
        font-size: 13px;
    }

    .popular-tag {
        font-size: 10px;
        padding: 4px 10px;
    }

    /* Products Grid */
    .tf-products-section {
        padding: 50px 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Blog Grid */
    .tf-blog-section {
        padding: 50px 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog-card {
        border-radius: 14px;
    }

    .blog-content {
        padding: 16px;
    }

    .blog-title {
        font-size: 15px;
    }

    .blog-excerpt {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    /* Testimonials */
    .tf-testimonials-section {
        padding: 50px 0;
    }

    .testimonials-wrapper {
        padding: 0;
    }

    .testimonial-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .testimonial-text {
        font-size: 14px;
    }

    .swiper-nav {
        display: none;
    }

    /* Section Headers */
    .section-header {
        margin-bottom: 30px;
    }

    .section-badge {
        font-size: 10px;
        padding: 6px 14px;
        letter-spacing: 1.5px;
    }

    .section-title {
        font-size: clamp(22px, 5vw, 32px);
        margin-bottom: 10px;
    }

    .section-subtitle {
        font-size: 13px;
    }

    /* Buttons */
    .btn-cta {
        padding: 12px 20px;
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }

    .services-cta {
        flex-direction: column;
        gap: 10px;
    }

    /* Footer */
    .footer-advantages {
        padding: 30px 0;
    }

    .footer-advantages__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-advantages__item {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-advantages__icon {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .footer-advantages__title {
        font-size: 13px;
    }

    .footer-advantages__text {
        font-size: 11px;
    }

    .footer-main {
        padding: 40px 0 30px;
    }

    .footer-main__grid {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }

    .footer-brand__logo img {
        height: 36px;
    }

    .footer-brand__desc {
        font-size: 13px;
    }

    .footer-nav {
        align-items: center;
    }

    .footer-newsletter__form {
        flex-direction: column;
    }

    .footer-newsletter__input {
        width: 100%;
    }

    .footer-newsletter__btn {
        width: 100%;
    }

    .floating-actions {
        bottom: 16px;
        right: 12px;
        gap: 8px;
    }

    .floating-actions__btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    /* WooCommerce Cart */
    .tf-page-cart .tf-cart-items {
        overflow-x: auto;
    }

    .tf-table-cart {
        min-width: 600px;
    }

    .tf-table-cart th,
    .tf-table-cart td {
        padding: 12px 8px;
        font-size: 13px;
    }

    .product-thumbnail img {
        width: 60px;
        height: 60px;
    }

    .tf-montage-option {
        font-size: 12px;
    }

    /* WooCommerce Checkout */
    .tf-one-page-checkout {
        padding: 20px 0;
    }

    .checkout-section {
        margin-bottom: 20px;
    }

    .section-header .section-number {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .section-header .section-title {
        font-size: 16px;
    }

    .checkout-sidebar {
        margin-top: 20px;
    }

    .checkout-trust-badges {
        flex-direction: column;
        gap: 10px;
    }

    .trust-item {
        justify-content: center;
    }

    /* Mobile Menu */
    .mobile-menu-modern {
        width: 280px !important;
    }

    .mobile-menu-header {
        padding: 16px;
    }

    .mobile-menu-logo img {
        height: 28px;
    }

    .mobile-menu-body {
        padding: 16px;
    }

    .mobile-nav-item > a {
        padding: 14px 0;
        font-size: 14px;
    }

    .mobile-menu-quick {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .mobile-menu-quick a {
        padding: 12px 8px;
        font-size: 10px;
    }

    /* Modals */
    .modal-auth-modern .modal-dialog {
        margin: 0.5rem;
    }

    .modal-auth-modern .modal-auth-header {
        padding: 30px 20px 20px;
    }

    .modal-auth-modern .modal-auth-body {
        padding: 24px 20px;
    }

    .form-row-modern {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Cart Modal */
    .modal-cart-modern .modal-dialog-right {
        max-width: 100%;
        margin: 0;
    }

    .cart-modal-body {
        padding: 16px;
    }

    .cart-item-modern {
        gap: 12px;
    }

    .cart-item-image {
        width: 70px;
    }

    .cart-item-title {
        font-size: 13px;
    }

    .quantity-selector-modern {
        transform: scale(0.9);
    }
}

/* ============================================
   SMALL DEVICES (576px - 767px)
   Mobile phones in landscape, small tablets
============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Header */
    .header-modern .header-logo img {
        height: 35px;
    }

    /* Hero */
    .tf-hero-premium .hero-grid {
        padding: 40px 0 50px;
    }

    .tf-hero-premium .hero-title {
        font-size: clamp(28px, 5vw, 40px);
    }

    /* Finder */
    .finder-card,
    .finder-card-modern {
        padding: 24px;
    }

    .finder-row,
    .tyre-finder-form .finder-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grids */
    .avantages-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .popular-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Footer */
    .footer-advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ============================================
   MEDIUM DEVICES (768px - 991px)
   Tablets
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Header */
    .header-modern .header-inner {
        gap: 20px;
    }

    .header-modern .header-logo img {
        height: 40px;
    }

    .header-modern .header-search {
        max-width: 350px;
    }

    /* Hero */
    .tf-hero-premium .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 0 60px;
    }

    .tf-hero-premium .hero-title {
        font-size: clamp(32px, 5vw, 48px);
    }

    .finder-card,
    .finder-card-modern {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Grids */
    .avantages-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .popular-categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Footer */
    .footer-advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Checkout */
    .tf-one-page-checkout .row {
        flex-direction: column;
    }

    .tf-one-page-checkout .col-lg-7,
    .tf-one-page-checkout .col-lg-5 {
        width: 100%;
        max-width: 100%;
    }

    .checkout-sidebar {
        margin-top: 30px;
    }
}

/* ============================================
   LARGE DEVICES (992px - 1199px)
   Small desktops, large tablets landscape
============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Hero */
    .tf-hero-premium .hero-grid {
        grid-template-columns: 1fr 400px;
        gap: 40px;
    }

    /* Navigation */
    .main-nav .nav-menu > li > a {
        padding: 14px 14px;
        font-size: 13px;
    }

    /* Grids */
    .avantages-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
    }

    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .popular-categories-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .blog-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    /* Footer */
    .footer-advantages__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-main__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
}

/* ============================================
   EXTRA LARGE DEVICES (1200px - 1399px)
   Desktops
============================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Hero */
    .tf-hero-premium .hero-grid {
        grid-template-columns: 1fr 440px;
        gap: 50px;
    }

    /* Grids */
    .footer-main__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ============================================
   XXL DEVICES (1400px+)
   Large desktops
============================================ */
@media (min-width: 1400px) {
    .container {
        max-width: 1540px;
    }

    /* Hero */
    .tf-hero-premium .hero-grid {
        grid-template-columns: 1fr 480px;
        gap: 60px;
    }

    /* Footer */
    .footer-main__grid {
        grid-template-columns: 1.5fr repeat(4, 1fr);
    }
}

/* ============================================
   TOUCH DEVICE ENHANCEMENTS
============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets */
    .header-action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-categories .categories-btn {
        min-height: 48px;
    }

    .main-nav .nav-menu > li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .btn-cta {
        min-height: 48px;
    }

    /* Remove hover effects that don't work on touch */
    .service-card:hover,
    .popular-card:hover,
    .blog-card:hover {
        transform: none;
    }

    /* Use active state instead */
    .service-card:active,
    .popular-card:active,
    .blog-card:active {
        transform: scale(0.98);
    }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .tf-hero-premium {
        min-height: auto;
        padding: 30px 0;
    }

    .tf-hero-premium .hero-grid {
        padding: 20px 0;
    }

    .modal-auth-modern .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ============================================
   SAFE AREA INSETS (For devices with notch)
============================================ */
@supports (padding: max(0px)) {
    .header-modern {
        padding-top: max(0px, env(safe-area-inset-top));
    }

    .footer-bottom {
        padding-bottom: max(25px, env(safe-area-inset-bottom));
    }

    .floating-actions {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
    }

    .mobile-menu-modern {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================
   PRINT STYLES
============================================ */
@media print {
    .header-modern,
    .tf-top-bar-modern,
    .footer,
    .floating-actions,
    .mobile-menu-modern,
    .modal {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
============================================ */
@media (prefers-contrast: high) {
    .finder-col select,
    .tf-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        border-width: 2px;
    }

    .btn-cta,
    .tf-btn {
        border: 2px solid currentColor;
    }
}

/* ============================================
   REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   SPECIFIC COMPONENT FIXES
============================================ */

/* Fix overflow issues on mobile */
body {
    overflow-x: hidden;
}

.tf-hero-premium,
.tf-avantages,
.tf-services-section,
.tf-popular-section,
.tf-products-section,
.tf-testimonials-section,
.tf-blog-section {
    overflow-x: hidden;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Fix table overflow on mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Swiper fixes for mobile */
.swiper {
    overflow: hidden;
}

.swiper-slide {
    flex-shrink: 0;
}

/* Fix z-index stacking issues */
.header-modern.is-sticky {
    z-index: 1050;
}

.modal {
    z-index: 1060;
}

.mobile-menu-modern {
    z-index: 1055;
}

/* Fix input zoom on iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"] {
        font-size: 16px !important;
    }
}

/* Fix select arrow on Firefox */
@-moz-document url-prefix() {
    .finder-col select,
    .tf-select,
    .finder-v2-select {
        text-indent: 0.01px;
        text-overflow: '';
    }
}

/* ============================================
   WOOCOMMERCE SPECIFIC RESPONSIVE
============================================ */

/* Shop Page */
@media (max-width: 575.98px) {
    .woocommerce ul.products[class*="columns-"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .woocommerce ul.products li.product {
        width: 100%;
        margin: 0;
    }
}

/* Single Product */
@media (max-width: 767.98px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
        float: none;
    }

    .woocommerce div.product .woocommerce-tabs {
        margin-top: 30px;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Cart Page */
@media (max-width: 767.98px) {
    .woocommerce-cart table.cart {
        display: block;
        overflow-x: auto;
    }

    .woocommerce-cart table.cart td.actions {
        text-align: center;
    }

    .woocommerce-cart table.cart td.actions .coupon {
        float: none;
        margin-bottom: 15px;
    }

    .woocommerce-cart table.cart td.actions button.button {
        width: 100%;
    }
}

/* Checkout Page */
@media (max-width: 991.98px) {
    .woocommerce-checkout .col2-set {
        display: block;
    }

    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        width: 100%;
        float: none;
    }
}