/* ============================================================================
   FADEZEN · Components
   כפתורים, צ'יפים, תגיות, כרטיסים, שדות, דירוגים, מתגים, שלדי טעינה.
   ========================================================================= */

/* ------------------------------------------------------------------ buttons */
.btn{
  --btn-bg: rgba(255,255,255,.07);
  --btn-ink: var(--ink-1);
  --btn-line: var(--line);
  --btn-shadow: none;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--btn-line);
  box-shadow: var(--btn-shadow);
  font-weight: 700; font-size: var(--t-md);
  white-space: nowrap; user-select: none;
  transition: transform var(--d-1) var(--ease-out),
              filter var(--d-2) var(--ease-out),
              background var(--d-2) var(--ease-out),
              opacity var(--d-2);
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: scale(.955); }
.btn:disabled,.btn[aria-disabled="true"]{ opacity: .42; pointer-events: none; }
.btn svg{ flex: none; }

.btn--primary{ --btn-bg: var(--grad-nav); --btn-ink: var(--ink-on-nav); --btn-line: transparent; --btn-shadow: var(--e-glow-nav); }
.btn--live   { --btn-bg: var(--grad-live); --btn-ink: var(--ink-on-live); --btn-line: transparent; --btn-shadow: var(--e-glow-live); }
.btn--ghost  { --btn-bg: rgba(255,255,255,.07); }
.btn--quiet  { --btn-bg: transparent; --btn-line: var(--line-strong); }
.btn--danger { --btn-bg: var(--busy-dim); --btn-ink: var(--busy-ink); --btn-line: rgba(255,82,82,.32); }
.btn--block  { width: 100%; }
/* min-width:0 חובה: ברירת המחדל של פריט flex היא min-width:auto, כלומר
   הכפתור מסרב להצטמצם מתחת לרוחב הטקסט שלו. שני כפתורים רחבים ושני
   ריבועים במסך 360px יצרו גלישה אופקית של כל הפאנל. */
.btn--grow   { flex: 1 1 0; min-width: 0; }
.btn--grow > span,
.btn--grow  { overflow: hidden; text-overflow: ellipsis; }
.btn--sm     { height: 38px; padding: 0 var(--s-4); font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn--square { width: 52px; padding: 0; flex: none; }

/* כפתור אייקון עגול/מרובע */
.iconbtn{
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--ink-1);
  transition: transform var(--d-1) var(--ease-out), background var(--d-2), border-color var(--d-2), color var(--d-2);
}
.iconbtn:hover{ background: rgba(255,255,255,.11); }
.iconbtn:active{ transform: scale(.9); }
.iconbtn--round{ border-radius: var(--r-pill); }
.iconbtn--sm{ width: 34px; height: 34px; }
.iconbtn.is-on{ background: var(--nav-dim); border-color: rgba(0,229,255,.5); color: var(--nav); }
.iconbtn--fav.is-on{ background: var(--busy-dim); border-color: rgba(255,82,82,.45); color: var(--busy); }

/* ------------------------------------------------------------------- chips */
.chip{
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--line);
  box-shadow: var(--e-2);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
  transition: transform var(--d-1) var(--ease-out), background var(--d-2), border-color var(--d-2), color var(--d-2);
}
.chip:hover{ color: var(--ink-1); border-color: var(--line-strong); }
.chip:active{ transform: scale(.94); }
.chip.is-on{
  background: var(--nav-dim); border-color: rgba(0,229,255,.55);
  color: var(--nav-ink); font-weight: 700;
}
.chip--live.is-on{
  background: var(--live-dim); border-color: rgba(0,230,118,.55); color: var(--live-ink);
}
/* הנקודה של "זמין עכשיו" תמיד ירוקה — היא מסמנת את המשמעות, לא את מצב הצ'יפ */
.chip__live-dot{
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--live); box-shadow: 0 0 8px var(--live);
  animation: bz-blink 1.9s ease-in-out infinite;
}
.chip__count{
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(0,0,0,.32); font-size: var(--t-2xs); font-weight: 900;
}

/* --------------------------------------------------------------- tags/pills */
.tag{
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-2); border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); color: var(--ink-2);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.tag--live{ background: var(--live-dim); color: var(--live-ink); }
.tag--busy{ background: var(--busy-dim); color: var(--busy-ink); }
.tag--gold{ background: var(--gold-dim); color: var(--gold-ink); }
.tag--nav { background: var(--nav-dim);  color: var(--nav-ink); }
.tag--violet{ background: var(--violet-dim); color: #DCC9FF; }

.status{
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--t-sm);
  border: 1px solid transparent;
}
.status--live{ background: var(--live-dim); color: var(--live-ink); border-color: rgba(0,230,118,.35); }
.status--busy{ background: var(--busy-dim); color: var(--busy-ink); border-color: rgba(255,82,82,.3); }
.status .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 9px currentColor;
  animation: bz-blink 1.9s ease-in-out infinite;
}

/* ------------------------------------------------------------------- cards */
.surface{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.surface--pad{ padding: var(--s-3) var(--s-4); }

.callout{
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--nav-dim);
  border: 1px solid rgba(0,229,255,.22);
}
.callout--live{ background: var(--live-dim); border-color: rgba(0,230,118,.24); }
.callout--gold{ background: var(--gold-dim); border-color: rgba(255,194,70,.24); }
.callout__ico{ flex: none; color: var(--nav); }
.callout--live .callout__ico{ color: var(--live); }
.callout b{ font-size: var(--t-md); display: block; }
.callout small{ display: block; color: var(--ink-3); font-size: var(--t-xs); }

/* אווטאר */
.ava{
  position: relative; flex: none; overflow: hidden;
  border-radius: var(--r-sm); background: var(--c-surface-3);
  border: 1px solid var(--line);
}
.ava img{ width: 100%; height: 100%; object-fit: cover; }
.ava--56{ width: 56px; height: 56px; }
.ava--44{ width: 44px; height: 44px; border-radius: var(--r-xs); }
.ava--80{ width: 80px; height: 80px; border-radius: var(--r-lg); }
.ava--round{ border-radius: 50%; }
.ava__dot{
  position: absolute; inset-inline-end: 3px; bottom: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--busy); border: 2px solid var(--c-surface-1);
}
.ava__dot.is-live{ background: var(--live); box-shadow: 0 0 8px var(--live); }

/* ראשי־תיבות במקום תמונה */
.initial{
  display: grid; place-items: center; flex: none;
  border-radius: 50%; color: #0B0C0E; font-weight: 900;
}

/* ----------------------------------------------------------------- ratings */
.stars{ display: inline-flex; gap: 1.5px; vertical-align: middle; }
.stars svg{ display: block; }

.ratepick{ display: inline-flex; gap: var(--s-1); direction: ltr; }
.ratepick button{
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--ink-4);
  transition: transform var(--d-1) var(--ease-spring), color var(--d-2);
}
.ratepick button.is-lit{ color: var(--gold); }
.ratepick button:hover{ transform: scale(1.18); }

/* ------------------------------------------------------------------ fields */
.field{ margin-bottom: var(--s-3); }
.field > label{
  display: block; margin-bottom: var(--s-1);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
}
.input{
  width: 100%; height: 46px; padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  font-size: var(--t-md); color: var(--ink-1);
  transition: border-color var(--d-2), background var(--d-2);
}
.input::placeholder{ color: var(--ink-4); }
.input:focus{ border-color: rgba(0,229,255,.55); background: var(--nav-dim); }
textarea.input{ height: auto; min-height: 92px; padding: var(--s-3) var(--s-4); resize: vertical; line-height: var(--lh-body); }

/* מתג גדול */
.switch{
  flex: none; position: relative;
  width: 66px; height: 36px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid var(--line-strong);
  transition: background var(--d-3) var(--ease-out), border-color var(--d-3), box-shadow var(--d-3);
}
.switch__knob{
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #E9EBEE; box-shadow: var(--e-1);
  transition: transform var(--d-3) var(--ease-spring), background var(--d-3);
}
.switch.is-on{
  background: var(--grad-live);
  border-color: rgba(0,230,118,.6);
  box-shadow: 0 0 0 4px rgba(0,230,118,.15);
}
/* RTL: הכפתור מתחיל בימין ונע שמאלה */
.switch.is-on .switch__knob{ transform: translateX(-30px); background: #fff; }

/* מחוון טווח */
.range{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  outline: none; margin: var(--s-3) 0;
}
.range::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--nav); border: 3px solid #0F1114;
  box-shadow: 0 0 0 1px rgba(0,229,255,.5), 0 4px 12px rgba(0,0,0,.5);
  cursor: pointer;
}
.range::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--nav); border: 3px solid #0F1114; cursor: pointer;
}

/* מקטע בורר (segmented control) */
.segment{
  display: flex; padding: 3px; gap: 3px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
}
.segment button{
  flex: 1; height: 34px; border-radius: 10px;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  display: grid; place-items: center;
  transition: background var(--d-2), color var(--d-2);
}
.segment button.is-on{ background: rgba(255,255,255,.11); color: var(--ink-1); font-weight: 700; }

/* -------------------------------------------------------------- skeletons */
.skel{
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.05); border-radius: var(--r-sm);
}
.skel::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: bz-shimmer 1.4s infinite;
}
.skel--line{ height: 12px; }
.skel--card{ height: 118px; }

/* ------------------------------------------------------------ empty states */
.empty{
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-7) var(--s-5); text-align: center;
  color: var(--ink-2);
}
.empty__ico{
  width: 54px; height: 54px; border-radius: var(--r-lg);
  display: grid; place-items: center; margin-bottom: var(--s-1);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--ink-3);
}
.empty b{ font-size: var(--t-lg); color: var(--ink-1); font-family: var(--font-display); }
.empty p{ font-size: var(--t-sm); color: var(--ink-3); max-width: 30ch; }

/* ------------------------------------------------ קופון בתפריט החשבון */
.acct__coupon{ display: flex; gap: 6px; padding: 8px 10px; }
/* 44px הוא יעד המגע המינימלי המקובל. ב-38px השדה היה קטן מספיק
   כדי שנגיעה לא מדויקת תיפול על הפריט שמתחתיו. */
.acct__coupon .input{ flex: 1; min-width: 0; height: 44px; font-size: 15px; }
.acct__coupon .btn{ height: 44px; }
.acct__msg{ font-size: 12px; color: var(--ink-3); padding: 0 12px 8px; }
.acct__msg:empty{ display: none; }
.acct__msg.is-ok{ color: var(--live-ink, #00E676); }
.acct__msg.is-bad{ color: var(--busy-ink, #FF5252); }