/* Base hook applied by the bridge (keep this) */
.vfd-error { width: 400px; box-sizing: border-box; }

/* 1) Default: subtle red (matches your dark UI) */
.alert_default_style {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 12px 12px;
  border-radius: 10px;
  min-height: var(--vfd-control-height, 44px);
  background: rgba(239, 68, 68, 0.22);           /* red-500 @ ~22% */
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ff9aa2;                                 /* soft red text */
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* 2) Brand-purple variant */
.alert_brand_purple {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 12px 12px;
  border-radius: 10px;
  min-height: var(--vfd-control-height, 44px);
  background: rgba(168, 85, 247, 0.18);          /* purple-500 @ ~18% */
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* 3) Neutral/dim inline banner */
.alert_neutral_dim {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 12px 12px;
  border-radius: 10px;
  min-height: var(--vfd-control-height, 44px);
  background: rgba(120, 120, 120, 0.16);
  border: 1px solid rgba(120, 120, 120, 0.28);
  color: #d1d5db;                                 /* neutral-300 */
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* default look (override as you like) */
.redirect-message {
  color: #999;
  font-weight: 500;
  text-align: center;
  font-size: 15px !important;
  font-family: "Inter", sans-serif;
}


@media (max-width: 768px) {
  .vfd-error { width: 100%; }
}