/* =========================================================
   Custom donate form (tpl-donate-v4) – step 1
   Desktop sizes: design width 1920 (px / 19.2 = vw)
   Mobile sizes:  design width 750  (px / 7.5  = vw)
   ========================================================= */

/* The v4 donate page uses the full container width (the old iframe did not) */
.page-template-tpl-donate-v4 .why {
  padding-top: 0;
}

.page-template-tpl-donate-v4 .why .container {
  display: block;
}

/* --- Sandwich bar (inc/sandwich-bar.php) -------------------
   It sits in the banner text, under the paragraph. Everything but the spacing
   comes from style.css, which the landing pages already share. */
.page-template-tpl-donate-v4 .sandwich-bar {
  margin-top: 2vw;
}

.page-template-tpl-donate-v4 .why .form {
  flex: 1 1 100%;
}

/* --- Two column layout: form (start side) + summary panel ---
   A grid, not a flex row, so the panel and the form card share row 1 and come
   out exactly the same height. The ACF trust boxes drop into row 2 under the
   panel – display:contents lets them out of their wrapper to do that. */
.dform-layout {
  display: grid;
  grid-template-columns: 57% 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  column-gap: 0;
  direction: rtl;
}

/* The section heading sits right on top of the form here */
.why h2 {
  margin-bottom: unset;
}

.dform-layout.is-ltr {
  direction: ltr;
}

.dform-layout > .dform {
  grid-column: 1;
  grid-row: 1;
}

/* --- Summary panel + trust boxes (inc/donate-panel.php) ----- */
.dpanel-col {
  display: contents;
}

/* Row 1 beside the form card, so the two boxes always end level */
.dpanel {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.6vw 2.08vw;
  border-radius: 1.66vw; /* 32px */
  background: #E7F4F6;
  color: #182E54;
  text-align: center;
}

.dpanel p {
  margin: 0;
}

/* The hand-drawn heart – an ACF image when there is one, else the inline SVG.
   The artwork carries its own empty margin on the right (the two little
   strokes), so the box is nudged back to sit optically centred. */
/* Hangs off the inline end of the panel, the way it is drawn – not centred */
.dpanel__doodle {
  display: block;
  width: 6.09vw; /* 117px */
  margin-block: 0 1.04vw;
  margin-inline: auto 0;
  color: #182E54;
}

.dpanel__doodle img,
.dpanel__doodle svg {
  display: block;
  width: 100%;
  height: auto;
}

.dpanel__lead {
  font-size: 3.65vw; /* 70px */
  font-weight: 800;
  line-height: 1.2;
}

/* The number is the panel's whole point – it dwarfs everything around it.
   kapriza is the display face and ships in one weight (400), so the 800 below
   is the browser's own bold – which is the look the design carries. */
.dpanel__count {
  margin-top: .83vw;
  font-family: 'kapriza', sans-serif;
  font-size: 10.88vw; /* 208.905px */
  font-weight: 800;
  line-height: 1;
  direction: ltr;
}

.dpanel__unit {
  margin-top: .52vw;
  font-size: 1.66vw; /* 32px */
  font-weight: 800;
  line-height: 1.3;
}

/* Spans inside .dpanel__line – blocks here, run together on a phone */
.dpanel__desc {
  display: block;
  font-size: 1.66vw; /* 32px */
  font-weight: 500;
  line-height: 1.3;
}

.dpanel__sub {
  display: block;
  font-size: 1.66vw; /* 32px */
  font-weight: 700;
  line-height: 1.3;
  /* The panel sits outside .dform, so it cannot read --dform-green */
  color: #5FBB46;
}

/* The ACF trust boxes (sec2_list) sit under the panel. The navy boxes keep
   their theme styling from .thelist – only the column spacing lives here. */
.dform-aside {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-top: 1.04vw;
  text-align: center;
}

.dform-aside ul {
  text-align: start;
}

.dform {
  --dform-navy: #182E54;
  /* --dform-accent drives everything that reacts to the chosen frequency
     (tier cards, active tab, amount fields). Titles stay navy in both. */
  --dform-accent: #182E54;
  --dform-border: #BBD8F0;
  --dform-border-active: #182E54;
  --dform-radio: #C6D5E4;
  --dform-fill: #E4F1FB;
  --dform-track: #F3F4F6;
  --dform-green: #5FBB46;
  --dform-muted: #6B7A90;
  /* Field / checkbox hairline, per the design */
  --dform-line: rgba(24, 46, 84, .14);

  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  font-family: 'ploni', sans-serif;
  color: var(--dform-navy);
  direction: rtl;
  text-align: right;
}

.dform[data-lang="en"] {
  direction: ltr;
  text-align: left;
}

/* One-time donations are themed green (monthly stays navy) */
.dform--once {
  --dform-accent: #16601F;
  --dform-border: #8CC792;
  --dform-border-active: #16601F;
  --dform-fill: #EAF7EA;
}

.dform *,
.dform *::before,
.dform *::after {
  box-sizing: border-box;
}

/* Fills the grid row, so whichever of the two boxes is taller sets both */
.dform__box {
  flex: 1 1 auto;
  background: #fff;
  border-radius: 1.66vw; /* 32px */
  padding: 2.08vw 2.08vw 1.66vw;
  box-shadow: 0 .52vw 2.08vw rgba(24, 46, 84, .08);
}

.dform-step {
  display: none;
}

.dform-step.is-active {
  display: block;
}


/* --- Title ------------------------------------------------ */
.dform-title {
  margin: 0 0 1.25vw;
  font-size: 1.25vw; /* 24px */
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--dform-navy);
}

.dform-title b {
  font-weight: 800;
}

/* Step 1 leads with one bold question, the sub-line explains the two tabs.
   Both get room to breathe – the design keeps them well apart. */
.dform-title--main {
  margin-bottom: 2.08vw; /* 40px */
  font-size: 1.56vw;     /* 30px */
  font-weight: 800;
}

.dform-lead {
  margin: 0 0 1.87vw; /* 36px */
  font-size: 1.04vw;  /* 20px */
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--dform-navy);
}

/* --- Frequency toggle -------------------------------------
   One full-width track, the chosen half filled solid green. */
.dform-tabs {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 1.25vw;
  padding: .21vw;
  background: var(--dform-track);
  border-radius: 500px;
}

.dform-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .78vw 1.25vw;
  border: 0;
  border-radius: 500px;
  background: transparent;
  font-family: inherit;
  font-size: 1.04vw; /* 20px */
  font-weight: 500;
  color: var(--dform-navy);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.dform-tab.is-active {
  background: var(--dform-green);
  color: #fff;
  font-weight: 700;
}

/* --- Apples floating out of the monthly tab ----------------
   img/donate/apples.svg carries its own keyframes, so it animates on its own
   as a background image. Its canvas was given 26px of headroom at the top
   (viewBox starts at -26) because a background image is clipped to its box –
   the tallest apple drifts past y=0 and was being cut off. The box below must
   keep that 177:165 ratio. */
.dform-tab__apples {
  position: absolute;
  z-index: 2;
  bottom: 45%; /* the apples spawn inside the pill and rise out of it */
  left: 50%;
  width: 9.22vw;  /* 177px */
  height: 8.59vw; /* 165px */
  margin-left: -4.61vw;
  background: url('../img/donate/apples.svg') no-repeat center bottom / contain;
  pointer-events: none;
}

/* They keep floating whether or not the monthly tab is the chosen one – in the
   design they nudge the donor towards it. */

@media (prefers-reduced-motion: reduce) {
  .dform-tab__apples {
    display: none;
  }
}

/* --- Currency ---------------------------------------------
   A short centred row, not the full card width. */
.dcurrency {
  display: flex;
  align-items: center;
  gap: .42vw;
  width: 36%;
  margin: 0 auto 2rem;
  padding-bottom: .42vw;
  border-bottom: 1px solid var(--dform-line);
  cursor: pointer;
}

.dcurrency__label {
  flex: 0 0 auto;
  font-size: .94vw; /* 18px */
  font-weight: 500;
  color: var(--dform-navy);
}

/* The chevron sits at the row's far end, the value right after the label */
.dcurrency__select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 1.56vw 0 0;
  border: 0;
  background: transparent url('../img/icons/chevron-down-navy.svg') no-repeat left center / .83vw auto;
  font-family: inherit;
  font-size: .94vw;
  font-weight: 700;
  color: var(--dform-navy);
  text-align: start;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dform[data-lang="en"] .dcurrency__select {
  padding: 0 0 0 1.56vw;
  background-position: right center;
}

.dcurrency__select:focus {
  outline: none;
}

/* --- Plans ------------------------------------------------ */
.dform-plan {
  display: none;
}

.dform-plan.is-active {
  display: block;
}

/* --- Tier cards -------------------------------------------
   Three preset amounts plus the "another amount" tile, one row of four.
   They read the same in both tabs: navy outline, green once chosen – the
   --dform-accent switch only themes step 2. */
.dform-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .73vw; /* 14px */
  margin-bottom: 1.04vw;
}

.dtier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 8.85vw; /* 170px */
  padding: 1.04vw .52vw;
  border: 1px solid var(--dform-navy);
  border-radius: .83vw; /* 16px */
  background: #fff;
  color: var(--dform-navy);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, color .2s;
}

.dtier:hover {
  box-shadow: 0 0 0 1px var(--dform-navy);
}

/* The selected ring sits OUTSIDE the border – as an inset shadow it shrank the
   padding box and leaked into the rounded corners. */
.dtier.is-selected {
  border-color: var(--dform-green);
  box-shadow: 0 0 0 1px var(--dform-green);
  color: var(--dform-green);
}

.dtier__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dtier__radio {
  position: absolute;
  top: .62vw;
  left: .62vw;
  width: .94vw; /* 18px */
  height: .94vw;
  border: 1px solid var(--dform-radio);
  border-radius: 50%;
  background: #fff;
  transition: border-color .2s;
}

.dform[data-lang="en"] .dtier__radio {
  left: auto;
  right: .62vw;
}

.dtier.is-selected .dtier__radio,
.dcustom.is-selected .dtier__radio {
  border-color: var(--dform-accent);
  border-width: .1vw;
}

.dtier.is-selected .dtier__radio::after,
.dcustom.is-selected .dtier__radio::after {
  content: '';
  position: absolute;
  inset: .1vw;
  border-radius: 50%;
  background: var(--dform-accent);
}

/* direction:ltr keeps the ₪ on the left of the number in both languages.
   The base size is the one the custom-row summaries use; inside a tile the
   price is the headline, so it is scaled up below. */
.dtier__price {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  font-size: .88vw;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

.dtier__price b {
  font-size: 1.56vw; /* 30px */
  font-weight: 800;
}

.dtier__cur {
  font-size: .88vw;
  font-weight: 500;
}

.dtier .dtier__price,
.dtier .dtier__cur {
  font-size: 1.8vw; /* 34.6px – three quarters of the number beside it */
  font-weight: 800;
}

.dtier .dtier__price b {
  font-size: 2.4vw; /* 46.154px */
}

.dtier__note {
  display: block;
  margin-top: .21vw;
  font-size: 1.1vw; /* 21.177px */
  font-weight: 500;
  line-height: 1.25;
  color: inherit;
}

/* --- The fourth tile ---------------------------------------
   Unpicked it is just a label; picked, the label gives way to the amount
   field and the tile becomes the input. */
.dtier__note--custom {
  margin-top: 0;
  font-size: 1.04vw; /* 20px */
  font-weight: 500;
}

.dtier--custom.is-selected .dtier__note--custom {
  display: none;
}

.dtier__amount {
  display: none;
  width: 100%;
}

.dtier--custom.is-selected .dtier__amount {
  display: block;
}

.dtier__amount-label {
  display: block;
  margin-bottom: .42vw;
  font-size: .83vw; /* 16px */
  font-weight: 500;
  line-height: 1.2;
}

/* direction:ltr keeps the symbol in front of the number, like the tiers */
.dtier__amount-field {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .21vw;
  direction: ltr;
  width: 78%;
  margin: 0 auto;
  padding-bottom: .1vw;
  border-bottom: 1px solid currentColor;
}

.dtier__amount-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 2.4vw; /* 46.154px – matches a tier price */
  font-weight: 800;
  line-height: 1.1;
  color: inherit;
  text-align: left;
  -moz-appearance: textfield;
}

.dtier__amount-input:focus {
  outline: none;
}

.dtier__amount-input::-webkit-outer-spin-button,
.dtier__amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dtier__amount .dtier__note {
  margin-top: .31vw;
}

/* The message sits under the tile so it cannot stretch the row */
.dtier__amount .dfield-error {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  margin-top: .21vw;
}

/* --- Custom amount ----------------------------------------
   Opened by the fourth tile, so it is display:flex and needs its own
   [hidden] rule – the attribute alone loses to the display above. */
.dcustom {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 4.16vw; /* 80px */
  margin-bottom: 1.04vw;
  overflow: hidden;
  border: 1px solid var(--dform-green);
  border-radius: .79vw; /* 15.238px */
  background: #fff;
  color: var(--dform-navy);
  transition: border-color .2s, box-shadow .2s;
}

.dcustom[hidden] {
  display: none;
}

/* Step 2's add-on block keeps the accent outline it always had */
.dform-step[data-step="2"] .dcustom {
  margin-bottom: 0;
  border-color: var(--dform-accent);
  color: var(--dform-accent);
}

.dcustom__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: .83vw 1.25vw;
}

/* Radio + label sit together on the start side, unlike the tier cards
   where the radio is pinned to the opposite corner */
.dcustom__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .62vw;
  min-height: 1.77vw;
  cursor: pointer;
}

/* In the custom row the radio is a normal flow item, not corner-pinned */
.dcustom__head .dtier__radio {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex: 0 0 auto;
  transform: none;
}

.dcustom__title {
  margin: 0;
  font-size: .94vw; /* 18px */
  font-weight: 700;
}

.dcustom__fields {
  display: flex;
  align-items: center;
  gap: .83vw;
  margin-top: .94vw;
}

.dcustom__fields[hidden] {
  display: none;
}

/* Notched-outline field */
.dfield {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

.dfield__label {
  position: absolute;
  top: 0;
  inset-inline-start: .73vw;
  transform: translateY(-50%);
  padding: 0 .26vw;
  background: #fff;
  font-size: .68vw; /* 13px */
  font-weight: 400;
  line-height: 1;
  color: var(--dform-muted);
  white-space: nowrap;
  pointer-events: none;
}

.dfield__input {
  display: block;
  width: 100%;
  height: 2.29vw; /* 44px */
  padding: 0 .83vw;
  border: 1px solid var(--dform-border);
  border-radius: .42vw;
  background: #fff;
  font-family: inherit;
  font-size: .94vw;
  font-weight: 600;
  color: var(--dform-accent);
  text-align: start;
  -moz-appearance: textfield;
}

.dfield__input::placeholder {
  font-weight: 400;
  color: var(--dform-muted);
}

.dfield__input:focus {
  outline: none;
  border-color: var(--dform-accent);
}

.dfield__input.has-error {
  border-color: #D0021B;
}

.dfield__input::-webkit-outer-spin-button,
.dfield__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Summary panel – fills the end side of the row */
.dcustom__summary {
  flex: 0 0 auto;
  border-start-end-radius: calc(.79vw - 1px);
  border-end-end-radius: calc(.79vw - 1px);
  min-width: 9.89vw; /* 190px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .73vw 1.25vw;
  background: var(--dform-fill);
  text-align: start;
}

.dcustom__summary[hidden] {
  display: none;
}

/* One-time: the typed amount stacked over its note, centred in the tile */
.dcustom__summary--amount {
  align-items: center;
  text-align: center;
}

.dcustom__summary--amount .dtier__price b {
  font-size: 1.56vw; /* 30px */
}

.dcustom__summary p {
  margin: 0;
}

.dcustom__summary-head {
  padding-bottom: .52vw;
}

.dcustom__summary-count {
  display: block;
  font-size: .83vw;
  font-weight: 500;
  line-height: 1.1;
}

.dcustom__summary-count b {
  font-size: 1.35vw; /* 26px */
  font-weight: 800;
}

.dcustom__summary-months {
  display: block;
  font-size: .73vw; /* 14px */
  font-weight: 400;
  color: var(--dform-accent);
}

.dcustom__summary-total {
  display: flex;
  align-items: baseline;
  gap: .31vw;
  padding-top: .52vw;
  border-top: 1px solid var(--dform-border);
}

.dcustom__summary-total .dtier__price b {
  font-size: 1.35vw; /* 26px */
}

.dcustom__total-label {
  font-size: .83vw;
  font-weight: 500;
}

/* --- Error + action --------------------------------------- */
.dform-error {
  margin: .73vw 0 0;
  font-size: .83vw;
  font-weight: 500;
  color: #D0021B;
  text-align: center;
}

.dform-error[hidden] {
  display: none;
}

.dform-actions {
  display: flex;
  justify-content: center;
  gap: 1.04vw;
  margin-top: 3.15vw;
}

/* --- Step 3: the payment page ----------------------------- */
.dform-frame {
  position: relative;
  width: 100%;
  height: 31.25vw; /* 600px – the gateway scrolls inside if it needs more */
  border-radius: 1.04vw;
  overflow: hidden;
  background: var(--dform-track);
}

.dform-frame__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.dform-frame__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.dform-frame__loading[hidden] {
  display: none;
}

/* .myloader carries no base styling in the theme – give it one here */
.dform-frame__loading .myloader {
  width: 2.6vw;
  height: 2.6vw;
  border: .21vw solid var(--dform-fill);
  border-top-color: var(--dform-accent);
  border-radius: 50%;
  animation: dform-spin .8s linear infinite;
}

@keyframes dform-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dform-frame__loading .myloader {
    animation-duration: 3s;
  }
}

/* The theme's brush-edged .btn, sized for the form.
   background-color is reset so the UA button grey does not fill the corners
   the brush SVG leaves open. */
.dform-btn.btn {
  width: 9.16vw; /* 176px – keeps the brush SVG's 4:1 ratio */
  height: 2.29vw; /* 44px */
  font-family: inherit;
  font-size: 1.04vw; /* 20px */
  font-weight: 700;
  border: 0;
  background-color: unset;
  cursor: pointer;
  transition: transform .2s;
}

.dform-btn.btn:active {
  transform: translateY(1px);
}

/* The call to action carries a label and an arrow, so it outgrows the brush
   SVG's default 4:1 box. The theme only ships the brush in green, orange and
   cyan – img/donate/btn-navy.svg is btn-primary.svg refilled navy, which is
   what the design uses. */
.dform-btn--next.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .62vw;
  width: auto;
  min-width: 15vw;  /* 288px */
  height: 3.12vw;   /* 60px */
  padding: 0 1.66vw;
  background-image: url('../img/donate/btn-navy.svg');
  color: #fff;
}

.dform-btn__arrow {
  flex: 0 0 auto;
  display: block;
  width: 1.25vw; /* 24px */
}

.dform-btn__arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The arrow points at the inline end – the other way round in English */
.dform[data-lang="en"] .dform-btn__arrow {
  transform: scaleX(-1);
}

.dform-btn.btn:disabled,
.dform-btn.btn.is-loading {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

/* =========================================================
   Step 2 – donor details + payment
   ========================================================= */
.dform-sub {
  margin: -.41vw 0 1.45vw;
  font-size: .83vw; /* 16px */
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--dform-navy);
}

/* The receipt note belongs to the ID field above it. No negative pull – the
   grid's own row gap is already the space it needs. The inline indent lines it
   up with the text inside the field (mirrors itself in English). */
.dform-note {
  margin: .2rem 0 1.25vw;
  margin-inline-start: .6rem;
  font-size: .78vw; /* 15px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--dform-muted);
}

.dform-note a {
  color: #1A73E8;
  text-decoration: none;
}

.dform-note a:hover {
  text-decoration: underline;
}

/* --- Igul Letova ------------------------------------------
   One pale box: the pitch, the opt-in and the logo beside them. */
.digul {
  display: flex;
  align-items: center;
  gap: .83vw;
  padding: .83vw 1.04vw;
  border-radius: .83vw;
  background: var(--dform-fill);
}

.digul__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* The opt-in sits right under the sentence it belongs to */
.digul__text {
  margin: 0 0 .31vw;
  font-size: .83vw; /* 16px */
  font-weight: 400;
  line-height: 1.45;
  color: var(--dform-navy);
}

.digul .dcheck {
  margin: 0;
}

.digul__lead {
  font-weight: 800;
  color: var(--dform-green);
}

.digul__logo {
  flex: 0 0 auto;
  display: block;
  width: 4.25vw; /* 82px */
}

.digul .dcheck__text {
  font-weight: 700;
}

.digul__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Back, as a link beside the call to action ------------- */
.dform-back {
  display: inline-flex;
  align-items: center;
  gap: .52vw;
  padding: 0 .52vw;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.04vw; /* 20px */
  font-weight: 500;
  color: var(--dform-navy);
  cursor: pointer;
}

.dform-back:hover {
  text-decoration: underline;
}

.dform-back__arrow {
  flex: 0 0 auto;
  display: block;
  width: 1.25vw;
}

.dform-back__arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Points back towards the start – the other way round in English */
.dform[data-lang="en"] .dform-back__arrow {
  transform: scaleX(-1);
}

.dform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 0.62vw .73vw; 
}
.dfield-wrap {
  position: relative;
  min-width: 0;
}

/* Per-field message, right under its input */
.dfield-error {
  display: none;
  margin: .21vw 1.25vw 0;
  font-size: .73vw; /* 14px */
  font-weight: 500;
  line-height: 1.3;
  color: #D0021B;
  text-align: start;
}

.dfield-error.is-visible {
  display: block;
}

/* Inside the step-1 custom row the field is a label, so the message is a
   block at the end of it */
.dfield .dfield-error {
  margin-inline: .42vw;
}

/* Pill height is ~12% of the field's width in the design – at this form width
   that is ~46px. */
.dinput {
  display: block;
  width: 100%;
  height: 2.39vw; /* 46px */
  padding: 0 1.25vw;
  border: 1px solid var(--dform-line);
  border-radius: 500px;
  background: #fff;
  font-family: inherit;
  font-size: .88vw; /* 17px */
  font-weight: 500;
  color: var(--dform-navy);
  text-align: start;
  -moz-appearance: textfield;
  appearance: none;
}

.dinput::placeholder {
  color: #8A94A6;
}

/* The phone number is digits, so it reads LTR – but it stays on the start side
   of the field like every other value */
.dform .dinput[type="tel"] {
  direction: ltr;
  text-align: right;
}

.dform[data-lang="en"] .dinput[type="tel"] {
  text-align: left;
}

.dinput:focus {
  outline: none;
  border-color: var(--dform-accent);
}

.dinput.has-error {
  border-color: #D0021B;
}

.dinput::-webkit-outer-spin-button,
.dinput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Chevron sits on the trailing side: left in RTL, right in LTR */
.dinput--select {
  padding-inline-end: 2.29vw;
  background-image: url('../img/icons/chevron-down-navy.svg'); /* 10x6, #182E54 */
  background-repeat: no-repeat;
  background-size: .52vw auto; /* 10px */
  background-position: left 1.04vw center;
  cursor: pointer;
}

.dform[data-lang="en"] .dinput--select {
  background-position: right 1.04vw center;
}

/* --- Upsell blocks (one per frequency) -------------------- */
.dform-extra {
  margin-top: 1.66vw;
}

.dform-extra[hidden] {
  display: none;
}

.dform-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.04vw;
  min-height: 7.29vw; /* 140px */
  padding: 2.04vw 1.45vw;
  /* overflow: hidden; */
  border: 1px solid var(--dform-line);
  border-radius: 1.04vw;
  background: #fff;
  box-shadow: 0 .2vw 1.04vw rgba(24, 46, 84, .06);
}

.dform-card__body {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.dform-card__title {
  margin: 0;
  font-size: 1.14vw; /* 22px */
  font-weight: 800;
  line-height: 1.3;
  color: var(--dform-navy);
}

.dform-card__btn.btn {
  margin-top: .73vw;
}

/* The Igul Letova stamp overlaps the top edge of the card */
.dform-card__logo {
  position: absolute;
  top: -1.56vw;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 3.12vw; /* 60px */
}

.dform[data-lang="en"] .dform-card__logo {
  transform: translateX(-50%);
}

.dform-card__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Side images (ACF): --start is the photo, flush in the card's corner;
   --end is the drawing, sitting inline like the doodle it replaces */
.dform-card__img {
  flex: 0 0 auto;
  display: flex;
  width: 6.25vw; /* 120px */
}

.dform-card__img--start {
  align-self: flex-end;
  align-items: flex-end;
  margin-inline-start: -1.45vw;
  margin-bottom: -1.04vw;
}

.dform-card__img--end {
  align-self: center;
  align-items: center;
  width: 5.2vw; /* 100px – matches the doodle */
}

.dform-card__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hand-drawn hearts flanking the titles */
.dform-doodle {
  flex: 0 0 auto;
  width: 5.2vw; /* 100px */
  color: var(--dform-navy);
}

.dform-doodle svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- One-time: become a monthly donor --------------------- */
/* Same .dcustom calculator as step 1, just full width inside the card */
/* The add-on is a MONTHLY donation, so it keeps the navy palette even though
   it lives inside the green one-time step. */
.dform-card--join .dcustom {
  --dform-accent: #182E54;
  --dform-border: #BBD8F0;
  --dform-border-active: #182E54;
  --dform-fill: #E4F1FB;

  width: 100%;
  margin-top: .83vw;
  text-align: start;
}

/* --- Checkboxes ------------------------------------------- */
.dcheck {
  display: flex;
  align-items: flex-start;
  gap: .52vw; /* 10px */
  margin-top: 1.14vw; /* 22px between the rows */
  cursor: pointer;
}

.dcheck input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.dcheck__box {
  position: relative;
  flex: 0 0 auto;
  width: .83vw; /* 16px */
  height: .83vw;
  margin-top: .13vw; /* optically centres against the first text line */
  border: 1px solid var(--dform-line);
  border-radius: .26vw; /* 5px */
  background: #fff;
  transition: border-color .2s, background .2s;
}

.dcheck input:checked + .dcheck__box {
  border-color: var(--dform-accent);
  background: var(--dform-accent);
}

/* An SVG tick, not two rotated borders: at vw sizes the border trick lands on
   fractions of a pixel and the mark comes out lopsided. This one is centred
   and crisp whatever the box measures. */
.dcheck input:checked + .dcheck__box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1L12.8 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 68% auto;
}

.dcheck__text {
  font-size: .78vw; /* 15px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--dform-navy);
}

.dcheck__text b {
  font-weight: 700;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 1023.98px) {
  /* The form runs edge to edge on a phone – .dform-layout brings its own gutter */
  .page-template-tpl-donate-v4 .why .container {
    width: 100%;
  }

  /* 82.4vw wide on a phone – centre it under the text */
  .page-template-tpl-donate-v4 .sandwich-bar {
    margin: 8vw auto 0;
  }

  .dform-layout {
    display: block;
    padding: 0 4vw;
  }

  .dform-layout > .dform {
    flex: none;
  }

  .dform {
    max-width: 100%;
  }

  /* Only the ACF trust boxes are left out here – the JS moves the panel
     inside the card, above the buttons (see placePanel). */
  .dpanel-col {
    display: block;
    margin-top: 5.33vw;
  }

  /* Inside the card now, so it is a band rather than a column */
  .dpanel {
    position: relative;
    margin: 0 0 5.33vw;
    padding: 5.33vw 4vw;
    border-radius: 2.66vw;
  }

  /* The heart tucks into the corner instead of stacking above the text */
  .dpanel__doodle {
    position: absolute;
    bottom: 13.8vw;
    inset-inline-end: 4.8vw;
    width: 12vw; /* 90px */
    margin: 0;
  }

  .dpanel__lead {
    font-size: 10.33vw; /* 77.5px */
  }

  /* line-height under 1 pulls the huge number tight to the lines around it */
  .dpanel__count {
    margin-top: 1.06vw;
    font-size: 22.24vw; /* 166.8px */
    line-height: .7;
  }

  .dpanel__unit {
    margin-top: 0;
    font-size: 5.4vw; /* 40.5px */
  }

  /* One sentence on a phone: "…מזין לשנת לימודים מלאה". nowrap on the wrapper
     is what removes the break opportunity between the two halves – display
     inline alone still lets the line break in the space between them. */
  .dpanel__line {
    white-space: nowrap;
  }

  .dpanel__desc,
  .dpanel__sub {
    display: inline;
    font-size: 4.4vw; /* 33px */
  }

  .dform-aside {
    margin-top: 5.33vw;
  }

  .dform__box {
    border-radius: 4.26vw; /* 32px */
    padding: 5.33vw 4vw;
  }

  .dform-tab__apples {
    width: 23.6vw; /* 177px of the 750 design */
    height: 22vw;  /* 165px */
    margin-left: -11.8vw;
  }

  .dform-title {
    margin-bottom: 4.8vw;
    font-size: 5.26vw; /* 39.5px */
    font-weight: 700;
  }

  .dform-title--main {
    margin-bottom: 1.6vw;
    font-size: 6.33vw; /* 47.5px */
  }

  .dform-lead {
    margin-bottom: 4.8vw;
    font-size: 4.46vw; /* 33.5px */
  }

  .dform-tabs {
    width: 100%;
    margin-bottom: 4.8vw;
    padding: .8vw;
  }

  .dform-tab {
    flex: 1 1 0;
    min-width: 0;
    gap: 1.06vw;
    padding: 2.93vw 2vw;
    font-size: 4.2vw; /* 31.5px */
  }

  /* 36% of a phone leaves no room for the value – full width here */
  .dcurrency {
    gap: 1.6vw;
    width: 100%;
    margin-bottom: 4.8vw;
    padding-bottom: 1.6vw;
    padding-inline: 1rem;
  }

  .dcurrency__label,
  .dcurrency__select {
    font-size: 4.46vw; /* 33.5px */
  }

  .dcurrency__select {
    padding-inline-end: 6.4vw;
    background-size: 3.46vw auto;
  }

  /* Two by two – four tiles in a row are unreadable on a phone */
  .dform-tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4vw;
    margin-bottom: 2.4vw;
  }

  .dtier {
    min-height: 26.66vw; /* 200px */
    padding: 4vw 2.66vw;
    border-radius: 2.66vw;
  }

  .dtier__radio {
    top: 3.2vw;
    left: 3.2vw;
    width: 4.26vw;
    height: 4.26vw;
  }

  .dform[data-lang="en"] .dtier__radio {
    left: auto;
    right: 3.2vw;
  }

  .dtier.is-selected .dtier__radio::after,
  .dcustom.is-selected .dtier__radio::after {
    inset: .66vw;
  }

  .dtier__price {
    font-size: 3.2vw;
  }

  .dtier__price b {
    font-size: 5.33vw; /* 40px */
  }

  .dtier__cur {
    font-size: 3.2vw;
  }

  .dtier .dtier__price,
  .dtier .dtier__cur {
    font-size: 4.82vw; /* 36.16px – three quarters of the number beside it */
  }

  .dtier .dtier__price b {
    font-size: 10.43vw; /* 78.2px */
    font-weight: 500;
  }

  .dtier__note {
    margin-top: .8vw;
    font-size: 4.63vw; /* 34.709px */
  }

  .dtier__note--custom {
    font-size: 4.46vw; /* 33.5px */
  }

  /* "לבחירת / סכום אחר" – two lines on a phone, one on a desktop */
  .dtier__note--custom .dtier__note-rest {
    display: block;
  }

  .dcustom {
    flex-direction: column;
    min-height: 17.33vw; /* 130px */
    margin-bottom: 2.4vw;
    border-radius: 2.66vw;
  }

  .dcustom__main {
    padding: 4.26vw 4vw;
  }

  .dcustom__head {
    gap: 2.66vw;
    min-height: 6.4vw;
  }

  .dcustom__title {
    font-size: 3.46vw; /* 26px */
  }

  .dcustom__fields {
    flex-direction: column;
    align-items: stretch;
    gap: 4.8vw;
    margin-top: 5.33vw;
  }

  .dfield__label {
    inset-inline-start: 2.93vw;
    padding: 0 1.06vw;
    font-size: 2.66vw; /* 20px */
  }

  .dfield__input {
    height: 11.73vw;
    padding: 0 3.2vw;
    border-radius: 1.6vw;
    font-size: 3.46vw;
  }

  /* Stacked, the summary reads as one wide strip: the two halves sit side by
     side (children | total) instead of one under a divider. */
  /* .dcustom has overflow:hidden, so the strip needs no radius of its own */
  .dcustom__summary {
    min-width: 0;
    border-start-end-radius: 0;
    border-radius: 0;
    padding: 4vw;
  }

  /* Two halves side by side. The one-time tile (--amount) is a single figure,
     so it is left out of all of this and stays stacked and centred. */
  .dcustom__summary:not(.dcustom__summary--amount) {
    flex-direction: row;
    align-items: center;
  }

  .dcustom__summary:not(.dcustom__summary--amount) .dcustom__summary-head,
  .dcustom__summary:not(.dcustom__summary--amount) .dcustom__summary-total {
    flex: 1 1 50%;
    min-width: 0;
  }

  .dcustom__summary-head {
    padding-bottom: 0;
  }

  /* The total stacks its own number over its label, like the half beside it */
  .dcustom__summary:not(.dcustom__summary--amount) .dcustom__summary-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }

  .dcustom__summary-count {
    font-size: 3.2vw;
  }

  /* Both halves carry the same weight – same sizes as the tier cards */
  .dcustom__summary-count b {
    font-size: 5.33vw;
  }

  .dcustom__summary-months {
    font-size: 2.93vw;
  }

  .dcustom__summary-total .dtier__price b,
  .dcustom__summary--amount .dtier__price b {
    font-size: 5.33vw;
  }

  /* Sits under the total, so it matches the line under the children count */
  .dcustom__total-label {
    font-size: 2.93vw;
  }

  .dform-error {
    margin-top: 2.66vw;
    font-size: 3.2vw;
  }

  /* Stacked on a phone – the call to action on top, "back" under it */
  .dform-actions {
    gap: 4vw;
    margin-top: 4.8vw;
    flex-direction: column-reverse;
    align-items: center;
  }

  .dform-btn.btn {
    width: 37.33vw;
    height: 10.66vw;
    font-size: 4.26vw;
  }

  .dform-btn--next.btn {
    gap: 2.13vw;
    width: auto;
    min-width: 61.33vw; /* 460px */
    height: 12.8vw;     /* 96px */
    padding: 0 5.33vw;
  }

  .dform-btn__arrow {
    width: 5.33vw;
  }

  /* --- Step 2 --------------------------------------------- */
  /* The sub belongs to the title, so the title gives up its own gap */
  .dform-step[data-step="2"] .dform-title,
  .dform-step[data-step="3"] .dform-title {
    margin-bottom: 2.13vw;
  }

  .dform-sub {
    margin: 0 0 6.4vw;
    font-size: 4.2vw; /* 31.5px */
  }

  .dform-grid {
    grid-template-columns: 1fr;
    gap: 3.2vw;
  }

  .dfield-error {
    margin: 1.06vw 4.8vw 0;
    font-size: 2.93vw; /* 22px */
  }

  .dfield .dfield-error {
    margin-inline: 1.6vw;
  }

  .dinput {
    height: 11.73vw;
    padding: 0 4.8vw;
    font-size: 4.46vw; /* 33.5px */
  }

  .dinput--select {
    padding-inline-end: 10vw;
    background-size: 2.66vw auto; /* 20px */
    background-position: left 4.8vw center;
  }

  .dform[data-lang="en"] .dinput--select {
    background-position: right 4.8vw center;
  }

  .dform-extra {
    margin-top: 8.33vw;
  }

  .dform-card {
    flex-direction: column;
    gap: 3.2vw;
    min-height: 0;
    padding: 5.33vw 4vw 4vw;
    border-radius: 4.26vw;
  }

  .dform-card__title {
    font-size: 4.26vw; /* 32px */
  }

  .dform-card__btn.btn {
    margin-top: 4vw;
  }

  .dform-card__logo {
    top: -6.66vw;
    width: 14vw;
  }

  /* Igul card on a phone: the side images (and the doodle that stands in for
     the second one) go – the stamp in the middle is the whole decoration. */
  .dform-card:not(.dform-card--join) .dform-card__img,
  .dform-card:not(.dform-card--join) .dform-doodle {
    display: none;
  }

  /* …which means the title now has to clear the stamp on its own */
  .dform-card:not(.dform-card--join) {
    padding-top: 11.73vw;
  }

  .dform-card__img {
    align-self: center;
    width: 60vw;
  }

  .dform-card__img--start {
    margin-inline-start: 0;
    margin-bottom: -4vw;
  }

  .dform-card__img--end {
    width: 20vw;
  }

  .dform-doodle {
    width: 20vw;
  }

  /* Stacked, the two doodles that flank the title on desktop would sit one
     above and one below the whole card – keep the top one only. */
  .dform-card--join .dform-doodle:last-child {
    display: none;
  }

  /* Let the calculator inside use the card's full width, like step 1 */
  .dform-card--join {
    padding-inline: 2.66vw;
  }

  .dform-card--join .dcustom {
    margin-top: 3.2vw;
  }

  .dcheck {
    gap: 2.66vw;
    margin-top: 4vw;
  }

  .dcheck__box {
    width: 5.33vw;
    height: 5.33vw;
    margin-top: .53vw;
    border-radius: 1.06vw;
  }

  .dcheck__text {
    font-size: 4.2vw; /* 31.5px */
  }
}

/* =========================================================
   Donation calculator (tpl-donate-v4) – inc/donate-calculator.php
   Sits between the yellow "why" section and the accordion, so it
   carries the yellow-to-turquoise wave.
   ========================================================= */
.dcalc {
  position: relative;
  background-color: #55CEE2;
  padding: 5.2vw 0 7.8vw;
  font-family: 'ploni', sans-serif;
  color: #182E54;
}

.dcalc[data-dir="rtl"] { direction: rtl; }
.dcalc[data-dir="ltr"] { direction: ltr; }

.dcalc *,
.dcalc *::before,
.dcalc *::after {
  box-sizing: border-box;
}

.dcalc .container {
  width: 84%;
}

.dcalc__title {
  margin: 0 0 3.64vw;
  font-size: 2.29vw; /* 44px */
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* --- Sliders ---------------------------------------------- */
.dcalc__sliders {
  display: flex;
  justify-content: center;
  gap: 7.29vw; /* 140px */
}

.dcalc__slider {
  width: 28.12vw; /* 540px */
  max-width: 100%;
}

.dcalc__label {
  display: block;
  margin-bottom: .83vw;
  font-size: 1.25vw; /* 24px */
  font-weight: 600;
  text-align: center;
}

/* bubble + gap + thumb */
.dcalc__range {
  position: relative;
  height: 4.94vw;
}

.dcalc__bubble {
  position: absolute;
  top: 0;
  left: 50%; /* JS replaces this with the thumb's pixel position */
  transform: translateX(-50%);
  min-width: 5.2vw; /* 100px */
  padding: .31vw .83vw;
  border-radius: .83vw;
  background: #fff;
  font-size: 1.35vw; /* 26px */
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  /* "₪250" reads the same way in Hebrew and in English */
  direction: ltr;
  unicode-bidi: isolate;
  box-shadow: 0 .2vw .62vw rgba(24, 46, 84, .12);
}

.dcalc__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -.41vw;
  border: .41vw solid transparent;
  border-bottom: 0;
  border-top-color: #fff;
}

.dcalc__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .57vw; /* centres the bar inside the thumb */
  height: .52vw; /* 10px */
  border-radius: 10vw;
  background: #fff;
}

.dcalc__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: 10vw;
  background: #182E54;
}

/* The filled part always runs from the start of the track to the thumb */
.dcalc[data-dir="rtl"] .dcalc__fill { right: 0; }
.dcalc[data-dir="ltr"] .dcalc__fill { left: 0; }

.dcalc__input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1.66vw; /* = the thumb; the JS reads it to place the bubble */
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  direction: ltr;
}

/* Mirroring the input is more reliable across browsers than trusting each of
   them to flip a range under direction: rtl. */
.dcalc[data-dir="rtl"] .dcalc__input {
  transform: scaleX(-1);
}

.dcalc__input:focus {
  outline: none;
}

.dcalc__input::-webkit-slider-runnable-track {
  height: 1.66vw;
  border: 0;
  background: transparent;
}

.dcalc__input::-moz-range-track {
  height: 1.66vw;
  border: 0;
  background: transparent;
}

.dcalc__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.66vw;
  height: 1.66vw;
  border: 0;
  border-radius: 50%;
  background: #182E54;
  cursor: pointer;
}

.dcalc__input::-moz-range-thumb {
  width: 1.66vw;
  height: 1.66vw;
  border: 0;
  border-radius: 50%;
  background: #182E54;
  cursor: pointer;
}

.dcalc__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 .2vw rgba(255, 255, 255, .9);
}

.dcalc__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 .2vw rgba(255, 255, 255, .9);
}

/* --- Result ----------------------------------------------- */
.dcalc__result {
  position: relative;
  margin: 4.68vw 0 0;
  text-align: center;
}

.dcalc__hearts {
  position: absolute;
  bottom: 55%;
  left: 50%;
  width: 8.85vw;  /* 170px */
  height: 8.07vw; /* 155px */
  margin-left: -8vw;
  background: url('../img/donate/hearts.svg') no-repeat center bottom / contain;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dcalc__hearts {
    display: none;
  }
}

.dcalc__number {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 8.33vw; /* 160px */
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
}

.dcalc__result-label {
  display: block;
  margin-top: .52vw;
  font-size: 1.66vw; /* 32px */
  font-weight: 700;
}

@media (max-width: 1023.98px) {
  .dcalc {
    padding: 10.66vw 0 16vw;
  }

  .dcalc .container {
    width: 86%;
  }

  /* The yellow section's decoration used to hang over the accordion; with the
     calculator in between it landed on the title – keep it in its own section. */
  .page-template-tpl-donate-v4 .why .shape {
    bottom: -4vw;
  }

  .dcalc__title {
    margin-bottom: 8vw;
    font-size: 5.33vw; /* 40px */
  }

  .dcalc__sliders {
    flex-direction: column;
    gap: 9.33vw;
  }

  .dcalc__slider {
    width: 100%;
  }

  .dcalc__label {
    margin-bottom: 2.66vw;
    font-size: 3.73vw; /* 28px */
  }

  .dcalc__range {
    height: 14.93vw;
  }

  .dcalc__bubble {
    min-width: 21.33vw;
    padding: .8vw 2.66vw;
    border-radius: 2.66vw;
    font-size: 4.26vw; /* 32px */
  }

  .dcalc__bubble::after {
    margin-left: -1.33vw;
    border-width: 1.33vw;
    border-bottom: 0;
  }

  .dcalc__track {
    bottom: 1.86vw;
    height: 1.6vw;
  }

  .dcalc__input {
    height: 5.33vw;
  }

  .dcalc__input::-webkit-slider-runnable-track { height: 5.33vw; }
  .dcalc__input::-moz-range-track { height: 5.33vw; }

  .dcalc__input::-webkit-slider-thumb {
    width: 5.33vw;
    height: 5.33vw;
  }

  .dcalc__input::-moz-range-thumb {
    width: 5.33vw;
    height: 5.33vw;
  }

  .dcalc__result {
    margin-top: 12vw;
  }

  /* On a phone the hearts spread across the whole number instead of sitting
     off to its side – 170:155 is the svg's own ratio, keep it. */
  .dcalc__hearts {
    bottom: 60%;
    width: 45.33vw;  /* 340px */
    height: 41.33vw; /* 310px */
    margin-left: -22.66vw;
  }

  .dcalc__number {
    font-size: 21.33vw; /* 160px */
  }

  .dcalc__result-label {
    margin-top: 1.6vw;
    font-size: 4.26vw; /* 32px */
  }
}

@media (max-width: 1023.98px) {
  .dform-frame {
    height: 133.33vw; /* 1000px of the 750 design */
    border-radius: 4.26vw;
  }
}

/* =========================================================
   Mobile – step 1's amount tile, step 2's Igul box and back link
   ========================================================= */
@media (max-width: 1023.98px) {
  .dtier__note--custom {
    font-size: 4.46vw; /* 33.5px */
  }

  /* "לבחירת / סכום אחר" – two lines on a phone, one on a desktop */
  .dtier__note--custom .dtier__note-rest {
    display: block;
  }

  .dtier__amount-label {
    margin-bottom: 1.6vw;
    font-size: 2.93vw; /* 22px */
  }

  .dtier__amount-field {
    gap: .8vw;
    width: 86%;
  }

  .dtier__amount-input {
    font-size: 6.43vw; /* 48.207px – matches a tier price */
  }

  .dtier__amount .dtier__note {
    margin-top: 1.06vw;
  }

  /* Centred on a phone – the start indent would throw it off, so it goes */
  .dform-note {
    margin: 1.4vw 0 4vw;
    font-size: 3.5vw; /* 26px */
    color: #000;
    text-align: center;
  }

  /* The logo drops under the text rather than squeezing it */
  .digul {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 3.2vw;
    padding: 4.26vw;
    border-radius: 2.66vw;
  }

  .digul__text {
    margin-bottom: 2.4vw;
    font-size: 3.93vw; /* 29.5px */
  }

  /* Sits at the start of the box, not pushed to the far end */
  .digul__logo {
    width: 28.33vw; /* 212.5px */
  }

  .dform-back {
    gap: 1.6vw;
    font-size: 3.73vw; /* 28px */
  }

  .dform-back__arrow {
    width: 4.8vw;
  }
}