/* ===================================
   CHECKOUT FORM IMPROVEMENTS - SPECIFIC FIXES
   =================================== */

/* 0. Modal Z-Index Fix - Ensure checkout modal stays on top */
#checkoutModal,
#checkoutModal .modal-dialog,
#checkoutModal .modal-content {
    z-index: 1050;
}

#checkoutModal.modal {
    z-index: 1050;
}

#checkoutModal .modal-backdrop {
    z-index: 1040;
}

/* Ensure modal is always visible and properly positioned */
#checkoutModal.show {
    display: block !important;
}

#checkoutModal .modal-dialog {
    position: relative !important;
    margin: 1.75rem auto !important;
    max-width: 1200px !important;
    width: 98% !important;
}

/* Fix for any overlapping elements */
.modal-open #checkoutModal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

/* Ensure backdrop doesn't interfere */
.modal-backdrop.show {
    z-index: 9998 !important;
    opacity: 0.5 !important;
}

/* 1. Order Type Buttons - Delivery (Orange) and Pickup (White with border) */
/* Delivery Button - Always Orange */
#checkoutModal .order-type-buttons .btn[value="delivery"],
#checkoutModal input[type="radio"][name="order_type"][value="delivery"] + label,
#checkoutModal .form-check-input[name="order_type"][value="delivery"] + .form-check-label,
.modal-body .order-type-buttons .btn[value="delivery"],
.modal-body input[type="radio"][name="order_type"][value="delivery"] + label,
.modal-body .form-check-input[name="order_type"][value="delivery"] + .form-check-label,
#checkoutModal .btn[data-order-type="delivery"],
.modal-body .btn[data-order-type="delivery"] {
    background-color: #ff6b35 !important;
    border: none !important;
    color: white !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#checkoutModal .order-type-buttons .btn[value="delivery"]:hover,
#checkoutModal .btn[data-order-type="delivery"]:hover,
.modal-body .btn[data-order-type="delivery"]:hover {
    background-color: #e55a2b !important;
    border-color: #e55a2b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

/* Pickup Button - White with Gray Border */
#checkoutModal .order-type-buttons .btn[value="pickup"],
#checkoutModal input[type="radio"][name="order_type"][value="pickup"] + label,
#checkoutModal .form-check-input[name="order_type"][value="pickup"] + .form-check-label,
.modal-body .order-type-buttons .btn[value="pickup"],
.modal-body input[type="radio"][name="order_type"][value="pickup"] + label,
.modal-body .form-check-input[name="order_type"][value="pickup"] + .form-check-label,
#checkoutModal .btn[data-order-type="pickup"],
.modal-body .btn[data-order-type="pickup"] {
    background-color: white !important;
    border: none !important;
    color: #6c757d !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#checkoutModal .order-type-buttons .btn[value="pickup"]:hover,
#checkoutModal .btn[data-order-type="pickup"]:hover,
.modal-body .btn[data-order-type="pickup"]:hover {
    background-color: #f8f9fa !important;
    border-color: #495057 !important;
    color: #495057 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2) !important;
}

/* When Pickup is selected/active */
#checkoutModal .order-type-buttons .btn[value="pickup"].active,
#checkoutModal .order-type-buttons .btn[value="pickup"]:checked,
#checkoutModal input[type="radio"][name="order_type"][value="pickup"]:checked + label,
#checkoutModal .btn[data-order-type="pickup"].active,
.modal-body .btn[data-order-type="pickup"].active {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: white !important;
}

/* General Order Type Button Container */
#checkoutModal .order-type-buttons,
.modal-body .order-type-buttons {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
    border: 3px solid #ff6b35 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    background: white !important;
    padding: 0 !important;
}

#checkoutModal .order-type-buttons .btn,
.modal-body .order-type-buttons .btn {
    flex: 1 !important;
    min-height: 60px !important;
    font-size: 1rem !important;
}

/* Icons in buttons */
#checkoutModal .order-type-buttons .btn i,
.modal-body .order-type-buttons .btn i {
    font-size: 1.2rem !important;
}

/* 2. Payment Method Accordion - Force Content Visibility */
#checkoutModal .payment-accordion .accordion-body,
#checkoutModal .accordion-body,
.modal-body .payment-accordion .accordion-body,
.modal-body .accordion-body,
.payment-method-container .accordion-body,
#paymentMethodAccordion .accordion-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 1rem !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    max-height: none !important;
}

#checkoutModal .payment-accordion .accordion-collapse.show .accordion-body,
#checkoutModal .accordion-collapse.show .accordion-body,
.modal-body .payment-accordion .accordion-collapse.show .accordion-body,
.modal-body .accordion-collapse.show .accordion-body,
.payment-method-container .accordion-collapse.show .accordion-body,
#paymentMethodAccordion .accordion-collapse.show .accordion-body {
    display: block !important;
    padding: 1.5rem !important;
}

/* Override Bootstrap's collapse behavior for payment methods */
#checkoutModal .payment-accordion .accordion-collapse,
.modal-body .payment-accordion .accordion-collapse,
.payment-method-container .accordion-collapse,
#paymentMethodAccordion .accordion-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

#checkoutModal .payment-accordion .accordion-collapse:not(.show),
.modal-body .payment-accordion .accordion-collapse:not(.show),
.payment-method-container .accordion-collapse:not(.show),
#paymentMethodAccordion .accordion-collapse:not(.show) {
    display: none !important;
}

/* 3. Customer Info Collapse - Better Behavior */
#checkoutModal .customer-info-collapse,
.modal-body .customer-info-collapse,
.customer-info-content,
.collapse[id*="customer"],
.collapse[id*="Customer"] {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    transform-origin: top !important;
}

#checkoutModal .customer-info-collapse.show,
.modal-body .customer-info-collapse.show,
.customer-info-content.expanded,
.collapse[id*="customer"].show,
.collapse[id*="Customer"].show {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
    visibility: visible !important;
    max-height: none !important;
}

#checkoutModal .customer-info-collapse:not(.show),
.modal-body .customer-info-collapse:not(.show),
.customer-info-content:not(.expanded),
.collapse[id*="customer"]:not(.show),
.collapse[id*="Customer"]:not(.show) {
    height: 0 !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
    visibility: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-height: 0 !important;
}

/* Customer Info Header - Clickable Style */
.customer-info-header,
[data-bs-toggle="collapse"][href*="customer"],
[data-bs-toggle="collapse"][href*="Customer"],
button[data-bs-target*="customer"],
button[data-bs-target*="Customer"] {
    cursor: pointer !important;
    padding: 1rem !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.customer-info-header:hover,
[data-bs-toggle="collapse"][href*="customer"]:hover,
[data-bs-toggle="collapse"][href*="Customer"]:hover,
button[data-bs-target*="customer"]:hover,
button[data-bs-target*="Customer"]:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    border-color: #ff6b35 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.customer-form-arrow {
    transition: transform 0.3s ease !important;
    color: #ff6b35 !important;
}

.customer-form-arrow.rotated {
    transform: rotate(180deg) !important;
}

/* 4. Force Orange Buttons Throughout */
#checkoutModal .btn-primary,
#checkoutModal .btn-outline-primary.active,
#checkoutModal .btn-outline-primary:checked,
#checkoutModal button[style*="background-color: #ff6b35"],
#checkoutModal .btn[style*="background-color: #ff6b35"],
.modal-body .btn-primary,
.modal-body button[style*="background-color: #ff6b35"],
.payment-method-container .btn-primary,
.payment-method-container button[style*="background-color: #ff6b35"] {
    background-color: #ff6b35 !important;
    border-color: #ff6b35 !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

#checkoutModal .btn-outline-primary,
.modal-body .btn-outline-primary,
.payment-method-container .btn-outline-primary {
    border-color: #ff6b35 !important;
    color: #ff6b35 !important;
    background-color: transparent !important;
}

#checkoutModal .btn-outline-primary:hover,
#checkoutModal .btn-primary:hover,
.modal-body .btn-outline-primary:hover,
.modal-body .btn-primary:hover,
.payment-method-container .btn-outline-primary:hover,
.payment-method-container .btn-primary:hover {
    background-color: #e55a2b !important;
    border-color: #e55a2b !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

/* 5. Payment Method Cards - Enhanced Styling */
.payment-method-card,
.accordion-item.payment-method-card {
    border: 2px solid #e9ecef !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    margin-bottom: 0.5rem !important;
}

.payment-method-card:hover,
.accordion-item.payment-method-card:hover {
    border-color: #ff6b35 !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
    transform: translateY(-2px) !important;
}

.payment-method-card.selected,
.accordion-item.payment-method-card.selected {
    border-color: #ff6b35 !important;
    background-color: rgba(255, 107, 53, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
}

.payment-method-card .accordion-button,
.accordion-item.payment-method-card .accordion-button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1.25rem !important;
}

.payment-method-card .accordion-button:not(.collapsed),
.accordion-item.payment-method-card .accordion-button:not(.collapsed) {
    background-color: rgba(255, 107, 53, 0.05) !important;
    color: #ff6b35 !important;
}

/* 6. Ensure form elements are properly styled */
#checkoutModal .form-control:focus,
.modal-body .form-control:focus {
    border-color: #ff6b35 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25) !important;
}

#checkoutModal .form-check-input:checked,
.modal-body .form-check-input:checked {
    background-color: #ff6b35 !important;
    border-color: #ff6b35 !important;
}

/* 7. Dark Mode Support */
body.dark-mode #checkoutModal .payment-method-card,
body.dark-mode .accordion-item.payment-method-card {
    background: #2D2D2D !important;
    border-color: #404040 !important;
    color: #F5F5DC !important;
}

body.dark-mode #checkoutModal .payment-method-card:hover,
body.dark-mode .accordion-item.payment-method-card:hover {
    border-color: #ff6b35 !important;
}

body.dark-mode #checkoutModal .customer-info-header,
body.dark-mode [data-bs-toggle="collapse"][href*="customer"],
body.dark-mode button[data-bs-target*="customer"] {
    background: linear-gradient(135deg, #2D2D2D 0%, #1A1A1A 100%) !important;
    border-color: #404040 !important;
    color: #F5F5DC !important;
}

body.dark-mode #checkoutModal .accordion-body,
body.dark-mode .modal-body .accordion-body,
body.dark-mode .payment-method-container .accordion-body {
    background-color: #1A1A1A !important;
    color: #F5F5DC !important;
    border-top-color: #404040 !important;
}

/* 8. Frequent Payment Methods - Enhanced Card Design */
.frequent-methods-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.frequent-methods-section h6 {
    color: #ff6b35 !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.frequent-methods-section h6 i {
    color: #ffc107 !important;
    margin-right: 0.5rem !important;
}

.frequent-methods-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
}

.frequent-method-card {
    background: white !important;
    border: 2px solid #e9ecef !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.frequent-method-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #ff6b35, #ffc107) !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
}

.frequent-method-card:hover {
    border-color: #ff6b35 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.15) !important;
}

.frequent-method-card:hover::before {
    transform: scaleX(1) !important;
}

.frequent-method-card.selected {
    border-color: #ff6b35 !important;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(255, 193, 7, 0.02) 100%) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1) !important;
}

.frequent-method-card.selected::before {
    transform: scaleX(1) !important;
}

.frequent-method-card .method-info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.frequent-method-card .method-phone {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.frequent-method-card .method-phone::before {
    content: '📱' !important;
    margin-right: 0.5rem !important;
    font-size: 1rem !important;
}

.frequent-method-card .method-details {
    color: #6c757d !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.frequent-method-card .method-details::before {
    content: '🏦' !important;
    font-size: 0.8rem !important;
}

.frequent-method-card .method-select {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #e9ecef !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.frequent-method-card .method-select i {
    font-size: 0.9rem !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
}

.frequent-method-card:hover .method-select {
    background: rgba(255, 107, 53, 0.1) !important;
    transform: scale(1.1) !important;
}

.frequent-method-card:hover .method-select i {
    color: #ff6b35 !important;
}

.frequent-method-card.selected .method-select {
    background: #ff6b35 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

.frequent-method-card.selected .method-select i {
    color: white !important;
    transform: scale(1.2) !important;
}

/* Add bank icon styling */
.frequent-method-card .bank-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(135deg, #ff6b35, #ffc107) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 0.8rem !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
}

/* Enhanced layout for method info */
.frequent-method-card .method-info-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
}

.frequent-method-card .method-text {
    flex-grow: 1 !important;
}

/* Dark mode support for frequent methods */
body.dark-mode .frequent-methods-section {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%) !important;
    border-color: #404040 !important;
    color: #f5f5dc !important;
}

body.dark-mode .frequent-method-card {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #f5f5dc !important;
}

body.dark-mode .frequent-method-card:hover {
    border-color: #ff6b35 !important;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.2) !important;
}

body.dark-mode .frequent-method-card .method-phone {
    color: #f5f5dc !important;
}

body.dark-mode .frequent-method-card .method-details {
    color: #bdc3c7 !important;
}

body.dark-mode .frequent-method-card .method-select {
    background: #404040 !important;
}

body.dark-mode .frequent-method-card .method-select i {
    color: #bdc3c7 !important;
}

body.dark-mode .frequent-method-card:hover .method-select {
    background: rgba(255, 107, 53, 0.2) !important;
}

body.dark-mode .frequent-method-card:hover .method-select i {
    color: #ff6b35 !important;
}

/* 9. Responsive improvements */
@media (max-width: 768px) {
    .customer-info-header,
    [data-bs-toggle="collapse"][href*="customer"],
    button[data-bs-target*="customer"] {
        padding: 0.75rem !important;
    }
    
    .payment-method-card .accordion-button,
    .accordion-item.payment-method-card .accordion-button {
        padding: 1rem !important;
    }
    
    #checkoutModal .btn,
    .modal-body .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .frequent-methods-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .frequent-method-card {
        padding: 1rem !important;
    }
    
    .frequent-methods-section {
        padding: 1rem !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .frequent-method-card .method-phone {
        font-size: 1rem !important;
    }
    
    .frequent-method-card .method-details {
        font-size: 0.8rem !important;
    }
    
    .frequent-method-card .method-select {
        width: 20px !important;
        height: 20px !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
    }
    
    .frequent-method-card .method-select i {
        font-size: 0.8rem !important;
    }
}

/* 10. Modal Z-Index and Loading Fixes - Prevent blocking and ensure proper loading */

/* Fix for all modals - ensure they don't block and load properly */
.modal,
#cartModal,
#productModal,
#checkoutModal,
.product-modal,
.cart-modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1051 !important;
    position: relative !important;
}

.modal-content {
    z-index: 1052 !important;
    position: relative !important;
}

.modal-backdrop {
    z-index: 1049 !important;
}

/* Ensure modals can be closed and don't block interaction */
.modal.show {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.modal-open {
    overflow: hidden !important;
}

/* Cart Modal - Simplified styling to prevent loading issues */
#cartModal .modal-dialog {
    max-width: 600px !important;
    margin: 1.75rem auto !important;
    z-index: 1051 !important;
}

#cartModal .modal-content {
    border-radius: 0.75rem !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 1052 !important;
}

#cartModal .modal-header {
    background: linear-gradient(135deg, #ff6b35 0%, #ffc107 100%) !important;
    color: white !important;
    border-bottom: none !important;
    padding: 1.5rem !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}

#cartModal .modal-title {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

#cartModal .modal-title i {
    font-size: 1.5rem !important;
}

#cartModal .btn-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

#cartModal .btn-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
}

#cartModal .modal-body {
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
}

/* Cart Items - Simplified */
#modalCartItems {
    max-height: 400px !important;
    overflow-y: auto !important;
}

.cart-item {
    background: white !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.2s ease !important;
}

.cart-item:hover {
    border-color: #ff6b35 !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.1) !important;
}

.cart-item-image {
    width: 50px !important;
    height: 50px !important;
    border-radius: 0.25rem !important;
    object-fit: cover !important;
    margin-right: 1rem !important;
}

.cart-item-details {
    flex-grow: 1 !important;
}

.cart-item-name {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.95rem !important;
}

.cart-item-price {
    color: #ff6b35 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.cart-item-quantity {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.85rem !important;
    color: #6c757d !important;
    margin-top: 0.25rem !important;
    display: inline-block !important;
}

/* Cart Total - Simplified */
#cartModal .modal-body h5 {
    background: white !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e9ecef !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    color: #2c3e50 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

#cartModal .modal-body h5 span {
    color: #ff6b35 !important;
    font-size: 1.2rem !important;
}

/* Modal Footer - Simplified */
#cartModal .modal-footer {
    background: white !important;
    border-top: 1px solid #e9ecef !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
}

#cartModal .modal-footer .btn {
    border-radius: 0.5rem !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#cartModal .modal-footer .btn-secondary {
    background: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

#cartModal .modal-footer .btn-secondary:hover {
    background: #5a6268 !important;
    border-color: #5a6268 !important;
}

#cartModal .modal-footer .btn-success {
    background: #ff6b35 !important;
    border-color: #ff6b35 !important;
    color: white !important;
}

#cartModal .modal-footer .btn-success:hover {
    background: #e55a2b !important;
    border-color: #e55a2b !important;
}

/* Empty Cart State - Simplified */
.empty-cart-state {
    text-align: center !important;
    padding: 2rem 1rem !important;
    color: #6c757d !important;
}

.empty-cart-state i {
    font-size: 3rem !important;
    color: #dee2e6 !important;
    margin-bottom: 1rem !important;
}

.empty-cart-state h6 {
    color: #495057 !important;
    margin-bottom: 0.5rem !important;
}

.empty-cart-state p {
    margin-bottom: 0 !important;
    font-size: 0.9rem !important;
}

/* Product Modal Fixes - ULTIMATE Solution for Blocking Issue */

/* Force remove any existing backdrop that might be causing issues */
.modal-backdrop {
    display: none !important;
}

/* Override Bootstrap modal backdrop completely */
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Product Modal - Complete Override */
.product-modal,
#productModal,
.modal[id*="product"],
.modal[class*="product"],
.modal {
    z-index: 1050 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    outline: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none !important;
}

.product-modal.show,
#productModal.show,
.modal[id*="product"].show,
.modal[class*="product"].show,
.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.product-modal .modal-dialog,
#productModal .modal-dialog,
.modal[id*="product"] .modal-dialog,
.modal[class*="product"] .modal-dialog,
.modal .modal-dialog {
    z-index: 1051 !important;
    max-width: 1400px !important;
    width: 98% !important;
    margin: 0 !important;
    position: relative !important;
    pointer-events: auto !important;
    transform: none !important;
}

.product-modal .modal-content,
#productModal .modal-content,
.modal[id*="product"] .modal-content,
.modal[class*="product"] .modal-content,
.modal .modal-content {
    z-index: 1052 !important;
    border-radius: 0.75rem !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    outline: 0 !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

.product-modal .modal-header,
#productModal .modal-header,
.modal[id*="product"] .modal-header,
.modal[class*="product"] .modal-header,
.modal .modal-header {
    background: linear-gradient(135deg, #ff6b35 0%, #ffc107 100%) !important;
    color: white !important;
    border-bottom: none !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.5rem !important;
    flex-shrink: 0 !important;
}

.product-modal .modal-body,
#productModal .modal-body,
.modal[id*="product"] .modal-body,
.modal[class*="product"] .modal-body,
.modal .modal-body {
    padding: 1.5rem !important;
    overflow-y: auto !important;
    position: relative !important;
    flex: 1 1 auto !important;
    background-color: #fff !important;
}

.product-modal .modal-footer,
#productModal .modal-footer,
.modal[id*="product"] .modal-footer,
.modal[class*="product"] .modal-footer,
.modal .modal-footer {
    border-top: 1px solid #e9ecef !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 1rem 1.5rem !important;
    flex-shrink: 0 !important;
    background-color: #fff !important;
}

/* Close button - Always visible and functional */
.product-modal .btn-close,
#productModal .btn-close,
.modal[id*="product"] .btn-close,
.modal[class*="product"] .btn-close,
.modal .btn-close {
    position: relative !important;
    z-index: 1053 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-modal .btn-close:hover,
#productModal .btn-close:hover,
.modal[id*="product"] .btn-close:hover,
.modal[class*="product"] .btn-close:hover,
.modal .btn-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
}

/* Ensure modal can be dismissed by clicking backdrop */
.product-modal,
#productModal,
.modal[id*="product"],
.modal[class*="product"],
.modal {
    cursor: pointer !important;
}

.product-modal .modal-dialog,
#productModal .modal-dialog,
.modal[id*="product"] .modal-dialog,
.modal[class*="product"] .modal-dialog,
.modal .modal-dialog {
    cursor: default !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Remove any fade effects that might cause issues */
.modal.fade {
    transition: none !important;
}

.modal.fade .modal-dialog {
    transition: none !important;
    transform: none !important;
}

/* Ensure all modals follow the same pattern */
.modal:not(.show) {
    display: none !important;
}

/* Dark mode support */
body.dark-mode .product-modal .modal-content,
body.dark-mode #productModal .modal-content,
body.dark-mode .modal[id*="product"] .modal-content,
body.dark-mode .modal[class*="product"] .modal-content,
body.dark-mode .modal .modal-content {
    background-color: #2d2d2d !important;
    color: #f5f5dc !important;
}

body.dark-mode .product-modal .modal-body,
body.dark-mode #productModal .modal-body,
body.dark-mode .modal[id*="product"] .modal-body,
body.dark-mode .modal[class*="product"] .modal-body,
body.dark-mode .modal .modal-body {
    background-color: #2d2d2d !important;
    color: #f5f5dc !important;
}

body.dark-mode .product-modal .modal-footer,
body.dark-mode #productModal .modal-footer,
body.dark-mode .modal[id*="product"] .modal-footer,
body.dark-mode .modal[class*="product"] .modal-footer,
body.dark-mode .modal .modal-footer {
    background-color: #2d2d2d !important;
    border-top-color: #404040 !important;
}

/* Force override any conflicting styles */
.modal * {
    box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-modal .modal-dialog,
    #productModal .modal-dialog,
    .modal[id*="product"] .modal-dialog,
    .modal[class*="product"] .modal-dialog,
    .modal .modal-dialog {
        width: 95% !important;
        max-width: none !important;
    }
    
    .product-modal .modal-content,
    #productModal .modal-content,
    .modal[id*="product"] .modal-content,
    .modal[class*="product"] .modal-content,
    .modal .modal-content {
        max-height: 95vh !important;
    }
}

/* Additional safety measures */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show,
.backdrop,
.overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure no interference from Bootstrap */
.modal.fade.show {
    display: flex !important;
}

.modal.fade:not(.show) {
    display: none !important;
}

/* 11. Fix for Payment Method Display Issues */
.frequent-method-card .method-details,
.payment-method-details,
.method-description {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Hide problematic characters */
.frequent-method-card .method-details::after,
.payment-method-details::after {
    content: '' !important;
}

/* Ensure clean text display */
.frequent-method-card .method-details {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: normal !important;
    text-rendering: optimizeLegibility !important;
}

/* Dark mode support for cart modal */
body.dark-mode #cartModal .modal-content {
    background: #2d2d2d !important;
    color: #f5f5dc !important;
}

body.dark-mode #cartModal .modal-body {
    background: #1a1a1a !important;
}

body.dark-mode .cart-item {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #f5f5dc !important;
}

body.dark-mode .cart-item-name {
    color: #f5f5dc !important;
}

body.dark-mode #cartModal .modal-body h5 {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #f5f5dc !important;
}

body.dark-mode #cartModal .modal-footer {
    background: #2d2d2d !important;
    border-top-color: #404040 !important;
}

/* 12. Alert and Notification Z-Index Fix - Ensure alerts stay on top of all modals */
.alert,
.toast,
.swal2-container,
.swal2-popup,
.notification,
.error-message,
.success-message,
.warning-message,
.info-message,
.modal-alert,
.validation-alert,
.form-alert,
.missing-fields-alert,
div[class*="alert"],
div[class*="toast"],
div[class*="notification"],
div[class*="message"] {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Specific fix for "Campos Faltantes" alert */
.alert-danger,
.alert[class*="danger"],
div[class*="alert-danger"],
.missing-fields-alert,
.validation-error,
.form-validation-error,
.checkout-error,
.error-alert {
    z-index: 999999 !important;
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: 20px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* SweetAlert2 specific fixes */
.swal2-container {
    z-index: 99999 !important;
}

.swal2-popup {
    z-index: 100000 !important;
}

/* Bootstrap alerts */
.alert-danger,
.alert-warning,
.alert-success,
.alert-info,
.alert-primary,
.alert-secondary,
.alert-light,
.alert-dark {
    z-index: 99999 !important;
    position: relative !important;
}

/* Toast notifications */
.toast-container {
    z-index: 99999 !important;
}

.toast {
    z-index: 100000 !important;
}

/* Custom notification styles */
.notification-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99998 !important;
    pointer-events: none !important;
}

.notification-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 99999 !important;
    max-width: 400px !important;
    pointer-events: auto !important;
}

.custom-alert {
    background: white !important;
    border: 2px solid #dc3545 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 20px 60px rgba(220, 53, 69, 0.3) !important;
    z-index: 100000 !important;
    position: relative !important;
    margin-bottom: 1rem !important;
    animation: slideInRight 0.3s ease-out !important;
}

.custom-alert.alert-warning {
    border-color: #ffc107 !important;
    box-shadow: 0 20px 60px rgba(255, 193, 7, 0.3) !important;
}

.custom-alert.alert-success {
    border-color: #28a745 !important;
    box-shadow: 0 20px 60px rgba(40, 167, 69, 0.3) !important;
}

.custom-alert.alert-info {
    border-color: #17a2b8 !important;
    box-shadow: 0 20px 60px rgba(23, 162, 184, 0.3) !important;
}

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

.custom-alert .alert-icon {
    font-size: 1.5rem !important;
    margin-right: 1rem !important;
    vertical-align: middle !important;
}

.custom-alert .alert-content {
    display: inline-block !important;
    vertical-align: middle !important;
}

.custom-alert .alert-title {
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    color: #2c3e50 !important;
}

.custom-alert .alert-message {
    margin-bottom: 0 !important;
    color: #6c757d !important;
}

.custom-alert .alert-close {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.25rem !important;
    color: #6c757d !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.custom-alert .alert-close:hover {
    color: #dc3545 !important;
}

/* Ensure all validation messages are visible */
.invalid-feedback,
.valid-feedback,
.form-text,
.help-block,
.error-text,
.validation-message {
    z-index: 99999 !important;
    position: relative !important;
}

/* Fix for any overlay elements that might interfere */
.overlay,
.backdrop,
.modal-backdrop {
    z-index: 9998 !important;
}

/* Ensure dropdowns and popovers are also above modals when needed */
.dropdown-menu,
.popover,
.tooltip {
    z-index: 99999 !important;
}

/* Dark mode support for alerts */
body.dark-mode .custom-alert {
    background: #2d2d2d !important;
    color: #f5f5dc !important;
}

body.dark-mode .custom-alert .alert-title {
    color: #f5f5dc !important;
}

body.dark-mode .custom-alert .alert-message {
    color: #bdc3c7 !important;
}

body.dark-mode .custom-alert .alert-close {
    color: #bdc3c7 !important;
}

body.dark-mode .custom-alert .alert-close:hover {
    color: #ff6b35 !important;
}

/* Responsive adjustments for alerts */
@media (max-width: 768px) {
    .notification-container {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }
    
    .custom-alert {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .custom-alert .alert-icon {
        font-size: 1.25rem !important;
        margin-right: 0.75rem !important;
    }
}

/* Ensure any JavaScript-generated alerts are properly styled */
.js-alert,
.dynamic-alert,
.runtime-alert {
    z-index: 100000 !important;
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
}

/* 13. Product Modal - Adicionales Section Improvements */
.product-modal .modal-body .adicionales-section,
#productModal .modal-body .adicionales-section,
.modal[id*="product"] .modal-body .adicionales-section,
.modal[class*="product"] .modal-body .adicionales-section,
.modal .modal-body .adicionales-section {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

.product-modal .adicionales-container,
#productModal .adicionales-container,
.modal[id*="product"] .adicionales-container,
.modal[class*="product"] .adicionales-container,
.modal .adicionales-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.product-modal .adicional-item,
#productModal .adicional-item,
.modal[id*="product"] .adicional-item,
.modal[class*="product"] .adicional-item,
.modal .adicional-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    min-height: 60px !important;
}

.product-modal .adicional-item:hover,
#productModal .adicional-item:hover,
.modal[id*="product"] .adicional-item:hover,
.modal[class*="product"] .adicional-item:hover,
.modal .adicional-item:hover {
    border-color: #ff6b35 !important;
    background: rgba(255, 107, 53, 0.05) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15) !important;
}

.product-modal .adicional-item.selected,
#productModal .adicional-item.selected,
.modal[id*="product"] .adicional-item.selected,
.modal[class*="product"] .adicional-item.selected,
.modal .adicional-item.selected {
    border-color: #ff6b35 !important;
    background: rgba(255, 107, 53, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

.product-modal .adicional-info,
#productModal .adicional-info,
.modal[id*="product"] .adicional-info,
.modal[class*="product"] .adicional-info,
.modal .adicional-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-right: 1rem !important;
}

.product-modal .adicional-name,
#productModal .adicional-name,
.modal[id*="product"] .adicional-name,
.modal[class*="product"] .adicional-name,
.modal .adicional-name {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.2 !important;
}

.product-modal .adicional-price,
#productModal .adicional-price,
.modal[id*="product"] .adicional-price,
.modal[class*="product"] .adicional-price,
.modal .adicional-price {
    color: #ff6b35 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    white-space: nowrap !important;
}

.product-modal .adicional-checkbox,
#productModal .adicional-checkbox,
.modal[id*="product"] .adicional-checkbox,
.modal[class*="product"] .adicional-checkbox,
.modal .adicional-checkbox {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.product-modal .adicional-checkbox:checked,
#productModal .adicional-checkbox:checked,
.modal[id*="product"] .adicional-checkbox:checked,
.modal[class*="product"] .adicional-checkbox:checked,
.modal .adicional-checkbox:checked {
    background: #ff6b35 !important;
    border-color: #ff6b35 !important;
    color: white !important;
}

/* Adicionales section header */
.product-modal .adicionales-header,
#productModal .adicionales-header,
.modal[id*="product"] .adicionales-header,
.modal[class*="product"] .adicionales-header,
.modal .adicionales-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid #e9ecef !important;
}

.product-modal .adicionales-title,
#productModal .adicionales-title,
.modal[id*="product"] .adicionales-title,
.modal[class*="product"] .adicionales-title,
.modal .adicionales-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.product-modal .adicionales-icon,
#productModal .adicionales-icon,
.modal[id*="product"] .adicionales-icon,
.modal[class*="product"] .adicionales-icon,
.modal .adicionales-icon {
    color: #ff6b35 !important;
    margin-right: 0.5rem !important;
    font-size: 1.3rem !important;
}

/* Custom Scrollbar Styles */
.product-modal .modal-body::-webkit-scrollbar,
#productModal .modal-body::-webkit-scrollbar,
.modal[id*="product"] .modal-body::-webkit-scrollbar,
.modal[class*="product"] .modal-body::-webkit-scrollbar,
.modal .modal-body::-webkit-scrollbar {
    width: 8px !important;
}

.product-modal .modal-body::-webkit-scrollbar-track,
#productModal .modal-body::-webkit-scrollbar-track,
.modal[id*="product"] .modal-body::-webkit-scrollbar-track,
.modal[class*="product"] .modal-body::-webkit-scrollbar-track,
.modal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.product-modal .modal-body::-webkit-scrollbar-thumb,
#productModal .modal-body::-webkit-scrollbar-thumb,
.modal[id*="product"] .modal-body::-webkit-scrollbar-thumb,
.modal[class*="product"] .modal-body::-webkit-scrollbar-thumb,
.modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(108, 117, 125, 0.5) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.product-modal .modal-body::-webkit-scrollbar-thumb:hover,
#productModal .modal-body::-webkit-scrollbar-thumb:hover,
.modal[id*="product"] .modal-body::-webkit-scrollbar-thumb:hover,
.modal[class*="product"] .modal-body::-webkit-scrollbar-thumb:hover,
.modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 98, 104, 0.7) !important;
    transform: scale(1.1) !important;
}

/* Firefox scrollbar */
.product-modal .modal-body,
#productModal .modal-body,
.modal[id*="product"] .modal-body,
.modal[class*="product"] .modal-body,
.modal .modal-body {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(108, 117, 125, 0.5) #f1f1f1 !important;
}

/* Responsive adjustments for adicionales */
@media (max-width: 768px) {
    .product-modal .adicional-item,
    #productModal .adicional-item,
    .modal[id*="product"] .adicional-item,
    .modal[class*="product"] .adicional-item,
    .modal .adicional-item {
        padding: 0.75rem !important;
        min-height: 50px !important;
    }
    
    .product-modal .adicional-name,
    #productModal .adicional-name,
    .modal[id*="product"] .adicional-name,
    .modal[class*="product"] .adicional-name,
    .modal .adicional-name {
        font-size: 0.9rem !important;
    }
    
    .product-modal .adicional-price,
    #productModal .adicional-price,
    .modal[id*="product"] .adicional-price,
    .modal[class*="product"] .adicional-price,
    .modal .adicional-price {
        font-size: 1rem !important;
    }
    
    .product-modal .adicionales-title,
    #productModal .adicionales-title,
    .modal[id*="product"] .adicionales-title,
    .modal[class*="product"] .adicionales-title,
    .modal .adicionales-title {
        font-size: 1.1rem !important;
    }
}

/* Dark mode support for adicionales */
body.dark-mode .product-modal .adicional-item,
body.dark-mode #productModal .adicional-item,
body.dark-mode .modal[id*="product"] .adicional-item,
body.dark-mode .modal[class*="product"] .adicional-item,
body.dark-mode .modal .adicional-item {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #f5f5dc !important;
}

body.dark-mode .product-modal .adicional-item:hover,
body.dark-mode #productModal .adicional-item:hover,
body.dark-mode .modal[id*="product"] .adicional-item:hover,
body.dark-mode .modal[class*="product"] .adicional-item:hover,
body.dark-mode .modal .adicional-item:hover {
    background: rgba(255, 107, 53, 0.1) !important;
    border-color: #ff6b35 !important;
}

body.dark-mode .product-modal .adicional-name,
body.dark-mode #productModal .adicional-name,
body.dark-mode .modal[id*="product"] .adicional-name,
body.dark-mode .modal[class*="product"] .adicional-name,
body.dark-mode .modal .adicional-name {
    color: #f5f5dc !important;
}

body.dark-mode .product-modal .adicionales-title,
body.dark-mode #productModal .adicionales-title,
body.dark-mode .modal[id*="product"] .adicionales-title,
body.dark-mode .modal[class*="product"] .adicionales-title,
body.dark-mode .modal .adicionales-title {
    color: #f5f5dc !important;
}

body.dark-mode .product-modal .adicionales-header,
body.dark-mode #productModal .adicionales-header,
body.dark-mode .modal[id*="product"] .adicionales-header,
body.dark-mode .modal[class*="product"] .adicionales-header,
body.dark-mode .modal .adicionales-header {
    border-bottom-color: #404040 !important;
}

/* Dark mode scrollbar */
body.dark-mode .product-modal .modal-body::-webkit-scrollbar-track,
body.dark-mode #productModal .modal-body::-webkit-scrollbar-track,
body.dark-mode .modal[id*="product"] .modal-body::-webkit-scrollbar-track,
body.dark-mode .modal[class*="product"] .modal-body::-webkit-scrollbar-track,
body.dark-mode .modal .modal-body::-webkit-scrollbar-track {
    background: #404040 !important;
}

body.dark-mode .product-modal .modal-body,
body.dark-mode #productModal .modal-body,
body.dark-mode .modal[id*="product"] .modal-body,
body.dark-mode .modal[class*="product"] .modal-body,
body.dark-mode .modal .modal-body {
    scrollbar-color: #ff6b35 #404040 !important;
}

/* 14. Delivery Zone Alerts Position Fix */
#deliveryZoneAlert,
#minOrderAlert {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
}

/* 15. Payment Method Alert - Fix Overlap with Frequent Methods */
#checkoutModal .alert[style*="background-color: #fff3e0"],
#checkoutModal .alert[style*="border-color: #ff6b35"],
.modal-body .alert[style*="background-color: #fff3e0"],
.modal-body .alert[style*="border-color: #ff6b35"],
.payment-method-alert,
.mobile-payment-alert,
.vuelto-alert,
div.alert.border.rounded.p-3.my-3 {
    margin-bottom: 2rem !important;
    margin-top: 1rem !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure frequent methods section has proper spacing */
.frequent-methods-section {
    margin-top: 2rem !important;
    clear: both !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Additional spacing for payment method container */
#paymentMethodDetails,
.payment-method-details-container,
.payment-method-info {
    margin-bottom: 1.5rem !important;
}

/* Ensure proper stacking context */
#checkoutModal .mb-4,
.modal-body .mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Fix for any alert that appears before frequent methods */
.frequent-methods-section::before {
    content: '' !important;
    display: block !important;
    height: 1rem !important;
    clear: both !important;
}

/* 16. Currency Conversion Alert - Fix Overlap with Currency Conversion Section */
#checkoutModal .alert-info[style*="background-color: #e3f2fd"],
.modal-body .alert-info[style*="background-color: #e3f2fd"],
.alert.alert-info.border-0.p-3.my-3,
.currency-info-alert,
.bolivares-info-alert {
    margin-bottom: 2rem !important;
    margin-top: 1rem !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure currency conversion section has proper spacing */
.currency-conversion,
.conversion-info,
.currency-conversion.mb-3 {
    margin-top: 2rem !important;
    clear: both !important;
    position: relative !important;
    z-index: 2 !important;
    padding-top: 1rem !important;
}

/* Add spacing before currency conversion */
.currency-conversion::before {
    content: '' !important;
    display: block !important;
    height: 1rem !important;
    clear: both !important;
}

/* Ensure all alerts in payment method section have proper spacing */
#checkoutModal .alert,
.modal-body .alert,
.payment-method-container .alert {
    margin-bottom: 2rem !important;
    margin-top: 1rem !important;
}

/* Specific fix for info alerts */
.alert-info {
    margin-bottom: 2rem !important;
}