.confirmation-modal { z-index: 9999; background-color: rgba(0, 0, 0, 0.6); } .confirmation-modal .modal-content { border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden; } .confirmation-modal .modal-header { border-bottom: none; padding: 1.5rem 1.5rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); } .confirmation-modal .modal-body { padding: 1rem 1.5rem 1.5rem; background: white; } .confirmation-modal .modal-footer { border-top: none; padding: 0 1.5rem 1.5rem; background: white; gap: 0.75rem; } .confirmation-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.8rem; } .confirmation-icon.warning { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); color: #856404; } .confirmation-icon.danger { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); color: #721c24; } .confirmation-icon.info { background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%); color: #0c5460; } .confirmation-icon.success { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); color: #155724; } .confirmation-title { font-weight: 600; font-size: 1.25rem; margin-bottom: 0.5rem; text-align: center; } .confirmation-message { color: #6c757d; text-align: center; line-height: 1.5; margin-bottom: 0; } .btn-confirm { min-width: 100px; font-weight: 500; border-radius: 6px; transition: all 0.2s ease; } .btn-confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn-cancel { min-width: 100px; font-weight: 500; border-radius: 6px; background-color: #6c757d; border-color: #6c757d; color: white; transition: all 0.2s ease; } .btn-cancel:hover { background-color: #5a6268; border-color: #545b62; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Animation */ .confirmation-modal .modal-dialog { animation: confirmationSlideIn 0.3s ease-out; } @keyframes confirmationSlideIn { from { opacity: 0; transform: translateY(-50px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }