/**
 * Mobile UX Improvements
 * Enhanced touch experience, spacing, animations, and accessibility
 */

/* ============================================
   GLOBAL MOBILE ENHANCEMENTS
   ============================================ */

@media (max-width: 991px) {

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Better tap targets - minimum 44px for accessibility */
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Touch optimization - removes 300ms delay */
    a,
    button,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    /* Prevent text resize issues */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Improve tap feedback */
    a:active,
    button:active {
        opacity: 0.85;
        transform: scale(0.98);
    }

    /* GPU acceleration for smoother animations */
    .wsus__mobile_nav,
    .main_menu,
    .wsus__categories_item,
    .wsus__single_product_item {
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* ============================================
       HEADER IMPROVEMENTS
       ============================================ */

    header {
        padding: 10px 0 !important;
    }

    header .row {
        align-items: center;
    }

    .main_menu {
        padding: 8px 0;
    }

    /* Logo sizing */
    header .logo img,
    .main_menu .logo img {
        max-height: 45px;
        width: auto;
    }

    /* Header icons - larger tap targets */
    header .right_menu a,
    .main_menu .right_menu a {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s ease;
    }

    header .right_menu a:active,
    .main_menu .right_menu a:active {
        background: rgba(0, 0, 0, 0.05);
    }

    /* ============================================
       BANNER / HERO IMPROVEMENTS
       ============================================ */

    /* Reduce banner height on mobile */
    .wsus__banner,
    .wsus__breadcrumb {
        padding: 40px 0 !important;
        min-height: auto !important;
    }

    .wsus__breadcrumb h1 {
        font-size: 24px !important;
        margin-bottom: 8px;
    }

    .wsus__breadcrumb nav {
        font-size: 13px;
    }

    /* Hero text improvements */
    .wsus__banner_text h1,
    .wsus__banner h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .wsus__banner_text p {
        font-size: 14px !important;
        line-height: 1.5;
    }

    /* ============================================
       SEARCH & FORM IMPROVEMENTS
       ============================================ */

    /* Compact search area */
    .wsus__banner_text form {
        padding: 8px;
        gap: 8px;
    }

    .wsus__banner_text form input {
        padding: 12px 15px !important;
        font-size: 15px;
    }

    .wsus__banner_text form button {
        padding: 12px 20px !important;
    }

    /* Nice select improvements */
    .nice-select {
        height: 48px !important;
        line-height: 48px !important;
        padding-left: 15px !important;
        padding-right: 35px !important;
    }

    .nice-select .list {
        max-height: 250px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nice-select .option {
        min-height: 44px;
        line-height: 44px;
        padding: 0 15px;
    }

    /* ============================================
       PRODUCT CARDS IMPROVEMENTS
       ============================================ */

    .wsus__single_product_item {
        margin-bottom: 15px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wsus__single_product_item:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .wsus__single_product_item .text {
        padding: 12px !important;
    }

    .wsus__single_product_item .text h3 {
        font-size: 14px !important;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .wsus__single_product_item .text h4 {
        font-size: 16px !important;
        font-weight: 700;
    }

    /* Product image with rounded corners */
    .wsus__single_product_item .img {
        position: relative;
        overflow: hidden;
        border-radius: 12px 12px 0 0;
    }

    .wsus__single_product_item .img img {
        transition: transform 0.3s ease;
        border-radius: 12px 12px 0 0;
    }

    /* ============================================
       CATEGORY CARDS
       ============================================ */

    .wsus__categories_item {
        padding: 15px !important;
        border-radius: 12px;
        transition: transform 0.2s ease;
    }

    .wsus__categories_item:active {
        transform: scale(0.96);
    }

    .wsus__categories_item h3 {
        font-size: 14px !important;
        margin-top: 8px;
    }

    .wsus__categories_item .icon {
        width: 50px;
        height: 50px;
    }

    /* ============================================
       BOTTOM NAVIGATION IMPROVEMENTS
       ============================================ */

    .wsus__mobile_nav {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff !important;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .wsus__mobile_nav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .wsus__mobile_nav ul li {
        flex: 1;
        text-align: center;
    }

    .wsus__mobile_nav ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 5px;
        color: #666;
        font-size: 11px;
        letter-spacing: 0.3px;
        transition: color 0.2s ease, transform 0.2s ease;
        text-decoration: none;
        min-height: 54px;
    }

    .wsus__mobile_nav ul li a i {
        font-size: 20px;
        margin-bottom: 4px;
        transition: transform 0.2s ease;
    }

    .wsus__mobile_nav ul li a:active {
        transform: scale(0.9);
    }

    .wsus__mobile_nav ul li a.active,
    .wsus__mobile_nav ul li a:hover {
        color: var(--colorPrimary, #e91e63);
    }

    .wsus__mobile_nav ul li a.active i {
        transform: scale(1.1);
    }

    /* Add padding to body to account for fixed bottom nav */
    body {
        padding-bottom: 75px !important;
    }

    /* ============================================
       FLOATING ELEMENTS
       ============================================ */

    /* Back to top button - smaller and better positioned */
    #scroll_top,
    .scroll_top {
        width: 44px !important;
        height: 44px !important;
        bottom: 85px !important;
        right: 15px !important;
        font-size: 16px !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    /* Floating social - adjust position */
    .wsus__floating_social {
        bottom: 90px !important;
    }

    /* ============================================
       BUTTONS IMPROVEMENTS
       ============================================ */

    .common_btn,
    .btn,
    button[type="submit"] {
        min-height: 48px;
        padding: 12px 24px !important;
        font-size: 15px !important;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .common_btn:active,
    .btn:active,
    button[type="submit"]:active {
        transform: scale(0.97);
    }

    /* Full width buttons on small screens */
    @media (max-width: 575px) {

        .common_btn,
        .btn-lg {
            width: 100%;
            display: block;
            text-align: center;
        }
    }

    /* ============================================
       SPACING IMPROVEMENTS
       ============================================ */

    /* Reduce section padding */
    section {
        padding: 40px 0 !important;
    }

    /* Section titles */
    .wsus__section_title h2 {
        font-size: 22px !important;
        margin-bottom: 20px;
    }

    .wsus__section_title p {
        font-size: 14px !important;
    }

    /* Container padding */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Row gutter */
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .row>* {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ============================================
       TYPOGRAPHY IMPROVEMENTS
       ============================================ */

    /* Improve readability */
    body {
        font-size: 15px;
        line-height: 1.6;
    }

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

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

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

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

    h5 {
        font-size: 14px !important;
    }

    p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* ============================================
       MODAL IMPROVEMENTS
       ============================================ */

    .modal-dialog {
        margin: 10px !important;
        max-height: calc(100vh - 20px);
    }

    .modal-content {
        border-radius: 16px !important;
        overflow: hidden;
    }

    .modal-header {
        padding: 15px 20px;
    }

    .modal-body {
        padding: 20px;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 15px 20px;
        gap: 10px;
    }

    /* ============================================
       SIDEBAR / MENU DRAWER
       ============================================ */

    .wsus__mobile_menu_area {
        width: 280px !important;
        max-width: 85vw;
    }

    .wsus__mobile_menu ul li a {
        padding: 14px 20px !important;
        font-size: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .wsus__mobile_menu ul li a:active {
        background: rgba(0, 0, 0, 0.03);
    }

    /* ============================================
       FOOTER IMPROVEMENTS
       ============================================ */

    footer,
    .wsus__footer {
        padding-top: 40px !important;
        margin-bottom: 70px;
        /* Space for fixed bottom nav */
    }

    .wsus__footer_bottom {
        padding: 15px 0;
        text-align: center;
    }

    .wsus__footer_bottom p {
        font-size: 12px;
    }

    /* ============================================
       LOADING & TRANSITIONS
       ============================================ */

    /* Skeleton on mobile */
    .skeleton-overlay {
        background: #f8fafc;
    }

    .skeleton-header {
        height: 60px;
        padding: 0 15px;
    }

    .skeleton-hero {
        height: 150px;
    }

    .skeleton-card {
        height: 140px;
    }

    /* ============================================
       PULL TO REFRESH INDICATOR
       ============================================ */

    .pull-indicator {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        background: #fff;
        padding: 10px 20px;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        z-index: 9998;
        transition: transform 0.3s ease;
    }

    .pull-indicator.visible {
        transform: translateX(-50%) translateY(0);
    }

    /* ============================================
       SWIPE HINTS / HAPTICS
       ============================================ */

    /* Horizontal scroll containers */
    .horizontal-scroll {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 10px 15px;
        margin: 0 -15px;
    }

    .horizontal-scroll::-webkit-scrollbar {
        display: none;
    }

    .horizontal-scroll>* {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* ============================================
       SAFE AREA INSETS (NOTCH SUPPORT)
       ============================================ */

    @supports (padding: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: calc(75px + env(safe-area-inset-bottom)) !important;
        }

        .wsus__mobile_nav {
            padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        }
    }

}

/* ============================================
   EXTRA SMALL DEVICES (< 576px)
   ============================================ */

@media (max-width: 575px) {

    /* Even smaller header */
    header .logo img,
    .main_menu .logo img {
        max-height: 38px;
    }

    /* Stack elements vertically */
    .wsus__banner_text form {
        flex-direction: column;
    }

    .wsus__banner_text form input,
    .wsus__banner_text form button {
        width: 100% !important;
    }

    /* Product grid - 2 columns */
    .wsus__single_product_item {
        margin-bottom: 12px;
    }

    /* Even smaller section spacing */
    section {
        padding: 30px 0 !important;
    }

    .wsus__section_title h2 {
        font-size: 20px !important;
    }

    /* Category items smaller */
    .wsus__categories_item {
        padding: 12px !important;
    }

    .wsus__categories_item h3 {
        font-size: 12px !important;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}