/* =========================================
   RESPONSIVE DESIGN - Mobile First Approach
   TOTOLINK Gulf Website
   ========================================= */

/* =========================================
   BASE MOBILE OPTIMIZATIONS
   ========================================= */

/* Prevent horizontal scroll - use 'clip' to preserve sticky behavior */
html,
body {
    overflow-x: clip;
    max-width: 100vw;
}

/* Safe area padding for iPhone notch */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent zoom on input focus (iOS) */
input,
select,
textarea {
    font-size: 16px !important;
}

/* Minimum tap targets */
.btn,
button,
a,
.env-card,
.cat-pill,
.option-card {
    min-height: 44px;
}

/* =========================================
   EXTRA SMALL - Mobile Portrait (< 576px)
   ========================================= */
@media (max-width: 575px) {

    /* Container */
    .container {
        padding: 0 16px;
    }

    /* Typography */
    h1 {
        font-size: 28px !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 16px !important;
    }

    /* Sections */
    .section {
        padding: 40px 0;
        margin-bottom: 20px;
    }

    /* All grids to single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-12 {
        grid-template-columns: 1fr !important;
    }

    /* Flex direction column for mobile - EXCEPT header elements */
    .flex:not(header .flex):not(.header-actions):not(.nav-links):not(.social-links) {
        flex-direction: column;
    }

    /* Keep header horizontal on mobile */
    header .container,
    header .container.flex {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .header-actions {
        flex-direction: row !important;
        gap: 8px !important;
    }

    /* Hero Section */
    .hero-section {
        padding: 60px 0 40px !important;
        text-align: center;
    }

    .hero-section .container {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .hero-content {
        text-align: center;
    }

    .hero-title {
        font-size: 32px !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
        max-width: 100% !important;
    }

    .hero-visual {
        margin-bottom: 24px;
        justify-content: center !important;
    }

    .hero-visual img {
        max-width: 70% !important;
    }

    /* Hero buttons stack */
    .hero-content .flex {
        flex-direction: column !important;
        width: 100%;
    }

    .hero-content .btn {
        width: 100%;
        justify-content: center;
    }

    /* Glass Badge */
    .glass-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

    /* Product Finder Wizard */
    .finder-wizard-modern .grid {
        grid-template-columns: 1fr !important;
    }

    .env-card {
        padding: 16px !important;
    }

    .env-card i {
        width: 24px !important;
        height: 24px !important;
    }

    .env-card span {
        font-size: 14px;
    }

    .cat-pill {
        padding: 12px 16px !important;
        font-size: 14px;
    }

    .wizard-label {
        font-size: 14px !important;
    }

    /* Categories Section */
    .category-home-card {
        padding: 20px;
    }

    .category-home-card i {
        font-size: 2rem !important;
    }

    .category-home-card h4 {
        font-size: 16px;
    }

    /* Blueprint Section */
    .villa-diagram {
        min-height: 300px !important;
        padding: var(--space-lg) !important;
    }

    .villa-content h2 {
        font-size: 28px !important;
    }

    .feature-list-item {
        flex-direction: column;
        text-align: center;
    }

    .blueprint-section .flex {
        flex-direction: column;
        gap: 12px;
    }

    .blueprint-section .btn {
        width: 100%;
    }

    /* Featured Products Carousel */
    .products-carousel {
        padding: 0 10px;
    }

    .carousel-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .carousel-item {
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .product-card img {
        max-width: 160px;
    }

    /* Timeline Section */
    .timeline-vertical {
        padding-left: 30px !important;
    }

    .timeline-event>div:last-child {
        padding: var(--space-md) !important;
    }

    .timeline-event h4 {
        font-size: 16px;
    }

    /* Product Showcase */
    .glass-panel h3 {
        font-size: 24px !important;
    }

    .glass-panel img {
        max-width: 60% !important;
    }

    /* Specs flex row */
    .flex.justify-center.gap-xl {
        flex-direction: row !important;
        gap: 16px !important;
    }

    /* Start Your Project Wizard */
    .wizard-container,
    [style*="grid-template-columns: repeat(3"] {
        display: flex !important;
        flex-direction: column !important;
    }

    .col-span-2 {
        grid-column: span 1 !important;
    }

    /* Wizard sidebar */
    .wizard-step-indicator .flex {
        flex-direction: row !important;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .wizard-step-indicator p {
        display: none;
    }

    /* Project cards */
    .project-env-card {
        padding: var(--space-md) !important;
    }

    .project-env-card i {
        width: 28px !important;
        height: 28px !important;
    }

    /* Footer */
    footer .container {
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .social-links {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column !important;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center;
        gap: 12px;
    }

    /* Header Mobile */
    .header-actions {
        gap: 8px !important;
    }

    .lang-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .whatsapp-btn span {
        display: none;
    }

    .whatsapp-btn {
        padding: 8px 12px !important;
    }
}

/* =========================================
   SMALL - Mobile Landscape (576px - 767px)
   ========================================= */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        padding: 0 20px;
    }

    h1 {
        font-size: 36px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    /* 2 columns for some grids */
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .finder-wizard-modern .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hero */
    .hero-section .container {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .hero-title {
        font-size: 36px !important;
    }

    /* Carousel - 2 items */
    .carousel-item {
        min-width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        flex: 0 0 calc(50% - 12px) !important;
    }

    /* Project wizard cards */
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   MEDIUM - Tablet Portrait (768px - 991px)
   ========================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        padding: 0 24px;
    }

    h1 {
        font-size: 42px !important;
    }

    h2 {
        font-size: 32px !important;
    }

    .section {
        padding: 60px 0;
    }

    /* 2 columns for most grids */
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hero */
    .hero-section .container {
        display: flex !important;
        flex-direction: column-reverse !important;
        text-align: center;
    }

    .hero-content {
        text-align: center;
    }

    .hero-content .flex {
        justify-content: center;
    }

    .hero-visual {
        margin-bottom: 32px;
    }

    .hero-visual img {
        max-width: 60%;
    }

    /* Product Finder */
    .finder-wizard-modern .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Blueprint - stack */
    .bg-light .grid-cols-2 {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .villa-visual {
        margin-bottom: 32px;
    }

    .villa-content {
        text-align: center;
    }

    /* Carousel - 2 items */
    .carousel-item {
        min-width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        flex: 0 0 calc(50% - 12px) !important;
    }

    /* Timeline - stack */
    .align-start.grid-cols-2 {
        display: flex !important;
        flex-direction: column !important;
    }

    .timeline-vertical {
        margin-bottom: 40px;
    }

    /* Project Wizard - stack */
    .grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
    }

    .col-span-2 {
        grid-column: span 1 !important;
    }

    /* Wizard steps horizontal */
    .flex-col {
        flex-direction: row !important;
        justify-content: space-between;
    }

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

/* =========================================
   LARGE - Tablet Landscape (992px - 1199px)
   ========================================= */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        padding: 0 32px;
    }

    h1 {
        font-size: 48px !important;
    }

    h2 {
        font-size: 36px !important;
    }

    /* 3 columns */
    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Carousel - 3 items */
    .carousel-item {
        min-width: calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
        flex: 0 0 calc(33.333% - 16px) !important;
    }
}

/* =========================================
   EXTRA LARGE - Desktop (1200px+)
   ========================================= */
@media (min-width: 1200px) {
    .carousel-item {
        min-width: calc(25% - 18px) !important;
        max-width: calc(25% - 18px) !important;
        flex: 0 0 calc(25% - 18px) !important;
    }
}

/* =========================================
   NAVIGATION RESPONSIVE
   ========================================= */
@media (max-width: 1199px) {

    /* Hide desktop nav, show hamburger */
    .nav-wrapper {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Mobile menu overlay */
    #main-nav.active {
        display: flex !important;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--space-xl);
        z-index: 999;
        overflow-y: auto;
    }

    #main-nav.active .nav-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    #main-nav.active .nav-item a {
        display: block;
        padding: 16px;
        font-size: 18px;
    }

    /* Mobile mega menu - accordion style */
    .mega-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mega-menu.active {
        max-height: 500px;
    }

    .mega-menu-content {
        flex-direction: column !important;
        padding: 16px !important;
    }

    .mega-menu-categories {
        width: 100% !important;
        margin-bottom: 16px;
    }

    .mega-menu-categories a {
        padding: 12px 16px !important;
    }

    .mega-featured {
        display: none;
    }
}

@media (min-width: 1200px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .nav-wrapper {
        display: flex !important;
    }
}

/* =========================================
   UTILITY RESPONSIVE CLASSES
   ========================================= */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .w-full-mobile {
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* =========================================
   PRODUCTS PAGE RESPONSIVE
   ========================================= */
@media (max-width: 991px) {

    /* Filters toggle on mobile */
    .product-filters {
        display: none;
    }

    .product-filters.show {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
    }

    .filter-toggle-btn {
        display: flex !important;
    }

    /* Product grid */
    #products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    #products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   PRODUCT DETAIL RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
    .product-header-grid {
        grid-template-columns: 1fr !important;
    }

    .product-gallery {
        order: 1;
        margin-bottom: 32px;
    }

    .product-info {
        order: 2;
        text-align: center;
    }

    .product-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .tab-btn {
        white-space: nowrap;
        padding: 12px 16px;
    }
}

/* =========================================
   SUPPORT & CONTACT PAGES RESPONSIVE
   ========================================= */
@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-form,
    .contact-info {
        padding: 24px;
    }

    .support-cards {
        grid-template-columns: 1fr !important;
    }

    .faq-item {
        padding: 16px;
    }
}

/* =========================================
   ANIMATIONS FOR MOBILE (Performance)
   ========================================= */
@media (max-width: 767px) {

    /* Reduce animations on mobile for performance */
    .animate-float {
        animation: none;
    }

    .holographic-particles {
        display: none;
    }

    /* Simpler hover effects */
    .glass-card:hover {
        transform: none;
    }
}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {

    .mobile-menu-toggle,
    .nav-wrapper,
    .header-actions,
    footer {
        display: none !important;
    }

    .section {
        page-break-inside: avoid;
    }
}