/*
 * Shared polished flash banner — used by @layouts.nouser (auth: login/signup/
 * password) and @layouts.public (checkout, finalize). Visual language mirrors the
 * public checkout success banner (.reg-flash-success): rounded soft card, round
 * icon chip, title + body. Status variants tint the surface and icon. Full 1px
 * border (no side-stripe). Hexes are hardcoded to the GL palette because public
 * pages don't load the --gl-* token bundle.
 */
.gl-flash {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.gl-flash__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gl-flash__icon svg {
  display: block;
}

.gl-flash__text {
  min-width: 0;
}

.gl-flash__title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 1px;
  line-height: 1.35;
}

.gl-flash__body {
  font-size: 14px;
  line-height: 1.45;
  color: #4b5563;
  margin: 0;
}

.gl-flash__body p {
  margin: 0;
}

.gl-flash__body p + p {
  margin-top: 2px;
}

/* Success / verified — neutral surface + near-black icon (the checkout look). */
.gl-flash--success .gl-flash__icon {
  background: #1a1a1a;
}

.gl-flash--info {
  background: #eaf4fb;
  border-color: rgba(29, 144, 210, 0.22);
}
.gl-flash--info .gl-flash__icon {
  background: #1d90d2;
}

.gl-flash--warning {
  background: #fbf0e0;
  border-color: rgba(180, 83, 9, 0.22);
}
.gl-flash--warning .gl-flash__icon {
  background: #b45309;
}

.gl-flash--danger {
  background: #fbe9e9;
  border-color: rgba(220, 38, 38, 0.22);
}
.gl-flash--danger .gl-flash__icon {
  background: #dc2626;
}
.gl-flash--danger .gl-flash__title {
  color: #7f1d1d;
}

/*
 * Shared CTA size for the auth + finalize flows. One consistent height across login,
 * signup, and finalize that harmonizes with the 40px inputs and matches the public
 * checkout button (15px / 600 / 10px radius). Color/hierarchy stays on each .btn class.
 */
.gl-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
}