/* Mobile-specific CSS enhancements for BeautyNike Store - Compact Version */

/* Touch-friendly improvements */
.touch-friendly {
    min-height: 44px !important;
    min-width: 44px !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    transition: all 0.1s ease; /* Faster transition */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Floating cart button for mobile */
.mobile-cart-float {
    position: fixed;
    bottom: 90px; /* Moved higher to be above WhatsApp button */
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: all 0.2s ease;
    display: none; /* Hidden by default, shown only on mobile */
}

.mobile-cart-float:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.mobile-cart-float .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    min-height: 20px;
    font-size: 10px;
    padding: 3px;
    border-radius: 50%;
}

.touch-active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease;
}

/* Mobile navigation improvements */
@media (max-width: 767px) {
    .mobile-cart-float {
        display: block; /* Show only on mobile */
    }
    
    .navbar-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 1rem; /* Reduced font */
        padding: 0.5rem 1rem;
    }
    
    .dropdown-menu {
        min-width: 200px; /* Reduced from 220px */
        border-radius: 8px; /* Reduced from 10px */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    }
    
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 0.875rem; /* Reduced font */
    }
    
    /* Product grid improvements for mobile */
    .col-6 {
        padding-left: 8px; /* Reduced */
        padding-right: 8px; /* Reduced */
    }
    
    .product-card {
        margin-bottom: 12px; /* Reduced from 15px */
        border-radius: 10px; /* Reduced from 15px */
    }
    
    /* Flash sale improvements for mobile */
    .flash-sales .col-6 {
        padding-left: 6px; /* Reduced */
        padding-right: 6px; /* Reduced */
    }
    
    .flash-sales .product-card {
        margin-bottom: 8px; /* Reduced */
    }
    
    /* Fix for navbar toggle on mobile */
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem;
        border: none;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 5px;
    }
    
    .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }
    
    .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Product gallery improvements for mobile */
@media (max-width: 767px) {
    .product-image-thumb {
        min-height: 80px; /* Reduced from 100px */
        cursor: pointer;
        transition: all 0.2s ease; /* Faster transition */
        border-radius: 8px; /* Reduced from 10px */
        box-shadow: 0 1px 4px rgba(0,0,0,0.1); /* Reduced shadow */
        touch-action: manipulation; /* Improve touch response */
    }
    
    .product-image-thumb:hover,
    .product-image-thumb.touch-active {
        transform: scale(0.96); /* Reduced from 0.97 */
        box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Reduced shadow */
    }
    
    /* Improve touch targets for quantity controls */
    .quantity-btn {
        min-height: 40px; /* Reduced from 48px */
        min-width: 40px; /* Reduced from 48px */
        font-size: 1.1rem; /* Reduced from 1.3rem */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Reduced shadow */
        touch-action: manipulation; /* Improve touch response */
    }
    
    .quantity-input {
        min-height: 40px; /* Reduced from 48px */
        font-size: 14px; /* Reduced from 16px */
        text-align: center;
        border-radius: 6px; /* Reduced from 8px */
    }
    
    /* Improve touch targets for buttons */
    .btn {
        min-height: 40px; /* Reduced from 48px */
        min-width: 40px; /* Reduced from 48px */
        border-radius: 50px;
        touch-action: manipulation; /* Improve touch response */
    }
    
    /* Improve touch targets for form elements */
    .form-control,
    .form-select {
        min-height: 40px; /* Reduced from 48px */
        font-size: 16px; /* Prevent zoom on iOS */
        border-radius: 8px; /* Reduced from 10px */
        touch-action: manipulation; /* Improve touch response */
    }
    
    /* Enhanced size and color buttons for mobile */
    .btn-size,
    .btn-color {
        min-width: 40px; /* Reduced from 48px */
        min-height: 40px; /* Reduced from 48px */
        padding: 0.5rem 1rem; /* Reduced padding */
        font-size: 0.875rem; /* Reduced font */
        margin: 0.25rem; /* Reduced margin */
        border-radius: 8px; /* Reduced from 10px */
        box-shadow: 0 1px 4px rgba(0,0,0,0.1); /* Reduced shadow */
        touch-action: manipulation; /* Improve touch response */
    }
    
    /* Product detail page improvements */
    .product-image-container {
        margin-bottom: 1rem; /* Reduced from 1.5rem */
    }
    
    .price-section {
        padding: 1rem; /* Reduced from 1.5rem */
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.05), rgba(37, 117, 252, 0.05));
        border-radius: 10px; /* Reduced from 15px */
    }
    
    .quantity-controls .btn {
        min-width: 36px; /* Reduced from 44px */
        min-height: 36px; /* Reduced from 44px */
        padding: 0.5rem; /* Reduced padding */
        border-radius: 50%;
        touch-action: manipulation; /* Improve touch response */
    }
    
    .quantity-input {
        min-height: 36px; /* Reduced from 44px */
        font-size: 1rem; /* Reduced from 1.125rem */
        border-radius: 6px; /* Reduced from 8px */
    }
    
    /* Improve touch targets for product cards */
    .product-card {
        min-height: 150px; /* Reduced from 200px */
        border-radius: 10px; /* Reduced from 15px */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* Reduced shadow */
        touch-action: manipulation; /* Improve touch response */
    }
    
    .card-link {
        /* Removed as we now use explicit buttons */
        display: none;
    }
    
    /* Improve touch targets for carousel controls */
    .carousel-control-prev,
    .carousel-control-next {
        min-width: 40px; /* Reduced from 50px */
        min-height: 40px; /* Reduced from 50px */
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Reduced shadow */
        touch-action: manipulation; /* Improve touch response */
    }
    
    /* Improve touch targets for carousel indicators */
    .carousel-indicators [data-bs-target] {
        min-width: 12px; /* Reduced from 14px */
        min-height: 12px; /* Reduced from 14px */
        touch-action: manipulation; /* Improve touch response */
    }
    
    /* Mobile-friendly footer improvements */
    .footer {
        padding: 1.5rem 0 1rem; /* Reduced from 2rem */
        font-size: 0.875rem; /* Reduced from 1rem */
        background: linear-gradient(135deg, #1a1a2e, #16213e);
    }
    
    .footer h5 {
        font-size: 1.125rem; /* Reduced from 1.25rem */
        margin-bottom: 1rem; /* Reduced from 1.25rem */
        padding-bottom: 0.5rem; /* Reduced from 0.75rem */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer a {
        font-size: 0.875rem; /* Reduced */
        padding: 0.5rem 0; /* Reduced */
        display: block;
        transition: all 0.2s ease; /* Faster transition */
        border-radius: 4px; /* Reduced from 6px */
        touch-action: manipulation; /* Improve touch response */
    }
    
    .footer a:hover {
        color: white;
        transform: translateX(5px); /* Reduced from 8px */
        background: rgba(255, 255, 255, 0.08);
        padding-left: 0.5rem; /* Reduced */
    }
    
    .social-icons {
        display: flex;
        gap: 0.75rem; /* Reduced from 1rem */
        margin-top: 1rem; /* Reduced from 1.5rem */
        justify-content: flex-start;
    }
    
    .social-icons a {
        width: 40px; /* Reduced from 50px */
        height: 40px; /* Reduced from 50px */
        font-size: 1.125rem; /* Reduced from 1.25rem */
        margin: 0;
        border: 2px solid transparent;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Reduced shadow */
        transition: all 0.3s ease;
        touch-action: manipulation; /* Improve touch response */
    }
    
    .social-icons a:hover {
        color: white;
        transform: translateY(-3px); /* Reduced from -5px */
        background: linear-gradient(135deg, #6a11cb, #2575fc);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Reduced shadow */
        border-color: white;
    }
    
    .social-icons a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.5s, height 0.5s; /* Faster animation */
    }
    
    .social-icons a:active::before {
        width: 200%; /* Reduced from 300% */
        height: 200%; /* Reduced from 300% */
    }
    
    .footer-contact li {
        padding: 0.375rem 0; /* Reduced from 0.5rem */
        font-size: 0.875rem; /* Reduced */
        margin: 0;
    }
    
    .footer-contact i {
        width: 20px; /* Reduced from 24px */
        text-align: center;
        margin-right: 0.5rem; /* Reduced from 0.75rem */
        font-size: 1rem; /* Reduced from 1.1rem */
    }
    
    /* Fix for cart badge on mobile */
    .badge {
        min-width: 20px;
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        padding: 0.25em 0.4em;
    }
}

/* Extra small devices (400px and below) */
@media (max-width: 399px) {
    .touch-friendly {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .btn {
        min-height: 40px; /* Reduced from 44px */
        min-width: 40px; /* Reduced from 44px */
        padding: 0.375rem 0.875rem; /* Reduced */
        font-size: 0.75rem; /* Reduced */
    }
    
    .quantity-btn {
        min-height: 40px; /* Reduced */
        min-width: 40px; /* Reduced */
    }
    
    .quantity-input {
        min-height: 40px; /* Reduced */
    }
    
    .form-control,
    .form-select {
        min-height: 40px; /* Reduced */
    }
    
    /* Extra compact footer for small screens */
    .footer {
        padding: 1rem 0 0.75rem; /* Reduced */
        font-size: 0.75rem; /* Reduced */
    }
    
    .footer h5 {
        font-size: 1rem; /* Reduced */
        margin-bottom: 0.75rem; /* Reduced */
        padding-bottom: 0.375rem; /* Reduced */
    }
    
    .footer a {
        font-size: 0.75rem; /* Reduced */
        padding: 0.375rem 0; /* Reduced */
    }
    
    .social-icons a {
        width: 35px; /* Reduced from 40px */
        height: 35px; /* Reduced from 40px */
        font-size: 1rem; /* Reduced from 1.125rem */
        border: 2px solid transparent;
    }
    
    .social-icons a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.5s, height 0.5s; /* Faster animation */
    }
    
    .social-icons a:active::before {
        width: 200%; /* Reduced */
        height: 200%; /* Reduced */
    }
    
    .footer-contact li {
        padding: 0.25rem 0; /* Reduced */
        font-size: 0.75rem; /* Reduced */
    }
    
    /* Single product per row for very small screens */
    .col-6 {
        width: 100%;
        padding-left: 8px; /* Reduced */
        padding-right: 8px; /* Reduced */
    }
}

/* Orientation-specific adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    .touch-friendly {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .footer {
        padding: 1rem 0 0.75rem; /* Reduced */
    }
    
    .footer h5 {
        font-size: 1rem; /* Reduced */
        margin-bottom: 0.75rem; /* Reduced */
    }
    
    .footer a {
        font-size: 0.75rem; /* Reduced */
        padding: 0.375rem 0; /* Reduced */
    }
    
    /* Adjust for landscape mode */
    .product-card {
        min-height: 120px;
    }
    
    .product-image {
        max-height: 120px;
    }
}

/* Prevent scrolling issues on mobile */
body {
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

/* Improve mobile form experience */
input, textarea, select {
    font-size: 16px; /* Prevent zoom on iOS */
}

/* Mobile-specific animations - Reduced for better performance */
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
    .btn, .form-control, .form-select {
        transition: transform 0.1s ease;
    }
    
    .btn:active, .form-control:active, .form-select:active {
        transform: scale(0.96); /* Reduced from 0.97 */
    }
    
    .footer a:active {
        transform: translateX(3px) scale(0.96); /* Reduced */
    }
}

/* Enhanced mobile interactions */
@media (hover: none) and (pointer: coarse) {
    /* Add ripple effect to buttons */
    .btn {
        position: relative;
        overflow: hidden;
    }
    
    .btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }
    
    .btn:focus:not(:active)::after {
        animation: ripple 0.8s ease-out; /* Faster animation */
    }
    
    @keyframes ripple {
        0% {
            transform: scale(0, 0);
            opacity: 0.5;
        }
        100% {
            transform: scale(30, 30); /* Reduced from 50, 50 */
            opacity: 0;
        }
    }
    
    /* Improve touch response for all interactive elements */
    .btn, .form-control, .form-select, .nav-link, .quantity-btn, .footer a, .social-icons a {
        touch-action: manipulation;
    }
}