/* VUSHOP Mobile Responsive Enhancements */

/* ===== GLOBAL MOBILE STYLES ===== */
@media (max-width: 768px) {
    /* Ensure proper box sizing */
    * {
        box-sizing: border-box;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Container adjustments */
    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Row margin fixes */
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    /* Column padding */
    [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ===== HOME PAGE MOBILE ===== */
@media (max-width: 768px) {
    /* Banner section */
    .banners-outer {
        margin-bottom: 20px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        overflow: hidden;
        min-height: 0;
    }

    .banners.carousel {
        display: block !important;
        visibility: visible !important;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .banners .carousel-inner {
        display: block !important;
        width: 100%;
        padding: 20px 0;
        min-height: 0;
    }

    .banners .carousel-inner .item {
        display: none;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .banners .carousel-inner .item.active {
        display: block !important;
        min-height: 0;
    }

    /* Banner images - ensure they display properly on mobile */
    .banners .carousel-inner .item img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block !important;
        min-height: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Only hide images with empty or missing src attributes */
    .banners .carousel-inner .item img[src=""],
    .banners .carousel-inner .item img:not([src]) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .banners .carousel-inner .item video {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* Module animations */
    .module {
        padding: 15px 0;
    }
}

/* ===== FEATURED PRODUCTS MOBILE ===== */
@media (max-width: 768px) {
    /* Featured products container */
    .featured-products {
        padding: 30px 0;
        overflow: hidden;
    }

    .featured-prod-title {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 25px;
        color: var(--vu-aubergine, #22185e);
        padding: 0 20px;
    }

    /* Wrapper for scroll buttons */
    .feature-wrapper {
        position: relative;
        width: 100%;
        padding: 0 10px;
    }

    /* Hide scroll buttons on mobile */
    .scroll-btn {
        display: none;
    }

    /* Outer container */
    .feature-outer {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 10px 0;
        margin: 0 auto;
        max-width: 100%;
    }

    .feature-outer::-webkit-scrollbar {
        display: none;
    }

    /* Inner flex container */
    .feature-inner {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        padding: 0 20px;
        width: auto;
        justify-content: flex-start;
    }

    /* Individual product card - ONE CARD WIDTH */
    .proddiv {
        flex: 0 0 auto;
        width: calc(100vw - 80px);
        max-width: 350px;
        min-width: 280px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        padding: 20px;
        text-align: center;
        transition: all 0.2s;
    }

    .proddiv:active {
        transform: scale(0.98);
    }

    /* Product inner wrapper */
    .proddivinner {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    /* Product image */
    .prodimg {
        height: 180px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .prodimg img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Product name and price */
    .prodname {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex: 1;
    }

    .prodname .name {
        display: block;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.4;
        color: var(--vu-aubergine, #22185e);
        min-height: 45px;
        text-align: center;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 12px;
    }

    /* Price with line */
    .prodname .price {
        position: relative;
        font-weight: 700;
        font-size: 18px;
        color: var(--vu-aubergine, #22185e);
        padding-top: 12px;
        margin-top: auto;
        width: 100%;
    }

    .prodname .price::before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--vu-aubergine, #22185e);
        margin-bottom: 10px;
        border-radius: 1px;
    }

    /* Scroll hint - SWIPE TO SEE MORE */
    .featured-products::after {
        content: "← Swipe to see more →";
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: var(--vu-aubergine, #22185e);
        margin-top: 20px;
        padding: 12px;
        background: rgba(91, 194, 231, 0.1);
        border-radius: 8px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* ===== CATEGORY PAGE MOBILE ===== */
@media (max-width: 768px) {
    /* Breadcrumb row */
    .breadcrum-border {
        flex-direction: column;
        padding: 10px 15px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .breadcrumb {
        margin: 10px 0;
        font-size: 14px;
        padding-left: 0;
    }

    /* Hide filter dropdown on mobile - it doesn't work properly */
    .filter-dropdown-wrapper {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Also hide the filter dropdown column entirely */
    .categorypage .breadcrum-border .col-md-5 {
        display: none !important;
    }

    /* Breadcrumb column takes full width */
    .categorypage .breadcrum-border .col-md-7 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Category accordion - make it collapsible on mobile */
    .cat-accordion {
        margin-bottom: 20px;
    }

    /* Product grid in categories - CENTER ALIGNED */
    .categories-replace {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Fix categories container - remove desktop margins/padding */
    .categories {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
        gap: 0 !important;
        justify-content: center !important;
    }

    /* Fix catbody - remove left margin that pushes content off screen */
    .catbody {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        margin-left: 0 !important;
        padding: 10px 0 !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    /* Product cards - 2 columns centered */
    .proddiv {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        margin: 0 !important;
    }

    .categories-replace .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
    }

    /* Ensure category page column takes full width on mobile */
    .categorypage .col-lg-9,
    .categorypage .col-md-8 {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove padding from vu-main-content container on category pages */
    .categorypage .vu-main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure nested container in Categories.cshtml doesn't add extra padding */
    .categories-replace .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Category menu mobile toggle */
@media (max-width: 767px) {
    .cat-accordion {
        display: none !important;
    }

    /* Mobile category toggle button removed - was non-functional */
    /* Users navigate categories through the main hamburger menu instead */
}

/* ===== PRODUCT DETAIL PAGE MOBILE ===== */
@media (max-width: 768px) {
    /* Product images */
    .prod_det_col1 {
        margin-bottom: 20px;
    }
    
    .prod_det_img {
        text-align: center;
    }
    
    .prod_det_img img#imgMain {
        max-width: 100%;
        height: auto;
        max-height: 400px;
    }
    
    /* Product thumbnails */
    .prod_det_views {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }
    
    .product-thumb {
        flex: 0 0 auto;
    }
    
    .product-thumb img {
        width: 60px;
        height: 60px;
    }
    
    /* Product info */
    .PageHeading {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .productdetailsprices {
        font-size: 18px;
    }
    
    /* Add to cart section */
    .prod-addtocart {
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-top: 20px;
    }
    
    /* Quantity controls */
    .quantity-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .quantity-controls input {
        width: 60px;
        text-align: center;
        font-size: 16px;
    }
}

/* ===== CHECKOUT/CART PAGE MOBILE ===== */
@media (max-width: 768px) {
    /* Cart items table - convert to cards */
    .checkout table.table {
        display: block;
    }
    
    .checkout table.table thead {
        display: none;
    }
    
    .checkout table.table tbody {
        display: block;
    }
    
    .checkout table.table tr {
        display: block;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 8px;
        background: #fff;
    }
    
    .checkout table.table td {
        display: block;
        text-align: left;
        padding: 5px 0;
        border: none;
    }
    
    .checkout table.table td:before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 100px;
    }
    
    /* Cart totals */
    .cart-totals {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-top: 20px;
    }
    
    /* Checkout accordion */
    .zsaccordion .panel-heading {
        padding: 15px;
        font-size: 16px;
    }

    .zsaccordion .panel-body {
        padding: 15px;
    }

    /* Prevent accordion sections from overlapping on mobile */
    .zsaccordion .panel-collapse {
        transition: height 0.3s ease, opacity 0.2s ease;
        overflow: hidden !important;
        height: 0 !important;
        opacity: 0;
        display: none !important;
    }

    .zsaccordion .panel-collapse.in {
        overflow: visible !important;
        height: auto !important;
        opacity: 1;
        display: block !important;
    }

    /* Ensure only one section shows at a time on mobile */
    .zsaccordion {
        position: relative;
    }

    #collapse1, #collapse2, #collapse3 {
        clear: both;
        width: 100%;
        position: relative;
    }

    /* Ensure collapsed panels are completely hidden */
    #collapse1:not(.in),
    #collapse2:not(.in),
    #collapse3:not(.in) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* Ensure active panel is fully visible */
    #collapse1.in,
    #collapse2.in,
    #collapse3.in {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    /* Hide all form fields in collapsed panels completely */
    #collapse1:not(.in) .form-group,
    #collapse1:not(.in) .form-control,
    #collapse1:not(.in) label,
    #collapse1:not(.in) input,
    #collapse1:not(.in) select,
    #collapse2:not(.in) .form-group,
    #collapse2:not(.in) .form-control,
    #collapse2:not(.in) label,
    #collapse2:not(.in) input,
    #collapse2:not(.in) select,
    #collapse3:not(.in) .form-group,
    #collapse3:not(.in) .form-control,
    #collapse3:not(.in) label,
    #collapse3:not(.in) input,
    #collapse3:not(.in) select {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* Ensure panel body content is hidden when collapsed */
    .zsaccordion .panel-collapse:not(.in) .panel-body {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Show panel body when expanded */
    .zsaccordion .panel-collapse.in .panel-body {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        padding: 15px !important;
    }

    /* Form fields */
    .checkout .form-group {
        margin-bottom: 15px;
    }

    .checkout .form-control {
        font-size: 16px;
    }

    /* Fix doubled/overlapping fields in checkout billing info */
    .checkoutaddress .row {
        margin-bottom: 0;
        display: block;
        width: 100%;
        clear: both;
    }

    .checkoutaddress .col-md-4 {
        width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px !important;
        float: none !important;
        display: block !important;
        clear: both;
    }

    .checkoutaddress .col-md-4 label {
        display: block !important;
        margin-bottom: 8px !important;
        margin-top: 5px !important;
        font-weight: 600;
        clear: both;
    }

    .checkoutaddress .col-md-4 input,
    .checkoutaddress .col-md-4 select {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px !important;
        clear: both;
    }

    /* Ensure no overlapping in billing/shipping sections */
    #UpdateShippingDetailsForm .row,
    #UpdateBillingDetailsForm .row {
        display: block !important;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        clear: both;
    }

    #UpdateShippingDetailsForm .col-md-4,
    #UpdateBillingDetailsForm .col-md-4 {
        width: 100% !important;
        float: none !important;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px !important;
        display: block !important;
        clear: both;
    }

    #UpdateShippingDetailsForm .col-md-4 label,
    #UpdateBillingDetailsForm .col-md-4 label {
        display: block !important;
        margin-bottom: 8px !important;
        margin-top: 5px !important;
        clear: both;
    }

    #UpdateShippingDetailsForm .col-md-4 input,
    #UpdateShippingDetailsForm .col-md-4 select,
    #UpdateBillingDetailsForm .col-md-4 input,
    #UpdateBillingDetailsForm .col-md-4 select {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px !important;
        clear: both;
    }

    /* Fix checkbox alignment - keep checkboxes on the left with proper spacing */
    .checkoutaddress .checkbox,
    #UpdateShippingDetailsForm .checkbox,
    #UpdateBillingDetailsForm .checkbox {
        display: block !important;
        width: 100%;
        margin-bottom: 15px !important;
        margin-top: 10px !important;
        clear: both;
    }

    .checkoutaddress .checkbox label,
    #UpdateShippingDetailsForm .checkbox label,
    #UpdateBillingDetailsForm .checkbox label {
        display: flex !important;
        align-items: center;
        width: 100%;
        margin-bottom: 0 !important;
        font-weight: normal !important;
        padding-left: 0 !important;
    }

    .checkoutaddress .checkbox input[type="checkbox"],
    #UpdateShippingDetailsForm .checkbox input[type="checkbox"],
    #UpdateBillingDetailsForm .checkbox input[type="checkbox"] {
        width: auto !important;
        min-width: 20px !important;
        height: 20px;
        margin-right: 10px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        position: relative !important;
        display: inline-block !important;
    }

    /* Add space between promo code field and apply button */
    .promocode {
        padding: 15px;
        margin-top: 20px;
    }

    .promocode input[type="text"] {
        margin-bottom: 10px !important;
        margin-right: 0 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .promocode input[type="button"] {
        float: none !important;
        width: 100% !important;
        margin-top: 10px;
    }

    /* Buttons */
    .checkout .btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        margin-bottom: 10px;
    }
}

/* ===== LOGIN/REGISTER PAGES MOBILE ===== */
@media (max-width: 768px) {
    /* Login form */
    .login-container,
    .register-container {
        padding: 20px;
    }
    
    .login-form,
    .register-form {
        background: #fff;
        padding: 30px 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .login-form h2,
    .register-form h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .login-form .form-group,
    .register-form .form-group {
        margin-bottom: 20px;
    }
    
    .login-form .btn,
    .register-form .btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
    }
    
    /* Registration/Create Account specific */
    .registrationcontainer {
        padding: 15px;
        max-width: 100%;
    }
    
    .registrationcontainer .page-header h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .registrationcontainer .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .registrationcontainer [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .registrationcontainer .form-group {
        margin-bottom: 15px;
    }
    
    .registrationcontainer .form-control {
        font-size: 16px;
        padding: 10px;
    }
    
    /* Campus dropdown */
    .vu-dropdown-wrapper {
        width: 100%;
    }
    
    #OtherCampusDiv {
        margin-top: 10px;
        padding: 10px;
    }
    
    /* Password rules */
    .rego-container {
        margin-top: 15px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 4px;
    }
    
    .rego-rule {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    /* Terms checkbox */
    .registrationcontainer .checkbox {
        margin: 20px 0;
    }
    
    .registrationcontainer .checkbox label {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
    }
    
    .registrationcontainer .checkbox input[type="checkbox"] {
        margin-right: 8px;
        margin-top: 3px;
    }
    
    /* Create account button */
    #regoCreateAccount {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        margin-top: 10px;
    }
    
    /* Help text */
    .help-text {
        font-size: 12px;
        margin-top: 3px;
    }
}

/* ===== MY ACCOUNT PAGES MOBILE ===== */
@media (max-width: 768px) {
    /* Add buffer space between header and My Account text */
    .vu-my-account {
        padding-top: 60px !important;
    }

    .vu-page-title {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        font-size: 24px !important;
    }

    /* Account navigation */
    .account-nav {
        margin-bottom: 20px;
    }

    .account-nav .nav-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        margin-bottom: 20px;
    }

    .account-nav .nav-tabs li {
        flex: 0 0 auto;
    }

    /* Order history table - convert to cards for portrait view */
    .orders-history table,
    .vu-address-table {
        font-size: 14px;
        width: 100%;
        border: none;
    }

    .orders-history .table-responsive {
        border: none;
        overflow: visible;
    }

    /* Convert order table to card layout for mobile portrait */
    .vu-address-table thead {
        display: none;
    }

    .vu-address-table tbody {
        display: block;
        width: 100%;
    }

    .vu-address-table tr {
        display: block;
        margin-bottom: 20px;
        padding: 20px;
        background: #fff;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        position: relative;
    }

    .vu-address-table td {
        display: block;
        text-align: left;
        padding: 10px 0 !important;
        border: none;
        font-size: 14px !important;
        line-height: 1.6 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Add labels before each data cell */
    .vu-address-table td:before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--vu-aubergine, #22185e);
        display: block;
        margin-bottom: 5px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Hide labels for cells with empty data-label (action buttons) */
    .vu-address-table td[data-label=""]:before {
        display: none !important;
        content: none !important;
    }

    /* Style action icons */
    .vu-address-table td .fa {
        margin-right: 15px;
        color: var(--vu-aubergine, #22185e);
    }

    .vu-address-table td .fa:hover {
        opacity: 0.7;
    }

    /* Action buttons row - edit and delete icons */
    .vu-address-table td[data-label=""] {
        display: inline-flex !important;
        gap: 15px;
        align-items: center;
        padding: 10px 0 !important;
        border: none !important;
    }

    /* Order history specific styles */
    .vu-address-table .vu-link {
        color: var(--vu-blue, #5BC2E7);
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
    }

    .vu-address-table .vu-link:hover {
        text-decoration: underline;
    }

    /* Status badge styling in card view */
    .vu-address-table .vu-status-badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Make Order ID more prominent in card view */
    .vu-address-table td[data-label="Order ID"] {
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* Highlight total in order history cards */
    .vu-address-table td[data-label="Total"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--vu-aubergine, #22185e) !important;
    }

    /* Ensure line breaks in address cells display properly */
    .vu-address-table td br {
        display: block !important;
        content: "" !important;
        margin: 3px 0 !important;
        line-height: 0 !important;
    }

    /* Make table-responsive containers not interfere with card layout */
    .table-responsive {
        overflow: visible !important;
        width: 100% !important;
        border: none !important;
    }

    /* Address cards */
    .address-card {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    /* ===== ADDRESS FORMS (Add/Edit) MOBILE ===== */
    /* Edit Address Form and Add Address Form - ensure proper alignment */
    #EditAddressForm,
    #AddAddressForm {
        width: 100% !important;
        padding: 0 !important;
    }

    #EditAddressForm .row,
    #AddAddressForm .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #EditAddressForm .col-md-6,
    #EditAddressForm .col-md-12,
    #AddAddressForm .col-md-6,
    #AddAddressForm .col-md-12 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 20px !important;
    }

    #EditAddressForm .form-group,
    #AddAddressForm .form-group {
        width: 100% !important;
        margin-bottom: 15px !important;
        text-align: left !important;
    }

    #EditAddressForm .control-label,
    #EditAddressForm label,
    #AddAddressForm .control-label,
    #AddAddressForm label {
        display: inline-block !important;
        text-align: left !important;
        width: auto !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: var(--vu-aubergine, #22185e) !important;
    }

    /* Ensure asterisk appears inline with label text */
    #EditAddressForm .form-group,
    #AddAddressForm .form-group {
        display: block !important;
    }

    #EditAddressForm .form-group > *,
    #AddAddressForm .form-group > * {
        display: inline-block;
    }

    #EditAddressForm .form-group > .form-control,
    #EditAddressForm .form-group > .text-danger,
    #EditAddressForm .form-group > .field-validation-error,
    #EditAddressForm .form-group > div,
    #AddAddressForm .form-group > .form-control,
    #AddAddressForm .form-group > .text-danger,
    #AddAddressForm .form-group > .field-validation-error,
    #AddAddressForm .form-group > div {
        display: block !important;
        width: 100% !important;
    }

    #EditAddressForm .form-control,
    #AddAddressForm .form-control {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        font-size: 16px !important;
        padding: 12px 15px !important;
        border: 2px solid #e0e0e0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    #EditAddressForm select.form-control,
    #AddAddressForm select.form-control {
        font-size: 16px !important;
        appearance: auto !important;
        -webkit-appearance: menulist !important;
    }

    #EditAddressForm .checkbox,
    #AddAddressForm .checkbox {
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        margin: 15px 0 !important;
    }

    #EditAddressForm .checkbox label,
    #AddAddressForm .checkbox label {
        display: flex !important;
        align-items: center !important;
        font-weight: normal !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }

    #EditAddressForm .checkbox input[type="checkbox"],
    #AddAddressForm .checkbox input[type="checkbox"] {
        width: auto !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    #EditAddressForm .checkbox label span,
    #AddAddressForm .checkbox label span {
        margin-left: 25px !important;
        font-size: 14px !important;
        font-weight: normal !important;
    }

    #EditAddressForm .btn,
    #AddAddressForm .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        margin-top: 10px !important;
        min-height: 48px !important;
    }

    /* PageHeading in modal */
    #ModalFormBody .PageHeading {
        font-size: 20px !important;
        margin-bottom: 20px !important;
        text-align: left !important;
        color: var(--vu-aubergine, #22185e) !important;
    }

    /* Validation messages */
    #EditAddressForm .text-danger,
    #AddAddressForm .text-danger,
    #EditAddressForm .field-validation-error,
    #AddAddressForm .field-validation-error {
        display: block !important;
        text-align: left !important;
        margin-top: 5px !important;
        font-size: 13px !important;
    }
}

/* ===== ORDER APPROVAL PAGES MOBILE ===== */
@media (max-width: 768px) {
    /* Approval table - convert to cards */
    .vu-approval-table {
        display: block;
        border: none;
    }
    
    .vu-approval-table thead {
        display: none;
    }
    
    .vu-approval-table tbody {
        display: block;
    }
    
    .vu-approval-table tr {
        display: block;
        border: 1px solid #ddd;
        margin-bottom: 15px;
        padding: 15px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .vu-approval-table td {
        display: block;
        text-align: left;
        padding: 8px 0;
        border: none;
        position: relative;
    }
    
    /* Add labels for mobile - Pending Approvals */
    #tblPendingApprovals .vu-approval-table td:nth-child(1):before { content: "View: "; }
    #tblPendingApprovals .vu-approval-table td:nth-child(2):before { content: "Order ID: "; }
    #tblPendingApprovals .vu-approval-table td:nth-child(3):before { content: "Order Date: "; }
    #tblPendingApprovals .vu-approval-table td:nth-child(4):before { content: "Customer: "; }
    #tblPendingApprovals .vu-approval-table td:nth-child(5):before { content: "Total: "; }
    #tblPendingApprovals .vu-approval-table td:nth-child(6):before { content: ""; }
    #tblPendingApprovals .vu-approval-table td:nth-child(7):before { content: ""; }
    
    /* Add labels for mobile - Approval History */
    #tblApprovalHistory .vu-approval-table td:nth-child(1):before { content: "View: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(2):before { content: "Order ID: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(3):before { content: "Order Date: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(4):before { content: "Customer: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(5):before { content: "Total: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(6):before { content: "Status: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(7):before { content: "Approver: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(8):before { content: "Approval Date: "; }
    #tblApprovalHistory .vu-approval-table td:nth-child(9):before { content: "Comments: "; }
    
    .vu-approval-table td:before {
        font-weight: bold;
        display: inline-block;
        margin-right: 5px;
    }
    
    /* Style the order total */
    .vu-approval-table td:nth-child(5) {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
    
    /* Action buttons for Pending Approvals */
    #tblPendingApprovals .vu-approval-table td:nth-child(6),
    #tblPendingApprovals .vu-approval-table td:nth-child(7) {
        padding: 5px 0;
        display: inline-block;
        width: 48%;
    }
    
    #tblPendingApprovals .vu-approval-table td:nth-child(6) {
        margin-right: 4%;
    }
    
    /* Status labels in Approval History */
    #tblApprovalHistory .vu-approval-table .label {
        display: inline-block;
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 4px;
    }
    
    .vu-approval-table .btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
    
    /* View link */
    .vu-approval-table .vu-link {
        display: inline-block;
        padding: 8px 16px;
        background: #f0f0f0;
        border-radius: 4px;
        text-decoration: none;
        color: #333;
    }
    
    /* Pagination */
    .vu-pagination {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
    }
    
    .vu-pagination .pagination {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    
    .vu-pagination .pagination li {
        margin: 2px;
    }
    
    .vu-pagination .pagination a,
    .vu-pagination .pagination span {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 768px) {
    footer.bg-black {
        padding: 40px 0 20px 0;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
    }

    footer.bg-black .container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }

    footer.bg-black .row {
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer.bg-black .col-md-3,
    footer.bg-black .col-md-6,
    footer.bg-black .col-md-12 {
        width: 100%;
        max-width: 500px;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 35px;
        text-align: center;
    }

    footer.bg-black .col-md-12 {
        margin-bottom: 0;
        max-width: 100%;
    }

    /* Footer section spacing */
    footer.bg-black > div:not(:last-child) {
        margin-bottom: 20px;
    }

    /* Footer headings */
    footer .fw-bold,
    footer b {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #fff;
        display: block;
        letter-spacing: 0.3px;
        text-align: center;
    }

    /* Footer links - centered with tighter spacing */
    footer a {
        color: #fff !important;
        text-decoration: none !important;
        font-size: 14px;
        line-height: 1.8;
        transition: opacity 0.2s;
     /*   display: block;*/
        padding: 2px 0;
        text-align: center;
    }

    footer a:hover,
    footer a:active {
        opacity: 0.8;
        text-decoration: none !important;
    }

    /* Footer text - centered with tighter spacing */
    footer div:not(.social-icons):not(.app-links) {
        color: #fff;
        line-height: 1.5;
        margin-bottom: 5px;
        text-align: center;
    }

    /* Social icons section - centered */
    footer .social-icons {
        display: flex;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 12px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    footer .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        font-size: 22px;
        color: #fff !important;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        transition: all 0.25s;
    }

    footer .social-icons a:hover,
    footer .social-icons a:active {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-3px);
    }

    /* App links section - centered */
    footer .app-links {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 15px;
        align-items: center;
    }

    footer .app-links a {
        display: block;
        padding: 0;
        line-height: 1;
    }

    footer .app-links img {
        height: 42px;
        width: auto;
        max-width: 145px;
        display: block;
    }

    /* Aboriginal flag section - centered */
    footer .ack-flag {
        height: 22px;
        margin-right: 10px;
        vertical-align: middle;
        display: inline-block;
    }

    /* Acknowledgement section - centered */
    footer .col-md-6 {
        margin-bottom: 30px;
        text-align: center;
    }

    footer .col-md-6 .fw-bold {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        line-height: 1.4;
        text-align: center;
    }

    /* Footer copyright with tighter spacing */
    .vu-footer-copyright {
        color: #bbb;
        text-align: center;
        font-size: 11px;
        line-height: 1.5;
        margin-top: 25px;
        margin-bottom: 10px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .vu-footer-copyright a {
        color: #fff !important;
        text-decoration: underline !important;
        font-size: 11px;
        display: inline;
        padding: 0;
        line-height: inherit;
    }

    /* My account link in footer */
    footer .vu-myaccount {
        color: #fff !important;
        font-weight: 700;
        font-size: 15px;
    }

    /* Hide horizontal rule on mobile */
    footer hr {
        display: none;
    }

    /* Mobile-only break for spacing */
    .mobile-only {
        display: block;
        height: 8px;
    }

    /* Ensure proper spacing between footer sections */
    footer .mb-3 {
        margin-bottom: 35px !important;
    }

    /* VU App text section with tighter spacing */
    footer div[style*="padding-bottom:15px"] {
        padding-bottom: 10px !important;
        line-height: 1.5;
        text-align: center;
    }
}

/* ===== UTILITY CLASSES ===== */
@media (max-width: 768px) {
    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Text alignment */
    .text-center-mobile {
        text-align: center !important;
    }
    
    /* Spacing helpers */
    .mt-mobile-3 {
        margin-top: 1rem !important;
    }
    
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }
    
    .p-mobile-2 {
        padding: 0.5rem !important;
    }
    
    /* Full width on mobile */
    .w-100-mobile {
        width: 100% !important;
    }
}

/* ===== TOUCH-FRIENDLY ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Increase tap targets */
    a, button, .btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .clickable-item {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    /* Prevent accidental taps */
    .action-buttons > * {
        margin: 5px;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Reduce animations on mobile */
    *, *::before, *::after {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Optimize images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Lazy load below fold */
    .lazy-mobile {
        content-visibility: auto;
    }
}
@media (max-width: 768px) {
    .registrationcontainer {
        padding: 0 16px !important;
    }

        .registrationcontainer .row {
            flex-direction: column !important;
        }

        .registrationcontainer .form-group {
            width: 100% !important;
            margin-bottom: 12px;
            flex: 1 1 100% !important;
        }

        .registrationcontainer .form-control {
            width: 100% !important;
        }

        .registrationcontainer label.control-label,
        .registrationcontainer select,
        .registrationcontainer .form-control {
            font-size: 13px !important;
        }

        .registrationcontainer .btn-primary {
            font-size: 14px !important;
        }
        
        /* Order Confirmation Approval Message - Mobile */
        .vu-order-confirm-box {
            padding: 20px 15px;
            margin: 0 -15px 20px;
            border-radius: 0;
        }
        
        .vu-approval-message {
            padding: 15px;
            margin: 0 -5px 20px;
        }
        
        .vu-approval-message p {
            font-size: 14px;
            line-height: 1.6;
        }
        
        .vu-approval-message strong {
            font-size: 15px;
        }
        
        /* Header alignment fixes for mobile */
        .vu-header-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .vu-header-search {
            flex: 1;
            max-width: calc(100% - 140px);
            min-width: 0;
        }

        .vu-search-input,
        #ProductSearchInput.vu-search-input {
            width: 100%;
            height: 38px;
            font-size: 14px;
            padding: 8px 12px;
        }

        .vu-header-login .vu-login-btn {
            height: 38px;
            white-space: nowrap;
            flex-shrink: 0;
            padding: 8px 14px;
            font-size: 13px;
            min-width: auto;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .vu-header-login .vu-login-btn i {
            font-size: 14px;
        }

        .vu-header-cart {
            height: 38px;
            flex-shrink: 0;
        }

        .vu-header-cart .vu-cart-link {
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
}

/* ===== HEADER STICKY & MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Make header sticky on mobile */
    .vu-header-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        padding: 8px 0;
        background: var(--vu-blue, #5BC2E7) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Add padding to body to prevent content from hiding under sticky header - two-line header */
    body {
        padding-top: 100px;
    }

    .vu-header-top .container {
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
        max-width: 100%;
    }

    /* Logo - MOBILE LINE 1 - LEFT ALIGNED, full width */
    .vu-header-brand {
        flex-shrink: 0;
        margin-right: 0;
        order: 1;
        flex-basis: 100%;
        width: 100%;
        text-align: left;
        padding: 8px 0;
    }

    .vu-header-brand .vu-logo {
        max-height: 40px;
        width: auto;
    }

    /* Mobile header actions container - MOBILE LINE 2 - full width with internal layout */
    .vu-header-actions {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
        flex-basis: 100%;
        width: 100%;
        padding: 8px 0;
    }

    /* Search box - MOBILE LINE 2 CENTER - between login/cart and menu */
    .vu-header-search {
        display: flex !important;
        align-items: center;
        position: relative;
        order: 2;
        flex: 1 1 auto;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        justify-content: center;
    }

    /* Login - LINE 2 LEFT side, first icon */
    .vu-header-login {
        order: 1;
    }

    /* Cart - LINE 2 LEFT side, second icon (same order as login to group together) */
    .vu-header-cart {
        order: 1;
    }

    /* Hamburger - LINE 2 RIGHT side */
    .mobile-menu-toggle {
        order: 3;
    }

    /* Mobile search input styling - 100% width and centered */
    .vu-header-search .vu-search-input {
        width: 100%;
        max-width: 100%;
        height: 42px;
        font-size: 15px;
        padding: 12px 16px;
        border: none;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.95);
        color: #333;
        text-align: center;
        box-sizing: border-box;
    }

    .vu-header-search .vu-search-input::placeholder {
        color: #999;
        font-size: 15px;
        text-align: center;
    }

    .vu-header-search .vu-search-input:focus {
        outline: none;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
        text-align: left;
    }

    .vu-header-search .vu-search-btn {
        display: none;
    }

    .vu-header-search .vu-search-loading {
        display: none;
    }

    /* Cart styling - icon only on first line */
    .vu-header-cart {
        display: flex;
        align-items: center;
        height: auto;
        flex-shrink: 0;
        padding: 0;
    }

    .vu-header-cart .vu-cart-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 8px;
        transition: all 0.2s ease;
    }

    .vu-header-cart .vu-cart-link:hover,
    .vu-header-cart .vu-cart-link:active {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 6px;
    }

    .vu-header-cart .vu-cart-link i {
        color: var(--vu-aubergine, #22185e);
        font-size: 20px;
    }

    .vu-header-cart .vu-cart-badge {
        display: none;
    }

    /* Mobile Login Button - icon only on first line */
    .vu-header-login {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .vu-header-login .vu-login-btn {
        background: transparent;
        border: none;
        color: var(--vu-aubergine, #22185e) !important;
        padding: 8px;
        border-radius: 0;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        white-space: nowrap;
        transition: all 0.2s ease;
        min-height: 44px;
        min-width: 44px;
        width: 44px;
        height: 44px;
    }

    .vu-header-login .vu-login-btn:hover,
    .vu-header-login .vu-login-btn:active {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        color: var(--vu-aubergine, #22185e) !important;
        text-decoration: none;
    }

    .vu-header-login .vu-login-btn i {
        font-size: 18px;
        display: inline-block;
        margin: 0;
    }

    /* Hide text on mobile for login button - icon only */
    .vu-header-login .vu-login-btn span {
        display: none !important;
    }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .vu-mobile-search-wrapper {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }
}

/* ===== LOGIN PAGE MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .vu-login-wrapper {
        padding: 20px 0;
    }

    .vu-login-wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .vu-login-wrapper .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .login-form-col,
    .login-info-col {
        margin-bottom: 30px;
    }

    .login-form-inner {
        padding: 30px 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .login-title {
        font-size: 22px;
        margin-bottom: 25px;
        line-height: 1.3;
    }

    .login-form-inner .form-group {
        margin-bottom: 20px;
    }

    .login-form-inner .vu-login-input {
        font-size: 16px;
        padding: 12px 15px;
        height: auto;
        min-height: 48px;
    }

    .password-group {
        position: relative;
    }

    .password-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Make login button full-width and touch-friendly */
    .form-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .form-row .vu-btn-melon {
        width: 100%;
        padding: 14px 22px;
        font-size: 16px;
        min-height: 48px;
        display: block;
        text-align: center;
    }

    .form-row .form-check {
        margin: 0;
        width: 100%;
    }

    .form-row .form-check-label {
        font-size: 15px;
    }

    .form-row .forgot-link {
        font-size: 15px;
        margin: 0;
        display: block;
        text-align: center;
        padding: 10px;
    }

    /* Login info box */
    .login-info-box {
        padding: 25px 20px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .login-info-box p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    /* Create account button - make it full width and touch-friendly */
    .vu-login-btn-create {
        width: 100%;
        padding: 14px 28px;
        font-size: 16px;
        min-height: 48px;
        display: block;
        text-align: center;
        margin-top: 0;
    }
}

/* ===== REGISTER PAGE MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .register-container {
        padding: 20px 10px;
    }

    .register-form {
        padding: 30px 20px;
    }

    .register-form h2 {
        font-size: 22px;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    .register-form .form-group {
        margin-bottom: 18px;
    }

    .register-form .form-control {
        font-size: 16px;
        padding: 12px 15px;
        min-height: 48px;
    }

    .register-form .btn {
        width: 100%;
        padding: 14px;
        font-size: 16px;
        min-height: 48px;
    }

    .register-form select.form-control {
        font-size: 16px;
    }
}

/* ===== CART/CHECKOUT PAGES MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Cart grid mobile */
    .cart-grid-container {
        padding: 15px 0;
    }

    .cart-item {
        border: 1px solid #ddd;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        background: #fff;
    }

    .cart-item-image img {
        max-width: 100px;
        height: auto;
    }

    .cart-item-details {
        padding: 10px 0;
    }

    .cart-item-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .cart-item-price {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 10px 0;
    }

    .cart-item-quantity {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px 0;
    }

    .cart-item-quantity input {
        width: 60px;
        text-align: center;
        font-size: 16px;
        padding: 8px;
        min-height: 44px;
    }

    .cart-item-remove {
        margin-top: 10px;
    }

    .cart-item-remove .btn {
        min-height: 44px;
        padding: 10px 20px;
    }

    /* Checkout steps */
    .checkout-steps {
        margin-bottom: 20px;
    }

    .checkout-step {
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        background: #fff;
    }

    .checkout-step-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    /* Address forms on mobile */
    .address-form .form-group {
        margin-bottom: 15px;
    }

    .address-form .form-control {
        font-size: 16px;
        padding: 12px 15px;
        min-height: 48px;
    }

    .address-form .btn {
        width: 100%;
        min-height: 48px;
        padding: 14px;
        font-size: 16px;
        margin-top: 10px;
    }

    /* Payment method selection */
    .payment-methods {
        margin-bottom: 20px;
    }

    .payment-method-option {
        padding: 15px;
        border: 2px solid #ddd;
        border-radius: 8px;
        margin-bottom: 10px;
        cursor: pointer;
        min-height: 60px;
        display: flex;
        align-items: center;
    }

    .payment-method-option input[type="radio"] {
        margin-right: 10px;
        min-width: 20px;
        min-height: 20px;
    }

    .payment-method-option label {
        font-size: 16px;
        margin-bottom: 0;
        cursor: pointer;
        flex: 1;
    }
}

/* ===== MY ACCOUNT PAGES MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .myaccount-container {
        padding: 15px 0;
    }

    .account-section {
        margin-bottom: 20px;
        padding: 20px 15px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .account-section-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .account-info-row {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .account-info-label {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .account-info-value {
        font-size: 15px;
    }

    /* Personal information form */
    .personal-info-form .form-group {
        margin-bottom: 15px;
    }

    .personal-info-form .form-control {
        font-size: 16px;
        padding: 12px 15px;
        min-height: 48px;
    }

    .personal-info-form .btn {
        width: 100%;
        min-height: 48px;
        padding: 14px;
        font-size: 16px;
    }

    /* Address management */
    .address-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .address-card {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        background: #fff;
    }

    .address-card-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .address-card-content {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .address-card-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .address-card-actions .btn {
        flex: 1;
        min-width: 120px;
        min-height: 44px;
        font-size: 14px;
    }
}

/* ===== ORDER PAGES MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .order-container {
        padding: 15px 0;
    }

    .order-complete-message {
        padding: 20px 15px;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 20px;
        text-align: center;
    }

    .order-complete-title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .order-number {
        font-size: 20px;
        font-weight: bold;
        margin: 15px 0;
    }

    /* Order details modal - mobile */
    .vu-order-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .vu-order-modal-content-inner {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .vu-order-modal-header {
        padding: 8px 0 !important;
        margin-bottom: 10px !important;
        background: var(--vu-aubergine, #22185e) !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: block !important;
        visibility: visible !important;
    }

    .vu-order-modal-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        display: block !important;
        visibility: visible !important;
    }

    .vu-order-meta-grid {
        display: block !important;
        margin-bottom: 15px !important;
    }

    /* Compact layout - label and value on same line where possible */
    .vu-order-meta-grid > div {
        margin-bottom: 8px !important;
    }

    .vu-meta-label {
        font-weight: 700 !important;
        font-size: 12px !important;
        color: var(--vu-aubergine, #22185e) !important;
        margin-bottom: 2px !important;
        display: block !important;
        visibility: visible !important;
    }

    .vu-meta-value {
        font-size: 13px !important;
        line-height: 1.5 !important;
        white-space: pre-line !important;
        word-wrap: break-word !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 0 !important;
        color: #333333 !important;
        visibility: visible !important;
    }

    /* Remove border from last item */
    .vu-order-meta-grid > div:last-child .vu-meta-value {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Ensure addresses in order modal display line breaks properly */
    .vu-meta-value br {
        display: block !important;
        content: "" !important;
        margin: 3px 0 !important;
    }

    /* Order items section - compact spacing */
    .vu-order-items-section {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    /* Order items table in modal */
    .vu-order-items-table {
        font-size: 11px !important;
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 0 !important;
    }

    .vu-order-items-table thead {
        display: table-header-group !important;
    }

    .vu-order-items-table tbody {
        display: table-row-group !important;
    }

    .vu-order-items-table tr {
        display: table-row !important;
    }

    .vu-order-items-table th,
    .vu-order-items-table td {
        display: table-cell !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
        color: #333333 !important;
        background: #ffffff !important;
    }

    .vu-order-items-table th {
        font-weight: 700 !important;
        background: #f8f8f8 !important;
        color: #000000 !important;
    }

    .vu-order-items-table tbody tr {
        background: #ffffff !important;
    }

    .vu-order-items-table tbody tr:nth-child(even) {
        background: #f9f9f9 !important;
    }

    /* Order totals - more compact */
    .vu-order-totals {
        margin-top: 15px !important;
        font-size: 13px !important;
        padding-top: 10px !important;
        border-top: 2px solid #e0e0e0 !important;
    }

    .vu-order-total-row {
        padding: 6px 0 !important;
        font-size: 13px !important;
        display: flex !important;
        justify-content: space-between !important;
        line-height: 1.4 !important;
        color: #333333 !important;
    }

    .vu-order-total-row span,
    .vu-order-total-row strong {
        color: #333333 !important;
    }

    .vu-order-total-final {
        font-size: 15px !important;
        font-weight: 700 !important;
        padding-top: 8px !important;
        margin-top: 6px !important;
        border-top: 1px solid #e0e0e0 !important;
        color: #000000 !important;
    }

    .vu-order-total-final strong {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    /* Order details */
    .order-details {
        background: #fff;
        padding: 20px 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .order-details-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .order-details-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    .order-details-label {
        font-weight: 600;
    }

    .order-details-value {
        text-align: right;
    }

    /* Order tracking */
    .order-tracking {
        padding: 20px 15px;
    }

    .tracking-status {
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .tracking-step {
        padding: 15px 10px;
        border-left: 3px solid #ddd;
        margin-bottom: 10px;
        position: relative;
    }

    .tracking-step.active {
        border-left-color: #22185e;
    }

    .tracking-step-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .tracking-step-date {
        font-size: 14px;
        color: #666;
    }
}

/* ===== PRODUCT DETAILS PAGE MOBILE ===== */
@media (max-width: 768px) {
    /* Product details container */
    .container.proddetails {
        padding: 0;
    }

    .proddetails .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Product image section - col-sm-6 */
    .prod_det_col1 {
        padding: 15px;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Main product image */
    .prod_det_img {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
        position: relative;
    }

    .prod_det_img img#imgMain {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        border: 1px solid #ddd;
        padding: 10px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Zoom control */
/*    .zoom-ctrl {
        position: absolute;
        bottom: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }*/

    /* Product thumbnails */
    .prod_det_views {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .prod_det_views::-webkit-scrollbar {
        display: none;
    }

    .product-thumb {
        flex: 0 0 auto;
        width: 80px;
        height: 80px;
    }

    .product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        border: 2px solid #ddd;
        padding: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .product-thumb img.selected {
        border-color: var(--vu-aubergine, #22185e);
        box-shadow: 0 0 0 2px rgba(34, 24, 94, 0.2);
    }

    .product-thumb img:active {
        transform: scale(0.95);
    }

    /* Product info section - col-sm-6 */
    .proddetails .col-sm-6:last-child {
        padding: 0 15px 20px;
        width: 100%;
    }

    /* Product heading */
    .PageHeading {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--vu-aubergine, #22185e);
        margin-bottom: 15px;
    }

    /* Product subheading and prices */
    .SubHeading {
        font-size: 18px;
        font-weight: 600;
        color: var(--vu-aubergine, #22185e);
    }

    .productdetailsprices {
        margin-bottom: 15px;
    }

    .productdetailsprices .SubHeading {
        font-size: 22px;
        font-weight: 700;
    }

    .prodsale {
        font-size: 22px;
        font-weight: 700;
        color: var(--vu-melon, #ff6b6b);
    }

    /* Product description */
    .prod-description {
        font-size: 15px;
        line-height: 1.7;
        color: #333;
        margin-bottom: 20px;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 8px;
    }

    .prod-description p {
        margin-bottom: 10px;
    }

    .prod-description ul,
    .prod-description ol {
        padding-left: 20px;
        margin-bottom: 10px;
    }

    .prod-description li {
        margin-bottom: 5px;
    }

    /* Pricing table - keep table format but make scrollable */
    .table-bordered {
        border: 1px solid #ddd;
        margin-bottom: 15px;
    }

    .zstable {
        font-size: 14px;
        margin-bottom: 15px;
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .zstable thead {
        display: table-header-group;
    }

    .zstable thead th {
        background: var(--vu-aubergine, #22185e);
        color: #fff;
        padding: 12px 10px;
        font-size: 14px;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    .zstable tbody {
        display: table-row-group;
    }

    .zstable tbody tr {
        display: table-row;
    }

    .zstable tbody td {
        display: table-cell;
        padding: 12px 10px;
        font-size: 14px;
        border: 1px solid #ddd;
        text-align: center;
        vertical-align: middle;
    }

    .smalltext {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Wrapper for horizontal scroll if table is too wide */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 15px;
    }

    /* Variation table - mobile 3-column layout */
    #PriceRange {
        border: none;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
        display: table;
        border-collapse: separate;
        border-spacing: 0;
    }

    #PriceRange thead {
        display: table-header-group;
    }

    #PriceRange thead tr {
        display: table-row;
        background: var(--vu-aubergine, #22185e);
    }

    #PriceRange thead th {
        display: table-cell;
        padding: 12px 8px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        border: none;
        box-sizing: border-box;
        vertical-align: middle;
    }

    #PriceRange thead th:first-child {
        text-align: left;
        border-radius: 12px 0 0 0;
        width: 40%;
    }

    #PriceRange thead th:nth-child(2) {
        text-align: center;
        width: 20%;
    }

    #PriceRange thead th:last-child {
        text-align: center;
        border-radius: 0 12px 0 0;
        width: 40%;
    }

    #PriceRange tbody {
        display: table-row-group;
    }

    #PriceRange tbody tr {
        display: table-row;
        border: 2px solid var(--vu-aubergine, #22185e);
    }

    #PriceRange tbody tr:last-child td:first-child {
        border-radius: 0 0 0 12px;
    }

    #PriceRange tbody tr:last-child td:last-child {
        border-radius: 0 0 12px 0;
    }

    #PriceRange tbody td {
        display: table-cell;
        border: none;
        font-size: 14px;
        padding: 12px 8px;
        vertical-align: middle;
        border-left: 2px solid var(--vu-aubergine, #22185e);
        border-bottom: 2px solid var(--vu-aubergine, #22185e);
        background: #fff;
    }

    #PriceRange tbody td:first-child {
        text-align: left;
        font-weight: 500;
        color: #333;
        border-left: 2px solid var(--vu-aubergine, #22185e);
    }

    #PriceRange tbody td:nth-child(2) {
        text-align: center;
        font-weight: 400;
    }

    #PriceRange tbody td:last-child {
        text-align: center;
        background: transparent;
        border-right: 2px solid var(--vu-aubergine, #22185e);
    }

    #PriceRange input[type="number"] {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 8px;
        min-height: 44px;
        border: 2px solid #ddd;
        border-radius: 8px;
        text-align: center;
        background: #fff;
        box-sizing: border-box;
    }

    #PriceRange input[type="number"]:focus {
        border-color: var(--vu-aubergine, #22185e);
        outline: none;
        box-shadow: 0 0 0 3px rgba(34, 24, 94, 0.1);
    }

    /* Out of stock styling */
    #PriceRange .out-of-stock {
        color: #dc3545;
        font-weight: 700;
        font-size: 14px;
    }

    /* Form controls */
    .form-control {
        font-size: 16px !important;
        padding: 10px 12px;
        min-height: 44px;
        border-radius: 6px;
    }

    select.form-control {
        font-size: 16px !important;
    }

    .ProductQuantity {
        font-size: 16px !important;
        text-align: center;
    }

    /* Add to cart section */
    .prod_det_submit {
        margin-top: 20px;
        clear: both;
    }

    .prod_det_submit .float-left-sm {
        float: none;
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }

    .btnAddToCart,
    .vu-btn-melon,
    .zsbtn {
        width: 100%;
        min-height: 50px;
        font-size: 17px;
        font-weight: 700;
        padding: 14px 20px;
        border-radius: 25px;
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }

    .btnCustomise {
        background: var(--vu-aubergine, #22185e);
        color: #fff;
        border: none;
    }

    /* Divider for simple add to cart */
    .divAddToCart {
        margin-top: 20px;
    }

    .divAddToCart .float-left-margintop {
        float: none;
        width: 100%;
        margin-bottom: 15px;
        display: block;
    }

    .divAddToCart input[type="number"] {
        width: 100% !important;
        max-width: none !important;
        font-size: 16px;
        text-align: center;
    }

    .divAddToCart select {
        width: 100%;
        margin-bottom: 15px;
    }

    /* Points slider for rewards */
    #prod-det-slider {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .slider-table {
        width: 100%;
        font-size: 14px;
    }

    .slider-table th {
        padding: 10px 5px;
        background: var(--vu-aubergine, #22185e);
        color: #fff;
        text-align: center;
    }

    .slider-table td {
        padding: 10px 5px;
        vertical-align: middle;
    }

    .slider-table input {
        width: 100%;
        font-size: 16px;
        padding: 8px;
        min-height: 44px;
    }

    /* Group buy section */
    .gbsection {
        background: rgba(91, 194, 231, 0.1);
        padding: 20px 15px;
        border-radius: 12px;
        margin: 20px 0;
    }

    .cdtitle {
        font-size: 16px;
        font-weight: 700;
        color: var(--vu-aubergine, #22185e);
        margin-bottom: 10px;
    }

    .groupbuytext {
        font-size: 18px;
        font-weight: 700;
        color: var(--vu-melon, #ff6b6b);
    }

    /* Extra details section */
    .prod_det_extra {
        padding: 20px 15px;
        margin-top: 20px;
        background: #f9f9f9;
        border-radius: 8px;
    }

    .prod_det_extra h3,
    .prod_det_extra h4 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--vu-aubergine, #22185e);
    }

    .prod_det_extra p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    /* Related products */
    .related-prod-title {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        margin: 40px auto 25px auto;
        background-color: var(--vu-purple-light, #625a87);
        color: #fff;
        border-radius: 30px;
        padding: 16px 20px;
        line-height: 1.3;
        width: fit-content;
        max-width: 90%;
        display: block;
    }

    .related-products {
        padding: 0 0 20px;
        overflow: visible;
        border: none;
    }

    .related-products .row {
        margin: 0;
    }

    .related-products .col-sm-10 {
        width: 100%;
        padding: 0;
    }

    .related-prod-div {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 15px;
        justify-content: flex-start;
    }

    .related-prod-div::-webkit-scrollbar {
        display: none;
    }

    .related-prod-div .proddiv {
        flex: 0 0 auto;
        width: calc(100vw - 50px);
        max-width: calc(100vw - 50px);
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        padding: 18px;
        text-align: center;
        transition: box-shadow 0.18s;
    }

    .related-prod-div .proddiv:active {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .related-prod-div .proddiv .proddivinner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .related-prod-div .proddiv .prodimg {
        height: 160px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }

    .related-prod-div .proddiv .prodimg img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .related-prod-div .proddiv .prodname {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .related-prod-div .proddiv .prodname .name {
        display: block;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.4;
        color: var(--vu-purple, #22185e);
        min-height: 45px;
        text-align: center;
        overflow: hidden;
    }

    .related-prod-div .proddiv .prodname .price {
        position: relative;
        font-weight: 700;
        font-size: 18px;
        color: var(--vu-purple, #22185e);
        padding-top: 12px;
        margin-top: 0;
        width: 100%;
    }

    .related-prod-div .proddiv .prodname .price::before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--vu-purple, #22185e);
        margin-bottom: 10px;
        border-radius: 1px;
    }

    /* Out of stock message */
    .out-of-stock {
        color: #dc3545;
        font-weight: 700;
        font-size: 15px;
    }

    /* Countdown timer */
    .prod-countdown {
        margin-bottom: 15px;
        padding: 15px;
        background: rgba(255, 107, 107, 0.1);
        border-radius: 8px;
        text-align: center;
    }

    /* Size chart image */
    .prod_det_submit img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Breadcrumb */
    .proddetails .breadcrumb {
        background: transparent;
        padding: 10px 15px;
        margin-bottom: 15px;
        font-size: 13px;
    }

    .proddetails .breadcrumb a {
        color: var(--vu-aubergine, #22185e);
    }
}

/* ===== MODAL MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure modal is visible and properly sized on mobile */
    .modal {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-dialog,
    .modal-dialog.modal-lg {
        margin: 10px auto !important;
        max-width: calc(100% - 20px) !important;
        width: calc(100% - 20px) !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
    }

    .modal-content {
        border-radius: 12px;
        max-height: calc(100vh - 20px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-header {
        padding: 15px;
        flex-shrink: 0;
    }

    .modal-title {
        font-size: 18px;
    }

    .modal-body {
        padding: 15px;
        font-size: 14px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto;
        max-height: calc(100vh - 150px);
    }

    .modal-footer {
        padding: 15px;
        flex-shrink: 0;
    }

    .modal-footer .btn {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 15px;
    }

    /* Specific styling for Order Details Modal */
    #ModalShowOrder .modal-dialog {
        margin: 10px auto !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    #ModalShowOrder .modal-content {
        max-height: calc(100vh - 20px) !important;
        overflow: hidden !important;
    }

    #ModalShowOrder .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 100px) !important;
        padding: 12px !important;
    }

    #ModalShowOrder .modal-header {
        padding: 10px 12px !important;
        border-bottom: 1px solid #e0e0e0;
        min-height: auto !important;
    }

    #ModalShowOrder .modal-header h4,
    #ModalShowOrder .modal-header .modal-title {
        font-size: 16px !important;
        margin: 0 !important;
    }

    #ModalShowOrder .modal-header .close {
        font-size: 32px !important;
        padding: 0 !important;
        margin: -5px 0 0 0 !important;
        opacity: 0.8 !important;
    }

    #ModalShowOrder .modal-footer {
        padding: 12px 15px !important;
        border-top: 1px solid #e0e0e0;
    }

    #ModalShowOrder .modal-footer .btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* Ensure order details content is visible and scrollable */
    #ModalShowOrderBody {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Hide Loading Modal on Mobile */
    #ModalLoading {
        display: none !important;
    }

    /* Hide backdrop on mobile too */
    body.modal-open #ModalLoading + .modal-backdrop {
        display: none !important;
    }
}

/* ===== MOBILE SIDE MENU FIX - HOME NOT HIDDEN UNDER HEADER ===== */
@media (max-width: 768px) {
    /* Fix left side menu so Home link is not hidden under sticky header */
    #mainNavMobile nav {
        padding-top: 110px !important;
        top: 0 !important;
    }

    #mainNavMobile .main-menu {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Force Home link (2nd li after close button) to be visible */
    #mainNavMobile .main-menu li {
        display: list-item !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Specifically target the Home link */
    #mainNavMobile .main-menu li:nth-child(2) {
        display: list-item !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    #mainNavMobile .main-menu li:nth-child(2) a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
    }
}

/* ===== NAVIGATION MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .vu-header-nav {
        border: none;
        margin-bottom: 20px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        min-height: 50px;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 999;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0;
    }

    /* Ensure white navbar is visible */
    nav.navbar.vu-header-nav {
        display: block !important;
    }

    .vu-header-nav .container {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Move hamburger menu button to header */
    .navbar-header {
        display: none;
    }

    /* Hamburger in header - icon only on first line */
    .vu-header-actions .mobile-menu-toggle {
        background: transparent;
        border: none;
        color: var(--vu-aubergine, #22185e) !important;
        padding: 8px;
        margin: 0;
        min-height: 44px;
        min-width: 44px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .vu-header-actions .mobile-menu-toggle:hover,
    .vu-header-actions .mobile-menu-toggle:active {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 6px;
    }

    .vu-header-actions .mobile-menu-toggle span {
        display: block;
        width: 22px;
        height: 3px;
        background-color: var(--vu-aubergine, #22185e);
        border-radius: 2px;
        transition: all 0.2s;
    }

    /* Collapsed menu - ensure it works properly on mobile */
    .navbar-collapse {
        border: none;
        box-shadow: none;
        border-top: 1px solid #eee;
        margin-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #fff;
        width: 100%;
        position: relative;
        z-index: 1000;
    }

    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    /* Ensure categories collapse is visible when open */
    #vu-categories-collapse {
        visibility: visible !important;
        position: relative;
        width: 100%;
        background: #fff;
        clear: both;
    }

    #vu-categories-collapse.collapse {
        display: none;
    }

    #vu-categories-collapse.in,
    #vu-categories-collapse.collapse.in {
        display: block !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto;
        visibility: visible !important;
        padding-top: 55px;
        margin-bottom: 20px;
    }

    /* Make sure Home link shows first in the list */
    #vu-categories-collapse .navbar-nav > li:first-child {
        display: block !important;
        order: -1;
    }

    #vu-categories-collapse .navbar-nav > li:first-child > a {
        display: flex !important;
        visibility: visible !important;
    }

    .navbar-nav {
        margin: 0;
        padding: 0;
    }

    .navbar-nav > li {
        border-bottom: 1px solid #f0f0f0;
    }

    .navbar-nav > li:last-child {
        border-bottom: none;
    }

    /* Ensure Home link and all nav items are visible on mobile */
    .navbar-nav {
        display: block !important;
    }

    .navbar-nav > li {
        display: block !important;
        width: 100%;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .navbar-nav > li:first-child {
        display: block !important;
        visibility: visible !important;
    }

    .navbar-nav > li > a {
        padding: 16px 20px;
        font-size: 16px;
        min-height: 54px;
        display: flex !important;
        visibility: visible !important;
        align-items: center;
        color: var(--vu-aubergine, #22185e);
        font-weight: 500;
        transition: all 0.2s;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        background-color: rgba(91, 194, 231, 0.08);
        color: var(--vu-aubergine, #22185e);
        padding-left: 25px;
    }

    .navbar-nav > li.active > a {
        background-color: rgba(91, 194, 231, 0.12);
        color: var(--vu-aubergine, #22185e);
        font-weight: 600;
    }

    /* Push content down to account for sticky header + nav */
    body {
        padding-top: 62px !important;
    }
}

/* ===== FORM ENHANCEMENTS FOR MOBILE ===== */
@media (max-width: 768px) {
    /* All form controls */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 12px 15px;
        min-height: 48px;
        border-radius: 4px;
    }

    textarea {
        min-height: 120px;
    }

    /* All buttons */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 15px;
        border-radius: 22px;
        cursor: pointer;
    }

    /* Checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
        cursor: pointer;
    }

    /* Labels */
    label {
        font-size: 15px;
        margin-bottom: 8px;
        display: block;
    }

    /* Validation messages */
    .text-danger,
    .field-validation-error {
        font-size: 13px;
        margin-top: 5px;
        display: block;
    }
}

/* ===== TYPOGRAPHY MOBILE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    h1 {
        font-size: 26px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 18px;
    }

    h3 {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    h4 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    a {
        font-size: inherit;
    }
}

/* ===== TABLE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    /* Generic table to card conversion */
    table:not(.no-mobile-transform) {
        border: none;
    }

    table:not(.no-mobile-transform) thead {
        display: none;
    }

    table:not(.no-mobile-transform) tbody {
        display: block;
    }

    table:not(.no-mobile-transform) tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background: #fff;
    }

    table:not(.no-mobile-transform) td {
        display: block;
        text-align: left;
        padding: 8px 0;
        border: none;
        font-size: 14px;
    }

    table:not(.no-mobile-transform) td:before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        margin-right: 10px;
    }
}