@use "../../../styles/abstracts/variables" as *;

$green: #7a4b20;
$green: #5e3817;;
$primary-soft: rgba(122, 75, 32, 0.08);
$text-dark: #1a1a1a;
$text-light: #5f5f5f;
$border: rgba(122, 75, 32, 0.15);

/* ======================================
   🔔 FLASH MESSAGE (ELITE / PREMIUM)
====================================== */

.flash {
  position: fixed;
  top: 1.2rem;
  right: 1.5rem;

  /* 🔥 ALWAYS ON TOP */
  z-index: 999999;

  min-width: 280px;
  max-width: 420px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0.85rem 1.1rem;

  font-size: 0.92rem;
  font-weight: 500;

  display: flex;
  align-items: center;
  gap: 0.6rem;

  border: 1px solid transparent;

  backdrop-filter: blur(6px);

  /* 🔥 PREMIUM DEPTH */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);

  animation: slideIn 0.35s ease forwards;

  transition: all 0.25s ease;

  &:hover {
    transform: translateY(-3px) scale(1.01);
  }

  /* 🔥 MOBILE FULL WIDTH */
  @media (max-width: 600px) {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    justify-content: center;
    text-align: center;
  }
}

/* ================= SUCCESS ================= */

.flashSuccess {
  /* 🔥 MUCH DARKER + RICHER GREEN */
  background: linear-gradient(
    135deg,
    rgba(0, 193, 139, 0.32),
    rgba(0, 127, 101, 0.22)
  );

  border: 1px solid rgba(0, 193, 139, 0.55);
  border-left: 5px solid $green;

  color: $text-dark;

  /* 🔥 DEEPER PREMIUM GLOW */
  box-shadow:
    0 14px 40px rgba(0, 193, 139, 0.22),
    0 4px 16px rgba(0, 193, 139, 0.14);
}
/* ================= ERROR ================= */

.flashError {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.12),
    rgba(127, 29, 29, 0.08)
  );

  border: 1px solid rgba(220, 38, 38, 0.35);
  border-left: 5px solid #dc2626;

  color: #7f1d1d;

  box-shadow:
    0 10px 30px rgba(220, 38, 38, 0.12),
    0 2px 10px rgba(220, 38, 38, 0.08);
}

/* ================= WARNING ================= */

.flashWarning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.12),
    rgba(146, 64, 14, 0.08)
  );

  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 5px solid #f59e0b;

  color: #92400e;
}

/* ================= INFO ================= */

.flashInfo {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.12),
    rgba(30, 58, 138, 0.08)
  );

  border: 1px solid rgba(59, 130, 246, 0.35);
  border-left: 5px solid #3b82f6;

  color: #1e3a8a;
}

/* ================= ANIMATION ================= */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}