/* ============================================
   Notyf Theme — TopDeck Dark Glass
   ============================================
   Visual-only overrides. Does NOT touch layout,
   positioning, padding, margins, or animations
   from the default notyf.min.css.
   ============================================ */

/* ---- Semantic colors ---- */
:root {
  /* Matched to mobile app Toast.js colors */
  --notyf-success: #469f6f;
  --notyf-success-subtle: rgba(70, 159, 111, 0.12);
  --notyf-error: #f44336;
  --notyf-error-subtle: rgba(244, 67, 54, 0.12);
  --notyf-info: #6ca6ea;
  --notyf-info-subtle: rgba(108, 166, 234, 0.12);
  --notyf-warning: #c48f37;
  --notyf-warning-subtle: rgba(196, 143, 55, 0.12);
  --notyf-loader: #6ca6ea;
  --notyf-notification: #9ea7b3;
}

/* ---- Toast visual skin ---- */
.notyf__toast {
  background: rgba(33, 38, 45, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(108, 166, 234, 0.20) !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 1px rgba(0, 0, 0, 0.12),
    0 0 12px rgba(108, 166, 234, 0.08);
}

/* Hide the ripple — it fights the glass look */
.notyf__ripple {
  display: none !important;
}

/* ---- Type-specific tinted backgrounds ---- */
.notyf__toast--success {
  background: rgba(70, 159, 111, 0.15) !important;
  border-color: rgba(70, 159, 111, 0.30) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 1px rgba(0, 0, 0, 0.12),
    0 0 12px rgba(70, 159, 111, 0.10);
}

.notyf__toast--error {
  background: rgba(244, 67, 54, 0.15) !important;
  border-color: rgba(244, 67, 54, 0.30) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 1px rgba(0, 0, 0, 0.12),
    0 0 12px rgba(244, 67, 54, 0.10);
}

/* ---- Icon colors ---- */
.notyf__icon--success {
  background: var(--notyf-success-subtle);
  color: var(--notyf-success);
}

.notyf__icon--success::before,
.notyf__icon--success::after {
  border-color: var(--notyf-success) !important;
}

.notyf__icon--error {
  background: var(--notyf-error-subtle);
  color: var(--notyf-error);
}

.notyf__icon--error::before,
.notyf__icon--error::after {
  border-color: var(--notyf-error) !important;
  background: var(--notyf-error) !important;
}

/* Custom type icons (loader, notification, info) */
.notyf__icon .spinner-border {
  color: var(--notyf-loader);
}

.notyf__icon .fa-bell {
  color: var(--notyf-notification);
}

.notyf__icon .fa-circle-info {
  color: var(--notyf-info);
}

/* ---- Message text ---- */
.notyf__message {
  color: #f0f3f6;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---- Dismiss button visual ---- */
.notyf__dismiss-btn {
  background-color: transparent;
}

.notyf__dismiss-btn::before,
.notyf__dismiss-btn::after {
  background: #f0f3f6;
}

.notyf__dismiss-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ---- Hover glow ---- */
/* Base hover (info, loader, notification, etc.) */
.notyf__toast:hover {
  border-color: rgba(108, 166, 234, 0.40) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(108, 166, 234, 0.15);
}

/* Success override */
.notyf__toast--success:hover {
  background: rgba(70, 159, 111, 0.20) !important;
  border-color: rgba(70, 159, 111, 0.45) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(70, 159, 111, 0.18);
}

.notyf__toast--error:hover {
  background: rgba(244, 67, 54, 0.20) !important;
  border-color: rgba(244, 67, 54, 0.45) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(244, 67, 54, 0.18);
}

/* ---- Mobile ---- */
@media only screen and (max-width: 480px) {
  .notyf__toast {
    border-radius: 12px !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .notyf__toast,
  .notyf__toast--disappear {
    animation-duration: 0.01ms !important;
  }
}