/* =====================================================
   SHEDA - MOBILE RESPONSIVE CSS
   Comprehensive mobile fixes for all pages
   Target: iPhone and mobile devices (max-width: 768px)
   ===================================================== */

/* =====================================================
   GLOBAL MOBILE FIXES
   ===================================================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* =====================================================
   MOBILE BREAKPOINT: 768px and below
   ===================================================== */
@media (max-width: 768px) {
    
    /* === TYPOGRAPHY === */
    h1 { font-size: 28px !important; line-height: 1.2 !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 18px !important; }
    
    /* === CONTAINERS === */
    .container,
    .stores-container,
    .cart-container,
    .checkout-container,
    .orders-container,
    .account-container,
    .dashboard-container,
    .login-container,
    .favorites-container,
    .search-container,
    .product-container,
    .category-container,
    .store-container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    
    /* === HERO SECTIONS === */
    .stores-hero,
    .cart-hero,
    .checkout-hero,
    .orders-hero,
    .account-hero,
    .dashboard-hero,
    .login-hero,
    .favorites-hero,
    .search-hero,
    .product-hero,
    .category-hero {
        padding: 30px 0 24px !important;
    }
    
    .stores-hero h1,
    .cart-hero h1,
    .checkout-hero h1,
    .orders-hero h1,
    .account-hero h1,
    .dashboard-hero h1,
    .favorites-hero h1,
    .search-hero h1,
    .product-hero h1,
    .category-hero h1 {
        font-size: 28px !important;
        margin-bottom: 12px !important;
    }
    
    .stores-hero p,
    .cart-hero p,
    .checkout-hero p,
    .orders-hero p,
    .account-hero p,
    .dashboard-hero p,
    .login-hero p,
    .favorites-hero p,
    .search-hero p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    
    /* Hero badges */
    .stores-hero-badge,
    .cart-hero-badge,
    .checkout-hero-badge,
    .orders-hero-badge,
    .account-hero-badge,
    .dashboard-hero-badge,
    .login-hero-badge,
    .favorites-hero-badge {
        padding: 8px 16px !important;
        font-size: 12px !important;
        margin-bottom: 16px !important;
    }
    
    /* === STATS SECTIONS === */
    .stores-stats,
    .orders-stats,
    .account-stats,
    .dashboard-stats {
        gap: 12px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .stat-item,
    .orders-stats .stat-item {
        min-width: calc(50% - 8px) !important;
        padding: 12px 16px !important;
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
    
    .stat-value,
    .orders-stats .stat-value {
        font-size: 24px !important;
    }
    
    .stat-label,
    .orders-stats .stat-label {
        font-size: 10px !important;
    }
    
    /* === FILTER BARS === */
    .stores-filter-bar,
    .orders-filter-bar,
    .products-filter-bar,
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    
    .filter-group {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-select,
    .filter-input,
    .sort-select {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .status-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .status-btn {
        flex: 1 1 auto !important;
        min-width: calc(50% - 4px) !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    
    /* === GRIDS === */
    /* Store grids */
    .stores-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Product grids */
    .products-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Quick action grids */
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Category grids */
    .categories-grid,
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* === CARDS === */
    .cart-card,
    .checkout-card,
    .order-card,
    .store-card,
    .product-card,
    .account-card {
        border-radius: 16px !important;
    }
    
    .card-header {
        padding: 12px 16px !important;
    }
    
    .card-header h3 {
        font-size: 14px !important;
    }
    
    .card-body {
        padding: 16px !important;
    }
    
    /* === CART PAGE === */
    .cart-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .cart-item {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .cart-item-image {
        width: 100% !important;
        height: 180px !important;
        border-radius: 12px !important;
    }
    
    .cart-item-content {
        width: 100% !important;
    }
    
    .cart-item-name {
        font-size: 15px !important;
    }
    
    .cart-item-actions {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 12px !important;
        border-top: 1px dashed var(--border-primary, #2a2a4a) !important;
    }
    
    .order-summary-card {
        position: static !important;
    }
    
    /* === CHECKOUT PAGE === */
    .checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .checkout-item {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .checkout-item-image {
        width: 100% !important;
        height: 160px !important;
    }
    
    /* === ORDERS PAGE === */
    .order-card {
        padding: 16px !important;
    }
    
    .order-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .order-info {
        width: 100% !important;
    }
    
    .order-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .order-items-preview {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .order-item-preview {
        width: 100% !important;
    }
    
    /* === ACCOUNT PAGE === */
    .account-layout {
        flex-direction: column !important;
    }
    
    .account-sidebar {
        display: none !important;
    }
    
    .profile-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    
    .profile-info {
        text-align: center !important;
    }
    
    .profile-info h2 {
        font-size: 20px !important;
    }
    
    .profile-avatar {
        width: 70px !important;
        height: 70px !important;
        font-size: 28px !important;
    }
    
    .profile-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .profile-stat {
        min-width: calc(50% - 4px) !important;
        padding: 10px 12px !important;
    }
    
    .profile-stat-value {
        font-size: 18px !important;
    }
    
    .profile-stat-label {
        font-size: 9px !important;
    }
    
    .account-settings-row {
        gap: 10px !important;
    }
    
    .settings-row-item {
        padding: 12px 14px !important;
    }
    
    .settings-row-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .settings-row-text h4 {
        font-size: 13px !important;
    }
    
    .settings-row-text p {
        font-size: 10px !important;
    }
    
    .quick-action-card {
        padding: 14px !important;
    }
    
    .quick-action-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .quick-action-title {
        font-size: 13px !important;
    }
    
    .quick-action-desc {
        font-size: 11px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .quick-action-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    /* Menu links */
    .menu-link {
        padding: 16px !important;
    }
    
    .menu-link-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .menu-link-text h4 {
        font-size: 14px !important;
    }
    
    .menu-link-text p {
        font-size: 12px !important;
    }
    
    /* === SELLER DASHBOARD === */
    .stores-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .store-tile {
        border-radius: 16px !important;
    }
    
    .store-tile-header {
        padding: 14px 16px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    .store-tile-logo {
        width: 48px !important;
        height: 48px !important;
    }
    
    .store-tile-name {
        font-size: 16px !important;
    }
    
    .store-tile-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .store-tile-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .store-tile-actions .btn {
        flex: 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    
    .quick-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .quick-actions-left {
        justify-content: center !important;
    }
    
    .btn-create {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
    }
    
    /* === AUTH PAGES (Login/Register) === */
    .login-card,
    .register-card {
        padding: 24px 20px !important;
        margin: 16px !important;
        border-radius: 20px !important;
    }
    
    .login-hero h1,
    .register-hero h1 {
        font-size: 26px !important;
    }
    
    .login-hero p,
    .register-hero p {
        font-size: 14px !important;
    }
    
    .form-control {
        height: 48px !important;
        font-size: 14px !important;
    }
    
    .login-btn,
    .register-btn,
    .submit-btn {
        height: 48px !important;
        font-size: 14px !important;
    }
    
    .social-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .btn-social {
        width: 100% !important;
    }
    
    .form-options {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* === PRODUCT PAGE === */
    .product-layout,
    .product-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .product-gallery {
        width: 100% !important;
    }
    
    .product-main-image {
        height: 300px !important;
    }
    
    .product-thumbnails {
        gap: 8px !important;
    }
    
    .product-thumbnail {
        width: 60px !important;
        height: 60px !important;
    }
    
    .product-info {
        padding: 0 !important;
    }
    
    .product-title {
        font-size: 22px !important;
    }
    
    .product-price {
        font-size: 24px !important;
    }
    
    .product-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .product-actions .btn {
        width: 100% !important;
    }
    
    /* === STORE PAGE === */
    .store-header-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .store-logo {
        width: 80px !important;
        height: 80px !important;
    }
    
    .store-info {
        text-align: center !important;
    }
    
    .store-name {
        font-size: 24px !important;
    }
    
    .store-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .store-actions .btn {
        width: 100% !important;
    }
    
    .store-stats-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .store-stat {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: calc(50% - 8px) !important;
    }
    
    /* === FAVORITES PAGE === */
    .favorites-tabs {
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
    }
    
    .favorites-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab-btn {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    .favorites-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* === SEARCH PAGE === */
    .search-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .search-input {
        width: 100% !important;
    }
    
    .search-results {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* === CATEGORIES PAGE === */
    .categories-hero h1 {
        font-size: 28px !important;
    }
    
    .category-card {
        padding: 16px !important;
    }
    
    .category-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    
    .category-name {
        font-size: 14px !important;
    }
    
    /* === BUTTONS === */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    .btn-sm {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    .btn-lg {
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
    
    /* === FORMS === */
    .form-group {
        margin-bottom: 16px !important;
    }
    
    .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
    
    /* === ADDRESS SECTION === */
    .address-select {
        font-size: 13px !important;
        padding: 12px 40px 12px 14px !important;
    }
    
    .address-card {
        padding: 14px !important;
    }
    
    /* === PAGINATION === */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    .pagination .page-link,
    .pagination-btn {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
    
    /* === MODALS === */
    .modal-content,
    .popup-content {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin: 16px !important;
        border-radius: 20px !important;
        max-height: calc(100vh - 32px) !important;
    }
    
    .modal-header,
    .popup-header {
        padding: 16px !important;
    }
    
    .modal-body,
    .popup-body {
        padding: 16px !important;
    }
    
    .modal-footer,
    .popup-footer {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modal-footer .btn,
    .popup-footer .btn {
        width: 100% !important;
    }
    
    /* === ALERTS & MESSAGES === */
    .alert,
    .message,
    .alert-modern {
        padding: 14px 16px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }
    
    .message-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    /* === BREADCRUMBS === */
    .breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    /* === TABLES (Responsive) === */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table {
        min-width: 600px !important;
    }
    
    /* === BACK NAVIGATION === */
    .back-navigation,
    .addresses-back-nav {
        margin-bottom: 16px !important;
    }
    
    .back-link,
    .back-button-addresses {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* === EMPTY STATES === */
    .empty-state,
    .empty-cart-card,
    .no-results {
        padding: 40px 20px !important;
    }
    
    .empty-state-icon,
    .empty-cart-icon {
        width: 80px !important;
        height: 80px !important;
    }
    
    .empty-state-icon i,
    .empty-cart-icon i {
        font-size: 32px !important;
    }
    
    .empty-state h3,
    .empty-cart-card h3 {
        font-size: 20px !important;
    }
    
    .empty-state p,
    .empty-cart-card p {
        font-size: 14px !important;
    }
    
    /* === ORDER DETAILS PAGE === */
    .order-detail-header {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .order-detail-info {
        width: 100% !important;
    }
    
    .order-timeline {
        padding-left: 24px !important;
    }
    
    .timeline-item {
        padding-left: 20px !important;
    }
    
    /* === SELLER PAGES === */
    .seller-nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .seller-nav-item {
        flex: 1 1 calc(50% - 4px) !important;
        text-align: center !important;
        padding: 10px !important;
        font-size: 12px !important;
    }
    
    /* Product management */
    .product-management-grid {
        grid-template-columns: 1fr !important;
    } 
    /* === FOOTER (if visible on pages) === */
    .page-footer {
        padding: 30px 16px !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        gap: 24px !important;
        text-align: center !important;
    }
    
    .footer-links {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* =====================================================
   SMALL MOBILE BREAKPOINT: 480px and below
   ===================================================== */
@media (max-width: 480px) {
    
    /* Even smaller hero titles */
    .stores-hero h1,
    .cart-hero h1,
    .checkout-hero h1,
    .orders-hero h1,
    .account-hero h1,
    .dashboard-hero h1,
    .login-hero h1,
    .favorites-hero h1,
    .search-hero h1,
    .product-hero h1,
    .category-hero h1 {
        font-size: 24px !important;
    }
    
    /* Single column for small screens */
    .products-grid,
    .product-grid,
    .categories-grid,
    .category-grid,
    .favorites-grid,
    .search-results {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Stats in single row with scroll */
    .stat-item,
    .orders-stats .stat-item {
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .stores-stats,
    .orders-stats,
    .account-stats,
    .dashboard-stats {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Full width buttons */
    .status-btn {
        min-width: 100% !important;
    }
    
    /* Smaller quick actions */
    .quick-actions-grid {
        grid-template-columns: 1fr !important;
    }
    
    .quick-action-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
    }
    
    .quick-action-header {
        margin-bottom: 0 !important;
    }
    
    .quick-action-desc {
        display: none !important;
    }
    
    .quick-action-btn {
        display: none !important;
    }
    
    /* Profile adjustments */
    .profile-stat {
        min-width: 100% !important;
    }
    
    /* Store tile actions full width */
    .store-tile-actions .btn {
        flex: 1 1 100% !important;
    }
    
    /* Product price */
    .product-price {
        font-size: 20px !important;
    }
    
    .product-title {
        font-size: 18px !important;
    }
}

/* =====================================================
   LANDSCAPE MODE FIXES
   ===================================================== */
@media (max-width: 768px) and (orientation: landscape) {
    
    .stores-hero,
    .cart-hero,
    .checkout-hero,
    .orders-hero,
    .account-hero,
    .dashboard-hero,
    .login-hero {
        padding: 20px 0 16px !important;
    }
    
    .stores-hero h1,
    .cart-hero h1,
    .checkout-hero h1,
    .orders-hero h1,
    .account-hero h1,
    .dashboard-hero h1,
    .login-hero h1 {
        font-size: 24px !important;
    }
    
    .login-card,
    .register-card {
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
    }
    
    /* Two columns in landscape */
    .products-grid,
    .product-grid,
    .favorites-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =====================================================
   iOS SPECIFIC FIXES
   ===================================================== */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    
    /* Fix for input zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Fix for fixed positioning issues */
    .site-header {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* Better momentum scrolling */
    .cart-items-list,
    .order-items-list,
    .products-list {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for sticky positioning */
    .order-summary-card {
        position: relative !important;
    }
}

/* =====================================================
   TOUCH DEVICE OPTIMIZATIONS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    
    /* Larger touch targets */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .tab-btn,
    .status-btn,
    .nav-link,
    .menu-link {
        min-height: 44px !important;
    }
    
    /* Remove hover effects that look stuck on mobile */
    .store-tile:hover,
    .product-card:hover,
    .cart-item:hover,
    .menu-link:hover {
        transform: none !important;
    }
    
    /* Better tap feedback */
    .btn,
    .store-tile,
    .product-card,
    .cart-item,
    .menu-link,
    a {
        -webkit-tap-highlight-color: rgba(5, 214, 193, 0.1);
    }
}

/* =====================================================
   HIGH DPI / RETINA DISPLAY FIXES
   ===================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    
    /* Thinner borders on high DPI */
    .cart-card,
    .checkout-card,
    .order-card,
    .store-card,
    .product-card {
        border-width: 0.5px !important;
    }
}

/* =====================================================
   DARK MODE MOBILE ADJUSTMENTS
   ===================================================== */
@media (max-width: 768px) {
    [data-theme="dark"] {
        /* Ensure backgrounds are properly dark on mobile */
        .cart-item,
        .order-card,
        .product-card,
        .store-tile {
            background: rgba(26, 26, 46, 0.95) !important;
        }
    }
}

/* =====================================================
   ANIMATION REDUCTIONS FOR MOBILE (Performance)
   ===================================================== */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    /* Simpler animations for better performance */
    * {
        animation-duration: 0.3s !important;
    }
    
    .page-gradient {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
   ADDITIONAL PAGE-SPECIFIC MOBILE FIXES
   ===================================================== */
@media (max-width: 768px) {
    
    /* === ADDRESSES PAGE === */
    .addresses-wrapper {
        padding-bottom: 40px !important;
    }
    
    .addresses-container {
        padding: 0 16px !important;
    }
    
    .addresses-hero {
        padding: 30px 0 24px !important;
    }
    
    .addresses-hero h1 {
        font-size: 28px !important;
    }
    
    .addresses-hero p {
        font-size: 14px !important;
    }
    
    .addresses-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .address-card {
        padding: 18px !important;
        border-radius: 16px !important;
    }
    
    .address-actions {
        flex-wrap: wrap !important;
    }
    
    .btn-action {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: calc(50% - 4px) !important;
    }
    
    .btn-add-address {
        width: 100% !important;
        padding: 14px 24px !important;
    }
    
    /* Modal on mobile */
    .modal-container {
        max-height: 95vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin-top: auto !important;
    }
    
    .modal-body {
        max-height: 50vh !important;
        padding: 16px !important;
    }
    
    .modal-header {
        padding: 16px !important;
    }
    
    .modal-footer {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .btn-back,
    .btn-next {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .type-options {
        grid-template-columns: 1fr !important;
    }
    
    .map-container {
        height: 250px !important;
    }
    
    /* === SELLER PRODUCTS LIST === */
    .dark-account-wrapper {
        padding-bottom: 40px !important;
    }
    
    .dashboard-container {
        padding: 0 16px !important;
    }
    
    .dashboard-header {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
        padding: 20px 16px !important;
    }
    
    .dashboard-header h1 {
        font-size: 24px !important;
    }
    
    .dashboard-header p {
        font-size: 14px !important;
    }
    
    .btn-create {
        width: 100% !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .stat-card-modern {
        padding: 16px 12px !important;
    }
    
    .stat-card-modern h3 {
        font-size: 20px !important;
    }
    
    .stat-card-modern p {
        font-size: 11px !important;
    }
    
    .stat-icon-modern {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .product-card-modern {
        border-radius: 14px !important;
    }
    
    .product-image {
        height: 140px !important;
    }
    
    .product-content {
        padding: 12px !important;
    }
    
    .product-name {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .product-price {
        font-size: 14px !important;
    }
    
    .product-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .action-btn-small {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    
    .store-badge {
        font-size: 10px !important;
    }
    
    .section-header {
        padding: 12px 16px !important;
    }
    
    .section-header h6 {
        font-size: 14px !important;
    }
    
    /* === PRODUCT PAGE === */
    .product-wrapper {
        padding-bottom: 40px !important;
    }
    
    .product-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .product-gallery {
        position: relative !important;
    }
    
    .gallery-main {
        height: 300px !important;
        border-radius: 16px !important;
    }
    
    .gallery-thumbnails {
        gap: 8px !important;
        padding: 12px 0 !important;
    }
    
    .thumbnail {
        width: 60px !important;
        height: 60px !important;
    }
    
    .product-info-section {
        padding: 0 !important;
    }
    
    .product-title {
        font-size: 22px !important;
    }
    
    .product-price-section {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .current-price {
        font-size: 26px !important;
    }
    
    .original-price {
        font-size: 16px !important;
    }
    
    .discount-badge {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    
    .product-variants {
        gap: 16px !important;
    }
    
    .variant-group {
        gap: 10px !important;
    }
    
    .variant-option {
        min-width: 44px !important;
        height: 40px !important;
        font-size: 13px !important;
    }
    
    .color-option {
        width: 36px !important;
        height: 36px !important;
    }
    
    .add-to-cart-section {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .quantity-selector {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .btn-add-cart,
    .btn-buy-now {
        width: 100% !important;
        padding: 14px 20px !important;
    }
    
    .store-info-card {
        padding: 16px !important;
    }
    
    .store-info-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    .store-logo-small {
        width: 50px !important;
        height: 50px !important;
    }
    
    .product-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
    }
    
    .tab-button {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .tab-content {
        padding: 16px !important;
    }
    
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* === ORDER DETAILS PAGE === */
    .order-detail-card {
        padding: 16px !important;
    }
    
    .order-detail-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .order-status-timeline {
        padding: 16px !important;
    }
    
    .timeline-step {
        padding-left: 24px !important;
    }
    
    .timeline-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .order-items-section {
        padding: 16px !important;
    }
    
    .order-item-detail {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .order-item-image {
        width: 100% !important;
        height: 150px !important;
    }
    
    .order-summary-section {
        padding: 16px !important;
    }
    
    /* === PROFILE SETTINGS === */
    .profile-settings-container {
        padding: 0 16px !important;
    }
    
    .settings-card {
        padding: 20px 16px !important;
    }
    
    .settings-section {
        margin-bottom: 24px !important;
    }
    
    .settings-section-title {
        font-size: 16px !important;
    }
    
    .profile-photo-section {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .profile-photo {
        width: 100px !important;
        height: 100px !important;
    }
    
    .photo-actions {
        justify-content: center !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* === CHECKOUT SUCCESS === */
    .success-animation {
        width: 80px !important;
        height: 80px !important;
    }
    
    .success-title {
        font-size: 24px !important;
    }
    
    .success-message {
        font-size: 14px !important;
    }
    
    /* === SEARCH RESULTS === */
    .search-hero {
        padding: 30px 0 20px !important;
    }
    
    .search-input-large {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
    
    .search-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    
    .search-tab {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* === STORE DETAIL PAGE === */
    .store-hero {
        padding: 30px 0 20px !important;
    }
    
    .store-hero-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .store-hero-logo {
        width: 80px !important;
        height: 80px !important;
    }
    
    .store-hero-info {
        text-align: center !important;
    }
    
    .store-hero-name {
        font-size: 24px !important;
    }
    
    .store-hero-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .store-hero-actions .btn {
        width: 100% !important;
    }
    
    .store-tabs {
        overflow-x: auto !important;
        gap: 8px !important;
    }
    
    .store-tab {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* === CATEGORIES PAGE === */
    .categories-hero {
        padding: 30px 0 24px !important;
    }
    
    .categories-hero h1 {
        font-size: 28px !important;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .category-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    
    .category-card-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    
    .category-card-name {
        font-size: 13px !important;
    }
    
    .category-card-count {
        font-size: 11px !important;
    }
    
    .subcategories-list {
        gap: 8px !important;
    }
    
    .subcategory-chip {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    /* === REGISTER PAGE === */
    .register-card {
        padding: 24px 20px !important;
    }
    
    .register-hero h1 {
        font-size: 26px !important;
    }
    
    .register-steps {
        gap: 8px !important;
    }
    
    .step-indicator {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .step-line {
        width: 30px !important;
    }
    
    /* === BUSINESS CONVERSION PAGE === */
    .conversion-hero h1 {
        font-size: 28px !important;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .benefit-card {
        padding: 20px !important;
    }
    
    .benefit-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* === SELLER ORDER DETAILS === */
    .seller-order-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .seller-order-actions .btn {
        width: 100% !important;
    }
    
    .customer-info-card {
        padding: 16px !important;
    }
    
    /* === CREATE/EDIT STORE === */
    .store-form-container {
        padding: 0 16px !important;
    }
    
    .store-form-card {
        padding: 20px 16px !important;
    }
    
    .logo-upload-area {
        padding: 24px !important;
    }
    
    .logo-preview {
        width: 100px !important;
        height: 100px !important;
    }
}

/* Small mobile specific for product list */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
    
    .product-image {
        height: 200px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .categories-grid {
        grid-template-columns: 1fr !important;
    }
    
    .related-products-grid {
        grid-template-columns: 1fr !important;
    }
}