/* =========================================
   BASE ALERT
   ========================================= */

.alert {
  border-radius: var(--radius-small);
  padding: 12px 16px;
  border: 1px solid #c8b8a0;
  background: #efe7da;
  color: #3b2f23;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  margin-bottom: 14px;
}


/* =========================================
   ALERT VARIANTS
   ========================================= */

.alert-primary {
  background: var(--alert-primary-bg);
  border-color: #b8c8de;
  border-left: 6px solid #2c4a7a;
  color: #1f2f4d;
}

.alert-secondary {
  background: var(--alert-secondary-bg);
  border-color: #c9c3bb;
  border-left: 6px solid #7c756b;
  color: #3d3a36;
}

.alert-success {
  background: var(--alert-success-bg);
  border-color: #b9d2bf;
  border-left: 6px solid #2f6b3b;
  color: #1f3d25;
}

.alert-info {
  background: var(--alert-info-bg);
  border-color: #b8d7df;
  border-left: 6px solid #2a6675;
  color: #163c44;
}

.alert-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  border-left: 6px solid #7a640f;
  color: #2b2308;
}

.alert-danger {
  background: var(--alert-danger-bg);
  border-color: #caa5a5;
  border-left: 6px solid #7c1f1f;
  color: #5a1f1f;
}
.no-results-alert {
  color: #9aa0a6;
}


/* =========================================
   MTG BADGES — BASE
========================================= */

.mtg-badge {

  font-size: 0.75rem;
  padding: 4px 8px;

  border-radius: 4px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  white-space: nowrap;

}


/* =========================================
   BASE BADGE STYLE
========================================= */
.mtg-badge {

  font-size: 0.75rem;
  padding: 4px 8px;

  border-radius: 4px;

  display: inline-block;

  font-weight: 600;

  letter-spacing: 0.02em;

}

/* =========================================
   DEFAULT (FOR DARK PAGE BACKGROUNDS)
========================================= */

/* Official */

.mtg-badge.official {

  background: rgba(255,255,255,0.08);
  color: #ffe376;

  border: 1px solid rgba(255,255,255,0.18);

}

.mtg-badge.official:hover {

  background: rgba(255,255,255,0.16);

}


/* Custom */

.mtg-badge.custom {

  background: rgba(255,140,0,0.15);
  color: #ffb347;

  border: 1px solid rgba(255,140,0,0.35);

}

.mtg-badge.custom:hover {

  background: rgba(255,140,0,0.25);

}


/* =========================================
   LIGHT PAGE BACKGROUNDS (.dark modifier)
========================================= */

/* Official */

.mtg-badge.dark.official {

  background: #f4f6f8;
  color: #333;

  border: 1px solid #d0d5db;

}

.mtg-badge.dark.official:hover {

  background: #e8ecf1;

}


/* Custom */

.mtg-badge.dark.custom {

  background: #fff4e6;
  color: #b35a00;

  border: 1px solid #ffc78a;

}

.mtg-badge.dark.custom:hover {

  background: #ffe7cc;

}



/* =========================
   TOAST STACK
========================= */

.toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-direction: column-reverse;

}


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

.toast {
  display: flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  width: 320px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  animation: toast-in .25s ease;

}

@keyframes toast-in {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* =========================
   ICON AREA
========================= */

.toast-icon {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}


/* =========================
   CONTENT AREA
========================= */

.toast-content {
  background: white;
  padding: 12px 16px;
  flex: 1;
  font-size: 14px;
  color: black;
  word-break: break-word;

}


/* =========================
   TYPE COLORS
========================= */

.toast.success {
  background: #2ecc71;
}

.toast.error {
  background: #e74c3c;
}

.toast.warning {
  background: #f39c12;
}

.toast.info {
  background: #3498db;
}