/*
 * venne_email_bounce — Frontend-CSS (Lagom2 Futuristic Style)
 *
 * Glassy dark notice + card design — passt zu Lagom2 Futuristic-Theme.
 * Nutzt Lagom-CSS-Variablen mit harten Hex-Fallbacks fuer non-Lagom-Themes.
 * currentColor-Pattern: Akzent + Border + Icon erben dieselbe Farbe der Variante.
 */

/* ─── Card ─────────────────────────────────────────────────────── */
.veb-card {
  background: var(--bg-panel, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--gray-lighter-3, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.veb-card--warning { border-color: rgba(224, 120, 0, 0.32); }
.veb-card--success { border-color: rgba(41, 147, 65, 0.32); }
.veb-card--error   { border-color: rgba(217, 38, 50, 0.32); }

.veb-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: var(--bg-panel-hover, rgba(255, 255, 255, 0.08));
}
.veb-card__icon--warning { color: var(--brand-warning, #E07800); background: rgba(224, 120, 0, 0.14); }
.veb-card__icon--success { color: var(--brand-success, #299341); background: rgba(41, 147, 65, 0.14); }
.veb-card__icon--error   { color: var(--brand-danger, #D92632); background: rgba(217, 38, 50, 0.14); }

.veb-card__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
  color: inherit;
}

.veb-card__intro {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: inherit;
  opacity: 0.92;
}

.veb-card__hint {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 24px;
  opacity: 0.7;
}

.veb-card__email {
  display: inline-block;
  background: var(--bg-panel-hover, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--gray-lighter-3, rgba(255, 255, 255, 0.08));
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
  word-break: break-all;
  margin: 6px 0;
  color: inherit;
}

/* ─── Notice (glassy, Lagom Futuristic) ───────────────────────── */
/* Doppel-Selector (.veb-card .veb-notice) erhoeht Spezifitaet damit
   Lagom-Theme-Default-Alerts (.alert-warning, etc.) nicht ueberschreiben.
   Plus !important auf color um Theme-Color-Vars in Futuristic-Skin zu schlagen. */

.veb-card .veb-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px 14px 22px;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  margin: 0 0 24px;
  background-clip: padding-box;
  overflow: hidden;
}

.veb-card .veb-notice::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: 0.95;
}

.veb-card .veb-notice__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.veb-card .veb-notice__body {
  flex: 1 1 auto;
  color: inherit;
}

.veb-card .veb-notice--success {
  background: rgba(41, 147, 65, 0.12) !important;
  border-color: rgba(41, 147, 65, 0.40) !important;
  color: #5BC97A !important;
}

.veb-card .veb-notice--warning {
  background: rgba(224, 120, 0, 0.14) !important;
  border-color: rgba(224, 120, 0, 0.44) !important;
  color: #FFB866 !important;
}

.veb-card .veb-notice--error {
  background: rgba(217, 38, 50, 0.12) !important;
  border-color: rgba(217, 38, 50, 0.40) !important;
  color: #FF8A93 !important;
}

.veb-card .veb-notice--info {
  background: rgba(16, 98, 254, 0.10) !important;
  border-color: rgba(16, 98, 254, 0.34) !important;
  color: #6FB8FF !important;
}

/* ─── Form ────────────────────────────────────────────────────── */
.veb-form {
  margin: 24px 0 8px;
  text-align: left;
}

.veb-form .form-group {
  margin-bottom: 16px;
}

.veb-form label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  opacity: 0.85;
}

.veb-form .form-control {
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--gray-lighter-3, rgba(255, 255, 255, 0.10));
  color: inherit;
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.veb-form .form-control:focus {
  border-color: var(--brand-primary, #d14c4c);
  box-shadow: 0 0 0 3px rgba(209, 76, 76, 0.15);
  outline: none;
}

/* Mobile */
@media (max-width: 480px) {
  .veb-card { padding: 32px 20px; }
  .veb-card__title { font-size: 22px; }
}