/* ==========================================================================
   Northstar Order Checkout — 纯 H5 版样式
   --------------------------------------------------------------------------
   移植自 apps/client/src/index.css。

   原文件第 1 行 `@import "tailwindcss"` 会引入 Tailwind 的 preflight 基础重置，
   页面的默认字重、图片/SVG 的 display、行高等都依赖它。为保证与 React 版渲染
   完全一致，下面 @layer base 里是 tailwindcss@4.3.0 的 preflight.css 原文，
   其中的 --theme() 函数已按 Tailwind 默认主题展开为字面值。

   preflight 放在 @layer base 中、业务样式不入层，以复现原本的级联优先级
   （无层级样式优先于有层级样式）。
   ========================================================================== */

@layer base {
  /*
    1. Prevent padding and border from affecting element width.
    2. Remove default margins and padding
    3. Reset all borders.
  */

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 2 */
    border: 0 solid; /* 3 */
  }

  /*
    1. Use a consistent sensible line-height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.
    3. Use a more readable tab size.
    4. Use the user's configured `sans` font-family by default.
    5. Use the user's configured `sans` font-feature-settings by default.
    6. Use the user's configured `sans` font-variation-settings by default.
    7. Disable tap highlights on iOS.
  */

  html,
  :host {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    tab-size: 4; /* 3 */
    font-family:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
    font-feature-settings: normal; /* 5 */
    font-variation-settings: normal; /* 6 */
    -webkit-tap-highlight-color: transparent; /* 7 */
  }

  /*
    1. Add the correct height in Firefox.
    2. Correct the inheritance of border color in Firefox.
    3. Reset the default border style to a 1px solid border.
  */

  hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
  }

  /*
    Add the correct text decoration in Chrome, Edge, and Safari.
  */

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  /*
    Remove the default font size and weight for headings.
  */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  /*
    Reset links to optimize for opt-in styling instead of opt-out.
  */

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  /*
    Add the correct font weight in Edge and Safari.
  */

  b,
  strong {
    font-weight: bolder;
  }

  /*
    1. Use the user's configured `mono` font-family by default.
    2. Use the user's configured `mono` font-feature-settings by default.
    3. Use the user's configured `mono` font-variation-settings by default.
    4. Correct the odd `em` font sizing in all browsers.
  */

  code,
  kbd,
  samp,
  pre {
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace; /* 1 */
    font-feature-settings: normal; /* 2 */
    font-variation-settings: normal; /* 3 */
    font-size: 1em; /* 4 */
  }

  /*
    Add the correct font size in all browsers.
  */

  small {
    font-size: 80%;
  }

  /*
    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
  */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
    1. Remove text indentation from table contents in Chrome and Safari.
    2. Correct table border color inheritance in all Chrome and Safari.
    3. Remove gaps between table borders by default.
  */

  table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
  }

  /*
    Use the modern Firefox focus style for all focusable elements.
  */

  :-moz-focusring {
    outline: auto;
  }

  /*
    Add the correct vertical alignment in Chrome and Firefox.
  */

  progress {
    vertical-align: baseline;
  }

  /*
    Add the correct display in Chrome and Safari.
  */

  summary {
    display: list-item;
  }

  /*
    Make lists unstyled by default.
  */

  ol,
  ul,
  menu {
    list-style: none;
  }

  /*
    1. Make replaced elements `display: block` by default.
    2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
  */

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
  }

  /*
    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
  */

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /*
    1. Inherit font styles in all browsers.
    2. Remove border radius in all browsers.
    3. Remove background color in all browsers.
    4. Ensure consistent opacity for disabled states in all browsers.
  */

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    border-radius: 0; /* 2 */
    background-color: transparent; /* 3 */
    opacity: 1; /* 4 */
  }

  /*
    Restore default font weight.
  */

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  /*
    Restore indentation.
  */

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  /*
    Restore space after button.
  */

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  /*
    Reset the default placeholder opacity in Firefox.
  */

  ::placeholder {
    opacity: 1;
  }

  /*
    Set the default placeholder color to a semi-transparent version of the current text color
    in browsers that do not crash when using `color-mix(…)` with `currentcolor`.
  */

  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }

  /*
    Prevent resizing textareas horizontally by default.
  */

  textarea {
    resize: vertical;
  }

  /*
    Remove the inner padding in Chrome and Safari on macOS.
  */

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /*
    1. Ensure date/time inputs have the same height when empty in iOS Safari.
    2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
  */

  ::-webkit-date-and-time-value {
    min-height: 1lh; /* 1 */
    text-align: inherit; /* 2 */
  }

  /*
    Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
  */

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  /*
    Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
  */

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  /*
    Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome.
  */

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  /*
    Remove the additional `:invalid` styles in Firefox.
  */

  :-moz-ui-invalid {
    box-shadow: none;
  }

  /*
    Correct the inability to style the border radius in iOS Safari.
  */

  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }

  /*
    Correct the cursor style of increment and decrement buttons in Safari.
  */

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /*
    Make elements with the HTML hidden attribute stay hidden by default.
  */

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

/* ==========================================================================
   以下为业务样式，与 apps/client/src/index.css 第 5 行起的内容逐字对应。
   ========================================================================== */

:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #f1f1f1;
  color: #171717;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --background: oklch(0.97 0.006 255);
  --foreground: oklch(0.25 0.02 258);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.25 0.02 258);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0.02 258);
  --primary: oklch(0.18 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0.008 255);
  --secondary-foreground: oklch(0.3 0.02 258);
  --muted: oklch(0.96 0.008 255);
  --muted-foreground: oklch(0.57 0.02 258);
  --accent: oklch(0.94 0 0);
  --accent-foreground: oklch(0.18 0 0);
  --destructive: oklch(0.58 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.009 255);
  --input: oklch(0.9 0.009 255);
  --ring: oklch(0.22 0 0);
  --chart-1: oklch(0.62 0.2 255);
  --chart-2: oklch(0.7 0.15 155);
  --chart-3: oklch(0.74 0.17 75);
  --chart-4: oklch(0.64 0.2 300);
  --chart-5: oklch(0.67 0.2 25);
  --sidebar: oklch(0.97 0.006 255);
  --sidebar-foreground: oklch(0.25 0.02 258);
  --sidebar-primary: oklch(0.57 0.19 255);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.93 0.02 250);
  --sidebar-accent-foreground: oklch(0.29 0.04 255);
  --sidebar-border: oklch(0.9 0.009 255);
  --sidebar-ring: oklch(0.6 0.18 255);
  --radius: 0.75rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 15%, rgba(0, 0, 0, 0.06), transparent 30%),
    #f1f1f1;
}

button,
input {
  font: inherit;
}

button,
a,
label {
  -webkit-tap-highlight-color: transparent;
}

.order-link-shell {
  min-height: 100vh;
  padding: 24px;
  display: grid;
  place-items: center;
}

.order-link-card {
  width: min(510px, 100%);
  padding: 36px 40px 28px;
  border: 1px solid rgba(42, 52, 69, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14);
}

.order-link-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.order-link-heading {
  margin-top: 34px;
}

.order-link-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #111;
  color: #fff;
}

.order-link-heading h1 {
  margin: 4px 0 8px;
  color: #252a33;
  font-size: clamp(30px, 7vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.order-link-heading > p:last-child {
  margin: 0;
  color: #727986;
  font-size: 14px;
  line-height: 1.6;
}

.order-link-form {
  margin-top: 28px;
}

.order-currency-fieldset {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.order-currency-fieldset legend {
  margin-bottom: 8px;
  color: #343a45;
  font-size: 12px;
  font-weight: 700;
}

.order-currency-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.order-currency {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d9dee5;
  border-radius: 9px;
  background: #fff;
  color: #4b5260;
  cursor: pointer;
}

.order-currency input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.order-currency.selected {
  border-color: #111;
  background: #111;
  box-shadow: inset 0 0 0 1px #111;
  color: #fff;
}

.order-currency:focus-within {
  outline: 3px solid rgba(0, 0, 0, 0.18);
  outline-offset: 2px;
}

.order-link-form .field-label:not(:first-of-type) {
  margin-top: 18px;
}

.amount-currency {
  padding-right: 10px;
  border-right: 1px solid #dfe3e8;
  color: #4d5561;
  font-size: 13px;
  font-weight: 700;
}

.create-order-button {
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  background: #111;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.create-order-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 21px rgba(0, 0, 0, 0.25);
}

.create-order-button:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.24);
  outline-offset: 3px;
}

.order-link-security {
  margin-top: 24px;
  padding-top: 18px;
  display: flex;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid #edf0f3;
  color: #8b919b;
  font-size: 10px;
}

.order-link-security span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.checkout-shell {
  min-height: 100vh;
  padding: 18px;
  display: grid;
  place-items: center;
}

.checkout-frame {
  width: min(1180px, 100%);
  min-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  overflow: hidden;
  border: 1px solid rgba(42, 52, 69, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14);
}

.order-panel,
.payment-panel {
  padding: 30px 54px;
}

.order-panel {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(239, 239, 239, 0.98)),
    #f3f3f3;
  border-right: 1px solid #edf0f3;
}

.payment-panel {
  background: #fff;
}

.payment-content {
  width: min(410px, 100%);
  margin: 0 auto;
}

.back-button {
  width: fit-content;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #667085;
  cursor: pointer;
}

.back-button:hover {
  color: #1f2937;
}

.brand-logo {
  width: 112px;
  height: 36px;
  display: block;
  object-fit: contain;
}

.price-hero {
  margin-top: 35px;
}

.eyebrow {
  margin: 0 0 2px;
  color: #6b7280;
  font-size: 16px;
}

.price-hero h1 {
  margin: 0;
  color: #292e37;
  font-size: clamp(38px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.price-hero > p:last-child {
  margin: 8px 0 0;
  color: #737a86;
  font-size: 14px;
}

.currency-switcher {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.currency-option {
  height: 46px;
  border: 1px solid #d9dee5;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.75);
  color: #252a33;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.currency-option:hover {
  background: #fff;
}

.currency-option.active {
  border-color: #111;
  background: #111;
  box-shadow: 0 0 0 1px #111;
  color: #fff;
}

.currency-note {
  margin: 8px 0 0;
  color: #9298a1;
  font-size: 12px;
}

.order-lines {
  margin-top: 42px;
}

.product-line,
.order-row,
.total-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.product-line {
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid #dde2e8;
}

.product-thumb {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #dbe1e7;
  border-radius: 12px;
  background: linear-gradient(145deg, #e7e7e7, #fafafa);
  color: #454545;
}

.product-thumb span {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 2px solid #f5f7f9;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}

.product-details {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-details strong {
  color: #303640;
  font-size: 14px;
  line-height: 1.35;
}

.product-details span,
.product-details small {
  color: #8a909a;
  font-size: 12px;
  line-height: 1.55;
}

.product-line > strong {
  align-self: flex-start;
  color: #303640;
  font-size: 14px;
  white-space: nowrap;
}

.order-row > div,
.product-details {
  display: flex;
  flex-direction: column;
}

.order-row strong,
.total-row strong {
  color: #303640;
}

.order-row span,
.discount-row small {
  color: #8a909a;
  font-size: 12px;
  line-height: 1.55;
}

.subtotal {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #dde2e8;
}

.total-row {
  padding-top: 20px;
  border-top: 1px solid #d7dde4;
  font-size: 17px;
}

.total-row strong:last-child {
  font-size: 20px;
}

.secure-note {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7b838f;
  font-size: 12px;
}

.secure-heading {
  height: 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  color: #818895;
  font-size: 12px;
  font-weight: 650;
}

.section-heading {
  margin: 19px 0 24px;
}

.step-label {
  margin: 0 0 5px;
  color: #111;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  color: #202631;
  font-size: 25px;
  letter-spacing: -0.025em;
}

.section-heading > p:last-child {
  margin: 7px 0 0;
  color: #7e8590;
  font-size: 13px;
}

.field-label {
  margin: 0 0 8px;
  display: block;
  color: #303640;
  font-size: 13px;
  font-weight: 700;
}

.field-label span {
  color: #dc2626;
}

.input-shell {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d9dee5;
  border-radius: 9px;
  background: #fbfcfd;
  color: #9198a3;
  box-shadow: 0 1px 3px rgba(20, 29, 43, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.input-shell:focus-within {
  border-color: #111;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.input-shell.invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.input-shell > svg {
  margin-left: 14px;
  flex: 0 0 auto;
}

.input-shell input {
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 14px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #292f38;
  font-size: 14px;
}

.input-shell input::placeholder {
  color: #a6acb5;
}

.field-help {
  margin: 7px 2px 22px;
  color: #969ca5;
  font-size: 11px;
}

.payment-methods {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9dee5;
  border-radius: 10px;
}

.payment-methods legend {
  margin-bottom: 11px;
  padding: 0;
  color: #303640;
  font-size: 14px;
  font-weight: 750;
}

.method-row {
  min-height: 69px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 18px 30px 1fr auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e4e7eb;
  background: #fff;
  cursor: pointer;
  transition: background 150ms ease;
}

.method-row:last-child {
  border-bottom: 0;
}

.method-row:hover {
  background: #f9fafb;
}

.method-row.selected {
  background: #f1f1f1;
}

.method-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-dot {
  width: 17px;
  height: 17px;
  display: block;
  border: 1px solid #aeb5bf;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #fff;
}

.method-row.selected .radio-dot {
  border-color: #1f2937;
  background: #1f2937;
}

.method-row:focus-within {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px #111;
}

.method-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #111827;
}

.applepay-logo,
.paypal-logo {
  width: 38px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.method-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.method-copy strong {
  color: #2b3038;
  font-size: 14px;
}

.method-copy small {
  overflow: hidden;
  color: #8b919b;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.method-chevron {
  color: #b4bac3;
}

.form-message {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.error-message {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.success-message {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15713a;
}

.pay-button {
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.pay-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.pay-button:active:not(:disabled) {
  transform: translateY(0);
}

.pay-button:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.24);
  outline-offset: 3px;
}

.pay-button.apple {
  background: #111;
  color: #fff;
}

.pay-button.paypal {
  background: #111;
  color: #fff;
}

.pay-button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.loading-line {
  animation: pulse-opacity 900ms ease-in-out infinite alternate;
}

.legal-copy {
  margin: 12px 4px 0;
  color: #9096a0;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}

.payment-footer {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #a1a6ae;
  font-size: 10px;
}

.payment-footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.payment-footer a {
  color: inherit;
  text-decoration: none;
}

.payment-footer a:hover {
  color: #56606e;
  text-decoration: underline;
}

@keyframes pulse-opacity {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .checkout-shell {
    padding: 0;
    display: block;
  }

  .checkout-frame {
    min-height: 100vh;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .order-panel,
  .payment-panel {
    padding: 26px clamp(20px, 7vw, 48px);
  }

  .order-panel {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #e3e7ec;
  }

  .price-hero {
    margin-top: 26px;
  }

  .order-lines {
    margin-top: 28px;
  }

  .secure-note {
    margin-top: 24px;
  }

  .payment-panel {
    padding-top: 18px;
    padding-bottom: 34px;
  }
}

@media (max-width: 520px) {
  .order-link-shell {
    padding: 0;
    display: block;
    background: #fff;
  }

  .order-link-card {
    min-height: 100vh;
    padding: 28px 20px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .order-panel,
  .payment-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .price-hero h1 {
    font-size: 39px;
  }

  .method-copy small {
    max-width: 215px;
  }

  .product-line {
    gap: 13px;
  }

  .product-thumb {
    width: 58px;
    height: 58px;
  }

  .payment-footer {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}