/* ==========================================================================
   AccountVerificationBanner — Tickchak Design System
   מתואם 1:1 לפיגמה: tIGshAcTyBw7tLLptHDpy4 / 41656:14373 ("אימות חשבון")
   ----------------------------------------------------------------------
   API:
     base:    .avb
     device:  .avb--desktop · .avb--mobile
     state:   .avb--unverified · .avb--verified
   ----------------------------------------------------------------------
   Variants (4): Device {Desktop|Mobile} × State {Unverified|Verified}
     Unverified → רקע state/error/bg (#ffcccc), shield אדום 54px, טקסט reds/600
     Verified   → רקע bg/base (לבן), shield כחול 44px, טקסט turquoise/600
   Tokens: --ta-color-state-error-bg · --color-reds-600 · --color-turquoise-600
           --ta-color-bg-base · --ta-color-text-default · spacing · radius
   ========================================================================== */

.avb{
  position:relative;
  display:flex;
  align-items:center;
  border-radius:var(--border-radius-xl);          /* 16 */
  box-sizing:border-box;
  font-family:'Google Sans','Rubik',sans-serif;
}

/* --- Shield (אייקון צף, חורג מהקצה) -------------------------------------- */
.avb__shield{
  position:absolute;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  pointer-events:none;
}

/* --- טקסט סטטוס --------------------------------------------------------- */
.avb__status{
  font-weight:var(--font-weight-regular, 400);
  font-size:var(--font-size-body-small, 14px);
  line-height:13px;
  text-align:center;
  white-space:nowrap;
  word-break:break-word;
}

/* --- כפתור "אימות חשבון" (chip לבן pill) -------------------------------- */
.avb__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);                             /* 8 */
  height:28px;
  padding:0 var(--space-lg);                       /* 0 / 16 */
  border:none;
  border-radius:var(--border-radius-full);         /* 999 */
  background:var(--ta-color-bg-base);              /* לבן */
  color:var(--ta-color-text-default);             /* שחור */
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:var(--font-weight-bold, 700);
  font-size:var(--font-size-button-chip, 12px);
  line-height:16px;
  white-space:nowrap;
  cursor:pointer;
}

/* ==========================================================================
   STATE: Unverified — רקע אדום-בהיר, shield אדום, טקסט reds/600
   ========================================================================== */
.avb--unverified{ background:var(--ta-color-state-error-bg); }   /* #ffcccc */
.avb--unverified .avb__status{ color:var(--color-reds-600); }    /* #cc0000 */
.avb--unverified .avb__shield{
  width:54px; height:54px;
  background-image:url('verification/shield-unverified.png');
}

/* Desktop/Unverified — אנכי 105×84 */
.avb--desktop.avb--unverified{
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:var(--space-xs);                             /* 4 */
  width:105px;
  height:84px;
  padding:var(--space-xs);                         /* 4 */
}
.avb--desktop.avb--unverified .avb__shield{
  top:-30px;
  left:50%;
  transform:translateX(-50%);
}
.avb--desktop.avb--unverified .avb__status{
  white-space:normal;                              /* 2 שורות */
  line-height:1.1;
}
.avb--desktop.avb--unverified .avb__btn{ width:100%; }

/* Mobile/Unverified — אופקי, shield בתוך הבאנר בימין (עודכן: 38px, right:-1, space-between) */
.avb--mobile.avb--unverified{
  flex-direction:row;
  justify-content:space-between;
  gap:var(--space-lg);                             /* 16 */
  padding:var(--space-xs) var(--space-3xl) var(--space-xs) var(--space-xs); /* 4 / 48 / 4 / 4 — רווח מורחב בין הטקסט ל-shield */
}
.avb--mobile.avb--unverified .avb__shield{
  width:38px; height:38px;
  right:-1px;
  top:50%;
  transform:translateY(-50%);
}

/* --- Modifier: --block — הבאנר נמתח לרוחב מלא של ההורה (הכפתור נשאר קבוע/hug) ----
   space-between מפזר: כפתור "אימות חשבון" קבוע בשמאל, טקסט+shield בימין (כמו בפיגמה). */
.avb--block{ width:100%; }

/* --- אנימציית "אורות אמבולנס" על ה-shield במצב Unverified --------------------
   הילה אדומה (drop-shadow) שמהבהבת ב-double-flash ואז מנוחה — אזעקה אדומה. בלי תזוזת אייקון. */
.avb--unverified .avb__shield{
  animation: avb-siren 1.3s ease-in-out infinite;
}
@keyframes avb-siren{
  0%        { filter: drop-shadow(0 0 9px rgba(255,0,0,0.95)); }
  10%       { filter: drop-shadow(0 0 2px rgba(255,0,0,0.1)); }
  20%       { filter: drop-shadow(0 0 9px rgba(255,0,0,0.95)); }
  30%       { filter: drop-shadow(0 0 2px rgba(255,0,0,0.1)); }
  55%, 100% { filter: drop-shadow(0 0 2px rgba(255,0,0,0.1)); }  /* מנוחה */
}
@media (prefers-reduced-motion: reduce){
  .avb--unverified .avb__shield{ animation: none; }
}


/* ==========================================================================
   STATE: Verified — רקע לבן, shield כחול 44px, טקסט turquoise/600
   (Desktop == Mobile — זהים)
   ========================================================================== */
.avb--verified{
  flex-direction:row;
  justify-content:center;
  gap:var(--space-lg);                             /* 16 */
  height:28px;                                     /* גובה קבוע (Figma h-28) */
  background:var(--ta-color-bg-base);              /* לבן */
  padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-sm); /* 4 / 24 / 4 / 8 */
}
.avb--verified .avb__status{ color:var(--color-turquoise-600); } /* #33a7b6 */
.avb--verified .avb__shield{
  width:30px; height:30px;                          /* עודכן: shield בתוך ה-pill, ממורכז אנכית */
  right:-3px;
  top:50%;
  transform:translateY(-50%);
  background-image:url('verification/shield-verified.png');
}