/*    Boutique Mate Toast Theme - Highly Customized for Brand Identity */
/*    Compatible with react-toastify v11 */

@import url('theme-variables.css');

/*    ========================================
   TOAST CONTAINER STYLES
   ======================================== */

/*    Override react-toastify CSS variables with Boutique Mate theme */
:root {
  /*    Toast Colors */
  --toastify-color-light: var(--bm-white);
  --toastify-color-dark: var(--bm-gray-800);
  --toastify-color-info: var(--bm-primary);
  --toastify-color-success: var(--bm-success);
  --toastify-color-warning: var(--bm-warning);
  --toastify-color-error: var(--bm-danger);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  /*    Icon Colors */
  --toastify-icon-color-info: var(--bm-primary);
  --toastify-icon-color-success: var(--bm-success);
  --toastify-icon-color-warning: var(--bm-warning);
  --toastify-icon-color-error: var(--bm-danger);

  /*    Toast Dimensions */
  --toastify-toast-width: 380px;
  --toastify-toast-background: var(--bm-white);
  --toastify-toast-min-height: 72px;
  --toastify-toast-max-height: 800px;
  --toastify-font-family: var(--bm-font-family);
  --toastify-z-index: var(--bm-z-tooltip);
  
  /*    Text Colors */
  --toastify-text-color-light: var(--bm-text-primary);
  --toastify-text-color-dark: var(--bm-white);
  
  /*    Progress Bar */
  --toastify-spinner-color: var(--bm-primary);
  --toastify-spinner-color-empty-area: var(--bm-gray-200);
}

/*    ========================================
   TOAST CONTAINER
   ======================================== */

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  padding: var(--bm-spacing-md);
}

/*    ========================================
   TOAST WRAPPER STYLES
   ======================================== */

.Toastify__toast {
  font-family: var(--bm-font-family);
  border-radius: var(--bm-radius-lg);
  box-shadow: 
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1),
    0 20px 25px -5px rgb(0 0 0 / 0.1);
  min-height: var(--toastify-toast-min-height);
  padding: 0;
  margin-bottom: var(--bm-spacing-lg);
  background: var(--bm-white);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/*    Modern gradient background overlay */
.Toastify__toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

/*    Brand accent stripe */
.Toastify__toast::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--bm-primary);
  transition: width var(--bm-transition-fast);
}

.Toastify__toast:hover::after {
  width: 8px;
}

/*    ========================================
   TOAST BODY
   ======================================== */

.Toastify__toast-body {
  padding: var(--bm-spacing-lg) var(--bm-spacing-xl) var(--bm-spacing-lg) var(--bm-spacing-lg);
  font-size: var(--bm-font-size-base);
  line-height: var(--bm-line-height-normal);
  color: var(--bm-text-primary);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--bm-spacing-md);
}

/*    Toast message styling */
.Toastify__toast-body > div:last-child {
  flex: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/*    ========================================
   TOAST VARIANTS
   ======================================== */

/*    Success Toast */
.Toastify__toast--success {
  background: linear-gradient(135deg, var(--bm-white) 0%, var(--bm-success-bg) 100%);
  border-color: var(--bm-success-light);
}

.Toastify__toast--success::after {
  background: linear-gradient(180deg, var(--bm-success) 0%, #16a34a 100%);
}

.Toastify__toast--success .Toastify__toast-icon {
  color: var(--bm-success);
  background: var(--bm-success-bg);
  border-radius: var(--bm-radius-full);
  padding: var(--bm-spacing-xs);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

/*    Error Toast */
.Toastify__toast--error {
  background: linear-gradient(135deg, var(--bm-white) 0%, #fef2f2 100%);
  border-color: var(--bm-danger-light);
}

.Toastify__toast--error::after {
  background: linear-gradient(180deg, var(--bm-danger) 0%, var(--bm-danger-dark) 100%);
}

.Toastify__toast--error .Toastify__toast-icon {
  color: var(--bm-danger);
  background: var(--bm-danger-light);
  border-radius: var(--bm-radius-full);
  padding: var(--bm-spacing-xs);
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

/*    Info Toast */
.Toastify__toast--info {
  background: linear-gradient(135deg, var(--bm-white) 0%, var(--bm-primary-lighter) 100%);
  border-color: var(--bm-primary-light);
}

.Toastify__toast--info::after {
  background: linear-gradient(180deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%);
}

.Toastify__toast--info .Toastify__toast-icon {
  color: var(--bm-primary);
  background: var(--bm-primary-lighter);
  border-radius: var(--bm-radius-full);
  padding: var(--bm-spacing-xs);
  box-shadow: 0 0 0 4px rgba(196, 126, 90, 0.1);
}

/*    Warning Toast */
.Toastify__toast--warning {
  background: linear-gradient(135deg, var(--bm-white) 0%, var(--bm-warning-bg) 100%);
  border-color: var(--bm-warning-light);
}

.Toastify__toast--warning::after {
  background: linear-gradient(180deg, var(--bm-warning) 0%, #f59e0b 100%);
}

.Toastify__toast--warning .Toastify__toast-icon {
  color: #f59e0b;
  background: var(--bm-warning-bg);
  border-radius: var(--bm-radius-full);
  padding: var(--bm-spacing-xs);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.1);
}

/*    Default Toast */
.Toastify__toast--default {
  background: linear-gradient(135deg, var(--bm-white) 0%, var(--bm-gray-50) 100%);
  border-color: var(--bm-gray-200);
}

.Toastify__toast--default::after {
  background: linear-gradient(180deg, var(--bm-gray-400) 0%, var(--bm-gray-600) 100%);
}

/*    ========================================
   TOAST ICONS
   ======================================== */

.Toastify__toast-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0;
  transition: all var(--bm-transition-base);
}

/*    Animated icon on hover */
.Toastify__toast:hover .Toastify__toast-icon {
  transform: scale(1.1) rotate(5deg);
}

/*    Custom SVG icon styling */
.Toastify__toast-icon svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

/*    ========================================
   PROGRESS BAR
   ======================================== */

.Toastify__progress-bar-container {
  height: 3px;
  background: var(--bm-gray-100);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.Toastify__progress-bar {
  height: 100%;
  border-radius: var(--bm-radius-sm);
  position: relative;
  overflow: hidden;
}

/*    Animated gradient progress bar */
.Toastify__progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.Toastify__progress-bar--success {
  background: linear-gradient(90deg, var(--bm-success) 0%, #16a34a 100%);
}

.Toastify__progress-bar--error {
  background: linear-gradient(90deg, var(--bm-danger) 0%, var(--bm-danger-dark) 100%);
}

.Toastify__progress-bar--info {
  background: linear-gradient(90deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%);
}

.Toastify__progress-bar--warning {
  background: linear-gradient(90deg, var(--bm-warning) 0%, #f59e0b 100%);
}

.Toastify__progress-bar--default {
  background: linear-gradient(90deg, var(--bm-gray-400) 0%, var(--bm-gray-600) 100%);
}

/*    Progress bar animation */
.Toastify__progress-bar--animated {
  animation: none;
}

/*    ========================================
   CLOSE BUTTON
   ======================================== */

.Toastify__close-button {
  color: var(--bm-text-muted);
  opacity: 0.6;
  transition: all var(--bm-transition-fast);
  position: absolute;
  right: var(--bm-spacing-md);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--bm-spacing-xs);
  border-radius: var(--bm-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.Toastify__close-button:hover {
  opacity: 1;
  color: var(--bm-primary);
  background: var(--bm-primary-lighter);
  transform: translateY(-50%) rotate(90deg);
}

.Toastify__close-button > svg {
  width: 16px;
  height: 16px;
}

/*    Hide default close button symbol */
.Toastify__close-button--light {
  color: var(--bm-text-muted);
}

/*    ========================================
   ANIMATIONS
   ======================================== */

/*    Modern slide and fade animations */
@keyframes toastSlideInRight {
  from {
    transform: translate3d(120%, 0, 0) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes toastSlideOutRight {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate3d(120%, 0, 0) scale(0.9);
    opacity: 0;
  }
}

@keyframes toastSlideInLeft {
  from {
    transform: translate3d(-120%, 0, 0) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes toastSlideOutLeft {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate3d(-120%, 0, 0) scale(0.9);
    opacity: 0;
  }
}

/*    Bounce animation for attention */
@keyframes toastBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/*    Apply animations */
.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation: toastSlideInRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation: toastSlideOutRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation: toastSlideInLeft 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation: toastSlideOutLeft 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/*    Bounce attention animation on hover */
.Toastify__toast:hover {
  animation: toastBounce 1s ease-in-out;
  transform: translateY(0);
}

/*    ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
    border-radius: 0;
  }

  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-right,
  .Toastify__toast-container--top-center {
    top: 0;
  }

  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-right,
  .Toastify__toast-container--bottom-center {
    bottom: 0;
  }

  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .Toastify__toast:first-child {
    border-top-left-radius: var(--bm-radius-lg);
    border-top-right-radius: var(--bm-radius-lg);
  }
  
  .Toastify__toast:last-child {
    border-bottom-left-radius: var(--bm-radius-lg);
    border-bottom-right-radius: var(--bm-radius-lg);
  }
}

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

.Toastify__toast-theme--dark {
  background: var(--bm-gray-800);
  color: var(--bm-white);
  border-color: var(--bm-gray-700);
}

.Toastify__toast-theme--dark .Toastify__toast-body {
  color: var(--bm-white);
}

.Toastify__toast-theme--dark .Toastify__close-button {
  color: var(--bm-gray-400);
}

.Toastify__toast-theme--dark .Toastify__close-button:hover {
  color: var(--bm-white);
  background: var(--bm-gray-700);
}

/*    ========================================
   CUSTOM TOAST TYPES
   ======================================== */

/* Loading Toast */
.Toastify__toast--loading {
	background: linear-gradient(135deg, var(--bm-white) 0%, var(--bm-gray-50) 100%);
	border-color: var(--bm-primary-light);
}

.Toastify__toast--loading::after {
	background: var(--bm-primary);
	animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes loadingPulse {
	0%,
	100% {
		opacity: 1;
		width: 5px;
	}
	50% {
		opacity: 0.5;
		width: 10px;
	}
}

.Toastify__toast--loading .Toastify__spinner {
	border: 2px solid var(--bm-primary-lighter);
	border-right-color: var(--bm-primary);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: toastSpinner 0.8s linear infinite;
}

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

/* ========================================
   BOUTIQUE MATE SPECIAL EFFECTS
   ======================================== */

/* Luxury feel with subtle texture */
.Toastify__toast {
	background-image: linear-gradient(135deg, var(--bm-white) 0%, var(--bm-gray-50) 100%),
		url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c47e5a' fill-opacity='0.03'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
	background-size: cover, 40px 40px;
}

/* Hover elevation effect */
.Toastify__toast {
	transition: all var(--bm-transition-base);
}

.Toastify__toast:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 25px 50px -12px rgb(196 126 90 / 0.25);
}

/* Premium close button effect */
.Toastify__close-button {
	background: transparent;
	border: 1px solid transparent;
}

.Toastify__close-button:hover {
	border-color: var(--bm-primary-light);
	box-shadow: 0 0 0 3px rgba(196, 126, 90, 0.1);
}

/* Stacking offset for multiple toasts */
.Toastify__toast-container--top-right .Toastify__toast:nth-child(n + 2),
.Toastify__toast-container--top-left .Toastify__toast:nth-child(n + 2) {
	margin-top: calc(var(--bm-spacing-lg) * -1);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus styles */
.Toastify__toast:focus-visible {
	outline: 2px solid var(--bm-primary);
	outline-offset: 2px;
}

.Toastify__close-button:focus-visible {
	outline: 2px solid var(--bm-primary);
	outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.Toastify__toast {
		border-width: 2px;
	}

	.Toastify__toast::after {
		width: 8px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.Toastify__toast,
	.Toastify__toast-icon,
	.Toastify__close-button {
		animation: none !important;
		transition: none !important;
	}

	.Toastify__progress-bar::after {
		animation: none !important;
	}
}