.sgpay {
  box-sizing: border-box;
  width: min(720px, calc(100% - 32px));
  margin: 48px auto;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid #dce8ef;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 42, 85, .12);
  color: #10243e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sgpay *, .sgpay *::before, .sgpay *::after { box-sizing: border-box; }
.sgpay__brand { display:flex; align-items:center; gap:10px; margin-bottom:34px; color:#073b78; font-weight:800; font-size:20px; }
.sgpay__mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#073b78 0 50%,#12b8c7 50%); color:#fff; }
.sgpay__eyebrow { margin:0 0 10px; color:#0d8fa0; font-size:12px; font-weight:800; letter-spacing:.14em; }
.sgpay__eyebrow.is-error { color:#b42318; }
.sgpay h1 { margin:0 0 12px; color:#082a55; font-size:clamp(30px, 5vw, 46px); line-height:1.08; letter-spacing:-.035em; }
.sgpay > p { max-width:590px; margin:0 0 28px; color:#526173; font-size:17px; line-height:1.65; }
.sgpay__success { display:grid; place-items:center; width:72px; height:72px; margin-bottom:24px; border-radius:50%; background:#e4faf5; color:#087f69; font-size:40px; font-weight:900; }
.sgpay__details { display:grid; gap:0; margin:28px 0; border:1px solid #e1eaf0; border-radius:18px; overflow:hidden; }
.sgpay__details div { display:grid; grid-template-columns:minmax(120px, .65fr) 1.35fr; gap:20px; padding:15px 18px; background:#fff; }
.sgpay__details div:nth-child(odd) { background:#f7fafc; }
.sgpay__details dt { color:#64748b; font-weight:650; }
.sgpay__details dd { margin:0; text-align:right; color:#10243e; }
.sgpay__message { margin:24px 0; padding:18px 20px; border-radius:16px; background:#eef9fb; border:1px solid #cceef2; }
.sgpay__message strong { color:#073b78; }
.sgpay__message p { margin:8px 0 0; color:#42566e; line-height:1.55; }
.sgpay__countdown { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:26px 0 18px; padding:18px 20px; border-radius:16px; background:#082a55; color:#fff; }
.sgpay__countdown span { opacity:.82; }
.sgpay__countdown strong { font-size:27px; letter-spacing:.04em; }
.sgpay__form button { width:100%; min-height:54px; border:0; border-radius:14px; background:linear-gradient(135deg,#073b78,#0d8fa0); color:#fff; font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 12px 26px rgba(7,59,120,.22); }
.sgpay__form button:hover { filter:brightness(1.05); transform:translateY(-1px); }
.sgpay__form small { display:block; margin-top:11px; color:#718096; text-align:center; }
.sgpay.is-error { border-color:#f3c7c4; }
@media (max-width: 560px) {
  .sgpay { width:min(100% - 20px, 720px); margin:18px auto; padding:24px 20px; border-radius:20px; }
  .sgpay__details div { grid-template-columns:1fr; gap:4px; }
  .sgpay__details dd { text-align:left; }
  .sgpay__countdown { align-items:flex-start; flex-direction:column; gap:6px; }
}
.sgpay__actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:24px 0 4px; }
.sgpay__actions form { margin:0; }
.sgpay__action-button,
.sgpay__action-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:13px; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; }
.sgpay__action-button { border:0; background:linear-gradient(135deg,#073b78,#0d8fa0); color:#fff; box-shadow:0 10px 22px rgba(7,59,120,.18); }
.sgpay__action-link { border:1px solid #b7cbd8; background:#fff; color:#073b78; }
.sgpay__action-button:hover,
.sgpay__action-link:hover { filter:brightness(1.03); transform:translateY(-1px); }
@media (max-width:560px) {
  .sgpay__actions, .sgpay__actions form, .sgpay__action-button, .sgpay__action-link { width:100%; }
}
.sgpay__details dd.sgpay__entitlement{color:#9a6500;font-weight:850}