@media (max-width: 576px) {
    .op-catalogue-body {
        display: flex !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    .op-catalogue-cats,
    .op-catalogue-products {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .op-catalogue-cat-list {
        width: 100% !important;
        max-width: 100vw !important;
    }
    .op-catalogue-cat-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
    }
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
@media (max-width: 576px) {
    .products-grid,
    .op-catalogue-product-grid {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    .product-item,
    .op-catalogue-product {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    .op-catalogue-cat-wrapper,
    .op-catalogue-inline-products {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .op-catalogue-product-info,
    .mb-2.d-flex,
    .op-catalogue-actions {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        display: flex !important;
    }
    .op-catalogue-product-img-container {
        width: 48px !important;
        height: 48px !important;
        min-width: 40px !important;
        max-width: 48px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }
    .op-catalogue-product-img {
        max-width: 100% !important;
        max-height: 48px !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
    }
    .products-grid button,
    .op-catalogue-product button,
    .op-catalogue-actions button {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100vw !important;
    }
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
@media (max-width: 576px) {
    .single-order-form .products-grid {
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
    .single-order-form .product-item,
    .single-order-form .product-card {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .single-order-form .product-item button,
    .single-order-form .product-card button {
        width: 100% !important;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.single-order-form {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.products-grid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
/* --- Mobile Customer Search Modal --- */
#op-mobile-customer-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.32);
    transition: background 0.2s;
}
#op-mobile-customer-sheet {
    position: absolute;
    bottom: 0; left: 0;
    width: 100vw;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: op-slideup 0.22s cubic-bezier(.4,1.4,.6,1);
}
#op-mobile-customer-input {
    font-size: 1.1em;
    padding: 0.7em 1em;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Ensure admin/portal date inputs match admin WC styling */
#op-complete-date-picker, #op-set-processing-date-picker {
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #23282d;
    box-sizing: border-box;
    min-width: 180px;
}

/* Admin controls - clearer disclosure and help text */
.op-admin-toggle { display:flex; align-items:center; gap:8px; }
.op-admin-toggle .op-toggle-icon { font-size:14px; transition: transform 0.15s ease; }
.op-admin-controls-body { padding:10px; border:1px solid var(--op-border); border-radius:6px; background:#fafafa; }
.op-admin-help { padding:6px 0; }

/* Ensure the controls match the search area width and spacing */
.op-complete-controls { width:100%; margin-bottom:1rem; display:block; }
.op-admin-controls-header { padding:6px 8px; }
.op-admin-controls-help { margin-left:8px; }

@media (max-width: 768px) {
    .op-admin-controls-help { display:none !important; }
}

#op-mobile-customer-results {
    overflow-y: auto;
    max-height: 60vh;
    padding-bottom: 12px;
}
#op-mobile-customer-close {
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    color: #888;
    padding: 0 0.2em;
    cursor: pointer;
}
/* --- Mobile Search Modal --- */
#op-mobile-search-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.32);
    transition: background 0.2s;
}
#op-mobile-search-sheet {
    position: absolute;
    bottom: 0; left: 0;
    width: 100vw;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: op-slideup 0.22s cubic-bezier(.4,1.4,.6,1);
}
#op-mobile-search-input {
    font-size: 1.1em;
    padding: 0.7em 1em;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
#op-mobile-search-results {
    overflow-y: auto;
    max-height: 60vh;
    padding-bottom: 12px;
}
#op-mobile-search-close {
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    color: #888;
    padding: 0 0.2em;
    cursor: pointer;
}

/* --- Mobile Datepicker Modal Styles --- */
#op-mobile-date-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.32);
    transition: background 0.2s;
}
#op-mobile-date-sheet {
    position: absolute;
    bottom: auto; left: 0;
    width: 100vw;
    background: #fff;
    border-radius: 18px; /* round all corners */
    box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: op-slideup 0.22s cubic-bezier(.4,1.4,.6,1);
    overflow: hidden; /* ensure inner datepicker is contained */
}
#op-mobile-date-sheet button {
    background: none; border: none; color: #0073aa; padding: 6px 8px; font-size: 0.95em; cursor:pointer;
}
#op-mobile-datepicker {
    padding: 12px;
    overflow: auto;
    max-height: 76vh;
    display: flex;
    justify-content: center; /* center the inline datepicker */
    align-items: flex-start;
}

/* Inline datepicker inside mobile sheet */
#op-mobile-datepicker .ui-datepicker,
#op-mobile-datepicker .ui-datepicker-inline {
    background: #fff !important;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 420px; /* sensible max width so it isn't full-bleed */
    position: static !important; /* avoid absolute positioning */
}

#op-mobile-datepicker .ui-datepicker table {
    width: 100%;
}

@keyframes op-slideup {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.op-bubble-hint {
    position: absolute;
    left: 48px;
    top: 8px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    animation: op-bounce 1.4s infinite;
}

@media (min-width: 576px) and (max-width: 991px) {
    .op-bubble-hint {
        left: 120px;
    }
}
:root {
    --op-primary: #0073aa;
    --op-accent: #00a859;
    --op-bg: #ffffff;
    --op-muted: #6c757d;
    --op-border: #e9ecef;
    --op-radius: 8px;
    --op-gap: 12px;
}

/* Customer Details Expandable Section */
#customer-details-toggle {
    user-select: none;
    transition: background-color 0.15s ease;
}

#customer-details-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#customer-details-toggle-btn {
    transition: transform 0.2s ease;
}

#customer-details-toggle-btn:hover {
    text-decoration: none;
}

#customer-details-content {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes op-bounce {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.op-bubble-hint {
    animation: op-bounce 1.4s infinite;
}

/* Mobile menu hint */
.mobile-menu-hint {
    animation: pulse 2s infinite;
}

/* Mobile Product Line Layout - Reorganize for better spacing */
.op-product-line {
    position: relative !important;
}

/* Desktop/default layout */
.op-product-line-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Ordering Portal - Admin complete controls styling */
.op-complete-controls {
  background: #fff;
  border: 1px solid var(--op-border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.op-complete-controls .op-admin-controls-header {
  padding: 4px 0;
}
.op-complete-controls .op-admin-header-sub { color: #6c757d; font-size:12px; }
.op-complete-controls .op-admin-controls-body { padding: 8px 0 0 0; border: none; background: transparent; }
.op-complete-controls .op-admin-help { margin-bottom:8px; color: #6c757d; font-size:12px; }
.op-complete-controls .btn { height: 36px; line-height: 1; }
@media (max-width: 576px) {
  .op-complete-controls { border-radius: 6px; padding: 8px; }
  .op-complete-controls .op-admin-controls-body { display: block; }
  .op-complete-controls input[type="text"] { min-width: 140px; width: 100%; box-sizing: border-box; }
}

.op-product-notes-wrapper {
    display: block;
    width: 100%;
}

@media (max-width: 576px) {
    .op-product-line {
        display: flex;
        flex-direction: column;
        gap: 0.5rem !important;
    }
    
    .op-product-line-controls {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 0;
    }
    
    /* Search field takes full width */
    .op-product-line-controls > div:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 1;
    }
    
    /* Qty - smaller, not full width */
    .op-product-line-controls .op-product-qty {
        width: auto !important;
        min-width: 60px !important;
        order: 2;
        flex: 0 0 auto;
    }
    
    /* Remove button */
    .op-product-line-controls .d-flex {
        flex: 0 0 auto !important;
        order: 3;
    }
    
    /* Price info - side by side with qty */
    .op-product-line-controls .op-product-price {
        width: auto !important;
        min-width: 80px !important;
        order: 4;
        flex: 1;
    }
    
    .op-product-line-controls .op-product-subtotal {
        width: auto !important;
        min-width: 80px !important;
        order: 5;
        flex: 1;
    }
    
    /* Notes field - full width on its own line */
    .op-product-notes-wrapper {
        width: 100% !important;
        order: 6;
    }
    
    .op-product-notes {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem !important;
    }
}


/* Make product rows more compact */
.product-row .card {
    margin-bottom: 10px;
    border-radius: var(--op-radius);
}
.product-row .card-body {
    padding: 10px 12px;
}

.product-row .form-label {
    font-size: 0.9rem;
}
.product-search-result.highlighted,
.customer-search-result.highlighted {
    background: linear-gradient(90deg, rgba(0,115,170,0.04), transparent);
    border-left: 3px solid var(--op-primary);
}
.product-search-result.highlighted .text-muted,
.customer-search-result.highlighted .text-muted {
    color: var(--op-muted);
}

.product-search-input:focus,
.product-quantity:focus,
#add-product-row-btn:focus {
    box-shadow: 0 0 0 3px rgba(0,115,170,0.08);
    border-color: var(--op-primary);
}
@media (min-width: 992px) {
    .products-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}
.cart-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--op-border);
    border-radius: calc(var(--op-radius) - 2px);
    background: var(--op-bg);
}
.cart-item:last-child {
    margin-bottom: 0;
}

.cart-item-title {
    font-weight: 600;
}
.card-header {
    padding: 0.75rem 1rem !important;
}

.card-header h5 {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}
#cart-total {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-item {
        flex-direction: row;
    }
}
.product-search-input,
#customer-search {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
}
.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
}
.product-quantity {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.5rem !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
}
.product-search-results,
.customer-search-results {
    font-size: 0.875rem !important;
}
.product-search-result,
.customer-search-result {
    padding: 8px 10px;
    border-radius: 6px;
}
.customer-search-results {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
    transition: top 0.2s, bottom 0.2s, left 0.2s, width 0.2s;
    box-sizing: border-box;
    max-height: 240px;
    overflow-y: auto;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100px !important;
    display: none !important;
    background: #fff !important;
    border: 2px solid #ffc107 !important;
    z-index: 99999 !important;
}
.op-debug-banner {
    background: #ffc107 !important;
    color: #222 !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 4px 8px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid #222 !important;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    margin-left: calc(-1 * (100vw - 100%) / 2); /* Center grid if parent is not full width */
}

.product-card {
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    padding: 10px;
    background: var(--op-bg);
    display:flex;
    gap:12px;
    align-items:center;
}
.product-card:hover {
    box-shadow: 0 6px 18px rgba(11,22,33,0.04);
}
.product-image img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
}
.product-title {
    font-weight: 700;
    margin-bottom: 6px;
}
.product-price {
    color: var(--op-accent);
    font-weight: 700;
}
/* Price display when discounts applied: show canonical (crossed) and discounted price */
.op-product-price-canonical {
    color: rgba(108,117,125,0.6); /* lighter muted color */
    font-size: 0.8rem; /* slightly smaller */
    margin-right: 4px;
}
.op-product-price-canonical del {
    color: rgba(108,117,125,0.5);
    text-decoration: line-through;
    text-decoration-thickness: 1px; /* thinner strike */
    opacity: 0.85;
}
.op-product-price-discounted {
    color: var(--op-accent);
    font-weight: 700;
}

/* Admin price editing - make price clickable */
body.logged-in.admin-bar .op-product-price {
    cursor: pointer !important;
    transition: background-color 0.2s ease;
    border-radius: 3px;
    padding: 2px 4px;
    user-select: none;
}
body.logged-in.admin-bar .op-product-price:hover {
    background-color: rgba(0, 123, 255, 0.1);
}
body.logged-in.admin-bar .op-product-price * {
    cursor: pointer !important;
}
.product-description {
    color: var(--op-muted);
    font-size: 0.95rem;
}
.cart-item-image {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}
.cart-item-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:6px;
}
.cart-item-image .cart-thumb,
.cart-item-image img.cart-thumb {
    width:100%;
    height:100%;
    object-fit:cover;
}
/* ensure the cart-image wrapper keeps consistent padding and vertical alignment */
.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-weight: 600;
    margin-bottom: 5px;
}
.cart-item-price {
    color: #28a745;
    font-weight: 600;
}
.cart-quantity {
    display: flex;
    align-items: center;
    margin: 0 15px;
}
.quantity-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #dee2e6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.quantity-input {
    width: 50px;
    text-align: center;
    border: 1px solid #dee2e6;
    border-left: none;
    border-right: none;
    height: 30px;
    padding: 0;
}
.op-card {
    border:1px solid var(--op-border);
    border-radius:var(--op-radius);
    padding:10px;
    background:var(--op-bg);
}
@media (max-width: 767px) {
   

    .product-card {
        flex-direction: row;
        align-items: center;
    }

    .cart-item {
        flex-direction: column;
        align-items: stretch;
    }
}
/* Compact Ordering Portal Styles */

/* Make product rows more compact */
.product-row .card {
    margin-bottom: 0.5rem !important;
}

.product-row .card-body {
    padding: 0.75rem !important;
}

.product-row .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* Product search result highlighting - more visible */
.product-search-result.highlighted,
.customer-search-result.highlighted,
.product-list-item.highlighted,
.product-search-result:hover:not(.keyboard-navigating),
.customer-search-result:hover:not(.keyboard-navigating),
.product-list-item:hover:not(.keyboard-navigating) {
    background-color: #007bff !important;
    color: white !important;
    border-color: #0056b3 !important;
}

.product-search-result.highlighted .text-muted,
.customer-search-result.highlighted .text-muted,
.product-list-item.highlighted .text-muted,
.product-search-result:hover:not(.keyboard-navigating) .text-muted,
.customer-search-result:hover:not(.keyboard-navigating) .text-muted,
.product-list-item:hover:not(.keyboard-navigating) .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Focus management */
.product-search-input:focus,
.product-quantity:focus,
#add-product-row-btn:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    border-color: #007bff;
}

/* Desktop layout fixes */
@media (min-width: 992px) {
    .single-order-form .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .single-order-form .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        order: 1;
    }
    
    .single-order-form .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
        order: 2;
    }
    
    .single-order-form .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
        order: 3;
    }
}

/* Compact cart items */
#cart-items {
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.cart-item {
    padding: 0.5rem 0.25rem !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.cart-item:last-child {
    border-bottom: none !important;
}

.cart-item-title {
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
}

/* Compact card headers */
.card-header {
    padding: 0.75rem 1rem !important;
}

.card-header h5 {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}

/* Compact buttons */
.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
}

/* Reduce spacing in order summary */
#cart-total {
    font-size: 1.1rem !important;
}

/* Mobile optimizations */
@media (max-width: 992px) {
    .single-order-form .col-lg-6 {
        order: 2;
    }
    
    .single-order-form .col-lg-4 {
        order: 1;
    }
    
    .single-order-form .col-lg-3 {
        order: 3;
    }
    
    /* Stack columns vertically on smaller screens */
    .single-order-form .row > div {
        margin-bottom: 1rem;
    }
}

/* Make search inputs more compact */
.product-search-input,
#customer-search {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
}

/* Make buttons more compact */
.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;
}

.product-quantity {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.5rem !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
}

/* Compact search results */
.product-search-result,
.customer-search-result {
    padding: 8px 10px;
    border-radius: 6px;
}

.dropdown-up {
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    margin-bottom: 0;
}
.dropdown-down {
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-top: 0;
}
.product-search-result,
.customer-search-result {
    padding: 0.5rem !important;
}

.customer-search-results {
    font-size: 0.875rem !important;

    padding: 0.5rem !important;
}

/* Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* ----------------------------- */
/* Orders page - more professional */
/* ----------------------------- */
.orders-list {
    display: grid;
    gap: 18px;
}

.order-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e0e6ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
    overflow: hidden;
}

.order-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #6c757d 0%, #495057 100%);
}

.order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: #c5cdd8;
}

.order-main {
    flex: 1 1 auto;
    padding-right: 12px;
}

.order-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f3f7;
}

.order-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-number::before {
    content: '📦';
    font-size: 1.2rem;
}

.order-dates {
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.order-date::before {
    content: '📅 ';
    font-size: 0.9rem;
    margin-right: 2px;
}

.order-delivery::before {
    content: '🚐 ';
    font-size: 0.9rem;
    margin-right: 2px;
}

.order-items {
    margin-top: 6px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.5);
    color: #2c3e50;
    font-size: 0.95rem;
    transition: background 150ms ease;
}

.order-item:hover {
    background: rgba(108,117,125,0.08);
}

.order-item:last-child {
    margin-bottom: 0;
}

.order-meta {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.order-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: auto;
}

.order-meta .order-total {
    margin-top: auto;
}

.order-status {
    padding: 8px 16px;
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: capitalize;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Status icons and colors - matching account tab color scheme */
.status-to_be_processed { 
    background: linear-gradient(135deg, #0070ff 0%, #0056cc 100%);
    color: #fff;
}
.status-to_be_processed::before {
    content: '⏳';
}

.status-processing { 
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #212529;
}
.status-processing::before {
    content: '🔄';
}

.status-on_hold { 
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #fff;
}
.status-on_hold::before {
    content: '⏸';
}

.status-completed { 
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
    color: #fff;
}
.status-completed::before {
    content: '✓';
}

.status-cancelled { 
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
}
.status-cancelled::before {
    content: '✗';
}

.order-total.labeled-total {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2c3e50;
    background: rgba(108,117,125,0.1);
    padding: 8px 14px;
    border-radius: 8px;
}

/* Responsive: stack on smaller screens */
@media (max-width: 767px) {
    .order-card {
        flex-direction: column;
        gap: 10px;
    }
    .order-meta {
        width: 100%;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Small utility: compact status in lists */
.order-meta-top { display:flex; align-items:center; gap:8px; }


/* Compact customer summary block shown above orders */
.orders-customer-summary {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: #fbfbfd;
    font-size: 0.9rem;
    color: var(--op-muted);
    margin-bottom: 12px;
}
.orders-customer-summary .name {
    font-weight: 600;
    color: #111;
}
.orders-customer-summary .meta {
    font-size: 0.85rem;
    color: var(--op-muted);
}
.orders-customer-summary .small-pill {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    color: var(--op-muted);
    font-size: 0.75rem;
}

.product-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.product-image {
    height: 200px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 15px;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.product-price {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 10px;
}

.product-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

.btn-add-to-cart {
    width: 100%;
    background: #007bff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-add-to-cart:hover {
    background: #0056b3;
    color: white;
}

.btn-add-to-cart:disabled {
    background: #6c757d;
}

/* Cart Styles */
.cart-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}

.cart-item-image {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    overflow: hidden;
}

.cart-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Normalize cart thumbnails and placeholders */
.cart-item-image .cart-thumb,
.cart-item-image img.cart-thumb {
    width: 60px; /* match intended thumbnail size */
    height: 60px;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

/* ensure the cart-image wrapper keeps consistent padding and vertical alignment */
.cart-item-image {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.cart-item-price {
    color: #28a745;
    font-weight: 600;
}

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

.quantity-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #dee2e6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.quantity-input {
    width: 50px;
    text-align: center;
    border: 1px solid #dee2e6;
    border-left: none;
    border-right: none;
    height: 30px;
    padding: 0;
}

.cart-total {
    font-size: 20px;
    font-weight: 700;
    color: #111; /* totals should be off-black */
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 20px 0;
}

/* Order History */
.order-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
}

.order-header {
    display: block;
    margin-bottom: 10px;
}

.order-number {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.order-status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.order-status.status-pending {
    background: #fff3cd;
    color: #856404;
}

.order-status.status-processing {
    background: #ffc107; /* Bootstrap warning */
    color: #212529; /* dark text for contrast */
}

.order-status.status-completed {
    background: #28a745; /* darker green */
    color: #fff; /* white text for contrast */
}

.order-status.status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

/* Desktop-specific override: force consistent thumbnail slot and image sizing
   Using a higher-specificity selector scoped under #cart-items to avoid theme overrides */
@media (min-width: 769px) {
    #cart-items .cart-item .cart-item-image,
    #cart-items .cart-item .cart-item-image img.cart-thumb {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        display: block !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    /* vertical-align not applicable when display is block; removed to satisfy linters */
    }

    /* ensure the wrapper remains a fixed flex slot so spacing doesn't collapse */
    #cart-items .cart-item .cart-item-image {
        flex: 0 0 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #f8f9fa !important;
    }
}

.order-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
}

.order-item:last-child {
    border-bottom: none;
}

/* Order card layout with right-aligned meta.  
   On desktop the meta (status + total) is positioned at the bottom-right of the card
   so the total appears both on the right and at the bottom. On smaller screens the
   meta stacks under the main content but remains right-aligned. */
.order-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative; /* allow absolutely-positioning meta on larger screens */
}

/* Global product tile styles (for product search results) */
.product-tile {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}
.product-tile .card-img-top {
    height: 120px;
    object-fit: cover;
}
.product-tile .card-body {
    padding: 0.5rem !important;
}
.product-tile .product-tile-qty {
    width: 70px;
}

/* Compact remove button in order summary - use outline-danger look */
/* Removal animation: when a cart item is being removed we apply this class */
.cart-item-removing {
    animation: cart-item-remove 220ms ease forwards;
}

@keyframes cart-item-remove {
    0% {
        opacity: 1;
        transform: translateY(0);
        height: auto;
        margin-bottom: 8px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    60% {
        opacity: 0.6;
        transform: translateY(-6px);
    }
    100% {
        opacity: 0;
        transform: translateY(-12px);
        height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Product list view (vertical) */
.product-list-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.product-list-image img {
    display: block;
    border-radius: 6px;
}
.product-list-meta {
    min-width: 0; /* allow truncation */
}
.product-list-actions .product-tile-qty {
    width: 70px;
}

/* New plus/minus quantity control styling */
.qty-controls {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.quantity-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
}

.quantity-btn:hover {
    background: #f8f9fa;
}

.quantity-display {
    min-width: 34px;
    text-align: center;
    padding: 6px 8px;
    font-weight: 600;
}

/* Keyboard focus styles for quantity displays */
.quantity-display:focus,
.cart-quantity-display:focus {
    outline: 2px solid rgba(0,123,255,0.35);
    outline-offset: 2px;
    border-radius: 4px;
}

.cart-quantity-display {
    min-width: 34px;
    text-align: center;
    padding: 6px 8px;
    font-weight: 600;
}

.cart-quantity .btn {
    width: 34px;
    height: 34px;
    padding: 0;
}

/* When decrease button indicates removal (qty === 1) make it appear as a compact red bin */
.cart-qty-decrease.remove-mode {
    background-color: #dc3545; /* bootstrap danger */
    color: #fff;
    border-color: #dc3545;
    box-shadow: none;
}
.cart-qty-decrease.remove-mode:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
}
.cart-qty-decrease.remove-mode i {
    font-size: 14px;
}

/* Ensure inline SVG icons inside qty buttons inherit color and size nicely */
.cart-qty-decrease svg,
.cart-qty-increase svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.cart-qty-decrease svg path,
.cart-qty-decrease svg rect,
.cart-qty-increase svg path,
.cart-qty-increase svg rect {
    fill: currentColor;
}

/* When remove-mode is active ensure the icon stays white */
.cart-qty-decrease.remove-mode svg {
    color: #fff;
}


.order-main {
    flex: 1 1 auto;
    padding-right: 20px;
    min-width: 0; /* allow children to shrink */
}

/* Default meta layout (used on mobile and by fallback) */
.order-meta {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.order-meta .order-status {
    white-space: nowrap;
}

    .order-meta .order-total {
    font-size: 18px;
    font-weight: 700;
    color: #111; /* totals off-black */
    text-align: right;
}

/* Ensure items list wraps nicely */
.order-items {
    margin-top: 10px;
}

.labeled-total {
    margin-top: 12px;
    margin-bottom: 0;
}

.order-meta .labeled-total {
    border-top: none;
    padding-top: 0;
}

/* On wider screens, pin the meta to the bottom-right of the order card so the total
   appears at the bottom and on the right simultaneously. Add bottom padding to the
   card/main area to avoid overlap with the absolutely positioned meta. */
@media (min-width: 768px) {
    .order-card {
        padding-bottom: 56px; /* reserve space for bottom-right meta */
    }

    .order-main {
        padding-right: 220px; /* make room so main content doesn't flow under meta */
    }

    .order-meta {
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 180px;
        align-items: flex-end;
    }

    /* When absolute, remove top margin so it sits flush to bottom */
    .order-meta .labeled-total {
        margin-top: 0;
    }
}

/* On small screens keep meta in normal flow but keep the total right-aligned */
@media (max-width: 767px) {
    .order-meta {
        flex: none;
        align-items: flex-end;
        margin-top: 12px;
    }

    .order-meta .order-total {
        text-align: right;
    }

    .order-meta .labeled-total {
        margin-top: 8px;
    }
}

/* Responsive: stack meta under main on small screens */
@media (max-width: 767px) {
    .order-card {
        flex-direction: column;
        align-items: stretch;
    }

    .order-meta {
        flex: none;
        align-items: flex-start;
        margin-top: 12px;
    }

    .order-meta .order-total {
        text-align: left;
    }

    /* ensure the labeled total appears below items on mobile when moved to right column */
    .order-meta .labeled-total {
        margin-top: 8px;
    }
}

/* Account Page */
.account-section {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.account-section h3 {
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.form-control {
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 14px;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.btn-primary {
    background: #007bff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-secondary:hover {
    background: #545b62;
}

/* Loading and Messages */
.loading {
    text-align: center;
    padding: 40px;
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background: #cce5ff;
    color: #004085;
    border: 1px solid #b3d7ff;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }

    .product-card {
        margin-bottom: 15px;
    }

    .cart-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-image {
        margin-bottom: 10px;
        margin-right: 0;
    }

    .cart-quantity {
        margin: 10px 0;
    }

    .ordering-portal-header .row {
        text-align: center;
    }

    .ordering-portal-header .col-md-6 {
        margin-bottom: 10px;
    }
}

/* Compact Ordering Portal Mobile Layout */
@media (max-width: 992px) {
    .single-order-form .col-lg-5 {
        order: 2;
    }
    
    .single-order-form .col-lg-4 {
        order: 1;
    }
    
    .single-order-form .col-lg-3 {
        order: 3;
    }
    
    /* Stack columns vertically on smaller screens */
    .single-order-form .row > div {
        margin-bottom: 1rem;
    }
}

/* Mobile product row layout */
@media (max-width: 768px) {
    .product-row .row {
        align-items: center;
    }
    
    .product-row .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .product-row .col-md-3 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .product-row .col-md-2 {
        display: none; /* Hide desktop delete button on mobile */
    }
    
    /* Compact mobile delete button */
    .remove-product-row.d-md-none {
        flex-shrink: 0;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin-left: 0.5rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 6px !important;
    }
    
    .remove-product-row.d-md-none i {
        font-size: 14px;
        line-height: 1;
    }
    
    /* Adjust mobile quantity controls */
    .d-md-none .input-group {
        width: auto !important;
        flex: 1;
    }
    
    .d-md-none .input-group .form-control {
        max-width: 60px !important;
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .account-section {
        padding: 20px;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Mobile: ensure cart rows are left-aligned and don't center their contents.
   Some themes/bootstrap utilities can introduce centering; these overrides
   force a consistent left-aligned layout on small screens. */
@media (max-width: 768px) {
    /* Target the plugin's cart item container specifically */
    #cart-items .cart-item,
    .single-order-form #cart-items .cart-item {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* Make the info block stretch full-width and left-align its text */
    #cart-items .cart-item .cart-item-info,
    .single-order-form .cart-item-info {
        width: 100% !important;
        text-align: left !important;
        align-self: stretch;
    }

    /* Keep the image aligned to the left of the item and prevent it from centering */
    #cart-items .cart-item .cart-item-image {
        margin-right: 12px !important;
        margin-bottom: 8px !important;
        align-self: flex-start;
    }

    /* Ensure quantity controls sit flush to the left and keep even spacing */
    #cart-items .cart-item .cart-quantity,
    .single-order-form .cart-quantity {
        margin: 8px 0 !important;
        justify-content: flex-start !important;
    }

    /* Make sure price/total elements don't cause centering by forcing left text alignment */
    #cart-items .cart-item .cart-item-price,
    .cart-item-price {
        margin-left: 0;
        text-align: left !important;
    }
}

/* Admin Styles */
.ordering-portal-dashboard .card,
.ordering-portal-admin-order .card,
.ordering-portal-orders .card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
}

.ordering-portal-dashboard .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.ordering-portal-dashboard .col-md-6 {
    padding: 0 10px;
    flex: 0 0 50%;
}

@media (max-width: 768px) {
    .ordering-portal-dashboard .col-md-6 {
        flex: 0 0 100%;
    }
}

.recent-orders {
    list-style: none;
    padding: 0;
}

.recent-orders li {
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
}

.recent-orders li:last-child {
    border-bottom: none;
}

/* Modal Styles */
.modal-content {
    border-radius: 10px;
    border: none;
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
    padding: 20px;
}

.modal-body {
    padding: 20px;
}

.product-list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.product-list-item:hover {
    background: #f8f9fa;
}

.product-list-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 5px;
}

.product-list-item .product-info {
    flex: 1;
}

.product-list-item .product-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.product-list-item .product-price {
    color: #28a745;
    font-weight: 600;
}

/* Single Order Form Styles */
.single-order-form .card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.single-order-form .card-header {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-bottom: 2px solid #495057;
    font-weight: 600;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
}

.single-order-form .products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    max-height: 600px;
    overflow-y: auto;
    padding: 10px;
}

.single-order-form .product-item {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.single-order-form .product-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.single-order-form .product-item img {
    height: 80px;
    object-fit: cover;
}

.single-order-form .cart-item {
    padding: 12px;
    border-bottom: 1px solid rgba(108, 117, 125, 0.15);
    border-radius: 6px;
    transition: background 0.2s ease;
}

.single-order-form .cart-item:hover {
    background: rgba(108, 117, 125, 0.05);
}

.single-order-form .cart-item:last-child {
    border-bottom: none;
}

.single-order-form .cart-item-info {
    flex: 1;
}

.single-order-form .cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.single-order-form .cart-item-quantity {
    width: 60px !important;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 5px;
}

.single-order-form #cart-total {
    font-size: 24px;
    font-weight: 700;
    color: #495057;
    background: rgba(108, 117, 125, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #6c757d;
}

.single-order-form #place-order-btn {
    font-size: 18px;
    font-weight: 600;
    padding: 15px 40px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
    border: 2px solid #56ab2f;
    color: #fff;
    box-shadow: 0 4px 12px rgba(86, 171, 47, 0.3);
}

.single-order-form #place-order-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(86, 171, 47, 0.4);
    background: linear-gradient(135deg, #4d9629 0%, #97cc59 100%);
}

.single-order-form #place-order-btn:disabled {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-color: #6c757d;
    box-shadow: none;
    opacity: 0.6;
}

/* Loading Spinner */
.loading {
    text-align: center;
    padding: 40px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert Styles */
.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10601;
    min-width: 300px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Modal Styles */
.modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 10px 10px 0 0;
}

.modal-body {
    padding: 25px;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 15px 25px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .single-order-form .row {
        margin: 0;
    }

    .single-order-form .col-lg-4,
    .single-order-form .col-lg-5,
    .single-order-form .col-lg-3 {
        padding: 0 15px;
        margin-bottom: 20px;
    }

    .single-order-form .products-grid {
        max-height: 400px;
    }

    .single-order-form .cart-item-controls {
        flex-direction: column;
        gap: 5px;
    }

    .single-order-form .cart-item-quantity {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .ordering-portal-header .navbar-nav {
        text-align: center;
    }

    .ordering-portal-header .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    .single-order-form .product-item .row {
        flex-direction: column;
    }

    .single-order-form .product-item .col-md-4,
    .single-order-form .product-item .col-md-8 {
        max-width: 100%;
    }

    .single-order-form .product-item img {
        height: 150px;
        width: 100%;
    }
}

/* Customer Search Styles */
.customer-search-container {
    position: relative;
}

.customer-search-results {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    background: white;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.customer-search-result {
    transition: background-color 0.2s ease;
}

.customer-search-result:hover {
    background-color: #f8f9fa;
}

.customer-search-result .fw-bold {
    color: #495057;
}

.customer-search-result .text-muted {
    color: #6c757d;
    font-size: 0.875rem;
}

/* Product Search Styles */
.product-row {
    margin-bottom: 15px;
}

.product-search-container {
    position: relative;
}

.product-search-results {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    background: white;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
}

/* Ensure parent container for product line has positioning context */
.op-product-line > div:first-child {
    position: relative !important;
}

/* Make product line search results taller and properly positioned */
.op-product-line-results {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 500px !important;
    top: 100% !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
}

/* Position dropdown above when there's not enough space below */
.op-product-line-results.dropdown-up {
    top: auto !important;
    bottom: 100% !important;
}

/* Position dropdown below (default behavior) */
.op-product-line-results.dropdown-down {
    top: 100% !important;
    bottom: auto !important;
}

/* On mobile, make dropdown properly aligned */
@media (max-width: 768px) {
    .product-search-results,
    .op-product-line-results {
        max-height: 60vh;
        min-width: 100%;
        width: 100% !important;
        right: auto !important;
        left: 0 !important;
    }
    
    /* Ensure dropdown is properly positioned under search field */
    .op-product-line-results {
        left: 0 !important;
        transform: none;
        max-width: 100%;
    }
}

/* When JS hasn't applied the scroll class, keep default behavior (non-scrolling) */
#global-product-search-results:not(.product-list-scroll) {
    max-height: none;
    overflow: visible;
}

/* Utility class to apply a scrollable list with subtle top/bottom gradients */
.product-list-scroll {
    max-height: 380px; /* reasonable default for desktop */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Small gradient indicators to hint at more content when scrolled */
.product-list-scroll::before,
.product-list-scroll::after {
    content: '';
    position: sticky;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
    z-index: 2;
}
.product-list-scroll::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));
}
.product-list-scroll::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

/* Mobile-specific: limit height more aggressively */
@media (max-width: 767px) {
    /* ensure the results container is scrollable and visually separated */
    #global-product-search-results.product-list-scroll {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 6px;
        background: #fff;
    }
}

/* Stronger specificity: force scroll behavior on the global results container when class applied */
#global-product-search-results.product-list-scroll {
    max-height: 380px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 767px) {
    #global-product-search-results.product-list-scroll {
        max-height: 260px !important;
    }
}

.product-search-result {
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
}

.product-search-result:hover {
    background-color: #f8f9fa;
}

.product-search-result:last-child {
    border-bottom: none;
}

.product-search-result .fw-bold {
    color: #495057;
}

.product-search-result .text-muted {
    color: #6c757d;
    font-size: 0.875rem;
}

.product-selected-info {
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
}

/* Remove product button - compact square with centered X/icon */
.remove-product-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0.25rem;
    border: 1px solid #dc3545;
    background: #ffffff;
    color: #dc3545;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
}

.remove-product-row i,
.remove-product-row .fa,
.remove-product-row .fas {
    font-size: 14px;
    line-height: 1;
}

.remove-product-row:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
    transform: translateY(-1px);
}

#add-product-row-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

#add-product-row-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

#add-product-row-btn i {
    margin-right: 8px;
}

/* Mobile Quantity Controls */
.qty-minus, .qty-plus {
    padding: 6px 12px;
    min-width: 32px;
}

.product-quantity {
    text-align: center;
}

/* Product Search Transitions */
.product-search-input {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Clear button - make it visible even if icon fonts fail */
.product-search-clear,
#global-product-search-clear,
#customer-search-clear,
.product-search-clear.btn {
    transition: opacity 0.15s ease, visibility 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--op-border);
    color: var(--op-primary);
}

/* sizes: product clear slightly larger */
#global-product-search-clear,
.product-search-clear.product-global {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

#customer-search-clear,
.product-search-clear.product-customer {
    width: 34px;
    font-size: 13px;
}

.product-search-clear i,
#global-product-search-clear i,
#customer-search-clear i {
    font-size: 14px;
    line-height: 1;
}

.product-search-clear:hover,
#global-product-search-clear:hover,
#customer-search-clear:hover {
    background: rgba(0,115,170,0.06);
    border-color: rgba(0,115,170,0.18);
}

.product-search-clear:focus,
#global-product-search-clear:focus,
#customer-search-clear:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0,115,170,0.12);
}

/* Fallback visual when icon font not available: show a clear × using aria-hidden pseudo-element */
.product-search-clear[data-fallback]:not(:has(i))::after,
#global-product-search-clear[data-fallback]:not(:has(i))::after,
#customer-search-clear[data-fallback]:not(:has(i))::after {
    content: attr(data-fallback);
    font-weight: 700;
    color: currentColor;
    pointer-events: none;
}

/* On wider screens show a textual hint next to the button to make purpose obvious */
@media (min-width: 992px) {
    #global-product-search-clear:not(:has(i))::after {
        content: " Clear";
        font-weight: 600;
        margin-left: 8px;
        color: var(--op-muted);
        font-size: 0.95rem;
    }

    #customer-search-clear:not(:has(i))::after {
        content: " Clear";
        font-weight: 600;
        margin-left: 6px;
        color: var(--op-muted);
        font-size: 0.9rem;
    }
}

/* Selected Product Styling */
.selected-product-name {
    cursor: pointer;
    color: #007cba;
    text-decoration: underline;
}

.selected-product-name:hover {
    color: #005a87;
    text-decoration: none;
}

/* Delivery Date Styles */
#delivery-date {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    transition: all 0.3s ease;
    width: 100%;
}

#delivery-date:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    outline: none;
}

#delivery-date:hover {
    border-color: #007bff;
}

.ui-datepicker {
    background: #ffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    font-family: inherit;
    /* Ensure datepicker sits above other portal elements (modals, headers etc.) */
    z-index: 100000 !important;
    display: none; /* Will be shown by jQuery UI */
    position: absolute;
}

.ui-datepicker-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #fff;
    border-bottom: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
}

.ui-datepicker-title {
    font-weight: 600;
}

.ui-datepicker-prev, .ui-datepicker-next {
    background: transparent;
    border: none;
    color: #fff;
    top: 8px;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.ui-datepicker-calendar th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 8px;
}

.ui-datepicker-calendar td {
    padding: 4px;
}

.ui-datepicker-calendar td a {
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    display: block;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Prevent day cells from overlapping by using fixed table layout and forcing
   each day link to size within its cell. This avoids visual overlap when
   custom padding or fonts make cells overflow. */
.ui-datepicker-calendar {
    table-layout: fixed;
    width: 100%;
}
.ui-datepicker-calendar td {
    padding: 3px; /* slightly reduce padding to keep layout tight */
}
.ui-datepicker-calendar td a {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    line-height: 22px;
    padding: 6px 4px;
    display: block;
}

.ui-datepicker-calendar td a:hover {
    background: #007bff;
    color: #fff;
}

.ui-datepicker-today a {
    background: #e9ecef;
    font-weight: 600;
}

.ui-datepicker-current-day a {
    background: #007bff;
    color: #fff;
    font-weight: 600;
}

/* Cart Item Styling */
.cart-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease;
}

.cart-item:hover {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cart-item-name {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.cart-item-details small {
    display: block;
    line-height: 1.4;
}

.cart-item-total {
    border-top: 1px solid #e9ecef;
    padding-top: 8px;
    margin-top: 8px;
    font-size: 1.1em;
    color: #111; /* item totals in off-black */
}

/* Top-right status box for desktop */
@media (min-width: 768px) {
    .order-meta-top {
        position: absolute;
        right: 20px;
        top: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        width: 180px;
    }
}

/* On small screens the top meta should be in-flow above the items */
@media (max-width: 767px) {
    .order-meta-top {
        position: static;
        width: auto;
        align-items: flex-start;
        margin-bottom: 8px;
    }
}

/* Strong-scoped badge color overrides to beat theme/WooCommerce CSS
   Scoped under the main wrapper so these only affect plugin-rendered areas. */
.ordering-portal-wrapper .order-status.status-processing,
.ordering-portal-wrapper .ordering-portal-wrapper .status.status-processing,
.ordering-portal-wrapper .status.status-processing {
    background: #ffc107 !important;
    color: #212529 !important;
}
.ordering-portal-wrapper .order-status.status-completed,
.ordering-portal-wrapper .ordering-portal-wrapper .status.status-completed,
.ordering-portal-wrapper .status.status-completed {
    background: #28a745 !important;
    color: #fff !important;
}

/* Make sure the edit button is visible in customer-facing portal pages.
   Some themes / utility classes can unintentionally hide small link buttons
   (for example .btn-link color or visibility overrides). These scoped rules
   ensure the edit button is shown inside the plugin wrapper without
   affecting admin styles. */
.ordering-portal-wrapper .order-meta-top {
    z-index: 60; /* ensure meta floats above surrounding content */
}
.ordering-portal-wrapper .edit-order-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--op-primary) !important;
    background: transparent !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 4px 6px !important;
    font-size: 0.95rem !important;
    z-index: 70 !important;
}
.ordering-portal-wrapper .edit-order-btn i {
    color: inherit !important;
}

/* Fix alert positioning in bubble modal - prevent overflow */
.op-modal-panel .alert {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin: 15px 15px 15px 15px;
    min-width: auto;
    max-width: 100%;
}

/* Favourites list in account tab */
.op-favourites-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.op-favourites-list li {
    transition: background-color 0.2s, box-shadow 0.2s;
}

.op-favourites-list li:hover {
    background-color: #f8f9fa !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Account Section Styling - Better Visual Separation */
.op-account-section {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}

.op-section-header {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    padding: 15px 20px;
    border-bottom: 3px solid #5a6268;
}

.op-section-header h3 {
    color: #fff;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.op-section-header h3 i {
    font-size: 1.4rem;
}

.op-section-content {
    padding: 20px;
}

/* Different color schemes for each section */
/* Login Details - Purple/Indigo */
.account-form .op-account-section:first-child .op-section-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom-color: #5568d3;
}

/* Billing Address - Teal/Green */
.account-form .col-md-6:first-child .op-section-header {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
    border-bottom-color: #4a9428;
}

/* Shipping Address - Blue */
.account-form .col-md-6:last-child .op-section-header {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    border-bottom-color: #1b7a93;
}

#account-favourites-section .op-section-header {
    background: linear-gradient(135deg, #e8a87c 0%, #c38d73 100%);
    border-bottom-color: #b87d63;
}

#account-email-preferences-section .op-section-header {
    background: linear-gradient(135deg, #5dade2 0%, #3498db 100%);
    border-bottom-color: #2e86c1;
}

/* Custom Item Styling */
.custom-item-option {
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border-left: 3px solid #0d6efd;
}

.custom-item-option:hover {
    background-color: #e7f0ff !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

#op-custom-item-modal .form-control {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

#op-custom-item-modal .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

#op-custom-item-modal .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #212529;
}

#op-custom-item-modal .text-danger {
    color: #dc3545;
}

/* Cart display for custom items */
.cart-item.custom-item {
    background-color: #f8f9fa;
    border-left: 3px solid #0d6efd;
}

.cart-item.custom-item .product-name {
    font-style: italic;
    color: #0d6efd;
}

.cart-item.custom-item::before {
    content: "✨ ";
    color: #0d6efd;
}

/* Mobile-responsive modal item rows */
@media (max-width: 767px) {
    .op-item-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .op-item-row input,
    .op-item-row button {
        min-height: 44px;
        font-size: 16px;
    }
    
    .op-item-name {
        font-weight: 500;
    }
    
    .op-item-qty-group,
    .op-item-price-group {
        flex: 1;
        min-width: 0;
    }
    
    .op-item-qty,
    .op-item-price {
        width: 100% !important;
    }
    
    .op-remove-item {
        width: 100% !important;
    }
    
    #op-order-edit-modal .modal-body input[type="text"],
    #op-order-edit-modal .modal-body input[type="number"] {
        font-size: 16px;
        padding: 10px;
    }
    
    .op-item-qty-group label,
    .op-item-price-group label {
        margin-bottom: 0.25rem;
        font-weight: 600;
        color: #666;
    }
}

/* Desktop layout */
@media (min-width: 768px) {
    .op-item-row {
        align-items: center;
    }
    
    .op-item-qty-group {
        width: 80px;
    }
    
    .op-item-price-group {
        width: 100px;
    }
    
    .op-item-qty,
    .op-item-price {
        width: 100% !important;
    }
    
    .op-remove-item {
        width: auto !important;
        white-space: nowrap;
    }
    
    .op-item-qty-group label,
    .op-item-price-group label {
        display: none;
    }
}

/* Customer summary - ensure it doesn't overlap modals and dropdowns */
#orders-customer-summary,
#account-customer-summary {
    z-index: 1 !important;
    position: relative;
}

/* Production Management Tabs */
.production-management-tabs {
    margin-bottom: 1.5rem;
}

.production-management-tabs .nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.production-management-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.production-management-tabs .nav-link:hover {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

.production-management-tabs .nav-link.active {
    color: #0073aa;
    background-color: transparent;
    border-bottom-color: #0073aa;
}


.production-content {
    display: none;
}

.production-content.active {
    display: block;
}

.production-loading {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Production Management Page Styling */
#production-management-page {
    background: #fff;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.production-data {
    margin-top: 1.5rem;
}

/* Bakery Orders Plugin Integration Styling */
.production-data .wrap.bakery-plugin-root {
    margin: 0;
    padding: 0;
}

.production-data .bakery-date-picker-section {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
}

.production-data .bakery-date-picker-section form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.production-data .bakery-date-input,
.production-data input[type="date"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    color: #212529;
}

.production-data .bakery-date-input:focus,
.production-data input[type="date"]:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.production-data .bakery-generate-btn {
    padding: 0.5rem 1rem;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

.production-data .bakery-generate-btn:hover {
    background: #005a87;
}

.production-data .bakery-generate-btn:active {
    transform: translateY(1px);
}

/* Production List Table Styling */
.production-data table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 14px;
}

.production-data table thead {
    background: #0073aa;
}

.production-data table th {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    color: #ffffff;
    border: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 12px;
}

.production-data table td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: center;
}

.production-data table tbody tr:hover {
    background: #e6f7ff;
}

.production-data table tbody tr:nth-child(even) {
    background: #f2f2f2;
}

/* Invoice field - make it read-only looking */
.production-data .editable-invoice {
    border: none;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    cursor: default;
    padding: 0;
}

.production-data .editable-invoice:focus {
    outline: none;
    border: none;
    background: transparent;
}

/* Collection Schedule Container & Table Styling */
.collection-schedule-container,
.production-data .collection-schedule-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}

.collection-schedule-container h2,
.production-data .collection-schedule-container h2 {
    color: #0073aa;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 24px;
    font-weight: 600;
}

.collection-schedule-container p,
.production-data .collection-schedule-container p {
    color: #333;
    margin: 0.5rem 0;
}

/* Collection Schedule Table */
.collection-schedule-table,
.production-data .collection-schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.collection-schedule-table thead,
.production-data .collection-schedule-table thead {
    background-color: #0073aa;
}

.collection-schedule-table th,
.production-data .collection-schedule-table th {
    background-color: #0073aa;
    color: #ffffff;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    border: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 12px;
}

.collection-schedule-table td,
.production-data .collection-schedule-table td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: center;
}

.collection-schedule-table tbody tr,
.production-data .collection-schedule-table tbody tr {
    transition: background 0.2s ease;
}

.collection-schedule-table tbody tr:nth-child(even),
.production-data .collection-schedule-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.collection-schedule-table tbody tr:hover,
.production-data .collection-schedule-table tbody tr:hover {
    background-color: #e6f7ff;
}

.collection-schedule-table tbody tr.even,
.production-data .collection-schedule-table tbody tr.even {
    background-color: #f2f2f2;
}

.collection-schedule-table tbody tr.odd,
.production-data .collection-schedule-table tbody tr.odd {
    background-color: transparent;
}

.collection-schedule-table tbody tr.odd:hover,
.production-data .collection-schedule-table tbody tr.odd:hover {
    background-color: #e6f7ff;
}

.collection-schedule-table tbody tr.even:hover,
.production-data .collection-schedule-table tbody tr.even:hover {
    background-color: #e6f7ff;
}

/* Collection Schedule Editable Invoice Field */
.collection-schedule-table .editable-invoice,
.production-data .collection-schedule-table .editable-invoice {
    border: none;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    cursor: default;
    padding: 0;
    width: 100%;
}

.collection-schedule-table .editable-invoice:focus,
.production-data .collection-schedule-table .editable-invoice:focus {
    outline: none;
    border: none;
    background: transparent;
}

/* Collection Schedule Buttons */
.collection-schedule-container button,
.production-data .collection-schedule-container button {
    padding: 10px 20px;
    margin: 10px 10px 10px 0;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.collection-schedule-container button:hover,
.production-data .collection-schedule-container button:hover {
    background-color: #005885;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.collection-schedule-container button:active,
.production-data .collection-schedule-container button:active {
    transform: translateY(1px);
}

.collection-schedule-container button:disabled,
.production-data .collection-schedule-container button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Production Sheet Buttons */
.production-data button,
#production-sheet-content button {
    padding: 10px 20px;
    margin: 10px 10px 10px 0;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.production-data button:hover,
#production-sheet-content button:hover {
    background-color: #005885;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.production-data button:active,
#production-sheet-content button:active {
    transform: translateY(1px);
}

.production-data button:disabled,
#production-sheet-content button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Product/Order Information */
.production-data .product-info,
.production-data .order-info {
    margin-bottom: 1rem;
}

.production-data .product-name,
.production-data .order-number,
.production-data .customer-name {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
}

.production-data .product-qty,
.production-data .order-qty {
    color: #6c757d;
    font-size: 13px;
}

/* Delivery Map Container */
.production-data #bakery-route-map-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.production-data #bakery-delivery-map {
    width: 100%;
    height: 600px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-top: 1rem;
    background: #f8f9fa;
}

.production-data #bakery-route-summary {
    margin-top: 1rem;
    padding: 1rem;
    background: #f0f7ff;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
    font-size: 14px;
}

.production-data .bakery-routing-controls {
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.production-data .bakery-routing-controls button {
    padding: 0.5rem 1rem;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.production-data .bakery-routing-controls button:hover {
    background: #005a87;
}

/* Collection Points/Sections */
.production-data .collection-point,
.production-data .delivery-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.production-data .collection-point h3,
.production-data .delivery-section h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #212529;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.production-data .collection-point h4,
.production-data .delivery-section h4 {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    color: #495057;
    font-size: 14px;
    font-weight: 500;
}

/* Status Badges */
.production-data .status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.production-data .status-badge.processing {
    background: #fff3cd;
    color: #856404;
}

.production-data .status-badge.completed {
    background: #d4edda;
    color: #155724;
}

.production-data .status-badge.pending {
    background: #cfe2ff;
    color: #084298;
}

/* Customer/Order Cards */
.production-data .order-card,
.production-data .customer-card {
    padding: 1rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.production-data .order-card:hover,
.production-data .customer-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: #0073aa;
}

.production-data .order-card h4,
.production-data .customer-card h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.production-data .order-details,
.production-data .customer-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    font-size: 13px;
}

.production-data .detail-item {
    display: flex;
    flex-direction: column;
}

.production-data .detail-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.production-data .detail-value {
    color: #212529;
}

/* Responsive Design for Production Management */
@media (max-width: 991px) {
    .production-data #bakery-delivery-map {
        height: 400px;
    }
    
    .production-data .order-details,
    .production-data .customer-details {
        grid-template-columns: 1fr;
    }
    
    .production-data table {
        font-size: 12px;
    }
    
    .production-data table th,
    .production-data table td {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .production-data .bakery-date-picker-section form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .production-data .bakery-date-input,
    .production-data input[type="date"],
    .production-data .bakery-generate-btn {
        width: 100%;
    }
    
    .production-data .bakery-routing-controls {
        flex-direction: column;
    }
    
    .production-data .bakery-routing-controls button {
        width: 100%;
    }
    
    .production-data table {
        font-size: 11px;
    }
    
    .production-data table th,
    .production-data table td {
        padding: 0.25rem;
    }
    
    .production-data #bakery-delivery-map {
        height: 300px;
    }
}

/* Print Styles for Production Management Schedules */
@media print {
    /* Hide EVERYTHING by default */
    * {
        display: none !important;
    }
    
    /* Show only the schedule containers and their contents */
    .production-data,
    .collection-schedule-container,
    .delivery-schedule-container,
    .collection-schedule-container *,
    .delivery-schedule-container *,
    .production-data * {
        display: block !important;
    }
    
    /* Print page setup */
    html {
        font-size: 12pt;
        background: white;
        margin: 0;
        padding: 0;
    }
    
    body {
        margin: 0;
        padding: 0.5in;
        background: white;
        font-family: Arial, sans-serif;
    }
    
    /* Hide buttons and form controls within the schedule */
    .production-data button,
    .collection-schedule-container button,
    .delivery-schedule-container button,
    .production-data input[type="button"],
    .collection-schedule-container input[type="button"],
    .delivery-schedule-container input[type="button"],
    .production-data input[type="submit"],
    .collection-schedule-container input[type="submit"],
    .delivery-schedule-container input[type="submit"],
    .production-data .bakery-date-picker-section,
    .collection-schedule-container .bakery-date-picker-section,
    .delivery-schedule-container .bakery-date-picker-section,
    .production-data input[type="date"],
    .collection-schedule-container input[type="date"],
    .delivery-schedule-container input[type="date"] {
        display: none !important;
    }
    
    /* Hide map section */
    #bakery-route-map-section,
    #bakery-delivery-map {
        display: none !important;
    }
    
    /* Style schedule content for printing */
    .collection-schedule-container,
    .delivery-schedule-container {
        background: white;
        padding: 0;
        margin: 0;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    
    /* Show schedule title */
    .collection-schedule-container h2,
    .delivery-schedule-container h2 {
        display: block !important;
        margin: 0 0 1rem 0 !important;
        padding: 0 !important;
        color: #000 !important;
        font-size: 18pt !important;
        font-weight: 700 !important;
        page-break-after: avoid !important;
    }
    
    /* Show driver name field (first paragraph) */
    .collection-schedule-container > p:first-of-type,
    .delivery-schedule-container > p:first-of-type {
        display: block !important;
        margin: 0 0 2rem 0 !important;
        padding: 0 !important;
        font-size: 13pt !important;
        color: #000 !important;
        page-break-after: avoid !important;
    }
    
    /* Hide all other paragraphs within schedule */
    .collection-schedule-container > p:not(:first-of-type),
    .delivery-schedule-container > p:not(:first-of-type) {
        display: none !important;
    }
    
    /* Show and style the schedule table */
    .collection-schedule-table,
    .delivery-schedule-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 1rem 0 !important;
        page-break-inside: avoid;
    }
    
    .collection-schedule-table thead,
    .delivery-schedule-table thead {
        display: table-header-group !important;
    }
    
    .collection-schedule-table tbody,
    .delivery-schedule-table tbody {
        display: table-row-group !important;
    }
    
    .collection-schedule-table tr,
    .delivery-schedule-table tr {
        display: table-row !important;
        page-break-inside: avoid;
    }
    
    .collection-schedule-table th,
    .delivery-schedule-table th,
    .collection-schedule-table td,
    .delivery-schedule-table td {
        display: table-cell !important;
        padding: 0.5rem !important;
        border: 1px solid #000 !important;
        text-align: center !important;
        font-size: 11pt !important;
    }
    
    /* Preserve colored headers */
    .collection-schedule-table th,
    .delivery-schedule-table th {
        background-color: #007cba !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .collection-schedule-table td,
    .delivery-schedule-table td {
        color: #000 !important;
    }
    
    .bakery-production-table th {
        background-color: #0073aa !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .bakery-production-table td {
        color: #000 !important;
    }
    
    .collection-schedule-table th,
    .delivery-schedule-table th {
        background: white !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }
    
    /* Show invoice fields as text */
    .editable-invoice {
        display: inline !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        color: #000 !important;
    }
}