/* ==========================================================================
   Popup — Tickchak Design System
   Header + Body + Footer, optional tabs, toggle, close
   Required: tokens.css, button.css (for .btn styles used inside popup)
   Usage: <div class="popup"> ... </div>
   ========================================================================== */

.popup{
  width:700px;
  border-radius:20px;
  overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--ta-color-bg-base);
  box-shadow:0 12px 48px rgba(0,0,0,0.3);
  animation:popupIn .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes popupIn{
  0%{opacity:0;transform:scale(0.92) translateY(20px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* === HEADER === */
.popup-header{
  padding:var(--space-xl);
  display:flex;flex-direction:column;
  gap:var(--space-2xl);
  /* חצי-פיקסל, שחור-10% — כמו ברכיב בפיגמה (Design-System 2212-15870). היה 1px. */
  border-bottom:0.5px solid var(--ta-color-border-subtle);
}

/* Menu Container */
.popup-menu{
  display:flex;align-items:center;
  justify-content:space-between;
}
.popup-menu-items{
  display:flex;align-items:center;
  gap:var(--space-sm);
}
/* רווח כותרת↔חץ = 16 בכל הפופאפים (אסף, 16/07). מדוד בפיגמה 40518-126194:
   הכותרת 0–224, כפתור-החץ 240–272. היה space-sm=8. */
.popup-header-right{
  display:flex;align-items:center;
  gap:var(--space-lg);
}
.popup-title{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--font-size-heading-popup);font-weight:700;
  line-height:20px;
  color:var(--ta-color-text-default);
}

/* Menu icon (⋮) */
.popup-dots{
  width:var(--dim-4);height:var(--dim-4);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0.4;transition:opacity .2s;
}
.popup-dots:hover{opacity:1;}

/* === TABS (Breadcrumbs) === */
.popup-tabs{
  display:flex;align-items:center;
  gap:0;
  direction:rtl;
}
/* Tab overrides on .btn.chip.neutral */
.popup-tab{font-weight:400 !important;font-size:var(--f-caption) !important;}
.popup-tab .tab-num{
  font-family:'Google Sans','Rubik',sans-serif;font-size:var(--f-body-sm);font-weight:400;
  color:var(--ta-color-text-default);
}
.popup-tab .tab-check{
  width:var(--dim-5);height:var(--dim-5);border-radius:50%;
  background:var(--color-green-400);
  display:flex;align-items:center;justify-content:center;
}
.popup-tab .tab-check svg{width:10px;height:8px;}
.popup-tab-line{
  width:87px;height:1px;
  background:var(--ta-color-border-subtle);
  flex-shrink:0;
}

/* === BODY (Slot) === */
.popup-body{
  flex:1;min-height:400px;
  padding:var(--space-lg) 0 var(--space-3xl);
}

/* === FOOTER === */
.popup-footer{
  padding:var(--space-xl);
  /* שחור-5% (border-disabled), לא 10% — כמו ברכיב בפיגמה (Design-System 2212-15870) */
  border-top:1px solid var(--ta-color-border-disabled);
  display:flex;align-items:center;
  gap:var(--space-xl);                 /* 24 בין הקבוצות — היה חסר */
  justify-content:space-between;
}
.popup-footer-actions{
  display:flex;align-items:center;gap:var(--space-sm);
}
.popup-footer-info{
  display:flex;align-items:center;gap:var(--space-sm);
  direction:rtl;
}
.popup-footer-text{
  font-family:'Google Sans','Assistant',sans-serif;font-size:var(--f-caption);font-weight:400;
  color:var(--ta-color-text-default);
}

/* === Inline Toggle (popup-specific) === */
.popup-toggle{
  width:64px;height:var(--dim-7,28px);border-radius:1200px;
  position:relative;cursor:pointer;border:none;outline:none;
  direction:ltr;background:var(--ta-color-bg-surface);
  transition:background .4s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.popup-toggle.on{background:var(--ta-color-brand-main);}
.popup-toggle:hover{box-shadow:0 0 0 4px rgba(142,237,255,0.15);}
.popup-toggle .tg-knob{
  position:absolute;top:50%;left:var(--space-xs);
  width:var(--dim-5);height:var(--dim-5);border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
  transform:translateY(-50%);
  transition:left .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
}
.popup-toggle.on .tg-knob{left:calc(100% - 24px);}
.popup-toggle:active .tg-knob{transform:translateY(-50%) scale(1.1);}
.popup-toggle .tg-lbl{
  position:absolute;top:50%;
  font-family:'Google Sans','Rubik',sans-serif;font-size:var(--f-chip);font-weight:400;
  line-height:16px;pointer-events:none;
  transition:opacity .35s, transform .35s;
}
.popup-toggle .tg-off{right:var(--space-sm);opacity:1;color:var(--color-grays-600);transform:translateY(-50%);}
.popup-toggle .tg-on{left:var(--space-sm);opacity:0;color:var(--color-turquoise-700);transform:translateY(-50%) translateX(-4px);}
.popup-toggle.on .tg-off{opacity:0;transform:translateY(-50%) translateX(4px);}
.popup-toggle.on .tg-on{opacity:0.6;transform:translateY(-50%) translateX(0);}

/* === Check-in square (popup-specific 24×24) === */
.popup-checkin{
  width:var(--dim-6);height:var(--dim-6);border-radius:var(--r-sm);
  border:1px solid var(--color-grays-300);background:var(--ta-color-bg-base);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0;
  transition:border-color .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.popup-checkin:hover{transform:scale(1.08);box-shadow:0 0 0 4px rgba(0,0,0,0.06);}
.popup-checkin:active{transform:scale(0.9);}
.popup-checkin.on{border-color:var(--color-grays-300);}
.popup-checkin .ci-check{
  opacity:0;width:12px;height:10px;
  display:flex;align-items:center;justify-content:center;
  transform:scale(0.3) rotate(-15deg);
  transition:opacity .3s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.175,.885,.32,1.275);
}
.popup-checkin.on .ci-check{opacity:1;transform:scale(1) rotate(0);}

/* Drag handle line */
.popup-handle{
  width:143px;height:4px;
  border-radius:2px;
  background:var(--color-grays-300);
  margin:var(--space-sm) auto;
}

/* === VISIBILITY toggles === */
.popup-header[data-section]{display:none;}
.popup-header[data-section].show{display:flex;}
.popup-tabs[data-part]{display:none;}
.popup-tabs[data-part].show{display:flex;}
.popup-footer[data-section]{display:none;}
.popup-footer[data-section].show{display:flex;}