/* Modal Fix CSS - Better contrast and visibility */
.modal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px #00d4ff !important;
    font-size: 1.25rem !important;
}

.modal-header {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    color: #ffffff !important;
    border-bottom: 2px solid #00d4ff !important;
    padding: 1rem 1.5rem !important;
}

.modal-content {
    background: #ffffff !important;
    border: 2px solid #00d4ff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.modal-body {
    color: #333333 !important;
    background: #ffffff !important;
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid #e9ecef !important;
    background: #f8f9fa !important;
    padding: 1rem 1.5rem !important;
}

/* Form elements with better contrast */
.modal .form-label {
    color: #495057 !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.modal .form-control,
.modal .form-select {
    color: #333333 !important;
    background: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25) !important;
    outline: none !important;
}

.modal .form-control::placeholder {
    color: #6c757d !important;
}

/* Buttons with better contrast */
.modal .btn {
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.3s ease !important;
}

.modal .btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
}

.modal .btn-primary:hover {
    background: linear-gradient(135deg, #0056b3, #004085) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4) !important;
}

.modal .btn-secondary {
    background: #6c757d !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3) !important;
}

.modal .btn-secondary:hover {
    background: #5a6268 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4) !important;
}

/* Product info styling */
.modal .product-info {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.modal .product-image {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.modal .product-badges .badge {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.modal .badge-success {
    background: #28a745 !important;
    color: #ffffff !important;
}

.modal .badge-primary {
    background: #007bff !important;
    color: #ffffff !important;
}

.modal .badge-warning {
    background: #ffc107 !important;
    color: #212529 !important;
}

/* Payment summary styling */
.modal .payment-summary {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
}

.modal .payment-summary h6 {
    color: #495057 !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.modal .total-amount {
    background: #ffffff !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}

.modal .total-label {
    color: #495057 !important;
    font-weight: 600 !important;
}

.modal .total-value {
    color: #007bff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.modal .key-info {
    color: #6c757d !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    padding: 1rem !important;
}

/* Table styling in modal */
.modal .table th {
    background: #f8f9fa !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
    font-weight: 600 !important;
}

.modal .table td {
    color: #333333 !important;
    border-color: #dee2e6 !important;
}

/* Alert styling in modal */
.modal .alert {
    color: #721c24 !important;
    background: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 8px !important;
}

.modal .alert-success {
    color: #155724 !important;
    background: #d4edda !important;
    border-color: #c3e6cb !important;
}

.modal .alert-info {
    color: #0c5460 !important;
    background: #d1ecf1 !important;
    border-color: #bee5eb !important;
}

/* Close button styling */
.modal .btn-close {
    background: none !important;
    border: none !important;
    color: #6c757d !important;
    font-size: 1.5rem !important;
    padding: 0 !important;
    transition: color 0.3s ease !important;
}

.modal .btn-close:hover {
    color: #dc3545 !important;
}

/* Responsive modal */
@media (max-width: 768px) {
    .modal-content {
        margin: 1rem !important;
        border-radius: 8px !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
    
    .modal .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
}