/* ==========================================================================
   Shared "Submitted Successfully" popup (Figma node 40005746:31208)

   Paired with <x-front.success-modal>, so it is loaded by any page that shows
   the dialog rather than living in one page's stylesheet - Become a Partner and
   Nominate both use it. The Done button keeps the host page's own primary
   button class (.ptn-btn-primary, .nom-btn-primary, ...), which is where its
   rim, shadow and hover bloom come from; only its width is set here.

   A Bootstrap modal, so the backdrop, focus trap and ESC handling are the
   framework's - only the panel is dressed here. Three layers stack inside a
   560px, 36px-radius panel: the teal scene (the artboard's own PNG under a
   swoosh vector and a starfield), the tick badge straddling the join, and the
   white card carrying the copy and the Done button.
   ========================================================================== */
.success-modal .modal-dialog { max-width: 560px; }

/* Figma's own backdrop: a barely-there dark wash under a 6.9px blur, which is
   what keeps the page readable behind the panel instead of dimming it out.
   Bootstrap's default .modal-backdrop is a flat 50% black, so it is turned off
   in favour of this. */
.success-modal { backdrop-filter: blur(6.9px); -webkit-backdrop-filter: blur(6.9px); }
/* Bootstrap renders its backdrop as a SIBLING of the modal, not a child, so it
   cannot be reached from .success-modal - and Modal has no option to class it
   (backdrop takes true/false/'static' only). :has() on the body is what scopes
   it to this dialog: the element still exists, so clicking outside still
   dismisses, it just stops painting its flat 50% black over our own wash. */
body:has(.success-modal.show) .modal-backdrop { opacity: 0; }
.success-modal .modal-dialog::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .04));
    pointer-events: none;
}

.success-modal-content {
    position: relative;
    align-items: center;
    gap: 32px;
    padding: 20px;
    border: 0;
    border-radius: 36px;
    overflow: hidden;
    /* Two stacked fills, exactly as the artboard has them: a teal-to-cream wash
       over a white sheen that fades down the panel. */
    background:
        linear-gradient(180deg, rgba(39, 113, 105, .6) 0%, rgba(249, 247, 233, .6) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .64) 28.88%, rgba(255, 255, 255, .32) 70.97%);
}

/* ---------- The light wash ---------- */
/* Two stacked #f5f5f5 rectangles in the artboard (nodes 40005746:31236-31237),
   756x421 hung at y=150 so they bleed past every edge. They are what stops the
   page showing through the lower panel: sampling the export gives a flat
   244,244,244 everywhere below the teal.

   Both carry a layer blur that the Figma exporter drops, and it matters - the
   scene PNG is only ~34% opaque at y=150, so a hard edge there reads as a line
   across the panel. The ramp below is the blur measured back off the export:
   for each row, the scene's own alpha was divided out of the rendered pixel to
   recover the backdrop behind it, which climbs out of the panel's gradients
   from about y=70 and is solid #f5f5f5 by y=190.

   Stops are in px, not percentages, so the ramp stays pinned to the top of the
   panel the way the artboard's rectangles are - the panel itself grows past the
   artboard's 468px when the message wraps. */
.success-modal-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(245, 245, 245, 0) 40px,
        rgba(245, 245, 245, .12) 70px,
        rgba(245, 245, 245, .55) 110px,
        rgba(245, 245, 245, .82) 150px,
        #f5f5f5 190px);
    pointer-events: none;
}

/* ---------- The teal scene ---------- */
/* Sized and placed as the artboard does: a 606x424 export hung 134px above the
   panel's top edge and 20px past its leading edge, so only its lower band shows
   through the panel's rounded corners. */
.success-modal-scene {
    position: absolute;
    top: -134px;
    left: -20px;
    width: 606px;
    height: 424px;
    background: url("../images/success-modal/success-modal-bg.png") no-repeat center / cover;
    pointer-events: none;
}
.success-modal-scene-vector {
    position: absolute;
    top: -285px;
    left: -116px;
    width: 748.707px;
    height: 608.626px;
    transform: rotate(-.57deg);
    background: url("../images/success-modal/success-modal-vector.svg") no-repeat center / 100% 100%;
}
/* The starfield. Every dot carries its own left/top/size/opacity inline, from
   the artboard - this only gives them their shape. Offsets are measured from
   the panel, so the scene's own -134/-20 shift is cancelled here. */
.success-modal-star {
    position: absolute;
    margin: 134px 0 0 20px;
    border-radius: 50%;
    background: #fff;
}

/* Empty by design - see the note in the blade. */
.success-modal-spacer { flex: 0 0 48px; width: 100%; height: 48px; }

/* ---------- Tick badge ---------- */
.success-modal-badge {
    position: relative;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: 32px;
    overflow: hidden;
    background: url("../images/success-modal/success-modal-badge.svg") no-repeat center / 100px 100px;
}
/* The failure badge: the same glass tile, with the tick swapped for the cross
   that icon-close-circle.svg already draws elsewhere on the site. Only the
   glyph changes - the dialog is otherwise identical either way. */
.success-modal-badge-error {
    background-image: url("../images/success-modal/success-modal-badge-error.svg");
}

/* Two plus-lighter ellipses on the badge's trailing edge, the artboard's own
   highlight on the glass. */
.success-modal-badge-glow-a,
.success-modal-badge-glow-b {
    position: absolute;
    mix-blend-mode: plus-lighter;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.success-modal-badge-glow-a {
    left: 88px;
    top: 32.5px;
    width: 24px;
    height: 24px;
    background-image: url("../images/success-modal/success-modal-badge-glow-a.svg");
}
.success-modal-badge-glow-b {
    left: 92px;
    top: 36.5px;
    width: 16px;
    height: 16px;
    background-image: url("../images/success-modal/success-modal-badge-glow-b.svg");
}

/* ---------- White card ---------- */
.success-modal-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    background: #fff;
}
.success-modal-copy { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.success-modal-title { margin: 0; font-size: 24px; font-weight: 700; color: #262d34; }
.success-modal-text { margin: 0; font-size: 16px; line-height: 1.5; color: #303841; }
/* 210px, the width the artboard gives it. align-self, because a host button may
   pin its own - .cta-submit is flex-start. */
.success-modal-done { width: 210px; justify-content: center; align-self: center; }

/* ---------- Responsive ---------- */
/* The panel is a fixed 560px in the artboard; below that it takes the viewport
   with the same 16px gutter the page uses. The scene keeps its own intrinsic
   size - it is a bleed, not a stretch - so it simply crops further.

   591.98 rather than a round 599.98: the panel stops fitting at 560 + 2x16, so
   that is where it has to start shrinking. Cutting over at 599.98 made the
   panel WIDER as the viewport got narrower - 567px at a 599px viewport against
   560px at 600px - because `max-width: none` dropped the cap 8px early. The cap
   is left in place here; below 592 it simply stops binding. */
@media (max-width: 591.98px) {
    .success-modal .modal-dialog { margin: 16px; }
    .success-modal-content { gap: 24px; padding: 16px; border-radius: 28px; }
    .success-modal-spacer { flex-basis: 24px; height: 24px; }
    .success-modal-card { padding: 28px 20px; gap: 24px; }
    .success-modal-title { font-size: 20px; }
}

/* The button spans the card only on a real phone. It used to do so anywhere
   under 600px, which stretched it to ~495px on a large-phone/small-tablet
   panel - a pill more than twice the artboard's 210px. */
@media (max-width: 479.98px) {
    .success-modal-done { width: 100%; }
}