/* Followspanel receipt only. The component is mounted on its two exact hosts. */
dialog.fp-order-receipt {
  --receipt-bg: #fff;
  --receipt-surface: #f7f9fd;
  --receipt-line: #e3eaf3;
  --receipt-text: #132d4d;
  --receipt-muted: #5f748e;
  --receipt-balance: #edf4ff;
  box-sizing: border-box;
  width: min(540px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--receipt-line);
  border-radius: 26px;
  background: var(--receipt-bg);
  color: var(--receipt-text);
  box-shadow: 0 28px 100px #020c284d;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: left;
  line-height: 1.5;
}
dialog.fp-order-receipt::backdrop { background: #030c1cbd; backdrop-filter: blur(4px); }
.fp-order-receipt *, .fp-order-receipt *::before, .fp-order-receipt *::after { box-sizing: border-box; }
.fp-order-receipt .fp-receipt-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 30px); }
.fp-order-receipt .fp-receipt-header { position: relative; flex: 0 0 auto; padding: 30px 28px 24px; text-align: center; }
.fp-order-receipt .fp-receipt-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 50%; background: transparent; color: var(--receipt-muted); cursor: pointer; }
.fp-order-receipt .fp-receipt-close:hover { background: var(--receipt-surface); color: var(--receipt-text); }
.fp-order-receipt .fp-receipt-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fp-order-receipt .fp-receipt-success { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 16px; border: 11px solid #e1f6ed; border-radius: 50%; background: #079b68; color: #fff; }
.fp-order-receipt .fp-receipt-success svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fp-order-receipt .fp-receipt-eyebrow { margin: 0 0 5px; color: var(--receipt-muted); font-size: 13px; font-weight: 600; }
.fp-order-receipt #fp-receipt-title { margin: 0; color: var(--receipt-text); font-size: clamp(27px, 6vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.9px; }
.fp-order-receipt #fp-receipt-description { max-width: 330px; margin: 10px auto 0; color: var(--receipt-muted); font-size: 13px; line-height: 1.6; }
.fp-order-receipt .fp-receipt-content { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px; }
.fp-order-receipt .fp-receipt-details { border: 1px solid var(--receipt-line); border-radius: 18px; background: var(--receipt-surface); overflow: hidden; }
.fp-order-receipt .fp-receipt-service { padding: 18px 19px 15px; }
.fp-order-receipt .fp-receipt-service > span { display: block; margin-bottom: 5px; color: var(--receipt-muted); font-size: 12px; font-weight: 600; }
.fp-order-receipt .fp-receipt-service p { margin: 0; color: var(--receipt-text); font-size: 14px; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.fp-order-receipt .fp-receipt-fields { margin: 0; padding: 0; }
.fp-order-receipt .fp-receipt-fields > div { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 19px; padding: 13px 0; border-top: 1px solid var(--receipt-line); }
.fp-order-receipt .fp-receipt-fields dt { margin: 0; color: var(--receipt-muted); font-size: 12px; font-weight: 500; }
.fp-order-receipt .fp-receipt-fields dd { min-width: 0; margin: 0; color: var(--receipt-text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fp-order-receipt .fp-receipt-fields .fp-receipt-order-id { color: #176bff; font-weight: 750; }
.fp-order-receipt .fp-receipt-target { font-weight: 400 !important; line-height: 1.6; }
.fp-order-receipt .fp-receipt-fields .fp-receipt-balance { margin: 0; padding: 14px 19px; background: var(--receipt-balance); }
.fp-order-receipt .fp-receipt-balance dd { color: #176bff; font-weight: 750; }
.fp-order-receipt .fp-receipt-footer { flex: 0 0 auto; padding: 20px 24px 24px; }
.fp-order-receipt a.fp-receipt-track { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 20px; border: 0; border-radius: 14px; background: #176bff; color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; box-shadow: 0 7px 20px #176bff24; }
.fp-order-receipt a.fp-receipt-track:hover { background: #0757df; color: #fff; text-decoration: none; }
.fp-order-receipt .fp-receipt-track svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-order-receipt .fp-receipt-close:focus-visible, .fp-order-receipt a.fp-receipt-track:focus-visible { outline: 3px solid #87b3ff; outline-offset: 3px; }
html[data-fp-mode='dark'] dialog.fp-order-receipt { --receipt-bg: #182b3f; --receipt-surface: #122337; --receipt-line: #314960; --receipt-text: #e4edf8; --receipt-muted: #a7bbd1; --receipt-balance: #1c3858; }
html[data-fp-mode='dark'] .fp-order-receipt .fp-receipt-success { border-color: #1d4a44; background: #08a574; }
html[data-fp-mode='dark'] .fp-order-receipt .fp-receipt-order-id, html[data-fp-mode='dark'] .fp-order-receipt .fp-receipt-balance dd { color: #91baff; }
@media (max-width: 420px) {
  dialog.fp-order-receipt { border-radius: 23px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .fp-order-receipt .fp-receipt-header { padding: 27px 22px 20px; }
  .fp-order-receipt .fp-receipt-content { padding: 0 17px; }
  .fp-order-receipt .fp-receipt-footer { padding: 17px; }
  .fp-order-receipt .fp-receipt-fields > div { grid-template-columns: 102px minmax(0, 1fr); gap: 12px; }
}
@media (max-height: 650px) {
  .fp-order-receipt .fp-receipt-header { padding-top: 17px; padding-bottom: 14px; }
  .fp-order-receipt .fp-receipt-success { width: 54px; height: 54px; border-width: 8px; margin-bottom: 8px; }
  .fp-order-receipt .fp-receipt-success svg { width: 27px; height: 27px; }
  .fp-order-receipt #fp-receipt-description { display: none; }
  .fp-order-receipt .fp-receipt-footer { padding-top: 13px; padding-bottom: 13px; }
}