/* One donation panel for the homepage and all internal pages.
   Layout follows the activity-page design. Edit this file for every instance. */
.donation-section {
    --dn-k: 1;                     /* מחושב ב-JS */
    --dn-bg: #431F10;              /* רקע חום כהה — מהפיגמה */
    --dn-h: calc(880px * var(--dn-k));             /* גובה הסקשן */
    --dn-title1: calc(73px * var(--dn-k));         /* "הזכות שלכם" */
    --dn-title2: calc(62px * var(--dn-k));         /* "להיות שותפים" */
    --dn-title-lh: calc(46px * var(--dn-k));       /* line-height מהפיגמה */
    --dn-title-col: #FEFCF8;
    --dn-side: calc(36px * var(--dn-k));           /* הטקסט הצדדי */
    --dn-side-lh: calc(43px * var(--dn-k));
    --dn-side-top: calc(-8px * var(--dn-k));       /* כוונון אנכי של הטקסט הצדדי */
    --dn-side-col: #FFFEFB;
    --dn-link: calc(30px * var(--dn-k));           /* "לתרומה חופשית" */
    --dn-link-lh: calc(50px * var(--dn-k));
    --dn-link-gap: calc(13px * var(--dn-k));       /* מרווח מעל הקישור */
    --dn-mark-w: calc(425px * var(--dn-k));        /* רוחב הגראדיאנט */
    --dn-mark-h: calc(75px * var(--dn-k));         /* גובה הגראדיאנט */
    --dn-mark-y: calc(-1px * var(--dn-k));         /* כוונון אנכי של הגראדיאנט */
    --dn-head-top: calc(150px * var(--dn-k));      /* מרחק הכותרת מראש הסקשן */
    --dn-cards-top: calc(440px * var(--dn-k));     /* מיקום שורת הכרטיסים */
    --dn-card-w: calc(282px * var(--dn-k));        /* רוחב כרטיס */
    --dn-card-h: calc(302px * var(--dn-k));        /* גובה כרטיס */
    --dn-card-gap: calc(17px * var(--dn-k));       /* מרווח בין כרטיסים */
    --dn-card-r: calc(30px * var(--dn-k));         /* עיגול פינות */
    --dn-card-bg: #FDFBF8;
    --dn-cards-shift: calc(0px * var(--dn-k));     /* היסט השורה ימינה */
    --dn-plate: calc(258px * var(--dn-k));         /* גודל הצלחת */
    --dn-plate-up: calc(118px * var(--dn-k));      /* כמה הצלחת עולה מעל הכרטיס */
    --dn-plate-zoom: 1.24;                         /* הגדלת האוכל בתוך הצלחת */
    --dn-amount: calc(35px * var(--dn-k));         /* גודל הסכום */
    --dn-amount-lh: calc(35px * var(--dn-k));
    --dn-amount-top: calc(122px * var(--dn-k));    /* מיקום המחיר בכרטיס */
    --dn-desc: calc(19px * var(--dn-k));           /* תיאור התרומה */
    --dn-desc-lh: calc(27px * var(--dn-k));
    --dn-desc-top: calc(174px * var(--dn-k));      /* מיקום התיאור בכרטיס */
    --dn-btn-top: calc(250px * var(--dn-k));       /* מיקום הכפתור בכרטיס */
    --dn-btn-w: calc(248px * var(--dn-k));         /* רוחב הכפתור */
    --dn-btn-h: calc(40px * var(--dn-k));          /* גובה הכפתור */
    --dn-btn-r: calc(30px * var(--dn-k));
    --dn-btn-fs: calc(17px * var(--dn-k));         /* טקסט הכפתור */
    --dn-deco-w: calc(440px * var(--dn-k));        /* רוחב אזור הקישוט */
    --dn-deco-h: calc(320px * var(--dn-k));        /* גובה אזור הקישוט */
    --dn-circle: calc(192px * var(--dn-k));        /* קוטר העיגול המלא */
    --dn-circle-x: calc(152px * var(--dn-k));      /* מיקום אופקי של העיגול */
    --dn-circle-y: calc(-56px * var(--dn-k));      /* מיקום אנכי של העיגול */
    --dn-circle-op: 0.07;                          /* שקיפות העיגול */
    --dn-arc-w: calc(4px * var(--dn-k));           /* עובי הקשת */
    --dn-arc-dash: calc(13px * var(--dn-k));       /* אורך קו בקשת */
    --dn-arc-gap: calc(24px * var(--dn-k));        /* רווח בקשת */
    --dn-arc-op: 0.5;                              /* שקיפות הקשת */
    --dn-arc-col: #9FC3D8;                         /* צבע הקשת */
    --dn-btn-icon: calc(22px * var(--dn-k));       /* גודל הלב בכפתור */
}
  @keyframes dn-heart{
    0%, 100%{ transform: scale(1); }
    18%     { transform: scale(1.22); }
    32%     { transform: scale(1); }
    46%     { transform: scale(1.13); }
    60%     { transform: scale(1); }
  }

.donation-title .title-highlight{
    display:inline-block;
    position:static;
    width:auto;
    margin-inline-start:0;
    padding-inline:0;
  }

.donation-title .dn-mark{
    position:absolute;
    z-index:-1;
    right: calc(-16px * var(--dn-k));
    /* ממורכז על גוף האותיות ולא על תיבת השורה (line-height קטן מהפונט) */
    top: calc(50% + var(--dn-mark-y));
    width: var(--dn-mark-w);
    height: var(--dn-mark-h);
    transform: translateY(-50%);
    background: linear-gradient(270deg,
      rgba(241,106,44,0) 0%,
      #F16A2C 100%);
    pointer-events:none;
  }

.donation-section{
    position:relative;
    background: var(--dn-bg);
    height: var(--dn-h);
    overflow:hidden;               /* הקישוטים לא יוצרים גלילה אופקית */
    isolation:isolate;
  }

.donation-decoration{
    position:absolute;
    top:0; left:0;
    width: var(--dn-deco-w);
    height: var(--dn-deco-h);
    z-index:0;
    pointer-events:none;
  }

.donation-decoration span{
    position:absolute;
    top: var(--dn-circle-y);
    left: var(--dn-circle-x);
    width: var(--dn-circle);
    height: var(--dn-circle);
    border-radius:50%;
    background: rgba(255,255,255, var(--dn-circle-op));
  }

.donation-decoration svg{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    overflow:visible;
  }

.donation-decoration circle{
    fill:none;
    stroke: var(--dn-arc-col);
    stroke-width: var(--dn-arc-w);
    stroke-dasharray: var(--dn-arc-dash) var(--dn-arc-gap);
    stroke-linecap:round;
    opacity: var(--dn-arc-op);
  }

.donation-container{
    position:relative;
    z-index:1;
    width: calc(1737px * var(--dn-k));
    max-width:100%;
    height:100%;
    margin-inline:auto;
  }

.donation-header{
    position:absolute;
    top: var(--dn-head-top);
    /* מיושר לקצה שורת הכרטיסים: 4 כרטיסים + 3 מרווחים,
       כך שהכותרת לא חורגת מימין */
    right: calc((100% - (var(--dn-card-w) * 4 + var(--dn-card-gap) * 3)) / 2);
    left: calc((100% - (var(--dn-card-w) * 4 + var(--dn-card-gap) * 3)) / 2);
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;   /* RTL: מתחיל מימין */
    gap: calc(56px * var(--dn-k));
  }

.donation-title{
    margin:0;
    font-weight:800;
    color: var(--dn-title-col);
    text-align:right;
    white-space:nowrap;
    flex:0 0 auto;
  }

.donation-title > span{ display:block; }

.donation-title > span:first-child{
    font-size: var(--dn-title1);
    line-height: var(--dn-title-lh);
  }

.donation-title > span:last-child{
    position:relative;
    font-size: var(--dn-title2);
    line-height: var(--dn-title-lh);
    margin-top: calc(30px * var(--dn-k));
  }

.donation-side-text{
    flex:0 0 auto;
    /* מיושר לגובה הכותרת: מתחיל בקו של "הזכות שלכם"
       ומסתיים בקו של "להיות שותפים" */
    padding-top: var(--dn-side-top);
    text-align:right;
  }

.donation-side-text p{
    margin:0;
    font-size: var(--dn-side);
    line-height: var(--dn-side-lh);
    font-weight:400;
    color: var(--dn-side-col);
  }

.donation-side-text a{
    display:inline-flex;
    align-items:center;
    gap: calc(10px * var(--dn-k));
    margin-top: var(--dn-link-gap);
    font-size: var(--dn-link);
    line-height: var(--dn-link-lh);
    font-weight:700;
    color: var(--dn-side-col);
    text-decoration:none;
    transition: color .28s ease;
  }

.donation-side-text a i{
    font-style:normal;
    display:inline-block;
    transition: transform .28s cubic-bezier(.22,.9,.3,1);
  }

.donation-side-text a:hover{ color: var(--orange); }

.donation-side-text a:hover i{ transform: translateX(calc(-8px * var(--dn-k))); }

.donation-side-text a:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:3px;
    border-radius:4px;
  }

.donation-cards{
    position:absolute;
    top: var(--dn-cards-top);
    left:0; right:0;
    list-style:none;
    margin:0; padding:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap: var(--dn-card-gap);
    /* בפיגמה השורה מוזזת מעט ימינה ולא במרכז המתמטי */
    transform: translateX(calc(var(--dn-cards-shift) * -1));
  }

.donation-cards > li{ display:flex; }

.donation-card{
    position:relative;
    display:block;
    width: var(--dn-card-w);
    height: var(--dn-card-h);
    background: var(--dn-card-bg);
    border-radius: var(--dn-card-r);
    box-shadow: 0 calc(14px * var(--dn-k)) calc(34px * var(--dn-k)) rgba(0,0,0,.22);
    text-decoration:none;
    transition: transform .3s ease, box-shadow .3s ease;
  }

.donation-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 calc(24px * var(--dn-k)) calc(46px * var(--dn-k)) rgba(0,0,0,.32);
  }

.donation-card:focus-visible{
    outline:3px solid var(--orange);
    outline-offset:4px;
  }

.donation-plate{
    position:absolute;
    top: calc(var(--dn-plate-up) * -1);
    left:50%;
    transform: translateX(-50%);
    width: var(--dn-plate);
    height: var(--dn-plate);
    filter: drop-shadow(0 calc(14px * var(--dn-k)) calc(18px * var(--dn-k)) rgba(0,0,0,.3));
  }

.donation-plate img{
    width:100%; height:100%;
    object-fit:contain;
    display:block;
    /* לקבצים יש שוליים שקופים סביב הצלחת — הגדלה פנימית
       מנצלת אותם כך שהצלחת והאוכל נראים גדולים יותר.
       הקובץ עצמו לא משתנה. */
    transform: scale(var(--dn-plate-zoom));
    transform-origin:center;
  }

.donation-amount{
    position:absolute;
    top: var(--dn-amount-top);
    left:0; right:0;
    font-size: var(--dn-amount);
    line-height: var(--dn-amount-lh);
    font-weight:900;
    color: var(--orange);
    text-align:center;
    direction:rtl;
  }

.donation-description{
    position:absolute;
    top: var(--dn-desc-top);
    left:0; right:0;
    font-size: var(--dn-desc);
    line-height: var(--dn-desc-lh);
    font-weight:700;
    color: var(--ink);
    text-align:center;
  }

.donation-description span{ display:block; }

.donation-button{
    position:absolute;
    top: var(--dn-btn-top);
    left:50%;
    transform: translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap: calc(10px * var(--dn-k));
    width: var(--dn-btn-w);
    height: var(--dn-btn-h);
    border-radius: var(--dn-btn-r);
    /* הגרדיאנט הגלובלי של האתר, מורחב פי 2 — ההזזה שלו ב-hover
       יוצרת גל חמים שעובר על הכפתור, בלי להכהות אותו */
    background: linear-gradient(100deg,
      #FF6A3D 0%,
      #FF6A3D 32%,
      #FB8C2E 58%,
      #FFA96C 78%,
      #FB8C2E 100%);
    background-size: 220% 100%;
    background-position: 0 0;
    color:#FFFFFF;
    font-size: var(--dn-btn-fs);
    font-weight:700;
    overflow:hidden;
    transition: background-position .55s ease,
                box-shadow .35s ease,
                transform .35s cubic-bezier(.22,.9,.3,1);
  }

.donation-card:hover .donation-button{
    background-position: 100% 0;              /* הגל החמים עובר */
    transform: translateX(-50%) translateY(calc(-2px * var(--dn-k)));
    box-shadow: 0 calc(10px * var(--dn-k)) calc(22px * var(--dn-k))
                color-mix(in srgb, var(--orange) 45%, transparent);
  }

.donation-button svg{
    order:2;
    width: var(--dn-btn-icon);
    height: var(--dn-btn-icon);
    flex-shrink:0;
    transition: fill .35s ease, transform .35s ease;
  }

.donation-card:hover .donation-button svg{
    fill: #FFFFFF;
    animation: dn-heart 1.5s ease-in-out .1s infinite;
    transform-origin:center;
  }

.donation-button em{
    order:1;
    font-style:normal;
    transition: letter-spacing .35s ease;
  }

.donation-card:hover .donation-button em{ letter-spacing:.012em; }

@media (max-width: 1024px){
.donation-section{
      height:auto;
      padding-block: calc(70px * var(--dn-k)) calc(80px * var(--dn-k));
    }

.donation-container{ width:min(1737px, calc(100% - var(--page-padding) * 2)); }

.donation-header{
      position:static;
      flex-direction:column;
      align-items:center;
      gap: calc(26px * var(--dn-k));
      margin-bottom: calc(150px * var(--dn-k));
    }

.donation-title{ text-align:center; }

.donation-side-text{ text-align:center; padding-top:0; }

.donation-cards{
      position:static;
      transform:none;
      display:grid;
      /* 1fr ולא --dn-card-w: הכרטיס מתמלא לרוחב העמודה, ולכן
         שני הכרטיסים תמיד באותו רוחב בכל מסך */
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content:center;
      /* רוחב הכרטיס בטאבלט: חצי מרוחב התוכן, עם תקרה של רוחב
         הפיגמה המקורי. ניסיתי 330px כדי למלא את הרוחב — אבל
         היחס 282/350 מתרגם כל פיקסל רוחב ל-1.24 פיקסלי גובה,
         והאזור קפץ מ-1286 ל-1434px. הרצועות בצדדים עדיפות על
         אזור ארוך יותר. */
      --dn-card-w: min(282px,
                       calc((min(100vw, var(--container-wide))
                             - var(--page-padding) * 2
                             - var(--dn-card-gap)) / 2));
      /* המרווח האנכי = בדיוק הגובה שהצלחת חורגת מעל הכרטיס,
         ועוד נשימה אחת. קודם עמד על 210px — כמעט כפול מהנדרש,
         ומשם הגיעו מאות הפיקסלים הריקים בין השורות. */
      /* המרווח האנכי = הגובה שהצלחת חורגת מעל הכרטיס ועוד
         נשימה. --space-sm ולא --space-md: הגריד צריך להיקרא
         כיחידה אחת ולא כשתי שורות נפרדות. */
      row-gap: calc(var(--dn-plate-up) + var(--space-sm));
      /* המרווח האופקי גדל בטאבלט: הכרטיס חסום ב-282px (הגדלתו
         מאריכה את האזור ביחס 1:1.24), ולכן הרוחב הפנוי מנוצל
         דרך המרווח ולא דרך הכרטיס. */
      column-gap: clamp(var(--dn-card-gap), 6vw, 72px);
      max-width: calc(var(--dn-card-w) * 2
                      + clamp(var(--dn-card-gap), 6vw, 72px));
      margin-inline:auto;

      /* ---- קנה המידה הפנימי של הכרטיס ----
         תוכן הכרטיס ממוקם אבסולוטית במרחקים שנגזרים מ---dn-k,
         שהוא יחס מול רוחב *המסך*. משהכרטיס נגזר מרוחב העמודה,
         שני קני המידה מתפצלים: הצלחת נשארת בגודל מסך מלא בתוך
         כרטיס חצי-רוחב, והכפתור יורד ל-11px.

         --dn-k עצמו לא ניתן להגדרה כאן מחדש: setFig כותב את
         הטוקנים ל-:root בתוך calc(...*var(--dn-k)), וטוקן
         מתפרש במקום שבו הוא *מוגדר*, לא במקום שבו הוא נקרא.
         לכן ההגדרה מחדש מתבצעת על הטוקנים הסופיים עצמם,
         כאחוז מרוחב הכרטיס — בדיוק היחסים של הפיגמה (282px):
           צלחת 258/282 = 91.5% · מחיר 40/282 · תיאור 17/282
         חל על טאבלט ומובייל גם יחד — שניהם 2×2. */
      --dn-plate:      calc(var(--dn-card-w) * 0.915);
      /* הצלחת עולה מעל הכרטיס. בפיגמה: 118/282 = 41.8% —
         אבל שם הצלחת (258px) גדולה מהחלק שנשאר בכרטיס, ולכן
         תחתיתה נחתה על שורת המחיר. ההרמה גדולה יותר כדי
         שתחתית הצלחת תעצור *מעל* המחיר ולא עליו.
         0.60→0.52: חן ביקשה שהצלחת תשב עמוק יותר בתוך
         הכרטיס כך ששניהם ייראו יחידה אחת. */
      /* 0.52→0.44: הצלחת יורדת עמוק יותר לתוך הכרטיס כך
         שהשניים נקראים כיחידה אחת ולא כתמונה שצפה מעליו. */
      --dn-plate-up:   calc(var(--dn-card-w) * 0.44);
      --dn-amount:     max(20px, calc(var(--dn-card-w) * 0.142));
      --dn-amount-lh:  calc(var(--dn-card-w) * 0.16);
      /* המחיר מתחיל מתחת לתחתית הצלחת:
         (גובה הצלחת - ההרמה) = 0.915-0.44 = 0.475, ועוד
         נשימה קצרה. הרווח צלחת→מחיר צומצם לבקשת חן. */
      --dn-amount-top: calc(var(--dn-card-w) * 0.50);
      --dn-desc:       max(var(--font-small), calc(var(--dn-card-w) * 0.062));
      --dn-desc-lh:    max(1.25em, calc(var(--dn-card-w) * 0.078));
      --dn-desc-top:   calc(var(--dn-card-w) * 0.62);
      /* הכפתור: לא יורד מ-13px ומ-34px גובה גם בכרטיס צר */
      --dn-btn-w:      calc(var(--dn-card-w) * 0.80);
      --dn-btn-h:      max(34px, calc(var(--dn-card-w) * 0.155));
      --dn-btn-fs:     max(var(--font-small), calc(var(--dn-card-w) * 0.058));
      --dn-btn-top:    calc(var(--dn-card-w) * 0.86);
      --dn-btn-r:      var(--button-radius, 999px);
    }

.donation-card{
      width:100%;
      height:auto;
      /* 350→316: הכפתור מסתיים ב-0.86×רוחב + גובהו, ומתחתיו
         נשארו ~31px של לובן מיותר. היחס מצומצם כך שהכרטיס
         נגמר מיד אחרי הכפתור, והכרטיס כולו קומפקטי יותר. */
      aspect-ratio: 282 / 316;
    }

.donation-header{
      margin-bottom: calc(var(--dn-plate-up) + var(--space-lg));
    }

}

@media (max-width: 767px){
.donation-title,

    .donation-title > span{
      white-space:normal;
      /* כותרת מיוחדת — גדולה מכותרת אזור רגילה */
      font-size: clamp(34px, 9.2vw, 42px) !important;
      line-height: 1.06 !important;
    }

.donation-title > span:last-child{
      display:inline-block;
      position:relative;
      width:fit-content;
      margin-inline:auto;
      padding-inline: 12px;
    }

.donation-title .dn-mark{
      right:0; left:0;
      width:auto !important;
      height: 78% !important;
      top:50%;
      border-radius:4px;
      /* גרדיאנט מלא ולא דוהה — ברוחב קצר הדהייה בלעה
         את חצי ההדגשה */
      background: var(--grad-accent);
    }

.donation-cards{
      /* מקור האמת לרוחב הכרטיס במובייל: חצי מרוחב התוכן
         פחות חצי מהמרווח. כל שאר המידות בכרטיס נגזרות ממנו. */
      --dn-card-w: calc((100vw - var(--page-padding) * 2
                         - var(--dn-card-gap)) / 2);
      max-width:100%;
      column-gap: var(--dn-card-gap);
    }

}

@media (max-width: 359px){
.donation-cards{
      grid-template-columns: minmax(0, 1fr);
      max-width: min(var(--dn-card-w), 100%);
    }

}

@media (prefers-reduced-motion: reduce){
.donation-card,

    .donation-button,

    .donation-button svg,

    .donation-button em{ transition:none; }

.donation-card:hover{ transform:none; }

.donation-card:hover .donation-button{
      transform: translateX(-50%);
      box-shadow:none;
    }

.donation-card:hover .donation-button svg{ animation:none; }

}

@media (max-width: 900px){
body:not(.desktop-preview) .donation-card{
      width:100%;
      height:auto;
      /* אותו יחס בדיוק כמו בכלל הקומפוזיציה (282/350) — ערך
         שונה כאן היה גובר עליו בגלל הספציפיות הגבוהה יותר
         ומחזיר את הכרטיס לגובה שאינו מספיק למדרג הפנימי. */
      /* 350→316: הכפתור מסתיים ב-0.86×רוחב + גובהו, ומתחתיו
         נשארו ~31px של לובן מיותר. היחס מצומצם כך שהכרטיס
         נגמר מיד אחרי הכפתור, והכרטיס כולו קומפקטי יותר. */
      aspect-ratio: 282 / 316;
    }

}

/* Approved activity-panel layout, scoped to the component instead of a page. */

@media (min-width: 1025px){
.act-donation[data-donation-section]{
    height:auto;
    padding: min(3.02vw, 58px) 0 min(3.13vw, 60px);
    background:var(--cream);
    overflow:hidden;
    isolation:isolate;
  }

[data-donation-section] .act-donation-panel{
    position:relative;
    /* Same width as the internal-page banner and the carousel above it. */
    width:min(1465px, calc(100% - 48px));
    aspect-ratio:1453 / 453;
    margin-inline:auto;
    overflow:hidden;
    border-radius:min(2.604vw, 50px);
    background:#431F10;
    container-type:inline-size;
  }

.act-donation[data-donation-section] .donation-container{
    position:static;
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
  }

.act-donation[data-donation-section] .donation-header{
    position:static;
    display:block;
  }

.act-donation[data-donation-section] .donation-title{
    position:absolute;
    z-index:3;
    top:16.63%;
    left:9.94%;
    right:auto;
    width:79.35%;
    margin:0;
    color:#FFFEFB;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.964cqw;
    direction:rtl;
    text-align:center;
    white-space:nowrap;
    font-size:0;
    font-weight:800;
    line-height:1;
  }

.act-donation[data-donation-section] .donation-title > span{
    display:block;
    margin:0;
    padding:0;
    font-size:5.162cqw !important;
    line-height:1 !important;
  }

.act-donation[data-donation-section] .donation-title > span:first-child{
    color:#FFFEFB;
  }

.act-donation[data-donation-section] .donation-title > span:last-child{
    background:var(--grad-accent);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }

.act-donation[data-donation-section] .donation-title .dn-mark,

  .act-donation[data-donation-section] .donation-side-text{
    display:none;
  }

.act-donation[data-donation-section] .donation-cards{
    position:absolute;
    z-index:3;
    top:44.37%;
    left:10.96%;
    right:auto;
    width:80.04cqw;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, 16.242cqw);
    gap:5.024cqw;
    align-items:start;
    justify-content:start;
    transform:none;
    direction:rtl;
  }

.act-donation[data-donation-section] .donation-cards > li{
    display:block;
    min-width:0;
  }

.act-donation[data-donation-section] .donation-card{
    position:relative;
    display:block;
    width:16.242cqw;
    height:10.822cqw;
    aspect-ratio:auto;
    border-radius:2.065cqw;
    background:#FDFBF8;
    box-shadow:none;
    overflow:visible;
    text-decoration:none;
    transform:none;
  }

.act-donation[data-donation-section] .donation-card:hover{
    transform:translateY(-.344cqw);
    box-shadow:0 .826cqw .551cqw rgba(0,0,0,.22);
  }

.act-donation[data-donation-section] .donation-card:focus-visible{
    outline:.207cqw solid #431f10;
    outline-offset:.275cqw;
  }

.act-donation[data-donation-section] .donation-plate{
    position:absolute;
    z-index:2;
    top:.703cqw;
    left:50.43%;
    width:14.034cqw;
    height:9.415cqw;
    transform:none;
    filter:drop-shadow(0 .826cqw .551cqw rgba(0,0,0,.5));
    pointer-events:none;
  }

.act-donation[data-donation-section] .donation-plate img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    transform:none;
  }

.act-donation[data-donation-section] .donation-amount{
    position:absolute;
    z-index:3;
    top:1.801cqw;
    left:0;
    right:auto;
    width:61.2%;
    font-size:2.34cqw;
    line-height:1;
    font-weight:900;
    color:#F16A2C;
    text-align:right;
    direction:rtl;
    unicode-bidi:isolate;
  }

.act-donation[data-donation-section] .donation-description{
    position:absolute;
    z-index:3;
    top:4.419cqw;
    left:0;
    right:auto;
    width:61.2%;
    font-size:1.067cqw;
    line-height:1.12;
    font-weight:700;
    color:#431F10;
    text-align:right;
  }

.act-donation[data-donation-section] .donation-description span{
    display:block;
  }

.act-donation[data-donation-section] .donation-button{
    position:absolute;
    z-index:3;
    top:7.426cqw;
    left:9.68%;
    width:8.932cqw;
    height:1.864cqw;
    border-radius:999px;
    transform:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.413cqw;
    padding:0;
    background:var(--grad-accent);
    color:#fff;
    font-size:.895cqw;
    line-height:1;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
  }

.act-donation[data-donation-section] .donation-card:hover .donation-button{
    transform:none;
    background-position:0 0;
    box-shadow:none;
  }

.act-donation[data-donation-section] .donation-button svg{
    order:2;
    width:.895cqw;
    height:.895cqw;
    flex:0 0 auto;
  }

.act-donation[data-donation-section] .donation-button em{
    order:1;
    font-style:normal;
  }

[data-donation-section] .act-donation-arc{
    position:absolute;
    z-index:1;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
  }

[data-donation-section] .act-donation-dot{
    position:absolute;
    z-index:0;
    top:-.083cqw;
    left:9.94cqw;
    width:7.46cqw;
    height:5.269cqw;
    display:block;
    pointer-events:none;
  }

[data-donation-section] .act-donation-corner{
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    width:15.88cqw;
    height:13.48cqw;
    display:block;
    pointer-events:none;
  }

}

@media (max-width: 1024px){
.act-donation[data-donation-section]{
    height: auto;
    padding: 40px 0 12px;
    background: var(--cream);
    overflow: hidden;
  }

[data-donation-section] .act-donation-panel{
    position: relative;
    width: min(calc(100% - 28px), 480px);
    aspect-ratio: 361 / 714.094;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 13.8504% / 7.002%;
    background: #431f10;
    container-type: inline-size;
    isolation: isolate;
  }

.act-donation[data-donation-section] .donation-container{
    position: static;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

.act-donation[data-donation-section] .donation-header{
    position: static;
    display: block;
    margin: 0;
  }

.act-donation[data-donation-section] .donation-title{
    position: absolute;
    z-index: 2;
    top: 21.967cqw;
    left: 0;
    right: auto;
    width: 100%;
    margin: 0;
    text-align: center;
    color: #fffefb;
    font-weight: 800;
    white-space: nowrap;
  }

.act-donation[data-donation-section] .donation-title > span{
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 11.0803cqw !important;
    line-height: 11.0803cqw !important;
    white-space: nowrap;
  }

.act-donation[data-donation-section] .donation-title > span:last-child{
    position: relative;
    isolation: isolate;
    margin-top: -1.468cqw;
    line-height: 16.6205cqw !important;
    color: #fffefb;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

.act-donation[data-donation-section] .donation-title .dn-mark{
    display: block;
    z-index: -1;
    left: 14.0736cqw;
    right: auto;
    top: 2.1894cqw;
    width: 78.4918cqw !important;
    height: 11.9347cqw !important;
    border-radius: 0;
    transform: none;
    background: linear-gradient(90deg, #f16a2c, rgba(241,106,44,0));
  }

.act-donation[data-donation-section] .donation-side-text{
    position: absolute;
    z-index: 2;
    top: 179.1727cqw;
    left: 0;
    width: 100%;
    padding: 0;
    text-align: center;
  }

.act-donation[data-donation-section] .donation-side-text p{
    display: none;
  }

.act-donation[data-donation-section] .donation-side-text a{
    min-height: 44px;
    margin: 0;
    gap: 1.385cqw;
    font-size: 5.5402cqw;
    line-height: 13.8504cqw;
    color: #fffefb;
  }

.act-donation[data-donation-section] .donation-cards{
    position: absolute;
    z-index: 2;
    top: 60.3346cqw;
    left: 8.7681cqw;
    right: auto;
    width: 81.3264cqw;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4.9772cqw;
    row-gap: 16.2158cqw;
    align-items: start;
    transform: none;
    direction: rtl;
  }

.act-donation[data-donation-section] .donation-cards > li{
    display: block;
    min-width: 0;
  }

.act-donation[data-donation-section] .donation-card{
    width: 100%;
    height: 49.3637cqw;
    aspect-ratio: auto;
    border-radius: 4.1551cqw;
    background: #fdfbf8;
    box-shadow: none;
    overflow: visible;
    transform: none;
  }

.act-donation[data-donation-section] .donation-plate{
    top: -11.5627cqw;
    left: -2.8123cqw;
    width: 44.9364cqw;
    height: 30.1472cqw;
    transform: none;
    filter: drop-shadow(0 1.108cqw .831cqw rgba(0,0,0,.35));
    pointer-events: none;
  }

.act-donation[data-donation-section] .donation-plate img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }

.act-donation[data-donation-section] .donation-amount{
    top: 18.1564cqw;
    left: 0;
    right: 0;
    font-size: 8.3102cqw;
    line-height: 9.6953cqw;
    font-weight: 900;
    color: #f16a2c;
    text-align: center;
  }

.act-donation[data-donation-section] .donation-description{
    top: 28.4332cqw;
    left: 0;
    right: 0;
    font-size: 3.8781cqw;
    line-height: 4.4321cqw;
    font-weight: 700;
    text-align: center;
    color: #431f10;
  }

.act-donation[data-donation-section] .donation-description span{
    white-space: nowrap;
  }

.act-donation[data-donation-section] .donation-button{
    top: auto;
    bottom: 1.9cqw;
    left: 50%;
    width: calc(100% - 10px);
    height: max(26px, 7.2cqw);
    padding: 0 4px;
    gap: 3px;
    border-radius: 999px;
    background: var(--grad-accent);
    font-size: clamp(9.5px, 3.3cqw, 16px);
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transform: translateX(-50%);
  }

.act-donation[data-donation-section] .donation-card:hover .donation-button{
    transform: translateX(-50%);
    box-shadow: none;
  }

.act-donation[data-donation-section] .donation-button svg{
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
  }

.act-donation[data-donation-section] .donation-card:hover .donation-button svg{
    animation: none;
  }

[data-donation-section] .act-donation-arc{
    content: url("/assets/activity-mobile/donation/corner-top.png");
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 478.276cqw;
    height: 149.0732cqw;
    max-width: none;
    display: block;
    pointer-events: none;
  }

[data-donation-section] .act-donation-dot{
    display: none;
  }

[data-donation-section] .act-donation-corner{
    content: url("/assets/activity-mobile/donation/corner-bottom.svg");
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 48.0948cqw;
    height: 40.2489cqw;
    display: block;
    pointer-events: none;
  }

}

/* שורת הביטחון של התורם — יושבת בתוך הפאנל החום, מתחת לכרטיסים,
   וממוקמת ביחידות של רוחב הפאנל כך שהיא נשארת באותו יחס בכל מסך. */

.donation-trust{
  position:absolute;
  z-index:3;
  right:0;
  left:0;
  box-sizing:border-box;
  margin:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  direction:rtl;
  color:#FFFEFB;
  line-height:1.45;
  letter-spacing:.005em;
  pointer-events:none;
}

.donation-trust li{
  display:flex;
  align-items:center;
  white-space:nowrap;
  opacity:.82;
}

.donation-trust li:not(:last-child)::after{
  content:"";
  width:1px;
  height:1.25em;
  background:currentColor;
  opacity:.32;
}

/* כשהשורה נשברת, הקו שנשאר בקצה השורה מוסתר (הסימון נעשה ב-JS). */
.donation-trust li.is-line-end::after{ display:none; }

.donation-trust svg{
  flex:none;
  opacity:.9;
}

/* לוגו ביט — נמדד לפי גובה האות, ולכן הוא יושב על קו הטקסט כמו האייקונים. */
.donation-trust__bit{
  flex:none;
  width:auto;
  display:block;
}

@media (min-width: 1025px){
  .act-donation[data-donation-section] .donation-trust{
    top:26.75cqw;
    padding-inline:6cqw;
    column-gap:.72cqw;
    row-gap:.5cqw;
    font-size:1.06cqw;
  }
  .act-donation[data-donation-section] .donation-trust li{ gap:.52cqw; }
  .act-donation[data-donation-section] .donation-trust li:not(:last-child)::after{
    margin-inline-start:.72cqw;
  }
  .act-donation[data-donation-section] .donation-trust svg{ width:1.3em; height:1.3em; }
  .act-donation[data-donation-section] .donation-trust__bit{ height:1.12em; }
}

@media (max-width: 1024px){
  /* הפאנל גבוה יותר מהמידה המקורית כדי להכיל את שורת הביטחון. */
  [data-donation-section] .act-donation-panel{ aspect-ratio:361 / 793; }
  .act-donation[data-donation-section] .donation-trust{
    top:199.5cqw;
    padding-inline:5cqw;
    column-gap:1.8cqw;
    row-gap:1.9cqw;
    font-size:3.5cqw;
  }
  .act-donation[data-donation-section] .donation-trust li{ gap:1.6cqw; }
  .act-donation[data-donation-section] .donation-trust li:not(:last-child)::after{
    margin-inline-start:1.8cqw;
  }
  .act-donation[data-donation-section] .donation-trust svg{ width:1.3em; height:1.3em; }
  .act-donation[data-donation-section] .donation-trust__bit{ height:1.12em; }
}

/* Clear the sticky header when arriving from a donation link. */

.donation-section{
  scroll-margin-top: 120px;
}

@media (max-width: 767px){
.donation-section{ scroll-margin-top: 100px; }

}