/* ==========================================================================
   Toggle — Tickchak Design System
   On/Off switch with crossfade labels, turquoise brand, shadow, hover glow
   Usage:
     <button class="toggle app [on]">
       <span class="knob"></span>
       <span class="toggle-label lbl-off">כבוי</span>
       <span class="toggle-label lbl-on">פעיל</span>
     </button>
   Themes: .app | .live
   Required tokens: tokens.css
   ========================================================================== */

.toggle{
  width:64px;height:28px;border-radius:1200px;
  position:relative;
  cursor:pointer;border:none;outline:none;
  direction:ltr;
  transition:background .4s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}

.toggle .knob{
  position:absolute;
  top:50%;
  left:4px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
  transform:translateY(-50%) translateX(0) scale(1);
  transition:
    left .4s cubic-bezier(.4,0,.2,1),
    transform .4s cubic-bezier(.4,0,.2,1),
    box-shadow .4s cubic-bezier(.4,0,.2,1);
  z-index:2;
}
.toggle.on .knob{left:calc(100% - 24px);}
.toggle:active .knob{
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 3px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.15);
}

.toggle .toggle-label{
  position:absolute;
  top:50%;transform:translateY(-50%);
  font-family:var(--font-family-live);font-size:12px;font-weight:400;
  line-height:16px;white-space:nowrap;
  transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:1;
}
.toggle .lbl-off{
  right:8px;opacity:1;
  transform:translateY(-50%) translateX(0);
}
.toggle .lbl-on{
  left:8px;opacity:0;
  transform:translateY(-50%) translateX(-4px);
}
.toggle.on .lbl-off{
  opacity:0;
  transform:translateY(-50%) translateX(4px);
}
.toggle.on .lbl-on{
  opacity:0.6;
  transform:translateY(-50%) translateX(0);
}

/* App theme */
.toggle.app{background:var(--ta-color-bg-surface);}
.toggle.app .lbl-off{color:var(--color-grays-600);}
.toggle.app .lbl-on{color:var(--color-turquoise-700);}
.toggle.app.on{background:var(--ta-color-brand-main);}

/* Live theme */
.toggle.live{background:var(--tl-color-bg-surface);}
.toggle.live .lbl-off{color:var(--tl-color-text-subtle);}
.toggle.live .lbl-on{color:var(--color-turquoise-700);}
.toggle.live.on{background:var(--ta-color-brand-main);}

/* Hover glow */
.toggle.app:hover{box-shadow:0 0 0 4px rgba(142,237,255,0.15);}
.toggle.live:hover{box-shadow:0 0 0 4px rgba(142,237,255,0.2);}
.toggle.on:hover{box-shadow:0 0 0 4px rgba(142,237,255,0.3);}

/* ============================================================
   TOGGLE BURN — Figma 38214:2296 (1:1 spec).
   80×28 pill, gradient bg, knob (20px) on opposite side from icon.
   פתוח (default): knob RIGHT (x=56) + ticket icon (x=28) turquoise gradient
   שרוף (pressed): knob LEFT  (x=4)  + fire   icon (x=12) warning gradient
   Asset paths assumed at icons/toggle-burn-{ticket,fire}.png alongside this CSS.
   ============================================================ */
.toggle-burn{
  --burn-spring: cubic-bezier(.34, 1.56, .64, 1);
  --burn-dur: 600ms;
  position:relative;
  width:80px;height:28px;
  border-radius:1200px;
  border:none;outline:none;cursor:pointer;padding:0;
  overflow:visible;            /* knob shadow escapes; icons clipped by __viewport */
  direction:ltr;
  -webkit-tap-highlight-color:transparent;
  background:linear-gradient(to left,
    var(--ta-color-brand-subtle, #e0fbff) 48.734%,
    var(--ta-color-brand-main, #8eedff) 149.37%);
  transition:background var(--burn-dur) ease;
}
.toggle-burn[aria-pressed="true"]{
  background:linear-gradient(to left,
    var(--ta-color-state-warning-bg, #fff2d6) 48.734%,
    var(--ta-color-state-warning-main, #f28c00) 149.37%);
}
.toggle-burn:active{transform:scale(0.97);}
.toggle-burn__knob{
  position:absolute;top:4px;left:0;
  width:20px;height:20px;border-radius:50%;
  background:#fff;pointer-events:none;
  /* Figma spec — Drop shadow: 0 4 4 0 #6BAADF (פתוח) */
  box-shadow:0 4px 4px 0 #6BAADF;
  transition:transform var(--burn-dur) cubic-bezier(.5, 1.18, .6, 1), box-shadow var(--burn-dur) ease;
  transform:translateX(56px);
}
.toggle-burn[aria-pressed="true"] .toggle-burn__knob{
  transform:translateX(4px);
  /* Figma spec — Drop shadow: 0 2 5 0 rgba(255,0,0,.36) (שרוף) */
  box-shadow:0 2px 5px 0 rgba(255,0,0,.36);
}
/* Viewport — clips ONLY the sliding icons, so knob shadow can escape */
.toggle-burn__viewport{
  position:absolute;inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
.toggle-burn__icon{
  position:absolute;pointer-events:none;
  transition:transform var(--burn-dur) var(--burn-spring), opacity calc(var(--burn-dur) * .6) ease;
  object-fit:contain;
  will-change:transform;
}
/* Opposite-direction slide: ticket יורד למטה, fire עולה מלמטה — ולהפך */
.toggle-burn__icon--ticket{
  width:41px;height:41px;left:28px;top:0;
  transform:translateY(0);opacity:1;
}
.toggle-burn__icon--fire{
  width:34.2px;height:34.2px;left:12px;top:2.2px;
  transform:translateY(34px);opacity:0;
}
.toggle-burn[aria-pressed="true"] .toggle-burn__icon--ticket{
  transform:translateY(34px);opacity:0;
}
.toggle-burn[aria-pressed="true"] .toggle-burn__icon--fire{
  transform:translateY(0);opacity:1;
}
.toggle-burn__label{
  position:absolute;top:6px;
  font-family:'Google Sans','Assistant',sans-serif;
  font-weight:var(--font-weight-semibold, 600);
  font-size:12px;line-height:16px;
  pointer-events:none;white-space:nowrap;
  transition:opacity calc(var(--burn-dur) * .6) ease;
}
.toggle-burn__label--off{left:8px;color:var(--color-turquoise-700, #1f6f7a);opacity:1;}
.toggle-burn__label--on{left:47px;color:var(--color-oranges-400, #f28c00);opacity:0;}
.toggle-burn[aria-pressed="true"] .toggle-burn__label--off{opacity:0;}
.toggle-burn[aria-pressed="true"] .toggle-burn__label--on{opacity:1;}

/* מצב ירוק (פיגמה 811:13684 «🔘 state=on-green», אסף 27/08):
   רקע green-400, תווית «פעיל» ירוק-כהה מלא */
.toggle.green.on{background:var(--color-green-400,#b9ca20);}
.toggle.green.on .lbl-on{color:#465b17;opacity:1;}