/* ==========================================================================
   miniPopup — Tickchak Design System
   Header + Search + Slot + Footer, 4 themes (app/live × default/inverse)
   Required: tokens.css
   Usage: <div class="minipopup app default"> ... </div>
   ========================================================================== */

.minipopup{
  /* 🔴 רוחב גמיש (אסף 02/08). היה `375px` קבוע — שריד מאותה תקופה שבה גם
     הגובה היה נעול (`height:230px`, ראה ההערה ב-.mp-slot), וכל דמו דרס אותו.
     עכשיו: **במובייל 100%**, ובנייח תקרה של 375 — כלומר בדיוק מה שהיה,
     בלי לשבור אף שימוש קיים. */
  width:100%;
  border-radius:var(--r-2xl);
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  transition:background .3s, transform .25s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 8px 40px rgba(0,0,0,0.25);
  animation:mpPopIn .4s cubic-bezier(.175,.885,.32,1.275);
}
/* התקרה חלה **בנייח בלבד**. במובייל הגיליון ממלא את הרוחב — שם הוא יושב
   על תחתית-המסך, ותקרת-375 הותירה אותו צר מהתוכן שמעליו (אסף 02/08). */
@media(min-width:1024px){ .minipopup{max-width:375px;} }

@keyframes mpPopIn{
  0%{opacity:0;transform:scale(0.9) translateY(20px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* Themes */
.minipopup.app.default{background:var(--ta-color-bg-base);}
.minipopup.live.default{background:var(--ta-color-bg-base);}
.minipopup.app.inverse{background:var(--color-grays-700);}
.minipopup.live.inverse{background:var(--color-grays-700);}

/* === HANDLE (פס סגירה) ===
   בפיגמה: «Sheet Handle» שבתוך רכיב ה-miniPopup (טיקצ'אק-LIVE 40951-14751).
   שייך לתפקיד «גיליון» — לתפריט אין פס כזה.
   המידות אומצו מהמימוש שכבר היה ב«דף מרכז» (36×4, אפור-500), לא הומצאו חדשות. */
.mp-handle{
  width:36px;height:4px;border-radius:var(--r-full);
  background:var(--color-grays-500);
  margin:var(--space-md) auto var(--space-xs);
  flex-shrink:0;
}
/* הפס נגרר-לסגירה, לא נלחץ (אסף 22/07) — לכן סמן-גרירה ולא סמן-יד.
   הגרירה עצמה עובדת **מכל הגיליון**; הפס הוא הסימן שאומר «אפשר לגרור».
   ההתנהגות יושבת ב-general/minipopup.js. */
.mp-handle{
  cursor:grab;
  touch-action:none;
}
.mp-handle:active{cursor:grabbing;}
/* בזמן גרירה — בלי מעבר, שהגיליון יעקוב אחרי האצבע. החזרה-למקום מונפשת (ראה .minipopup). */
.minipopup.mp-dragging{transition:background .3s;}

/* === HEADER === */
.mp-header{
  width:100%;
  display:flex;align-items:center;
  gap:var(--space-lg);
  padding:var(--space-xl);
}
.mp-header .mp-slot2{flex:1;min-width:0;}
.mp-header .mp-title{
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--font-size-heading-modal);font-weight:700;
  line-height:1.2;
  white-space:nowrap;flex-shrink:0;
}
.mp-header .mp-back{
  width:var(--dim-8,32px);height:var(--dim-8,32px);border-radius:100px;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .15s;
  flex-shrink:0;
}
.mp-back:active{transform:scale(0.96);}

/* App default */
.minipopup.app.default .mp-title{color:var(--ta-color-text-default);}
.minipopup.app.default .mp-back{background:var(--ta-color-bg-surface);color:var(--ta-color-text-default);}
.minipopup.app.default .mp-back:hover{background:var(--ta-color-bg-surface-hover);}

/* Live default (baseAlt = white bg) */
.minipopup.live.default .mp-title{color:var(--ta-color-text-default);}
.minipopup.live.default .mp-back{background:var(--tl-color-bg-surface-inv);color:var(--ta-color-text-default);}
.minipopup.live.default .mp-back:hover{background:var(--tl-color-bg-surface-inv-hover);}

/* Inverse */
.minipopup.app.inverse .mp-title,.minipopup.live.inverse .mp-title{color:var(--tl-color-text-default);}
.minipopup.app.inverse .mp-back,.minipopup.live.inverse .mp-back{background:var(--ta-color-bg-surface-inv);color:var(--tl-color-text-default);}
.minipopup.app.inverse .mp-back:hover,.minipopup.live.inverse .mp-back:hover{background:var(--ta-color-bg-surface-inv-hover);}

/* === SEARCH === */
.mp-search{
  width:100%;
  display:flex;align-items:center;
  gap:var(--space-xs);
  padding:var(--space-lg) var(--space-xl);
}
/* Search bar = shared SearchInput component (searchinput.css).
   Only flex sizing inside the row is set here; all visuals come from the component. */
.mp-search .search-input{flex:1;min-width:0;}

.mp-cancel{
  padding:0 var(--space-sm);border:none;cursor:pointer;
  background:none;
  font-family:'Google Sans','Assistant',sans-serif;
  font-size:var(--f-btn-cat);font-weight:400;line-height:16px;
  transition:font-weight .2s;
  white-space:nowrap;
}
.mp-cancel:hover{font-weight:700;}

/* Cancel button color per theme (search bar visuals come from searchinput.css) */
.minipopup.app.default .mp-cancel{color:var(--ta-color-text-default);}
.minipopup.live.default .mp-cancel{color:var(--ta-color-text-default);}
.minipopup.app.inverse .mp-cancel{color:var(--tl-color-text-default);}
.minipopup.live.inverse .mp-cancel{color:var(--tl-color-text-default);}

/* === SLOT (גוף) ===
   שני תפקידים לובשים את המעטפת (shared-language.md, אסף 22/07):
   .sheet = גיליון — כותרת + תחתית, רווחים שלו.
   .menu  = ליסט-תפריט — נצמד לכפתור, בלי כותרת/תחתית, ולכן צמוד לגמרי.
   הבסיס הוא שלד ניטרלי בלבד — גובה גמיש, בלי ריפוד. התפקיד קובע את הרווחים.
   (היה כאן height:230px + padding:10px — מידה שאיש לא השתמש בה, וכל דמו דרס אותה.) */
.mp-slot{
  width:100%;
  flex:1 1 auto;min-height:0;
}
.minipopup.sheet .mp-slot{padding:var(--space-md) var(--space-xl);}
.minipopup.menu  .mp-slot{padding:0;}

/* === FOOTER === */
.mp-footer{
  width:100%;
  display:flex;align-items:flex-start;
  gap:var(--space-md);
  padding:var(--space-xl);
  border-top:1px solid var(--ta-color-border-subtle);
}

/* Footer buttons — inherit from Button System (button.css)
   Buttons get theme class (app/live) propagated from .minipopup via JS.
   Only layout overrides here — colors/fonts come from button.css */
.mp-footer .btn{
  flex:1;min-width:0;justify-content:center;
}

/* Scroll button flip animation — SVG starts with inline scaleY(-1) pointing down */
.mp-footer .btn svg{transition:transform .3s;}
.mp-footer .btn.flipped svg{transform:scaleY(1) !important;}

/* Live theme — Rubik font override for title + cancel */
.minipopup.live .mp-title,
.minipopup.live .mp-cancel{font-family:'Google Sans','Rubik',sans-serif;}

/* Footer border per theme */
.minipopup.live.default .mp-footer{border-top-color:var(--ta-color-border-subtle);}
.minipopup.app.inverse .mp-footer,.minipopup.live.inverse .mp-footer{border-top-color:var(--tl-color-border-subtle);}

/* === VISIBILITY toggles === */
.mp-header[data-section]{display:none;}
.mp-header[data-section].show{display:flex;}
.mp-search[data-section]{display:none;}
.mp-search[data-section].show{display:flex;}
.mp-footer[data-section]{display:none;}
.mp-footer[data-section].show{display:flex;}
.mp-footer [data-part]{display:none;}
.mp-footer [data-part].show{display:flex;}
.mp-handle[data-part]{display:none;}
.mp-handle[data-part].show{display:block;}
.mp-back[data-part]{display:none;}
.mp-back[data-part].show{display:flex;}
.mp-cancel[data-part]{display:none;}
.mp-cancel[data-part].show{display:flex;}

/* ==========================================================================
   === LAYER — «בנייח פופ, בנייד מגירה» (אסף, 01/08/2026) ===
   הכלל היה נכון מאז ומעולם ולא היה לו בית: הקובץ הזה לא הכיל אף @media, ולכן
   שום פופ במערכת לא הפך למגירה בנייד מעצמו — כל דמו כתב את זה מחדש אצלו
   (דף-מרכז ‹.kebab-layer›, הקמת-אירוע). הדפוס כאן נלקח משם, לא הומצא.

   שימוש — מחלקה אחת על שכבת-הרקע שעוטפת את הגיליון:
       <div class="overlay mp-layer is-open"> <div class="minipopup app default"> … </div> </div>

   🔴 למה opt-in ולא אוטומטי לכל .minipopup: הרכיב משמש גם כתפריט נצמד-לכפתור
      (‹.menu›), ושם מגירה תהיה שגויה. מי שרוצה — מוסיף מחלקה.
      הגרירה-לסגירה כבר קיימת ב-minipopup.js ואינה נכתבת כאן.
   ========================================================================== */

/* בנייח אין ידית — היא סימן-הגרירה של הגיליון, ובנייח לא גוררים */
.mp-layer .minipopup > .mp-handle{display:none;}

/* 🔴 המחלקה נכתבת פעמיים (.mp-layer.mp-layer) בכוונה — זה לא שכפול.
   שאילתת-מדיה **אינה** מוסיפה משקל-בורר. הדף מגדיר `.overlay{align-items:center}`
   וגם `.overlay .minipopup{max-width:420px}`, ומכיוון שה-<style> של הדף נטען
   *אחרי* הקובץ הזה — במשקל שווה הוא ניצח, והמגירה פשוט לא קרתה בנייד.
   הכפלת-המחלקה מעלה את המשקל בלי לדעת דבר על שמות-המחלקות של הדף. */
@media (max-width:720px){
  .mp-layer.mp-layer{align-items:flex-end;padding:0;}
  .mp-layer.mp-layer .minipopup{
    width:100%;max-width:100%;
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    max-height:92vh;overflow:auto;
    animation:mpSheetUp .28s cubic-bezier(.22,.61,.36,1);
  }
  .mp-layer.mp-layer .minipopup > .mp-handle{display:block;}
  /* מרווח לסרגל-הבית של אייפון — הפוטר הוא הדבר האחרון שנוגע בקצה */
  .mp-layer.mp-layer .mp-footer{padding-bottom:calc(var(--space-xl) + env(safe-area-inset-bottom));}
}
@keyframes mpSheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}