/* =========================================================
   ON-BRAND PROMO / EMPTY-STATE CARDS
   Replaces generic stock-clipart illustration banners (a woman
   shopping, a mailbox, a signpost, etc.) with the same ambient
   grid/aurora/orbit-ring language already used on login, register
   and the profile cover fallback -- so these cards look like part
   of the same product instead of a different one.
   ========================================================= */

.ci-promo-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px;
  padding: 22px 26px; border-radius: var(--ci-r-lg); border: 1px solid var(--ci-line);
  background: var(--ci-surface); box-shadow: var(--ci-shadow-card);
}
.ci-promo-card__anim { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ci-promo-card__anim .ci-anim__grid { opacity: .4; }
.ci-promo-card__anim .ci-anim__aurora--a { width: 320px; height: 320px; left: -6%; top: -30%; }
.ci-promo-card__anim .ci-anim__aurora--b { width: 260px; height: 260px; left: auto; right: -8%; bottom: -40%; }
.ci-promo-card__anim .ci-anim__orbits { left: 88%; top: 50%; }
.ci-promo-card__anim .ci-orbit-ring--1 { width: 120px; height: 120px; }
.ci-promo-card__anim .ci-orbit-ring--2 { width: 190px; height: 190px; }
.ci-promo-card__anim .ci-orbit-ring--3 { width: 260px; height: 260px; }

.ci-promo-card__icon {
  position: relative; z-index: 1; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ci-green-soft); color: var(--ci-green-text);
  box-shadow: 0 0 0 1px var(--ci-green-ring), 0 8px 24px -8px rgba(81,194,60,.35);
}
.ci-promo-card__icon svg { width: 26px; height: 26px; }
.ci-promo-card__body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.ci-promo-card__body h2, .ci-promo-card__body h3 {
  font-family: var(--ci-font-display); font-weight: 600; font-size: 19px; margin: 0 0 4px; color: var(--ci-bone);
}
.ci-promo-card__body p { margin: 0 0 14px; font-size: 13.5px; color: var(--ci-text-3); max-width: 46ch; }
.ci-promo-card__body .btn { position: relative; z-index: 1; }

@media (max-width: 600px) {
  .ci-promo-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 20px; }
  .ci-promo-card__anim .ci-anim__orbits { display: none; }
}

/* ---- Full-page states (banned, maintenance): a large icon-in-a-glow-ring
   with the ambient anim behind it, in place of a full-width stock
   illustration (a loaf of bread, a wrench-and-gear scene, etc). ---- */
.tag_404_innr.ci-fullstate { position: relative; max-width: 560px; }
.tag_404_innr.ci-fullstate .ci-promo-card__anim { position: absolute; inset: -80px; z-index: 0; }
.ci-fullstate__icon {
  position: relative; z-index: 1; width: 108px; height: 108px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ci-green-soft); color: var(--ci-green-text);
  box-shadow: 0 0 0 1px var(--ci-green-ring), 0 20px 50px -20px rgba(81,194,60,.4);
}
.ci-fullstate__icon svg { width: 48px; height: 48px; }
.tag_404_innr.ci-fullstate h2, .tag_404_innr.ci-fullstate p { position: relative; z-index: 1; }

/* ---- Simple empty states (no messages, no transactions, banned, maintenance):
   restraint over decoration -- a quiet icon-in-a-ring instead of any illustration. ---- */
.ci-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 24px; text-align: center; }
.ci-empty__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ci-surface-2); color: var(--ci-text-4); border: 1px solid var(--ci-line); }
.ci-empty__icon svg { width: 28px; height: 28px; }
.ci-empty h3 { font-family: var(--ci-font-display); font-weight: 600; font-size: 17px; margin: 0; color: var(--ci-bone); }
.ci-empty p { margin: 0; font-size: 13.5px; color: var(--ci-text-3); max-width: 40ch; }