/* =====================================================================
   Thank-you / Error confirmation page  (Figma 4960:9845 desktop /
   4984:16041 mobile).  Shared by thank-you.html and error.html.
   RTL Hebrew. Centered confirmation card between solid header + footer.
   ===================================================================== */

:root {
  --blk: #030a11;
  --gray: #6c6c6c;
  --ty-banner: #f6f6f6;          /* Figma Rectangle 9794 fill */
  /* solid header height (Figma 137 of 1920 canvas), fluid */
  --ty-head: calc(100vw * 137 / 1920);
}

/* ---- main wrapper: fills space between header and footer ---- */
.ty {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-top: var(--ty-head);   /* clear the fixed solid header */
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* size to content (banner clipped by overflow:hidden) so the footer sits right
     under the content — no big white gap below. */
  padding-bottom: calc(100vw * 72 / 1920);
}

/* ---- cream banner behind the content (Figma: y62 → y795, h733) ---- */
.ty__banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* banner bottom at canvas y795 (of 1920) => 795/1920 of viewport-width */
  height: calc(100vw * 795 / 1920);
  background: var(--ty-banner);
  z-index: 0;
  pointer-events: none;
}
/* faint decorative gold ring (Figma Ellipse 109: 130x130 @ x1790 y694) */
.ty__ring {
  position: absolute;
  width: calc(100vw * 130 / 1920);
  height: calc(100vw * 130 / 1920);
  top: calc(100vw * 632 / 1920);     /* 694 - 62 banner offset */
  left: calc(100vw * 1790 / 1920);   /* Figma x1790 (visual right area) */
  border: 1px solid rgba(229, 195, 139, 0.35);
  border-radius: 50%;
  opacity: .6;
}

/* ---- breadcrumb (Figma top155, house on the RIGHT in RTL) ---- */
.ty__crumb {
  position: relative;
  z-index: 2;
  align-self: flex-start;           /* RTL column cross-start = visual RIGHT */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: calc(100vw * 31 / 1920) calc(100vw * 310 / 1920) 0 0;  /* top93 from header, right310 */
  font-family: var(--font-body);
  font-size: 16px;
  color: #000;
  direction: rtl;
}
.ty__crumb a { display: inline-flex; align-items: center; }
.ty__crumb-home { width: 14px; height: 13px; }
.ty__crumb-sep { color: #000; font-weight: 400; }
.ty__crumb-cur { color: #000; font-weight: 700; }

/* ---- centred content block ---- */
.ty__inner {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  /* push content down so the icon sits ~Figma y257 (minus header + crumb flow).
     header137 + crumb-area => icon at canvas 257 => from top of .ty (=header bottom)
     gap is 257-137 = 120 of 1920, but crumb already consumed flow; nudge: */
  padding-top: calc(100vw * 40 / 1920);
}

.ty__icon {
  width: calc(100vw * 94 / 1920);
  height: calc(100vw * 94 / 1920);
  max-width: 94px;
  max-height: 94px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* error document icon sits 27px higher in Figma (top230 vs paperplane top257) */
.ty--error .ty__inner { padding-top: calc(100vw * 13 / 1920); }

.ty__title {
  margin-top: calc(100vw * 22 / 1920);   /* icon bottom (257+94=351) -> heading 354 */
  font-family: var(--font-body);
  font-weight: 400;                       /* Assistant Regular */
  font-size: clamp(34px, calc(100vw * 58 / 1920), 58px);
  line-height: 1.1;
  color: #000;
  letter-spacing: 0;
}

.ty__msg {
  margin-top: calc(100vw * 18 / 1920);    /* heading bottom -> message y445 */
  font-family: var(--font-body);
  font-weight: 700;                       /* Assistant Bold */
  font-size: clamp(17px, calc(100vw * 22 / 1920), 22px);
  line-height: 1.36;                      /* 30/22 */
  color: #1a1a1a;
}

/* ---- CTA pill: circle/arrow on visual LEFT (RTL), 222x48 ---- */
.ty__cta {
  margin-top: calc(100vw * 38 / 1920);    /* message -> button y510 */
  display: flex;
  flex-direction: row-reverse;            /* circle/arrow on visual LEFT */
  align-items: center;
  gap: 9px;
  width: 222px;
  height: 48px;
  border: 1px solid var(--green-900);
  border-radius: var(--r-pill);
  padding: 0 4px 0 0;
}
.ty__cta-label {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--green-900);
}
.ty__cta-circle {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(13, 44, 33, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ty__cta-circle img { width: 24px; height: 24px; display: block; }

/* breathing room before footer */
.ty__inner::after {
  content: "";
  display: block;
  height: calc(100vw * 60 / 1920);
}

/* ================= TABLET / MOBILE ================= */
@media (max-width: 1024px) {
  :root { --ty-head: 72px; }      /* mobile solid header height */

  .ty {
    padding-top: 72px;
    padding-bottom: 48px;
  }
  .ty__banner {
    height: 593px;                /* Figma mobile Rectangle 9795 */
  }
  .ty__ring { display: none; }

  .ty__crumb {
    margin: 18px 16px 0 0;
    font-size: 14px;
  }
  .ty__crumb-home { width: 11px; height: 10px; }

  .ty__inner { padding-top: 56px; padding-inline: 16px; }

  .ty__icon { width: 80px; height: 80px; }
  .ty__title {
    margin-top: 24px;
    font-size: 40px;
  }
  .ty__msg {
    margin-top: 14px;
    font-size: 20px;
  }
  .ty__cta { margin-top: 28px; }
  .ty__inner::after { height: 64px; }
}

@media (max-width: 480px) {
  .ty__title { font-size: 36px; }
  .ty__msg { font-size: 19px; }
}