/* ============ באנר הסכמת עוגיות ============

   הבאנר הזה נבנה ב-JS ונכנס לדף לפני שנטענת תגית שיווקית אחת, ולכן הוא
   חייב להיות מעוצב מראש: אם ה-CSS יגיע אחרי שהוא כבר בדום, הגולשת תראה
   רגע של טקסט לבן חשוף בתחתית הדף לפני שהוא מתלבש. לכן הקובץ הזה נטען
   בראש הדף ולא בסוף.

   העיצוב שלו הוא כהה בכוונה: הדף עצמו קרם ברובו, ופס נייבי בתחתית קורא
   מיד כ״שכבה אחרת״ - משהו שצריך לענות עליו ולא עוד סקשן להמשיך לגלול בו.

   אבל הוא גם לא נועד להפחיד: הוא לא חוסם את הדף, אין מסך אפור מאחוריו,
   ואפשר להמשיך לגלול ולקרוא בלי לענות. חסימה הייתה מעלה נטישה, ומבחינה
   משפטית ממילא לא נטען כלום עד שנלחץ ״מאשרת״. */

.cc{
  position:fixed;
  inset-inline:0;
  bottom:0;
  /* מתחת לווידג׳ט הנגישות (שיושב בפינה שמאל-תחתונה ורץ בז-אינדקס גבוה
     משלו) ומעל כל שאר הדף. אסור שבאנר זמני יסתיר כפתור נגישות קבוע */
  z-index:900;
  background:var(--navy);
  border-radius:var(--r-media) var(--r-media) 0 0;
  /* צל כלפי מעלה בלבד - הבאנר יושב על קצה המסך, וצל לכל הכיוונים היה
     נבלע בו ומשאיר את הפס נראה שטוח ודבוק */
  box-shadow:0 -8px 32px rgba(11,16,32,.28);
  direction:rtl;
}

.cc__in{
  width:100%;max-width:1080px;
  margin-inline:auto;
  /* הרווח הנוסף בצד שמאל הוסר: הוא נוסף כשהונח שווידג׳ט הנגישות מרחף
     בפינה השמאלית התחתונה. הווידג׳ט יושב בפינה השמאלית העליונה, ולכן
     אין כאן חפיפה - והפדינג הא-סימטרי רק דחף את הטקסט מהמרכז */
  padding:24px 32px;
  display:flex;align-items:center;gap:28px;
}

.cc__txt{
  flex:1 1 auto;
  font-family:var(--f-body);font-weight:400;
  font-size:24px;line-height:36px;
  color:var(--cream);
}
.cc__txt a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}
.cc__txt a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px;}

.cc__btns{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
}

/* שני הכפתורים חולקים גובה ומשקל זהים בכוונה: ההפרדה ביניהם נעשית בצבע
   בלבד. כפתור סירוב קטן או חלש יותר הוא דפוס אפל, ובישראל גם לא חוקי */
.cc__btn{
  min-height:48px;
  padding:12px 28px;
  border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:600;
  font-size:23px;line-height:28px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .25s var(--ease-out),
             border-color .25s var(--ease-out),
             transform .25s var(--ease-out);
}
.cc__btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px;}
.cc__btn:active{transform:translateY(1px);}

/* ״מאשרת״ היא הפעולה שהדף מבקש, ולכן היא המלאה */
.cc__btn--yes{
  background:var(--sky-deep);
  border:1px solid var(--sky-deep);
  color:#fff;
}
.cc__btn--yes:hover{background:#4a63a9;border-color:#4a63a9;}

/* ״רק ההכרחי״ שקוף עם מסגרת - נראה בבירור ככפתור, אבל לא מתחרה */
.cc__btn--no{
  background:transparent;
  border:1px solid var(--cream-80);
  color:var(--cream);
}
/* מצב ה-hover נעשה בצבע מלא ולא בקרם שקוף, בדיוק כמו בכל הדף: אלפא
   נמוך היה מפר את כלל האטימות ובנייד ממילא נתקע דלוק אחרי מגע */
.cc__btn--no:hover{background:#1b2138;border-color:var(--cream);}

/* ---------- הכניסה והיציאה ----------
   ה-JS מוסיף is-in פריים אחד אחרי ההזרקה ומסיר אותו 500ms לפני ההסרה,
   ולכן שני המצבים חייבים לחיות על אותו אלמנט - לא על שתי מחלקות נפרדות */
.cc{
  transform:translateY(100%);
  opacity:0;
  transition:transform .45s var(--ease-out),opacity .35s var(--ease-out);
}
.cc.is-in{
  transform:translateY(0);
  opacity:1;
}

/* ============ mobile ============ */
@media (max-width:1199px){
  .cc{border-radius:20px 20px 0 0;}
  .cc__in{
    /* בעמודה: שורת טקסט לרוחב המסך ומתחתיה הכפתורים. זה לצד זה במובייל
       היה משאיר לטקסט חצי מסך ולכפתורים רוחב שלא נכנסת בו מילה */
    flex-direction:column;align-items:stretch;gap:18px;
    padding:20px 20px;
    /* env של האייפון: בלי זה הכפתורים יושבים מתחת לפס הבית ואי אפשר
       ללחוץ עליהם. ה-24 הנוספים הם מקום לווידג׳ט הנגישות שמרחף כאן */
    padding-block-end:calc(20px + env(safe-area-inset-bottom));
    padding-inline-start:20px;
  }
  .cc__txt{font-size:22px;line-height:33px;}
  .cc__btns{
    gap:12px;
  }
  /* שניהם נמתחים שווה בשווה - אותו נימוק כמו בדסקטופ, בלי ברירת מחדל
     ויזואלית מוסווית ברוחב */
  .cc__btn{
    flex:1 1 0;
    padding:12px 14px;
    font-size:22px;line-height:28px;
  }
}

/* מי שביקשה פחות תנועה עדיין צריכה לראות שהבאנר הופיע, ולכן ההנפשה
   מצטמצמת לעמעום בלבד ולא נמחקת - הזזה מלמטה היא מה שמפריע, לא הופעה */
@media (prefers-reduced-motion:reduce){
  .cc{transform:none;transition:opacity .2s linear;}
  .cc.is-in{transform:none;}
  .cc__btn{transition:none;}
  .cc__btn:active{transform:none;}
}