@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");

@import "variables.css";
@import "base.css";
@import "navbar.css";
@import "buttons.css";
@import "cards.css";
@import "hero.css";
@import "carousel.css";
@import "checkout.css";
@import "sections.css";
@import "products.css";
@import "cart.css";

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  color: var(--white);
  font-weight: var(--font-weight-medium);
  z-index: var(--z-notification);
  animation: slideIn var(--transition-normal) ease;
}

.notification-success {
  background: var(--success-color);
}

.notification-error {
  background: var(--danger-color);
}

.notification-info {
  background: var(--primary-color);
}

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

.swal-modern-popup {
  border-radius: 16px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  font-family: 'Inter', sans-serif !important;
  border: none !important;
}

.swal-modern-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.5rem !important;
}

.swal-modern-content {
  font-size: 1rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}

.swal-modern-confirm {
  background: var(--danger-color) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2) !important;
}

.swal-modern-confirm:hover {
  background: #c82333 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
}

.swal-modern-cancel {
  background: var(--gray-500) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

.swal-modern-cancel:hover {
  background: #5a6268 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3) !important;
}

.swal-toast-popup {
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* SweetAlert2 Icon Styling */
.swal2-icon.swal2-question {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--warning-color) !important;
  color: var(--warning-color) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--success-color) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--success-color) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--success-color) !important;
}