/* ==========================================================================
   Live Form Field — Tickchak Live Design System
   Props: fieldType (text|phone) × interaction (default|focus|filled) × validation (none|error|success)
   Figma: UO0nhgcl5YIqYS16vYOXAE node 10051:55815
   Required: tokens.css
   Usage: <div class="lff"> ... </div>
   ========================================================================== */

/* === Wrapper (for error message below) === */
/* גמיש תמיד — נמתח למכל שמכיל אותו (אסף, 16/07). ה-351 שהיה כאן הוא רוחב-הפריים
   בפיגמה שהועתק כמו-שהוא; הוא גלש בכל מכל צר יותר, ולכן שבעה מקומות בדמואים כבר
   עקפו אותו חזרה ל-100%. הרוחב נקבע ע"י המכל, לא ע"י הקומפוננט. */
.lff-wrap{
  display:flex;flex-direction:column;
  width:100%;
  position:relative;
}

/* === Base field ===
   Figma: w:351 h:44, padding:12px 16px, gap:8px, rounded pill, border 1px black */
.lff{
  position:relative;
  width:100%;
  min-height:var(--dim-11);
  padding:var(--space-md) var(--space-lg);   /* Figma: 12px / 16px */
  background:var(--ta-color-bg-base);
  border-radius:100px;
  border:none;
  /* Border rendered as inset box-shadow — doesn't affect layout, so the field
     never resizes when the border thickness changes between states */
  box-shadow:inset 0 0 0 1px var(--color-slate-200, #cedde9);  /* עדכון 18/08: מסגרת אפור-כחול (פיגמה 10051:55815) */
  display:flex;align-items:center;justify-content:flex-start;
  gap:var(--space-sm);
  cursor:pointer;
  transition:box-shadow .2s;
  font-family:var(--font-family-live);
  direction:rtl;
  box-sizing:border-box;
}

/* Label — floats up on focus/filled (animated) */
.lff__label{
  position:absolute;
  right:var(--space-lg);
  top:50%;
  z-index:2;
  background:var(--ta-color-bg-base);
  padding:0 var(--space-sm);
  border-radius:14px;
  font-family:var(--font-family-live);
  font-size:var(--font-size-button-primary);  /* starts same as input */
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
  color:var(--color-slate-950, #1b2836);   /* 18/08: היה text-default */
  white-space:nowrap;
  transform:translateY(-50%);
  transform-origin:right center;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), font-size .22s cubic-bezier(.2,.8,.2,1), padding .22s;
  pointer-events:none;
}
/* Floated (above field) when focused / filled */
.lff--focus .lff__label,
.lff--filled .lff__label,
.lff--error .lff__label,
.lff--success .lff__label{
  /* 18/08 (אסף, פיגמה 2412:100817): התווית יושבת על קו-המסגרת העליון — מרכזה 2px מתחת
     לקצה השדה (גלולה 24 גבוהה, y=-10). קודם צפה ~15px מעל השדה ודרסה את השדה שמעליה. */
  transform:translateY(calc(-50% - 20px));
  font-size:var(--font-size-caption);
  line-height:16px;   /* פיגמה: 12/16 → גלולה 24 גבוהה */
  padding:var(--space-xs) var(--space-sm);
}

/* Required indicator — "חובה" ABOVE the field frame, right side (אסף 2026-07-12) */
.lff__required{
  position:absolute;
  bottom:calc(100% + var(--space-xs));   /* מעל המסגרת */
  right:var(--space-md);                  /* צד ימין */
  top:auto;
  transform:none;
  padding:0 var(--space-xs);
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption,12px);
  font-weight:var(--font-weight-regular);
  line-height:1;
  color:var(--tl-color-state-error-main);
  white-space:nowrap;
  pointer-events:none;
  display:none;
}
.lff--default.lff--required .lff__required{display:flex;}
/* When focused/filled, required also hides (label floats + shows its own state) */
.lff--focus .lff__required,
.lff--filled .lff__required,
.lff--error .lff__required,
.lff--success .lff__required{display:none;}

/* === Disabled — grayed-out, non-interactive ===
   משטח-אפור עדין + מסגרת-אפורה + טקסט-מעומעם, כולם מטוקני inverse-disabled (השדה יושב
   על משטח לבן בהקשר live). דרישת-החובה יורדת. שימוש: ניהול-כותרת-התפריט כבוי → השדה
   מנוטרל (מוטי 2026-07-19, br.central_page.main_menu_title_disable). */
.lff--disabled{
  background:var(--tl-color-bg-surface-inv-disabled);
  box-shadow:inset 0 0 0 1px var(--tl-color-border-inverse-disabled);
  cursor:default;pointer-events:none;
}
.lff--disabled .lff__label{color:var(--tl-color-text-inverse-disabled);background:transparent;}
.lff--disabled .lff__value{color:var(--tl-color-text-inverse-disabled);}
.lff--disabled .lff__cursor{display:none;}
.lff--disabled .lff__required{display:none;}

/* === Placeholder text (default state) === */
/* Placeholder — hidden by default (label takes its place), shown only if no label animation needed */
.lff__placeholder{
  display:none;
}

/* === Value text (filled state) — Regular (אסף 18/08, פיגמה 2412:100817: Rubik Regular 16; היה Bold) === */
.lff__value{
  font-family:var(--font-family-live);
  font-size:var(--font-size-button-primary);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
  color:var(--color-slate-950, #1b2836);   /* 18/08: היה text-default */
  text-align:right;
  display:none;
}
.lff--filled .lff__value{display:block;}

/* === Cursor (focus state) === */
.lff__cursor{
  width:1px;
  height:var(--dim-5);
  background:var(--tl-color-state-info);
  animation:lff-blink 1s step-end infinite;
  display:none;
}
.lff--focus .lff__cursor{display:block;}
@keyframes lff-blink{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}

/* === Right icon (optional) === */
.lff__icon{
  width:var(--dim-5);
  height:var(--dim-5);
  flex-shrink:0;
  display:block;
}

/* === Phone prefix (flag + +972 + divider) === */
.lff__phone-prefix{
  display:none;
  align-items:center;
  gap:var(--space-sm);
  flex-shrink:0;
}
.lff--phone .lff__phone-prefix{display:flex;margin-inline-start:auto;}
.lff--phone{justify-content:flex-start;}

.lff__flag{
  width:var(--dim-5);
  height:var(--dim-5);
  flex-shrink:0;
  display:block;
}
.lff__country-code{
  font-family:var(--font-family-live);
  font-size:var(--font-size-button-primary);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-button-primary);
  color:var(--ta-color-text-default);
  direction:ltr;
}
.lff__divider{
  width:1px;
  height:20px;
  background:var(--ta-color-border-default);
  flex-shrink:0;
}

/* === Focus state — 4px brand border (via inset shadow) === */
.lff--focus{
  box-shadow:inset 0 0 0 3px var(--tl-color-brand-main);   /* 18/08: עובי 3 (היה 4) */
}

/* === Filled state — 4px brand border === */
.lff--filled{
  box-shadow:inset 0 0 0 3px var(--tl-color-brand-main);   /* 18/08: עובי 3 (היה 4) */
}

/* === Error state — 2px red border (per Figma) === */
.lff--error{
  box-shadow:inset 0 0 0 3px var(--tl-color-state-error-border, var(--tl-color-state-error-main));   /* 18/08: עובי 3 (היה 2) */
  justify-content:space-between;
  padding-left:var(--space-md);  /* 12px per Figma */
}
.lff--error .lff__error-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--dim-5);
  height:var(--dim-5);
  flex-shrink:0;
}
.lff__error-icon{display:none;}

/* === Success state — 4px green border === */
.lff--success{
  box-shadow:inset 0 0 0 3px var(--tl-color-state-success-bg);   /* 18/08: עובי 3 (היה 4) */
  justify-content:space-between;
  padding-left:var(--space-md);  /* 12px per Figma */
}
.lff--success .lff__success-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--dim-5);
  height:var(--dim-5);
  flex-shrink:0;
  background:var(--tl-color-state-success-bg);
  border-radius:100px;
}
.lff__success-icon{display:none;}
.lff__success-icon svg{width:10px;height:10px;}

/* === Error message (below field) === */
.lff__error-text{
  padding:var(--space-xs) var(--space-lg);
  font-family:var(--font-family-live);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);
  color:var(--tl-color-state-error-main);
  text-align:right;
  display:none;
}
.lff-wrap.has-error .lff__error-text{display:block;}