/* ============================================================================ */
/* Cart UX Enhancements - Added for improved cart experience                   */
/* ============================================================================ */

/* Smooth transitions for cart updates */
.cart-items-scroll > div {
    transition: opacity 0.3s ease-in-out;
}

/* Pronto orange text utility class */
.text-pronto-orange {
    color: #F36E21 !important;
}

/* Pronto orange utility classes */
.text-pronto-orange {
    color: #F36E21 !important;
}

.border-pronto-orange {
    border-color: #F36E21 !important;
}

/* Quantity input focus states with Pronto orange */
.count-input input:focus {
    box-shadow: 0 0 0 0.25rem rgba(243, 110, 33, 0.25);
    border-color: #F36E21;
}

/* Button pulse animation for dirty state */
@keyframes pulse-orange {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(243, 110, 33, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(243, 110, 33, 0);
    }
}

.btn.animate-pulse.btn-primary {
    animation: pulse-orange 2s infinite;
}

/* Button pulse animation for success state */
@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(51, 179, 107, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(51, 179, 107, 0);
    }
}

.btn.animate-pulse.btn-success {
    animation: pulse-green 2s infinite;
}

/* Smooth price updates */
.text-body {
    transition: opacity 0.2s ease-in-out;
}

/* Disabled state clarity */
.btn.opacity-50 {
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive adjustments for button text */
@media (max-width: 575.98px) {
    .d-none.d-sm-inline {
        display: none !important;
    }
}

/* Cart panel slide animations */
.cart-panel {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cart-panel.slide-in {
    transform: translateX(0);
    opacity: 1;
}

.cart-panel.slide-out {
    transform: translateX(100%);
    opacity: 0;
}

/* Enhanced hover states for cart buttons */
.product-card-button:hover:not(:disabled) {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

/* Loading spinner alignment */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* Badge styling for cart count */
.badge.bg-primary {
    background-color: #F36E21 !important;
}

/* Alert styling for quantity errors */
.text-danger small {
    font-size: 0.875rem;
}

/* Screen reader only content */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================ */
/* End Cart UX Enhancements                                                     */
/* ============================================================================ */

/* ============================================================================ */
/* Clear Dimension Filters Button - Modern Hover-Only Underline                */
/* ============================================================================ */

/* Clear dimension filters button - Modern hover-only underline */
/* Override .btn-link default underline behavior */
.dimension-clear-btn.btn-link {
    text-decoration: none !important;
    transition: opacity 0.2s ease-in-out;
}

.dimension-clear-btn.btn-link:hover,
.dimension-clear-btn.btn-link:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    opacity: 0.8;
}

/* Ensure icon never gets underlined */
.dimension-clear-btn i {
    text-decoration: none !important;
}

/* ============================================================================ */
/* End Clear Dimension Filters Button Styles                                   */
/* ============================================================================ */

/* ============================================================================ */
/* Item Page Styles - Product Cards, Filters, Tables                           */
/* ============================================================================ */


/* Advanced Product Card Styles */
.product-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--cz-border-color) !important;
    position: relative;
    overflow: visible;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cz-box-shadow);
    outline: none !important;
}

/* Hover Effect Opacity */
.hover-effect-opacity .hover-effect-target {
    transition: opacity 0.3s ease-in-out;
}

.hover-effect-opacity:hover .hover-effect-target {
    opacity: 1 !important;
}

/* Product Card Details - Hidden by default, shown on hover */
.product-card-details {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease-in-out;
    z-index: 10;
    pointer-events: none;
    margin-top: -1px;
    border: 1px solid var(--cz-border-color);
    border-top: none;
    left: -1px !important;
    width: calc(100% + 2px) !important;
}

.product-card:hover .product-card-details {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    border-top: none;
}

/* Product Card Button Hover */
.product-card-button {
    transition: transform 0.2s ease-in-out;
}

.product-card-button:hover {
    transform: scale(1.1);
}

/* Animate Underline Effect */
.animate-underline .animate-target {
    position: relative;
    transition: color 0.2s ease-in-out;
}

.animate-underline .animate-target::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.2s ease-in-out;
}

.animate-underline:hover .animate-target::after {
    width: 100%;
}

/* Animation Classes */
.animate-slide-end {
    transition: transform 0.2s ease-in-out;
}

.animate-slide-end:hover {
    transform: translateX(2px);
}

.animate-rotate {
    transition: transform 0.2s ease-in-out;
}

.animate-rotate:hover {
    transform: rotate(90deg);
}

.animate-pulse {
    transition: transform 0.2s ease-in-out;
}

.animate-pulse:hover {
    transform: scale(1.05);
}

.animate-slide-start {
    transition: transform 0.2s ease-in-out;
}

.animate-slide-start:hover {
    transform: translateX(-2px);
}

/* Floating Action Button Styles */
.floating-action-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: none;
    font-size: 1.1rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.floating-action-btn:active {
    transform: scale(0.95);
}

.floating-action-btn .animate-target {
    transition: transform 0.2s ease-in-out;
}

.floating-action-btn:hover .animate-target {
    transform: scale(1.1);
}

/* Table Row Hover Effects */
.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
    cursor: pointer;
}

/* View Toggle Button Styles */
.btn-group .btn {
    transition: all 0.15s ease-in-out;
}

.btn-group .btn:not(.btn-secondary):hover {
    background-color: #e9ecef;
    border-color: #6c757d;
}

/* Filter Badge Animations */
.badge {
    transition: all 0.15s ease-in-out;
}

.badge:hover {
    transform: scale(1.05);
}

/* Custom aspect ratio for product images */
.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    display: block;
    padding-top: var(--cz-aspect-ratio);
    content: "";
}

.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure proper spacing for expanded cards */
@media (min-width: 768px) {
    .product-card:hover {
        z-index: 20;
    }
}

/* Dark mode border enhancement */
[data-bs-theme="dark"] .product-card {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .product-card-details {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Dark mode hover effects - PRONTO yellow border */
[data-bs-theme="dark"] .product-card:hover {
    border-color: var(--cz-primary) !important;
}

[data-bs-theme="dark"] .product-card:hover .product-card-details {
    border-color: var(--cz-primary) !important;
}

/* Fix Additional Details text cutoff */
.product-card-details h6 {
    line-height: 1.4;
    padding-top: 2px;
}

/* Enhanced Filter Section Styling */
.filter-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .filter-section {
    background: linear-gradient(135deg, #222934 0%, #181d25 100%);
}

/* Stock/Favorites/Deals Button Group Enhancement */
.btn-group button {
    position: relative;
    overflow: hidden;
}

.btn-group button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.btn-group button:active::before {
    width: 300px;
    height: 300px;
}

/* Enhanced Dimension Filter Styling */
.dimension-filter-card {
    background: var(--cz-tertiary-bg);
    border: 1px solid var(--cz-border-color);
    border-radius: var(--cz-border-radius);
    transition: all 0.3s ease;
}

.dimension-filter-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Compact padding for filter card */
.dimension-filter-card .card-body {
    padding: 0.75rem !important;
}

/* Customer Part Number Input Enhancement */
input[type="text"].form-control:focus {
    border-color: #F36E21;
    box-shadow: 0 0 0 0.2rem rgba(243, 110, 33, 0.25);
}

/* Filter Section Button Group Constraint */
.offcanvas-body .btn-group {
    max-width: 100%;
}

.offcanvas-body .btn-group .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading State for Filters */
.filter-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.filter-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #F36E21;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Smooth Transitions for View Changes */
.view-transition {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Dimension Filters Grid - Horizontal Wrapping Layout */
.dimension-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
    align-items: end;
}

.dimension-filter-item {
    display: flex;
    flex-direction: column;
}

.dimension-filter-item label {
    margin-bottom: 0.25rem;
    font-size: 0.813rem;
}

.dimension-filter-button {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    grid-column: 1 / -1; /* Span all columns */
    margin-top: 0.5rem; /* Add some space above buttons */
}

.dimension-filter-button button {
    min-height: 31px;
    white-space: nowrap;
}

/* Fix button group hover states */
.dimension-filter-actions .btn-success:hover,
.dimension-filter-actions .btn-success:focus {
    background-color: #2b985b !important;
    border-color: #298f56 !important;
    color: #fff !important;
}

.dimension-filter-actions .btn-outline-danger:hover,
.dimension-filter-actions .btn-outline-danger:focus {
    background-color: #f03d3d !important;
    border-color: #f03d3d !important;
    color: #fff !important;
}

/* Dark mode hover states */
[data-bs-theme="dark"] .dimension-filter-actions .btn-success:hover,
[data-bs-theme="dark"] .dimension-filter-actions .btn-success:focus {
    background-color: #288b53 !important;
    border-color: #288b53 !important;
}

[data-bs-theme="dark"] .dimension-filter-actions .btn-outline-danger:hover,
[data-bs-theme="dark"] .dimension-filter-actions .btn-outline-danger:focus {
    background-color: #f03d3d !important;
    border-color: #f03d3d !important;
    color: #fff !important;
}

/* Grid Responsive Adjustments */
@media (max-width: 575.98px) {
    .row-cols-1 > * {
        max-width: 100%;
    }

    /* Hide product details on mobile for performance */
    .product-card-details {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .row-cols-sm-2 > * {
        max-width: 50%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .row-cols-lg-3 > * {
        max-width: 33.333333%;
    }
}

@media (min-width: 1200px) {
    .row-cols-xl-4 > * {
        max-width: 25%;
    }
}

/* Mobile Responsive Improvements */
@media (max-width: 767.98px) {
    .product-card {
        margin-bottom: 1rem;
    }

    .filter-section {
        padding: 0.75rem;
    }

    .btn-group button {
        font-size: 0.875rem;
        padding: 0.375rem 0.5rem;
    }

    .dimension-filters-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Adjust grid for medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dimension-filters-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.4rem;
    }
}

/* ============================================================================ */
/* End Item Page Styles                                                         */
/* ============================================================================ */

/* ============================================================================ */
/* Checkout Mode Styles - Progress Indicator, Banner, and Actions               */
/* ============================================================================ */

/* Checkout Progress Container */
.checkout-progress-container {
    background: linear-gradient(135deg, #fff9f5 0%, #fff5ed 100%);
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(243, 110, 33, 0.15);
}

[data-bs-theme="dark"] .checkout-progress-container {
    background: linear-gradient(135deg, #2a1f1a 0%, #251b16 100%);
    border-bottom-color: rgba(243, 110, 33, 0.25);
}

/* Progress Steps Layout */
.checkout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Individual Step */
.checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

/* Step Circle */
.step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e9ecef;
    border: 3px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: #6c757d;
    transition: all 0.3s ease;
    position: relative;
}

/* Active Step */
.checkout-step.active .step-circle {
    background-color: #F36E21;
    border-color: #F36E21;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(243, 110, 33, 0.2);
}

/* Completed Step */
.checkout-step.completed .step-circle {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.checkout-step.completed .step-circle i {
    font-size: 1.25rem;
}

/* Step Label */
.step-label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    text-align: center;
}

.checkout-step.active .step-label {
    color: #F36E21;
    font-weight: 600;
}

.checkout-step.completed .step-label {
    color: #198754;
}

/* Progress Line */
.progress-line {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, #dee2e6 0%, #dee2e6 100%);
    margin: 0 0.75rem;
    border-radius: 2px;
    position: relative;
    min-width: 60px;
    margin-bottom: 1.5rem;
}

.progress-line.completed {
    background: linear-gradient(90deg, #198754 0%, #F36E21 100%);
}

/* Checkout Mode Banner */
.checkout-mode-banner {
    background: linear-gradient(135deg, #fff5ed 0%, #fff9f5 100%);
    border-bottom: 2px solid rgba(243, 110, 33, 0.3);
    padding: 1rem 0;
}

[data-bs-theme="dark"] .checkout-mode-banner {
    background: linear-gradient(135deg, #251b16 0%, #2a1f1a 100%);
    border-bottom-color: rgba(243, 110, 33, 0.4);
}

/* Checkout Alert */
.alert-checkout {
    background-color: rgba(243, 110, 33, 0.08);
    border: 1px solid rgba(243, 110, 33, 0.2);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

[data-bs-theme="dark"] .alert-checkout {
    background-color: rgba(243, 110, 33, 0.12);
    border-color: rgba(243, 110, 33, 0.3);
}

/* Checkout Icon Wrapper */
.checkout-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F36E21 0%, #e85d10 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(243, 110, 33, 0.3);
}

.checkout-icon-wrapper i {
    font-size: 1.5rem;
    color: #fff;
}

/* Place Order Button - Premium Styling */
.place-order-wrapper {
    position: relative;
}

.btn-place-order {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.875rem 1.5rem;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease;
}

.btn-place-order:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
    transform: translateY(-2px);
    color: #fff;
}

.btn-place-order:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}

.btn-place-order:disabled {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    box-shadow: none;
    cursor: not-allowed;
}

/* Place Order Button Pulse Animation */
.btn-place-order.animate-pulse:not(:disabled) {
    animation: pulse-place-order 2s infinite;
}

@keyframes pulse-place-order {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    }
    50% {
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4), 0 0 0 10px rgba(40, 167, 69, 0);
    }
}

/* Checkout Mode Card Enhancement */
.checkout-mode .card {
    border: 1px solid rgba(243, 110, 33, 0.2) !important;
}

/* Mobile Responsive for Progress Indicator */
@media (max-width: 575.98px) {
    .checkout-progress-container {
        padding: 1rem 0;
    }

    .step-circle {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .step-label {
        font-size: 0.75rem;
    }

    .progress-line {
        min-width: 40px;
        margin: 0 0.5rem;
        margin-bottom: 1.25rem;
    }

    .checkout-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .checkout-icon-wrapper i {
        font-size: 1.25rem;
    }

    .alert-checkout {
        padding: 0.75rem 1rem;
    }
}

/* Skeleton styles for progress indicator */
.step-circle.skeleton {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.progress-line.skeleton {
    background: #e9ecef;
}

.step-label.skeleton {
    margin-top: 0.5rem;
}

[data-bs-theme="dark"] .step-circle.skeleton {
    background-color: #343a40;
    border-color: #495057;
}

[data-bs-theme="dark"] .progress-line.skeleton {
    background: #343a40;
}

/* ============================================================================ */
/* End Checkout Mode Styles                                                     */
/* ============================================================================ */

/* ============================================================================ */
/* Price Calculating Banner                                                     */
/* ============================================================================ */

.alert-price-calculating {
    background-color: rgba(243, 110, 33, 0.08);
    border: 1px solid rgba(243, 110, 33, 0.2);
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .alert-price-calculating {
    background-color: rgba(243, 110, 33, 0.12);
    border-color: rgba(243, 110, 33, 0.3);
}

/* ============================================================================ */
/* End Price Calculating Banner                                                 */
/* ============================================================================ */

/* ============================================================================ */
/* Inline Configuration Row - Item Page SAW/Cut Configuration                   */
/* ============================================================================ */

/* Expansion Animation Wrapper */
.configuration-row-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 300ms ease-out, opacity 250ms ease-out;
}

.configuration-row-wrapper.expanded {
    max-height: 300px;
    opacity: 1;
}

/* Grid View Configuration Section */
.configuration-section {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0;
    transition: max-height 300ms ease-out, opacity 250ms ease-out, padding 300ms ease-out;
}

.configuration-section.expanded {
    max-height: 400px;
    opacity: 1;
    padding-top: 0.75rem;
}

/* ============================================================================ */
/* Expanded Row Visual Design System                                             */
/* Using inset shadow approach for continuous visual indicator (Slack/VS Code)   */
/* ============================================================================ */

/* State Differentiation Styling */

/* Configuring state (not yet saved to cart) - subtle gray highlight + depth */
.config-state-configuring {
    background-color: rgba(0, 0, 0, 0.02);
    box-shadow:
        inset 3px 0 0 0 var(--bs-secondary),
        0 2px 4px rgba(0, 0, 0, 0.04);
    border-radius: 0;
}

[data-bs-theme="dark"] .config-state-configuring {
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 3px 0 0 0 var(--bs-secondary),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

/* In-cart state (configuration saved) - orange highlight with inset shadow + subtle depth */
.config-state-in-cart {
    background-color: rgba(243, 110, 33, 0.04);
    box-shadow:
        inset 3px 0 0 0 var(--pronto-orange, #F36E21),
        0 2px 4px rgba(0, 0, 0, 0.06);
    border-radius: 0;
}

[data-bs-theme="dark"] .config-state-in-cart {
    background-color: rgba(243, 110, 33, 0.06);
    box-shadow:
        inset 3px 0 0 0 var(--pronto-orange, #F36E21),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Expanded Row Highlight - Main item row */
tr.table-row-expanded {
    background-color: rgba(243, 110, 33, 0.03);
    position: relative;
}

/* Use box-shadow for consistent left accent that aligns with config panel */
tr.table-row-expanded > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--pronto-orange, #F36E21);
}

tr.table-row-expanded > td {
    border-bottom: none;
}

[data-bs-theme="dark"] tr.table-row-expanded {
    background-color: rgba(243, 110, 33, 0.05);
}

/* Configuration Row Table Styling */
tr.configuration-row {
    background-color: var(--bs-tertiary-bg);
}

/* Remove the td border - the inner div handles the visual indicator */
tr.configuration-row > td {
    padding: 0;
    border: 0;
}

/* Configuration Input Fields */
.config-field {
    min-width: 80px;
}

.config-field .form-control-sm {
    height: 32px; /* Match count-input-sm height */
}

/* Configuration Buttons */
.config-btn {
    min-height: 38px;
    min-width: 70px;
}

/* Success Feedback Animation */
.save-success-check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--bs-success);
    animation: checkFadeInOut 1.5s ease-in-out;
}

@keyframes checkFadeInOut {
    0% { opacity: 0; transform: scale(0.8); }
    15% { opacity: 1; transform: scale(1.1); }
    25% { transform: scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* Undo Toast */
.undo-toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-dark);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    animation: toastSlideUp 300ms ease-out;
}

.undo-toast-message {
    display: flex;
    align-items: center;
}

.undo-toast-countdown {
    opacity: 0.7;
}

.undo-toast-btn {
    font-weight: 600;
}

.undo-toast-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

@keyframes toastSlideUp {
    from { transform: translateX(-50%) translateY(100%); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

[data-bs-theme="dark"] .undo-toast {
    background: var(--bs-gray-800);
    border: 1px solid var(--bs-gray-700);
}

/* Mobile Responsiveness for Configuration */
@media (max-width: 768px) {
    /* Stack configuration fields vertically */
    .config-fields-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Larger touch targets */
    .config-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Full-width inputs on mobile */
    .config-field {
        width: 100%;
    }

    /* Undo toast full width on mobile */
    .undo-toast {
        left: 1rem;
        right: 1rem;
        transform: none;
        width: auto;
        justify-content: space-between;
    }

    @keyframes toastSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* Adjust configuration wrapper max height for mobile */
    .configuration-row-wrapper.expanded {
        max-height: 500px;
    }

    .configuration-section.expanded {
        max-height: 600px;
    }
}

/* Focus States (Accessibility) */
.config-btn:focus-visible {
    outline: 2px solid var(--pronto-orange, #F36E21);
    outline-offset: 2px;
}

/* Smooth border transition for state changes */
.config-state-configuring,
.config-state-in-cart {
    transition: border-color 300ms ease, background-color 300ms ease;
}

/* ============================================================================ */
/* End Inline Configuration Row Styles                                          */
/* ============================================================================ */

/* ============================================================================ */
/* Item Row Striping - Alternating backgrounds for visual separation            */
/* ============================================================================ */

/* === LIGHT MODE === */

/* Table View - Striped Rows (Light Mode) */
tr.item-stripe-odd {
    background-color: rgba(0, 0, 0, 0.025);
}

tr.item-stripe-even {
    background-color: transparent;
}

/* Grid View - Striped Cards (Light Mode) */
.product-card.item-stripe-odd {
    background-color: rgba(0, 0, 0, 0.02);
}

.product-card.item-stripe-even {
    background-color: var(--bs-body-bg);
}

/* === DARK MODE === */

[data-bs-theme="dark"] tr.item-stripe-odd {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] tr.item-stripe-even {
    background-color: transparent;
}

[data-bs-theme="dark"] .product-card.item-stripe-odd {
    background-color: rgba(255, 255, 255, 0.025);
}

[data-bs-theme="dark"] .product-card.item-stripe-even {
    background-color: var(--bs-body-bg);
}

/* === EXPANDED ROW OVERRIDES (both modes) === */

/* Preserve expanded row highlight over stripe - Light Mode */
tr.table-row-expanded.item-stripe-odd > td,
tr.table-row-expanded.item-stripe-even > td {
    background-color: rgba(243, 110, 33, 0.04);
    border-bottom: none;
}

/* Use box-shadow for consistent left accent alignment */
tr.table-row-expanded.item-stripe-odd > td:first-child,
tr.table-row-expanded.item-stripe-even > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--pronto-orange, #F36E21);
}

/* Dark mode expanded highlight */
[data-bs-theme="dark"] tr.table-row-expanded.item-stripe-odd > td,
[data-bs-theme="dark"] tr.table-row-expanded.item-stripe-even > td {
    background-color: rgba(243, 110, 33, 0.06);
    border-bottom: none;
}

[data-bs-theme="dark"] tr.table-row-expanded.item-stripe-odd > td:first-child,
[data-bs-theme="dark"] tr.table-row-expanded.item-stripe-even > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--pronto-orange, #F36E21);
}

/* Configuration row uses tertiary bg (works in both modes via CSS variable) */
tr.configuration-row.item-stripe-odd,
tr.configuration-row.item-stripe-even {
    background-color: var(--bs-tertiary-bg);
}

/* ============================================================================ */
/* End Item Row Striping                                                         */
/* ============================================================================ */

/* ============================================================================ */
/* SAW Configuration Header & Stock Qty Label                                    */
/* ============================================================================ */

/* SAW Configuration Header */
.configuration-header {
    color: var(--bs-body-color);
}

.configuration-header i {
    font-size: 1.25rem;
}

.configuration-header .fw-semibold {
    color: var(--bs-body-color);
}

/* Dark mode text color fix for header */
[data-bs-theme="dark"] .configuration-header .fw-semibold,
[data-bs-theme="dark"] .configuration-header span.text-dark {
    color: var(--bs-body-color) !important;
}

/* Stock Qty Label styling */
.stock-qty-label {
    font-size: 0.6875rem; /* 11px - compact size */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary);
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.stock-qty-label i {
    font-size: 0.75rem;
}

/* ============================================================================ */
/* Quantity Controls - Prevent Button Wrapping                                   */
/* ============================================================================ */

/* Ensure controls row never wraps - flex-shrink: 0 on buttons */
.count-input {
    flex-shrink: 0;
}

/* Action buttons should not shrink */
.btn-icon.btn-xs {
    flex-shrink: 0;
}

/* Extra small icon button sizing (Cartzilla doesn't include btn-xs by default) */
.btn-icon.btn-xs {
    --cz-btn-size: 1.625rem; /* 26px - compact but touch-friendly */
    width: var(--cz-btn-size);
    height: var(--cz-btn-size);
    padding: 0;
}

.btn-icon.btn-xs i {
    font-size: 0.8125rem; /* 13px */
}

/* Compact count-input for table rows */
.count-input-sm {
    border-radius: var(--cz-border-radius-sm);
}

.count-input-sm .form-control {
    width: 2rem;
    font-size: 0.8125rem;
    padding: 0 0.125rem;
}

.count-input-sm .btn {
    padding: 0.125rem 0.25rem;
}

.count-input-sm .btn i {
    font-size: 0.75rem;
}

/* Quantity controls table column - auto-fit to content, prevent wrapping */
.qty-controls-col {
    width: 1%;
    white-space: nowrap;
    min-width: 180px; /* Minimum to fit: count-input (~90px) + gap + buttons (~80px) */
}

/* Force quantity controls and buttons to stay on one line */
.qty-controls-col .d-flex.align-items-start,
.qty-controls-col .d-flex.align-items-center {
    flex-wrap: nowrap !important;
}

/* Ensure all child flex containers don't wrap */
.qty-controls-col .d-flex.align-items-start > .d-flex,
.qty-controls-col .d-flex.align-items-center > .d-flex {
    flex-wrap: nowrap !important;
    flex-shrink: 0;
}

/* ============================================================================ */
/* End Quantity Controls & SAW Configuration Styles                               */
/* ============================================================================ */

/* ============================================================================ */
/* Feedback Button - Header Navigation with Shimmer Effect                        */
/* ============================================================================ */

/* Feedback button shimmer effect */
.btn-feedback-shimmer {
    background: linear-gradient(110deg, #F36E21 45%, #ff8c42 50%, #F36E21 55%);
    background-size: 200% 100%;
    animation: feedback-shimmer 2s ease-in-out infinite;
    color: white;
    border: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.btn-feedback-shimmer:hover {
    background: linear-gradient(110deg, #d85a1a 45%, #F36E21 50%, #d85a1a 55%);
    background-size: 200% 100%;
    color: white;
}

.btn-feedback-shimmer:focus {
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(243, 110, 33, 0.25);
}

@keyframes feedback-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================ */
/* End Feedback Button Styles                                                     */
/* ============================================================================ */