/* 
 * Mobile-Specific Page Styles
 * Optimized styles for home, products, cart, and checkout pages
 */

/* ==================== Mobile Home Page ==================== */
@media (max-width: 1023px) {
    /* Hero Section Mobile */
    .hero {
        padding: var(--space-6) var(--space-4);
        margin: var(--space-4) calc(var(--space-4) * -1);
        border-radius: var(--radius-xl);
    }
    
    .hero--ermo {
        background: linear-gradient(135deg, #050505 0%, #1a1a1a 100%);
    }
    
    .hero__content h1 {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: var(--space-4);
    }
    
    .hero__desc {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: var(--space-5);
    }
    
    .hero__actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    
    .hero__actions .btn {
        width: 100%;
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-xl);
        font-size: 1rem;
        font-weight: 600;
    }
    
    .hero__badges {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--space-2);
    }
    
    .hero__badge {
        font-size: 0.75rem;
        padding: var(--space-2) var(--space-3);
        text-align: center;
    }
    
    .hero__visual {
        margin-top: var(--space-5);
        padding: var(--space-4);
    }
    
    /* Inventory & Parts Sections Mobile */
    .inventory-section,
    .parts-section {
        padding: var(--space-5) var(--space-4);
        margin-bottom: var(--space-5);
        border-radius: var(--radius-xl);
    }
    
    .section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    
    .section__header .btn {
        width: 100%;
    }
    
    /* Product Cards in Grid */
    .row-cols-1 > * {
        width: 100%;
    }
    
    /* Category Showcase Mobile */
    .category-showcase {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .category-showcase__card {
        padding: var(--space-5);
        min-height: auto;
    }
    
    .category-showcase__icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .category-showcase__cta {
        width: 100%;
        text-align: center;
    }
    
    /* Testimonials Mobile */
    .testimonials {
        padding: var(--space-6) var(--space-4);
        margin: var(--space-5) calc(var(--space-4) * -1);
        border-radius: var(--radius-xl);
    }
    
    .testimonials .row {
        gap: var(--space-4);
    }
    
    .testimonial-card {
        padding: var(--space-4);
    }
    
    .testimonial-avatar {
        width: 48px;
        height: 48px;
    }
}

/* ==================== Mobile Products Page ==================== */
@media (max-width: 1023px) {
    /* Breadcrumb Mobile */
    .breadcrumb {
        font-size: 0.8rem;
        padding: var(--space-2) 0;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        font-size: 0.7rem;
    }
    
    /* Filters Card Mobile */
    .filters-card {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
        margin-bottom: var(--space-4);
    }
    
    .filters-card .row {
        gap: var(--space-3);
    }
    
    .filters-card .form-label {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: var(--space-2);
    }
    
    .filters-card .form-control,
    .filters-card .form-select {
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-lg);
        font-size: 0.95rem;
    }
    
    .filters-card .btn {
        padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-lg);
    }
    
    .filter-pill {
        padding: var(--space-2) var(--space-4);
        font-size: 0.85rem;
        border-radius: var(--radius-full);
    }
    
    /* Product Grid Mobile */
    .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
    
    /* Use mobile product card styles */
    .col-6 .product-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .product-card__image img {
        height: 180px;
    }
    
    .product-card__body {
        padding: var(--space-3);
    }
    
    .product-card__title {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: var(--space-2);
    }
    
    .product-card__price {
        font-size: 1rem;
    }
    
    .product-card__footer {
        padding: var(--space-3);
    }
    
    .product-card__footer .btn {
        font-size: 0.85rem;
        padding: var(--space-2) var(--space-3);
    }
    
    /* Pagination Mobile */
    .pagination {
        gap: var(--space-2);
        font-size: 0.9rem;
    }
    
    .pagination .page-link {
        padding: var(--space-2) var(--space-3);
        min-width: 38px;
    }
}

/* ==================== Mobile Product Detail Page ==================== */
@media (max-width: 1023px) {
    /* Product Showcase Mobile */
    .product-showcase {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
    }
    
    /* Product Gallery Mobile */
    .product-gallery .main-image img {
        max-height: 320px;
        border-radius: var(--radius-lg);
    }
    
    .thumbs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: var(--space-2);
    }
    
    .thumbs img {
        width: 100%;
        height: 70px;
    }
    
    /* Product Details Mobile */
    .product-details h2 {
        font-size: 1.5rem;
        margin-bottom: var(--space-3);
    }
    
    .product-details .display-6 {
        font-size: 1.75rem;
    }
    
    .product-details .lead {
        font-size: 0.95rem;
    }
    
    /* Product Meta Mobile */
    .product-meta {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .meta-item {
        padding: var(--space-3);
    }
    
    /* Color Selection Mobile */
    .color-option {
        flex: 0 0 auto;
    }
    
    .color-circle {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Add to Cart Form Mobile */
    #add-to-cart-form .col-md-4,
    #add-to-cart-form .col-md-8 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    #add-to-cart-form .form-select {
        padding: var(--space-4);
        font-size: 1rem;
        border-radius: var(--radius-lg);
    }
    
    #add-to-cart-form .btn {
        padding: var(--space-4) var(--space-5);
        font-size: 1rem;
        border-radius: var(--radius-lg);
    }
    
    /* Product Tabs Mobile */
    .product-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .product-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .product-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: var(--space-3) var(--space-4);
    }
    
    /* Related Products Mobile */
    .related-products {
        padding: var(--space-4);
    }
    
    .related-products .col-xl-3 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
}

/* ==================== Mobile Cart Page ==================== */
@media (max-width: 1023px) {
    .cart-page {
        padding: 0;
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }
    
    /* Cart Hero Mobile */
    .cart-hero {
        padding: var(--space-5) var(--space-4);
        margin: var(--space-4) 0;
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    }
    
    .cart-hero .eyebrow {
        font-size: 0.7rem;
        margin-bottom: var(--space-2);
    }
    
    .cart-hero__title {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: var(--space-2);
    }
    
    .cart-hero__subtitle {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: var(--space-4);
    }
    
    /* Cart Progress Mobile - Premium Design */
    .cart-progress {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: var(--space-5) var(--space-3) var(--space-6);
        margin: var(--space-5) 0;
        gap: var(--space-1);
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.03), transparent);
        border-radius: var(--radius-xl);
        overflow: visible;
    }
    
    /* Progress Line Background - Extended from center of first circle to end of container */
    .cart-progress::before {
        content: '';
        position: absolute;
        top: 48px;
        left: 26px;
        right: 8px;
        height: 5px;
        background: linear-gradient(90deg, 
            var(--gray-200, #e5e7eb) 0%, 
            var(--gray-300, #d1d5db) 50%, 
            var(--gray-200, #e5e7eb) 100%);
        transform: translateY(-50%);
        z-index: 0;
        border-radius: 5px;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    
    /* Active Progress Line - Extended and Animated Gradient with glow */
    .cart-progress::after {
        content: '';
        position: absolute;
        top: 48px;
        left: 26px;
        height: 5px;
        background: linear-gradient(90deg, 
            var(--primary, #6366f1) 0%, 
            var(--primary-light, #818cf8) 50%,
            var(--primary-dark, #4f46e5) 100%);
        background-size: 200% 100%;
        transform: translateY(-50%);
        z-index: 1;
        border-radius: 5px;
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.4),
                    0 2px 8px rgba(99, 102, 241, 0.3);
        animation: progressShine 3s ease-in-out infinite;
    }
    
    @keyframes progressShine {
        0%, 100% {
            background-position: 0% 50%;
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.4),
                        0 2px 8px rgba(99, 102, 241, 0.3);
        }
        50% {
            background-position: 100% 50%;
            box-shadow: 0 0 16px rgba(99, 102, 241, 0.5),
                        0 2px 12px rgba(99, 102, 241, 0.4);
        }
    }
    
    /* Calculate progress width - Line extends from center of first circle to end */
    /* Total available width = 100% - 26px (left padding) - 8px (right padding) = calc(100% - 34px) */
    
    /* Step 1: Line starts from center of first circle */
    .cart-progress[data-step="1"]::after { 
        width: 0%; 
    }
    
    /* Step 2: Line reaches center of second step */
    /* Each step is ~25% of the progress, so step 2 is at ~33% of total line */
    .cart-progress[data-step="2"]::after { 
        width: calc((100% - 34px) * 0.333); 
    }
    
    /* Step 3: Line reaches center of third step */
    .cart-progress[data-step="3"]::after { 
        width: calc((100% - 34px) * 0.667); 
    }
    
    /* Step 4: Line extends fully to the end, utilizing extra space after 4th step */
    .cart-progress[data-step="4"]::after { 
        width: calc(100% - 34px); 
    }
    
    .progress-pill {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        flex: 1;
        min-width: 0;
        padding: 0 var(--space-1);
    }
    
    /* Step Circle - Larger and more prominent */
    .progress-pill::before {
        content: '';
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: white;
        border: 4px solid var(--gray-300, #d1d5db);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    /* Step Number/Icon Container */
    .progress-pill span {
        position: absolute;
        top: 26px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.875rem;
        font-weight: 800;
        color: var(--gray-600, #4b5563);
        z-index: 3;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        line-height: 1;
        width: auto;
        min-width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Icons styling */
    .progress-pill span i {
        font-size: 1rem;
        transition: all 0.3s ease;
        display: inline-block;
    }
    
    /* Pending steps with icon - show icon in gray */
    .progress-pill:not(.active):not(.completed).has-icon span {
        font-size: 0;
    }
    
    .progress-pill:not(.active):not(.completed).has-icon span i {
        font-size: 0.95rem;
        color: var(--gray-400, #9ca3af);
        display: inline-block;
    }
    
    /* Pending steps without icon - show number */
    .progress-pill:not(.active):not(.completed):not(.has-icon) span {
        font-size: 0.875rem;
        font-weight: 800;
        color: var(--gray-600, #4b5563);
    }
    
    /* Active Step - Enhanced */
    .progress-pill.active::before {
        border-color: var(--primary, #6366f1);
        background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-light, #818cf8));
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4),
                    0 4px 16px rgba(99, 102, 241, 0.3),
                    0 0 0 12px rgba(99, 102, 241, 0.1);
        transform: scale(1.1);
    }
    
    /* Active step without icon - show number */
    .progress-pill.active:not(.has-icon) span {
        color: white;
        font-size: 1rem;
        font-weight: 900;
    }
    
    /* Active step with icon - show icon */
    .progress-pill.active.has-icon span {
        color: white;
        font-size: 0;
    }
    
    .progress-pill.active.has-icon span i {
        font-size: 1.1rem;
        color: white;
        animation: iconBounce 0.6s ease-out;
        display: inline-block;
    }
    
    @keyframes iconBounce {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
    }
    
    /* Completed Step - More visible */
    .progress-pill.completed::before {
        border-color: var(--success, #10b981);
        background: linear-gradient(135deg, var(--success, #10b981), #34d399);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4),
                    0 4px 16px rgba(16, 185, 129, 0.3),
                    0 0 0 12px rgba(16, 185, 129, 0.1);
    }
    
    .progress-pill.completed span {
        color: white;
        font-size: 0 !important;
    }
    
    .progress-pill.completed span i {
        display: none !important;
    }
    
    .progress-pill.completed span::before {
        content: '✓';
        font-size: 1.25rem;
        font-weight: 900;
        color: white;
        line-height: 1;
        display: inline-block;
    }
    
    /* Step Label - Better styling */
    .progress-pill p {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--gray-500, #6b7280);
        margin: 0;
        text-align: center;
        line-height: 1.3;
        transition: all 0.3s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding-top: var(--space-1);
    }
    
    .progress-pill.active p {
        color: var(--primary, #6366f1);
        font-weight: 800;
        font-size: 0.8rem;
        transform: scale(1.05);
    }
    
    .progress-pill.completed p {
        color: var(--success, #10b981);
        font-weight: 700;
    }
    
    /* Pending/Upcoming steps */
    .progress-pill:not(.active):not(.completed) p {
        color: var(--gray-400, #9ca3af);
    }
    
    /* Remove dividers on mobile */
    .progress-divider {
        display: none;
    }
    
    /* Connection point indicator (optional visual enhancement) */
    .progress-pill {
        position: relative;
    }
    
    /* Compact version for very small screens */
    @media (max-width: 360px) {
        .cart-progress {
            padding: var(--space-4) var(--space-2) var(--space-5);
        }
        
        .progress-pill::before {
            width: 48px;
            height: 48px;
        }
        
        .progress-pill span {
            top: 24px;
            font-size: 0.8rem;
        }
        
        .progress-pill p {
            font-size: 0.7rem;
        }
        
        .cart-progress::before,
        .cart-progress::after {
            top: 44px;
            left: 20px;
            right: 20px;
        }
        
        .cart-progress[data-step="2"]::after { width: calc(33.33% - 20px); }
        .cart-progress[data-step="3"]::after { width: calc(66.66% - 20px); }
        .cart-progress[data-step="4"]::after { width: calc(100% - 40px); }
    }
    
    /* Step Animation - Enhanced */
    @keyframes stepPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4),
                        0 4px 16px rgba(99, 102, 241, 0.3),
                        0 0 0 12px rgba(99, 102, 241, 0.1);
            transform: scale(1.1);
        }
        50% {
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3),
                        0 4px 20px rgba(99, 102, 241, 0.4),
                        0 0 0 16px rgba(99, 102, 241, 0.15);
            transform: scale(1.15);
        }
    }
    
    .progress-pill.active::before {
        animation: stepPulse 2.5s ease-in-out infinite;
    }
    
    /* Checkmark Animation */
    @keyframes checkmarkDraw {
        0% {
            transform: translate(-50%, -50%) scale(0) rotate(-45deg);
            opacity: 0;
        }
        50% {
            transform: translate(-50%, -50%) scale(1.3) rotate(-45deg);
            opacity: 1;
        }
        100% {
            transform: translate(-50%, -50%) scale(1) rotate(0deg);
            opacity: 1;
        }
    }
    
    .progress-pill.completed span::before {
        animation: checkmarkDraw 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    /* Smooth transitions for progress bar */
    .cart-progress::after {
        will-change: width;
    }
    
    /* Improve touch targets */
    .progress-pill {
        padding: var(--space-1) 0;
        min-height: 85px;
        cursor: pointer;
    }
    
    /* Hover effect for touch devices */
    .progress-pill:active {
        transform: scale(0.98);
    }
    
    /* Better spacing between steps */
    @media (max-width: 480px) {
        .cart-progress {
            padding: var(--space-4) var(--space-2) var(--space-5);
            gap: 0;
        }
        
        .progress-pill {
            flex: 1;
            min-width: 0;
            padding: 0;
        }
        
        .progress-pill p {
            font-size: 0.7rem;
            padding-top: var(--space-2);
        }
        
        .progress-pill::before {
            width: 48px;
            height: 48px;
        }
        
        .progress-pill span {
            top: 24px;
        }
        
        .cart-progress::before {
            top: 44px;
            left: 24px;
            right: 8px;
            height: 4px;
        }
        
        .cart-progress::after {
            top: 44px;
            left: 24px;
            height: 4px;
        }
        
        .cart-progress[data-step="1"]::after { width: 0%; }
        .cart-progress[data-step="2"]::after { width: calc((100% - 32px) * 0.333); }
        .cart-progress[data-step="3"]::after { width: calc((100% - 32px) * 0.667); }
        .cart-progress[data-step="4"]::after { width: calc(100% - 32px); }
    }
    
    /* Extra small screens */
    @media (max-width: 360px) {
        .cart-progress {
            padding: var(--space-3) var(--space-1) var(--space-4);
        }
        
        .progress-pill::before {
            width: 44px;
            height: 44px;
        }
        
        .progress-pill span {
            top: 22px;
        }
        
        .progress-pill span i {
            font-size: 0.9rem;
        }
        
        .progress-pill p {
            font-size: 0.65rem;
        }
        
        .cart-progress::before {
            top: 42px;
            left: 22px;
            right: 6px;
            height: 3px;
        }
        
        .cart-progress::after {
            top: 42px;
            left: 22px;
            height: 3px;
        }
        
        .cart-progress[data-step="1"]::after { width: 0%; }
        .cart-progress[data-step="2"]::after { width: calc((100% - 28px) * 0.333); }
        .cart-progress[data-step="3"]::after { width: calc((100% - 28px) * 0.667); }
        .cart-progress[data-step="4"]::after { width: calc(100% - 28px); }
    }
    
    /* RTL Support for progress steps */
    .rtl .cart-progress::before {
        left: 12px;
        right: 12px;
    }
    
    .rtl .cart-progress::after {
        left: auto;
        right: 12px;
    }
    
    .rtl .cart-progress[data-step="1"]::after { width: calc((100% / 4) * 0.25 - 12px); }
    .rtl .cart-progress[data-step="2"]::after { width: calc((100% / 4) * 2 - 12px); }
    .rtl .cart-progress[data-step="3"]::after { width: calc((100% / 4) * 3 - 12px); }
    .rtl .cart-progress[data-step="4"]::after { width: calc(100% - 24px); }
    
    @media (max-width: 480px) {
        .rtl .cart-progress::before {
            left: 8px;
            right: 24px;
        }
        
        .rtl .cart-progress::after {
            left: auto;
            right: 24px;
        }
    }
    
    @media (max-width: 360px) {
        .rtl .cart-progress::before {
            left: 6px;
            right: 22px;
        }
        
        .rtl .cart-progress::after {
            left: auto;
            right: 22px;
        }
    }
    
    .cart-hero__metrics {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        margin-top: var(--space-4);
    }
    
    .cart-hero__metrics div {
        font-size: 0.8rem;
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .cart-hero__metrics i {
        font-size: 1rem;
        color: var(--primary, #6366f1);
    }
    
    /* Cart Items Mobile - Improved Design */
    .cart-items-card {
        border-radius: var(--radius-xl);
        margin-bottom: var(--space-5);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }
    
    .cart-items-card .card-body {
        padding: var(--space-4);
    }
    
    .cart-items-card h4 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 2px solid var(--gray-100, #f3f4f6);
    }
    
    .cart-item-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        margin-bottom: var(--space-3);
        background: var(--gray-50, #f9fafb);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .cart-item-card:last-child {
        margin-bottom: 0;
    }
    
    .cart-item__main {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
    }
    
    .cart-item__thumb {
        width: 80px;
        height: 80px;
        min-width: 80px;
        border-radius: var(--radius-lg);
        background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-light, #818cf8));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    }
    
    .cart-item__info {
        flex: 1;
        min-width: 0;
    }
    
    .cart-item__info h6 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: var(--space-1);
        color: var(--gray-900, #111827);
        line-height: 1.3;
    }
    
    .cart-item__info p {
        font-size: 0.85rem;
        color: var(--gray-600, #4b5563);
        margin-bottom: var(--space-2);
    }
    
    .cart-item__info .price {
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary, #6366f1);
    }
    
    /* Quantity Stepper - Improved */
    .cart-item__actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
        padding-top: var(--space-3);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .cart-qty-form {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
    }
    
    .qty-stepper {
        display: flex;
        align-items: center;
        border: 2px solid var(--gray-200, #e5e7eb);
        border-radius: var(--radius-xl);
        padding: 0;
        background: white;
        overflow: hidden;
        flex: 1;
        max-width: 160px;
    }
    
    .qty-stepper .stepper-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 0;
        background: var(--gray-100, #f3f4f6);
        color: var(--gray-700, #374151);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: all var(--transition-base);
        cursor: pointer;
    }
    
    .qty-stepper .stepper-btn:active {
        background: var(--gray-200, #e5e7eb);
        transform: scale(0.95);
    }
    
    .qty-stepper input {
        flex: 1;
        border: none;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        padding: var(--space-2);
        background: white;
        min-width: 0;
    }
    
    .qty-stepper input:focus {
        outline: none;
    }
    
    .cart-item__actions .btn {
        flex: 1;
        padding: var(--space-3) var(--space-4);
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: var(--radius-lg);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }
    
    .cart-item__total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-3);
        background: white;
        border-radius: var(--radius-lg);
        border: 2px solid var(--primary, #6366f1);
    }
    
    .cart-item__total::before {
        content: 'المجموع:';
        font-size: 0.9rem;
        color: var(--gray-600, #4b5563);
        font-weight: 600;
    }
    
    .cart-item__total span {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--primary, #6366f1);
    }
    
    /* Cart Summary Mobile - Sticky Bottom */
    .cart-layout {
        flex-direction: column-reverse;
    }
    
    .cart-summary-card {
        position: fixed;
        bottom: calc(72px + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        z-index: 999;
        margin: 0;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        border: none;
        max-height: 85vh;
        overflow-y: auto;
    }
    
    .cart-summary-card .card-body {
        padding: var(--space-5);
    }
    
    .cart-summary-card h5 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 2px solid var(--gray-200, #e5e7eb);
    }
    
    .cart-summary-card .d-flex {
        padding: var(--space-3) 0;
        font-size: 0.95rem;
        align-items: center;
    }
    
    .cart-summary-card .d-flex span:first-child {
        color: var(--gray-600, #4b5563);
        font-weight: 500;
    }
    
    .cart-summary-card .d-flex strong {
        color: var(--gray-900, #111827);
        font-weight: 700;
        font-size: 1rem;
    }
    
    .cart-summary-card hr {
        margin: var(--space-4) 0;
        border: none;
        border-top: 2px solid var(--gray-200, #e5e7eb);
    }
    
    .cart-summary-card .fs-4 {
        font-size: 1.75rem !important;
        font-weight: 800;
        color: var(--primary, #6366f1);
        letter-spacing: -0.5px;
    }
    
    .cart-summary-card .text-muted.small {
        font-size: 0.8rem;
        line-height: 1.5;
        color: var(--gray-500, #6b7280);
    }
    
    .cart-summary-card .btn-gradient {
        margin-top: var(--space-4);
        padding: var(--space-4) var(--space-5);
        font-size: 1rem;
        font-weight: 700;
        border-radius: var(--radius-xl);
        min-height: 56px;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
        transition: all var(--transition-base);
    }
    
    .cart-summary-card .btn-gradient:active {
        transform: translateY(2px);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }
    
    .promo-code-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .promo-code-form input,
    .promo-code-form button {
        width: 100%;
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        font-size: 0.9rem;
    }
    
    /* Cart Support Card */
    .cart-support-card {
        display: none; /* Hide on mobile to save space */
    }
    
    /* Empty Cart Mobile */
    .cart-empty {
        border-radius: var(--radius-xl);
        padding: var(--space-8) var(--space-4);
        margin: var(--space-4) 0;
    }
    
    .cart-empty i {
        font-size: 4rem;
        margin-bottom: var(--space-4);
    }
    
    .cart-empty h3 {
        font-size: 1.3rem;
        margin-bottom: var(--space-3);
    }
    
    .cart-empty p {
        font-size: 0.95rem;
        margin-bottom: var(--space-5);
    }
    
    .cart-empty .btn {
        padding: var(--space-4) var(--space-6);
        font-size: 1rem;
        border-radius: var(--radius-xl);
        min-height: 52px;
    }
}

/* ==================== Mobile Checkout Page ==================== */
@media (max-width: 1023px) {
    .checkout-page {
        padding: 0;
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }
    
    /* Checkout Hero with Progress */
    .checkout-hero {
        padding: var(--space-5) var(--space-4);
        margin: var(--space-4) 0;
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    }
    
    .checkout-hero__title {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: var(--space-2);
    }
    
    .checkout-hero__subtitle {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: var(--space-4);
    }
    
    /* Use same progress design as cart */
    .checkout-hero .cart-progress {
        margin-top: var(--space-4);
    }
    
    .checkout-panel {
        border-radius: var(--radius-xl);
        margin-bottom: var(--space-4);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
    
    .checkout-panel .panel-heading {
        padding: var(--space-4);
        flex-wrap: wrap;
        border-bottom: 2px solid var(--gray-100, #f3f4f6);
        margin-bottom: var(--space-4);
    }
    
    .panel-step {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 0.85rem;
        font-weight: 700;
        border-radius: var(--radius-lg);
        background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-light, #818cf8));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    }
    
    .checkout-panel .card-body {
        padding: var(--space-4);
    }
    
    .checkout-panel .form-control,
    .checkout-panel .form-select {
        padding: var(--space-3) var(--space-4);
        font-size: 0.95rem;
        border-radius: var(--radius-lg);
    }
    
    .checkout-summary {
        border-radius: var(--radius-xl);
        position: sticky;
        bottom: calc(72px + env(safe-area-inset-bottom));
        z-index: 100;
        margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
}

/* ==================== Mobile Improvements ==================== */
@media (max-width: 1023px) {
    /* Container Adjustments */
    .container,
    .container-xl {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    /* Page Content Spacing */
    .page-content {
        padding-top: calc(72px + var(--space-4));
        padding-bottom: calc(80px + var(--space-8) + env(safe-area-inset-bottom));
    }
    
    /* Alerts Mobile */
    .alert {
        font-size: 0.9rem;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-lg);
    }
    
    /* Forms Mobile */
    .form-control,
    .form-select {
        font-size: 1rem;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-lg);
    }
    
    .form-label {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: var(--space-2);
    }
    
    /* Buttons Mobile */
    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: 0.95rem;
        border-radius: var(--radius-lg);
        font-weight: 600;
    }
    
    .btn-lg {
        padding: var(--space-4) var(--space-6);
        font-size: 1rem;
    }
    
    /* Cards Mobile */
    .card {
        border-radius: var(--radius-xl);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
    
    /* Badges Mobile */
    .badge {
        font-size: 0.75rem;
        padding: var(--space-1) var(--space-3);
    }
    
    /* Typography Mobile */
    h1, .h1 {
        font-size: 1.75rem;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    h3, .h3 {
        font-size: 1.25rem;
    }
    
    h4, .h4 {
        font-size: 1.1rem;
    }
    
    .display-1 {
        font-size: 2.5rem;
    }
    
    .display-2 {
        font-size: 2.25rem;
    }
    
    .display-3 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    .display-5 {
        font-size: 1.5rem;
    }
    
    .display-6 {
        font-size: 1.25rem;
    }
    
    /* Hide desktop-only elements */
    .site-header {
        display: none !important;
    }
    
    .site-footer {
        padding: var(--space-8) 0 var(--space-6);
        font-size: 0.9rem;
    }
    
    .site-footer .row {
        gap: var(--space-6);
    }
    
    /* Support Chat Mobile */
    .floating-support {
        bottom: calc(80px + var(--space-4) + env(safe-area-inset-bottom));
        left: var(--space-4);
        padding: var(--space-3) var(--space-5);
        font-size: 0.9rem;
    }
    
    .support-chat {
        bottom: calc(140px + env(safe-area-inset-bottom));
        left: var(--space-3);
        right: var(--space-3);
        width: auto;
        max-width: none;
    }
}

/* ==================== Tablet Optimizations ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-product-grid,
    .row-cols-md-2,
    .row-cols-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cart-item-card {
        grid-template-columns: 1fr auto;
    }
    
    .cart-summary-card,
    .checkout-summary {
        position: static;
        margin: var(--space-4) 0;
        border-radius: var(--radius-xl);
    }
}

/* ==================== Landscape Mobile Optimizations ==================== */
@media (max-width: 1023px) and (orientation: landscape) {
    .hero {
        padding: var(--space-5) var(--space-4);
    }
    
    .hero__content h1 {
        font-size: 1.5rem;
    }
    
    .mobile-header {
        padding: var(--space-2) var(--space-4);
    }
    
    .mobile-sidebar {
        max-width: 280px;
    }
    
    .page-content {
        padding-top: calc(60px + var(--space-3));
    }
}

/* ==================== Safe Area Support ==================== */
@supports (padding: max(0px)) {
    @media (max-width: 1023px) {
        .mobile-header {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
            padding-top: max(var(--space-3), env(safe-area-inset-top));
        }
        
        .mobile-bottom-nav {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
            padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
        }
        
        .page-content {
            padding-bottom: max(calc(80px + var(--space-8)), calc(80px + env(safe-area-inset-bottom)));
        }
    }
}