:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17201f;
  background: #eef1ed;
  font-synthesis: none;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #eef1ed;
}

button, a { font: inherit; }
button { letter-spacing: 0; }

.checkout-shell {
  width: min(940px, 100%);
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(380px, 1.18fr);
  overflow: hidden;
  border: 1px solid #d7ddd8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 31, 29, 0.12);
}

.order-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 42px 38px 34px;
  color: #f8faf8;
  background: #172927;
}

.brand {
  width: fit-content;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.order-copy { margin: auto 0; }
.eyebrow, .step-label {
  margin: 0 0 12px;
  color: #d26350;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.amount {
  margin: 0 0 42px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.order-meta { margin: 0; }
.order-meta div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.order-meta dt { color: #9fb0ad; }
.order-meta dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.secure-note {
  margin: 0;
  color: #9fb0ad;
  font-size: 12px;
  line-height: 1.5;
}

.payment-pane {
  min-width: 0;
  display: grid;
  align-content: center;
  padding: 54px 58px;
  background: #fff;
}

.payment-header { margin-bottom: 28px; }
h1 { margin: 0; font-size: 30px; line-height: 1.18; letter-spacing: 0; }

.app-list { display: grid; gap: 10px; }
.app-option {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border: 1px solid #dfe4df;
  border-radius: 6px;
  color: #17201f;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.app-option:hover { border-color: #78918c; transform: translateY(-1px); }
.app-option[aria-checked="true"] { border-color: #d26350; background: #fff8f5; }
.app-option:focus-visible, .pay-button:focus-visible, .status-button:focus-visible, .return-link:focus-visible {
  outline: 3px solid rgba(210, 99, 80, 0.28);
  outline-offset: 2px;
}
.app-icon { width: 38px; height: 38px; object-fit: contain; }
.app-name { min-width: 0; font-weight: 700; }
.radio-mark {
  width: 18px;
  height: 18px;
  border: 2px solid #b7c0bc;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #fff;
  background: #fff;
}
.app-option[aria-checked="true"] .radio-mark { border-color: #d26350; background: #d26350; }

.pay-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 13px 18px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #d26350;
  font-weight: 800;
  cursor: pointer;
}
.pay-button:hover:not(:disabled) { background: #b94f3e; }
.pay-button:disabled { cursor: not-allowed; opacity: 0.48; }
.button-arrow { font-size: 21px; line-height: 1; }

.status-button {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 0;
  color: #45605b;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}
.legal-note, .form-error, .result-message { font-size: 13px; line-height: 1.55; }
.legal-note { margin: 18px 0 0; color: #73817e; text-align: center; }
.form-error { margin: 14px 0 -8px; color: #a33125; }

.test-note, .test-message { color: #5a6965; font-size: 14px; line-height: 1.55; }
.test-note { margin: 0 0 20px; }
.test-message { min-height: 22px; margin: 0 0 18px; }
.test-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.test-actions button {
  min-width: 0;
  min-height: 52px;
  padding: 10px;
  border: 1px solid #d9dfda;
  border-radius: 6px;
  font-weight: 750;
  cursor: pointer;
}
.test-success { color: #fff; background: #256b5e; }
.test-failure { color: #a13d2f; background: #fff8f5; }
.test-actions button:disabled { opacity: 0.55; cursor: wait; }
.test-actions button:focus-visible { outline: 3px solid rgba(210, 99, 80, 0.28); outline-offset: 2px; }

.state-view { text-align: center; }
.loading-view { color: #52635f; }
.spinner {
  width: 34px;
  height: 34px;
  display: inline-block;
  border: 3px solid #e2e7e3;
  border-top-color: #d26350;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

.result-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  color: #fff;
  background: #d26350;
  font-size: 26px;
  font-weight: 800;
}
.result-view .step-label { margin-bottom: 10px; }
.result-message { max-width: 380px; margin: 16px auto 0; color: #65736f; }
.return-link { display: inline-block; margin-top: 20px; color: #284d47; font-weight: 800; }

@media (max-width: 720px) {
  body { display: block; padding: 0; background: #fff; }
  .checkout-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .order-pane { min-height: 252px; padding: 26px 24px 22px; }
  .order-copy { margin: 42px 0 22px; }
  .amount { margin-bottom: 28px; font-size: 42px; }
  .order-meta div { padding: 10px 0; }
  .secure-note { display: none; }
  .payment-pane { align-content: start; padding: 34px 24px 42px; }
  h1 { font-size: 27px; }
}

@media (max-width: 390px) {
  .test-actions { grid-template-columns: 1fr; }
}