/* Mobile cart page fixes */
@media (max-width: 768px) {
    /* Fix for page being offset from the left */
    body .cart_area .container,
    body .cart_area .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: #fff !important;
    }
    
    /* Refined product title - more space for mobile */
    .cart_area .table .media-body a.font-weight-bold {
        margin-bottom: 5px !important;
        display: block !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #333333 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important; /* Allow up to 3 lines */
        -webkit-box-orient: vertical !important;
        width: 100% !important; /* Full width */
        max-width: 100% !important;
    }
    
    /* Add subtle background color */
    body {
        background-color: #fafafa !important;
    }
    
    /* Fix any row margins */
    body .cart_area .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix for overflow issues */
    .cart_inner {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Fix column padding that may cause offsets */
    .cart_area .col-md-4,
    .cart_area .col-md-6,
    .cart_area .col-md-8,
    .cart_area [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure clean wrapper */
    .cart_area .cart_inner > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Elegant checkout containers */
    .compact-checkout {
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    
    .checkout-form-container,
    .cart-summary-container {
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-top: 1px solid #eaeaea !important;
        padding-top: 20px !important;
    }
    
    /* Sophisticated form fields appearance */
    .checkout-form-container input.form-control,
    .checkout-form-container select.form-control {
        height: 42px !important;
        border-radius: 3px !important;
        border-color: #e0e0e0 !important;
        background-color: #fcfcfc !important;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
        padding-left: 12px !important;
    }
    
    /* Form field focus state */
    .checkout-form-container input.form-control:focus,
    .checkout-form-container select.form-control:focus {
        border-color: #c8c8c8 !important;
        box-shadow: none !important;
        background-color: #fff !important;
    }
    
    /* Improve form layout */
    .checkout-form-container .form-group {
        margin-bottom: 15px !important;
    }
    
    /* Fix any horizontal overflow at the root */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }
    
    /* Minimal "Continue shopping" link */
    .cart_inner .table .checkout_btn_inner a.gray_btn {
        padding: 0 10px !important;
    }
    
    /* Refined product variant info */
    .cart_inner .table tbody tr td p.small.text-muted {
        font-size: 12px !important;
        margin: 2px 0 5px 0 !important;
        color: #888 !important;
        font-style: normal !important;
    }
    
    /* Add subtle dividers between sections */
    .cart_area .section-divider {
        height: 5px !important;
        background-color: #f9f9f9 !important;
        margin: 25px -15px 25px !important;
        border: none !important;
    }
    
    /* Clean product rows design - borders only on top except first item */
    .cart_inner .table-responsive > .table > tbody > tr {
        margin-bottom: 0 !important;
        padding: 12px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        border-bottom: none !important; /* Remove bottom border */
        border: none !important;
        border-top: 1px solid #f0f0f0 !important; /* Add top border */
        position: relative !important;
        border-radius: 0% !important;
    }
    
    /* Remove top border from first item */
    .cart_inner .table-responsive > .table > tbody > tr:first-child {
        border-top: none !important;
    }
    
    /* Fix for table layout issues */
    .cart_inner .table-responsive {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: visible !important;
    }
    
    /* Clean table layout for mobile */
    .cart_inner .table {
        border-collapse: separate !important;
        border-spacing: 0 10px !important; /* Add vertical spacing between rows */
        width: 100% !important;
    }
    
    /* Add section headings */
    .cart_inner h4.section-title {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin: 20px 0 15px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* Clean product cells layout */
    .cart_inner .table-responsive > .table > tbody > tr > td {
        padding: 0.5rem 0 0.3rem !important; /* Slightly more vertical padding */
        flex: 1 1 100% !important;
        display: flex !important;
        align-items: center !important;
        border: none !important;
    }
    
    /* Add quantity label */
    .cart_inner .quantity-label {
        font-size: 12px !important;
        color: #777 !important;
        margin-right: 10px !important;
        display: inline-block !important;
        width: auto !important;
    }
    
    /* Make product info and price side by side */
    .cart_inner .table-responsive > .table > tbody > tr > td:nth-child(1) {
        flex: 2 !important;
    }
    
    /* Adjust price column to be next to product info */
    .cart_inner .table-responsive > .table > tbody > tr > td:nth-child(2) {
        flex: 1 !important;
        justify-content: flex-end !important;
    }
    
    /* Improve product layout */
    .cart_area .table .media {
        display: flex !important;
        width: 100% !important;
        align-items: start !important;
    }
    
    /* Refined product image style - more compact to give space to title */
    .cart_area .table .media .text-center {
        flex: 0 0 60px !important;
        margin-right: 10px !important;
    }
    
    .cart_area .table .media .text-center img {
        max-width: 55px !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    /* Refined product info display - more space for title */
    .cart_area .table .media-body {
        flex: 1 !important;
        padding-right: 5px !important;
        min-width: 0 !important; /* Important for text-overflow to work correctly */
    }
    
    /* More elegant product title */
    .cart_area .table .media-body a.font-weight-bold {
        margin-bottom: 6px !important;
        display: block !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        color: #333333 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        padding-right: 5px !important; /* Add padding on the right side */
        width: 100% !important; /* Ensure title uses all available width */
    }
    
    /* Modern price display */
    .cart_inner .table tbody tr td h5 {
        margin: 0 !important;
        text-align: end !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
    }
    
    /* Improve quantity controls */
    .cart_area .form-inline {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        position: relative !important;
        padding-top: 5px !important;
    }
    
    /* Remove separator between product sections */
    .cart_inner .table-responsive > .table > tbody > tr::after {
        content: none !important; /* Remove the separator gradient */
    }
    
    /* Minimalist quantity control buttons */
    .cart_area .form-inline .quantity-left-minus,
    .cart_area .form-inline .quantity-right-plus {
        padding: 0 !important;
        height: 30px !important;
        width: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: transparent !important;
        color: #666 !important;
    }
    
    /* Refined quantity input */
    .cart_area .form-inline .input-number {
        width: 40px !important;
        height: 30px !important;
        text-align: center !important;
        margin: 0 8px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: #333 !important;
    }
    
    /* Refined overall cart spacing */
    .cart_area {
        padding-top: 20px !important;
        padding-bottom: 60px !important; /* Increased to accommodate sticky checkout button */
        background-color: #ffffff !important;
    }
    
    /* Add cart page title and order progress */
    .cart_area h2.cart-title {
        font-size: 18px !important;
        font-weight: 500 !important;
        margin-bottom: 20px !important;
        color: #333 !important;
        letter-spacing: 0.3px !important;
        position: relative !important;
    }
    
    /* Order progress indicators */
    .cart_area .order-progress {
        display: flex !important;
        justify-content: space-between !important;
        margin: 25px 0 30px !important;
        position: relative !important;
    }
    
    .cart_area .order-progress:before {
        content: '' !important;
        position: absolute !important;
        top: 15px !important;
        left: 15% !important;
        right: 15% !important;
        height: 1px !important;
        background-color: #e5e5e5 !important;
        z-index: 1 !important;
    }
    
    .cart_area .progress-step {
        position: relative !important;
        z-index: 2 !important;
        text-align: center !important;
    }
    
    .cart_area .progress-step .step-indicator {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 8px !important;
        color: #888 !important;
        font-weight: 500 !important;
    }
    
    .cart_area .progress-step.active .step-indicator {
        background-color: #337ab7 !important;
        border-color: #337ab7 !important;
        color: #fff !important;
    }
    
    .cart_area .progress-step .step-label {
        font-size: 12px !important;
        color: #888 !important;
    }
    
    .cart_area .progress-step.active .step-label {
        color: #333 !important;
        font-weight: 500 !important;
    }
    
    /* Modern order summary section */
    .cart-summary-container .table {
        margin-bottom: 0 !important;
    }
    
    .cart-summary-container .table th,
    .cart-summary-container .table td {
        padding: 10px 0 !important;
        border-bottom: 1px solid #f6f6f6 !important;
        color: #555 !important;
        font-size: 14px !important;
    }
    
    /* Clean total row design */
    .cart-summary-container .table tr:last-child td {
        font-weight: 500 !important;
        color: #222 !important;
        border-top: 1px solid #e0e0e0 !important;
        padding-top: 15px !important;
        padding-bottom: 5px !important;
        font-size: 15px !important;
    }
    
    /* Elegant button styling */
    .checkout-form-container .button.primary-btn,
    .cart-summary-container .button.primary-btn {
        width: 100% !important;
        border-radius: 3px !important;
        padding: 12px !important;
        font-size: 15px !important;
        margin-top: 15px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        box-shadow: none !important;
    }
    
    /* Subtle and elegant remove button */
    .cart_area .table .media .text-center .btn-link.text-danger {
        padding: 0 !important;
        border: none !important;
        color: red !important;
        background: transparent !important;
        font-size: 11px !important;
        display: inline-block !important;
        margin-top: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }
    
    /* Fix for spacing in alerts and info messages */
    .cart_area .alert {
        margin-top: 5px !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 3px !important;
    }
    
    .cart_area .alert.alert-info {
        background-color: #f8f9fa !important;
        border-color: #e9ecef !important;
        color: #495057 !important;
    }
    
    /* Better mobile spacing for checkout text */
    .cart_area .checkout-form-container .font-bold strong {
        font-size: 15px !important;
        line-height: 1.4 !important;
        display: block !important;
        margin-bottom: 15px !important;
    }
    
    /* Improved form labels */
    .cart_area .checkout-form-container label {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #444 !important;
        margin-bottom: 5px !important;
    }
    
    /* Fix for select2 dropdown in mobile */
    .select2-container--default .select2-selection--single {
        height: 42px !important;
        border-radius: 3px !important;
        border-color: #e0e0e0 !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        padding-left: 12px !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }
    
    /* Improved focus for form fields */
    .form-control:focus {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.15) !important;
        border-color: #337ab7 !important;
    }
    
    /* Fix for stacked quantity controls on very small screens */
    @media (max-width: 375px) {
        .cart_area .form-inline {
            flex-wrap: wrap !important;
        }
        
        .cart_area .quantity-label {
            flex: 0 0 100% !important;
            margin-bottom: 5px !important;
        }
        
        .cart_inner .table tbody tr td h5 {
            font-size: 14px !important;
        }
    }
    
    /* Add a sticky checkout button for better mobile UX */
    @media (max-width: 768px) {
        .mobile-sticky-checkout {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            background: #fff !important;
            padding: 10px 15px !important;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
            z-index: 100 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }
        
        .mobile-sticky-checkout .total-price {
            font-weight: bold !important;
            font-size: 16px !important;
            color: #333 !important;
        }
        
        .mobile-sticky-checkout .checkout-btn {
            background-color: #337ab7 !important;
            color: #fff !important;
            border: none !important;
            padding: 8px 20px !important;
            border-radius: 3px !important;
            font-weight: 500 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            font-size: 14px !important;
        }
        
        body {
            padding-bottom: 60px !important; /* Add space for the fixed checkout button */
        }
    }
    
    /* Mobile sticky total */
    @media (max-width: 768px) {
        .mobile-sticky-total {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            background: #fff !important;
            padding: 12px 15px !important;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
            z-index: 100 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: transform 0.3s ease !important;
            border-top: 1px solid #eee !important;
        }
        
        .mobile-sticky-total.d-none {
            transform: translateY(100%) !important;
        }
        
        .mobile-sticky-total .sticky-total-details {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            width: 100% !important;
        }
        
        .mobile-sticky-total .total-amount {
            font-weight: bold !important;
            font-size: 16px !important;
            color: #333 !important;
            margin-bottom: 4px !important;
        }
        
        .mobile-sticky-total #sticky-total {
            font-size: 18px !important;
            color: #337ab7 !important;
            margin-left: 5px !important;
        }
        
        .mobile-sticky-total .shipping-status {
            font-size: 13px !important;
            margin-top: 2px !important;
        }
        
        .mobile-sticky-total .free-shipping-badge {
            color: #28a745 !important;
            font-weight: 500 !important;
        }
        
        .mobile-sticky-total .shipping-note {
            color: #6c757d !important;
            font-weight: normal !important;
        }
        
        .mobile-sticky-total i {
            margin-right: 4px !important;
        }
        
        body {
            padding-bottom: 60px !important; /* Add space for the fixed elements */
        }
    }
}