/* FOMUS PARURE - Premium Mobile UI/UX Optimization */

/* ===== CORE MOBILE ENHANCEMENTS ===== */

/* Enhanced Touch Targets & Interactions */
@media (max-width: 768px) {
    
    /* Improved Touch Targets */
    .nav__link,
    .language-option,
    .btn,
    .collection-gallery__item,
    .product-card {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(39, 174, 96, 0.1);
    }
    
    /* Premium Mobile Navigation */
    .nav {
        backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav__menu {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        padding: 30px 20px;
        animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .nav__list {
        gap: 24px;
    }
    
    .nav__link {
        padding: 12px 16px;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
        position: relative;
        overflow: hidden;
    }
    
    .nav__link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(39, 174, 96, 0.1), transparent);
        transition: left 0.5s;
    }
    
    .nav__link:active::before {
        left: 100%;
    }
    
    .nav__link:hover,
    .nav__link:focus {
        background: rgba(39, 174, 96, 0.05);
        color: #27ae60;
        transform: translateX(4px);
    }
    
    /* Premium Mobile Hamburger */
    .nav__toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav__toggle:active {
        transform: scale(0.95);
        background: rgba(39, 174, 96, 0.1);
    }
    
    .nav__toggle span {
        width: 20px;
        height: 2px;
        background: #333;
        border-radius: 1px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav__toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .nav__toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav__toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Enhanced Hero Section */
    .hero {
        padding: 40px 0 80px;
        background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    }
    
    .hero__container {
        gap: 50px;
        padding: 40px 24px;
    }
    
    .hero__content {
        padding: 30px 20px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 24px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .hero__title-main {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #2c3e50, #27ae60);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .hero__subtitle {
        font-size: 18px;
        line-height: 1.6;
        color: #555;
        margin-bottom: 30px;
        animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
    }
    
    /* Premium Buttons */
    .btn {
        padding: 16px 32px;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(39, 174, 96, 0.2);
        border: 2px solid transparent;
        background-image: linear-gradient(135deg, #27ae60, #2ecc71);
        color: white;
    }
    
    .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s;
    }
    
    .btn:active::before {
        left: 100%;
    }
    
    .btn:hover,
    .btn:focus {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(39, 174, 96, 0.3);
    }
    
    .btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 16px rgba(39, 174, 96, 0.2);
    }
    
    .btn--secondary {
        background: rgba(255, 255, 255, 0.9);
        color: #27ae60;
        border: 2px solid #27ae60;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    
    .btn--secondary:hover {
        background: #27ae60;
        color: white;
    }
    
    /* Enhanced Cards */
    .feature,
    .product-card,
    .testimonial,
    .guarantee__item {
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }
    
    .feature:hover,
    .product-card:hover,
    .testimonial:hover,
    .guarantee__item:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        border-color: rgba(39, 174, 96, 0.2);
    }
    
    /* Premium Collection Gallery */
    .collection-gallery__item {
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        background: #f8f9fa;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .collection-gallery__item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(46, 204, 113, 0.1));
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }
    
    .collection-gallery__item:hover::before {
        opacity: 1;
    }
    
    .collection-gallery__content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: white;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }
    
    .collection-gallery__item:hover .collection-gallery__content {
        transform: translateY(0);
    }
    
    /* Enhanced Typography */
    .section-title {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #2c3e50, #27ae60);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .section-subtitle {
        font-size: 16px;
        line-height: 1.6;
        color: #666;
        margin-bottom: 30px;
    }
    
    /* Premium Language Selector */
    .language-selector__dropdown {
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px;
        animation: dropDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes dropDown {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .language-option {
        padding: 12px 16px;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .language-option::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(39, 174, 96, 0.1), transparent);
        transition: left 0.5s;
    }
    
    .language-option:active::before {
        left: 100%;
    }
    
    .language-option:hover {
        background: rgba(39, 174, 96, 0.05);
        transform: translateX(4px);
    }
    
    /* Enhanced Scroll Behavior */
    html {
        scroll-behavior: smooth;
    }
    
    /* Loading States */
    .loading {
        position: relative;
        overflow: hidden;
    }
    
    .loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: shimmer 2s infinite;
    }
    
    @keyframes shimmer {
        0% { left: -100%; }
        100% { left: 100%; }
    }
    
    /* Enhanced Footer */
    .footer {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        color: white;
    }
    
    .footer__content {
        gap: 40px;
    }
    
    .footer__section {
        padding: 24px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer__list a {
        padding: 8px 0;
        display: block;
        transition: all 0.3s ease;
        border-radius: 8px;
        padding-left: 12px;
    }
    
    .footer__list a:hover {
        background: rgba(39, 174, 96, 0.1);
        color: #2ecc71;
        transform: translateX(4px);
    }
    
    /* Accessibility Enhancements */
    .focus-visible:focus {
        outline: 2px solid #27ae60;
        outline-offset: 2px;
    }
    
    .reduced-motion {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        .nav {
            background: rgba(30, 30, 30, 0.95);
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        
        .nav__menu {
            background: rgba(30, 30, 30, 0.98);
        }
        
        .hero__content {
            background: rgba(30, 30, 30, 0.8);
            color: white;
        }
        
        .section-title {
            background: linear-gradient(135deg, #ecf0f1, #2ecc71);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }
}

/* ===== SMALL MOBILE PREMIUM ENHANCEMENTS ===== */
@media (max-width: 480px) {
    
    .container {
        padding: 0 16px;
    }
    
    .hero__container {
        padding: 30px 16px;
        gap: 40px;
    }
    
    .hero__title-main {
        font-size: 26px;
    }
    
    .btn {
        padding: 14px 24px;
        font-size: 15px;
        width: 100%;
        max-width: 320px;
    }
    
    .collection-gallery {
        gap: 16px;
        padding: 0 16px;
    }
    
    .collection-gallery__item {
        height: 280px;
        border-radius: 16px;
    }
    
    /* Enhanced Small Screen Typography */
    .section-title {
        font-size: 24px;
    }
    
    .section-subtitle {
        font-size: 15px;
    }
    
    /* Improved Touch Feedback */
    .nav__link,
    .btn,
    .language-option {
        min-height: 48px;
    }
}

/* ===== VERY SMALL MOBILE OPTIMIZATION ===== */
@media (max-width: 360px) {
    
    .container {
        padding: 0 12px;
    }
    
    .hero__title-main {
        font-size: 22px;
    }
    
    .btn {
        font-size: 14px;
        padding: 12px 20px;
    }
    
    .collection-gallery__item {
        height: 240px;
    }
    
    .nav__menu {
        padding: 20px 16px;
    }
    
    .footer__section {
        padding: 20px;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations for better performance */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* GPU acceleration for smooth animations */
.nav__menu,
.hero__content,
.btn,
.collection-gallery__item,
.feature,
.product-card {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize image loading */
img {
    loading: lazy;
    decoding: async;
}

/* Improved focus management */
.nav__link:focus,
.btn:focus,
.language-option:focus {
    outline: 2px solid #27ae60;
    outline-offset: 2px;
    z-index: 10;
}

/* Enhanced tap targets for accessibility */
.btn,
.nav__link,
.language-option,
.collection-gallery__item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}