.commerce-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  color: #9db5ca;
  font-size: .76rem;
}

.commerce-assurance strong { color: #dcecff; }
.commerce-assurance[data-level="error"] { color: #ffd4d4; }
.commerce-assurance[data-level="success"] { color: #b9f7dc; }
.commerce-manage { margin-left: 10px; }
.commerce-disabled { cursor: not-allowed; opacity: .68; }

.commerce-canceled-banner {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(91, 224, 172, .4);
  border-radius: 6px;
  color: #dfffee;
  background: rgba(13, 83, 65, .34);
}

.commerce-canceled-banner strong { display: block; margin-bottom: 4px; }

.commerce-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(900px, calc(100vh - 28px));
  padding: 0;
  overflow: auto;
  border: 1px solid #31516d;
  border-radius: 10px;
  color: #dceafb;
  background: #071523;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .56);
}

.commerce-dialog::backdrop { background: rgba(0, 7, 14, .82); backdrop-filter: blur(4px); }
.commerce-dialog-shell { position: relative; padding: clamp(24px, 5vw, 44px); }
.commerce-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #36546d;
  border-radius: 50%;
  color: #cfe4f8;
  background: transparent;
  cursor: pointer;
}

.commerce-dialog h2 { margin: 4px 46px 12px 0; color: #f4f9ff; font-size: clamp(1.8rem, 4vw, 2.65rem); }
.commerce-dialog h3 { margin: 0 0 10px; color: #f4f9ff; }
.commerce-dialog p { color: #9eb5c9; }
.commerce-dialog .commerce-lede { margin: 0 0 24px; font-size: 1rem; }
.commerce-form { display: grid; gap: 18px; }
.commerce-form > label:not(.commerce-check) { display: grid; gap: 8px; color: #d7e8f8; font-size: .82rem; font-weight: 700; }
.commerce-form input:not([type="checkbox"]),
.commerce-form select,
.commerce-form textarea {
  width: 100%;
  border: 1px solid #385871;
  border-radius: 5px;
  padding: 13px 14px;
  color: #f1f7fd;
  background: #0b2134;
  font: inherit;
}

.commerce-form textarea { min-height: 112px; resize: vertical; }
.commerce-form input:focus-visible,
.commerce-form select:focus-visible,
.commerce-form textarea:focus-visible,
.commerce-dialog button:focus-visible,
.commerce-dialog a:focus-visible { outline: 3px solid #57c8ff; outline-offset: 3px; }

.commerce-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid #294860;
  border-radius: 7px;
  background: #294860;
}

.commerce-summary div { min-height: 82px; padding: 16px; background: #0a1c2d; }
.commerce-summary dt { margin-bottom: 7px; color: #7793aa; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.commerce-summary dd { margin: 0; color: #e4f0fb; font-weight: 750; }
.commerce-summary .commerce-summary-wide { grid-column: 1 / -1; }
.download-trust-facts { margin-bottom: 18px; }
.download-trust-facts div { min-height: 76px; }
.download-trust-instruction,
.download-trust-guidance { margin: 0 0 18px; padding: 16px 18px; border-radius: 7px; background: #0a1d2e; line-height: 1.65; }
.download-trust-instruction { border-left: 3px solid #31a8ee; color: #c8ddef !important; }
.download-trust-instruction strong,
.download-trust-guidance strong { color: #f2f8fe; }
.download-trust-instruction code { color: #d9efff; font: inherit; font-weight: 750; overflow-wrap: anywhere; }
.download-trust-guidance { border: 1px solid #34536d; }
.download-trust-security { margin: 16px 0 0 !important; font-size: .78rem; }
.download-trust-security a { color: #73c9ff; }
.commerce-plain-summary { margin: 0 0 18px; padding: 18px; border-left: 3px solid #31a8ee; background: #0b2032; }
.commerce-plain-summary strong { display: block; margin-bottom: 6px; color: #f4f9ff; font-size: 1.05rem; }
.commerce-plain-summary p { margin: 3px 0; color: #c6daeb; }

.commerce-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 17px;
  border: 1px solid #3b5f7a;
  border-radius: 6px;
  color: #d9e9f8;
  background: #0a1e30;
  font-size: .86rem;
  line-height: 1.55;
}

.commerce-check input { width: 19px; height: 19px; margin-top: 2px; accent-color: #168ce6; }
.commerce-legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -7px 0 2px; font-size: .78rem; }
.commerce-legal-links a { color: #73c9ff; }
.commerce-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.commerce-actions .button { border: 0; cursor: pointer; }
.commerce-actions .button-secondary { border: 1px solid #41627b; color: #dceafb; background: transparent; }
.commerce-actions button:disabled { cursor: not-allowed; opacity: .55; }
.commerce-message { min-height: 22px; margin: 4px 0 0; color: #9db5ca; font-size: .82rem; }
.commerce-message[role="alert"] { color: #ffd0d0; }
.commerce-secure-note { display: flex; gap: 8px; align-items: center; color: #8ca6bc; font-size: .76rem; }
.commerce-payment { min-height: 110px; padding: 18px; border: 1px solid #36556e; border-radius: 7px; background: #f7fafc; }
.commerce-status-card { padding: 20px; border: 1px solid #34536d; border-radius: 7px; background: #0a1d2e; }
.commerce-status-card + .commerce-status-card { margin-top: 14px; }
.commerce-status-card p { margin: 5px 0; }
.commerce-status-card strong { color: #f0f7fe; }
.commerce-success-mark { color: #72e0b3; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.commerce-warning-mark { color: #ffd37a; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.commerce-feedback-count { justify-self: end; margin-top: -12px; color: #7793aa; font-size: .72rem; }

.download-state .commerce-download-note { display: block; margin: 6px 0 10px; color: #698096; font-size: .72rem; }

@media (max-width: 620px) {
  .commerce-dialog { max-height: calc(100vh - 12px); }
  .commerce-dialog-shell { padding: 23px 18px; }
  .commerce-summary { grid-template-columns: 1fr; }
  .commerce-summary .commerce-summary-wide { grid-column: auto; }
  .commerce-actions { align-items: stretch; flex-direction: column; }
  .commerce-actions .button { width: 100%; }
  .commerce-manage { margin: 10px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-dialog::backdrop { backdrop-filter: none; }
}