/* A dark working surface joined to a light mineral surface for payment. */
body.payment-open { overflow: hidden; }
button.support-link { width: 100%; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.payment-dialog {
  --heading: var(--font-manrope, Manrope), Arial, sans-serif;
  --body: var(--font-inter, Inter), Arial, sans-serif;
  font-family: var(--body);
  line-height: 1.6;
  --payment-ruby: #dfa1b0;
  width: min(860px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid #705354;
  border-radius: 5px;
  background: #0c1114;
  color: #f2f0e9;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 32px 100px #000a;
}
.payment-dialog [hidden] { display: none !important; }
.payment-dialog *, .payment-dialog *::before, .payment-dialog *::after { box-sizing: border-box; }
.payment-dialog :where(h2, p) { margin-block: 0; }
.payment-dialog::backdrop { background: #070b0fd4; backdrop-filter: blur(7px); }
.payment-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 10px 18px 10px 28px;
  background: #101619;
  border-top: 2px solid #884457;
  border-bottom: 1px solid #394043;
}
.payment-toolbar > span { display: flex; align-items: center; gap: 11px; font: 500 12px var(--heading); }
.payment-toolbar > span > span { color: #92776b; }
.payment-toolbar img { object-fit: contain; }
.payment-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #526062; border-radius: 50%; background: transparent; cursor: pointer; color: #eee9dd; }
.payment-close > span { display: block; font: 300 28px/1 Arial, sans-serif; transform: translateY(-1px); }
.payment-close:hover { border-color: #dfa1b0; color: #fff; background: #dfa1b00c; }
.payment-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
.payment-intro { min-width: 0; padding: 34px 28px 26px; background: linear-gradient(145deg, #21191d 0, #11191d 50%, #0c1114 100%); }
.payment-eyebrow { color: var(--payment-ruby); font-size: 10px; line-height: 1.6; }
.payment-intro h2 { margin: 18px 0; font: 400 44px/1.08 var(--heading); letter-spacing: -.045em; }
.payment-intro > #payment-description { max-width: 260px; font-size: 13px; line-height: 1.9; color: #b9c4c5; }
.payment-terms { display: grid; gap: 3px; padding-top: 19px; margin-top: 25px; border-top: 1px solid #694b52; font-size: 12px; color: #e0c6c4; }
.payment-workshop { display: block; width: 100%; height: 144px; object-fit: cover; object-position: 42% 55%; margin-top: 30px; border-top: 1px solid #957361; opacity: .84; }
.payment-place { margin-top: 11px; font-size: 9px; line-height: 1.6; color: #98a8ad; }
.payment-surface { min-width: 0; padding: 28px 26px 22px; color: #20292b; background: #f7f3ec; border-left: 1px solid #9d8470; color-scheme: light; }
.payment-fields { padding: 0; margin: 0 0 26px; border: 0; min-width: 0; }
.payment-fields label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; margin-bottom: 9px; }
.payment-fields label > span { color: #657071; font-size: 11px; }
.payment-fields select { width: 100%; min-height: 46px; padding: 10px 34px 10px 12px; border: 1px solid #aaa194; border-radius: 2px; background: #fffdfa; color: #20292b; font: 13px/1.5 var(--body); }
.payment-fields select:focus-visible, .payment-amount input:focus-visible { outline: 2px solid #884457; outline-offset: 2px; }
.payment-field-hint { margin: 10px 0 0; color: #5b6668; font-size: 11px; line-height: 1.7; }
.payment-upcoming { margin: 5px 0 24px; color: #775961; font-size: 11px; line-height: 1.7; }
.payment-amount { position: relative; }
.payment-amount > span { position: absolute; left: 13px; top: 11px; color: #657071; font-size: 19px; }
.payment-amount input { width: 100%; height: 52px; padding: 9px 13px 9px 33px; border: 1px solid #aaa194; border-radius: 2px; background: #fffdfa; color: #20292b; font: 400 22px/1.4 var(--heading); }
.payment-fields:disabled { opacity: .7; }
.payment-recipient { font-size: 10px; line-height: 1.7; color: #5b6668; margin-top: 11px; }
.payment-transaction-message { padding: 13px 0; font-size: 12px; line-height: 1.8; color: #493124; }
.payment-recheck { margin: 0 0 20px; min-height: 44px; padding: 9px 14px; border: 1px solid #384c51; border-radius: 2px; background: transparent; color: #243b41; cursor: pointer; }
.payment-status { display: flex; align-items: center; gap: 12px; padding: 27px 0; font-size: 13px; min-height: 160px; }
.payment-loading-mark { flex-shrink: 0; width: 16px; height: 16px; border: 1px solid #915764; transform: rotate(45deg); background: #91576413; }
.payment-error { min-height: 200px; padding: 20px 0; }
.payment-error h3 { font-size: 19px; font-weight: 500; }
.payment-error p { font-size: 13px; line-height: 1.8; margin-top: 9px; }
.payment-retry { margin-top: 18px; padding: 10px 16px; min-height: 44px; background: #1d292d; color: #f7f3ec; border: 1px solid #1d292d; border-radius: 2px; cursor: pointer; }
.payment-retry:focus-visible { outline-color: #884457; }
#paypal-hosted-payment { min-width: 0; }
#paypal-hosted-payment input[type="number"], #paypal-hosted-payment textarea { font-family: var(--body); font-size: 15px; color: #20292b; }
#paypal-hosted-payment input[type="number"]:focus-visible, #paypal-hosted-payment textarea:focus-visible { outline: 2px solid #884457; outline-offset: 2px; }
.payment-provider { margin-top: 20px; padding-top: 15px; border-top: 1px solid #d1c9bc; font-size: 10px; line-height: 1.7; color: #5b6668; }
@media (max-width: 650px) {
  .payment-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 4px; }
  .payment-toolbar { padding-left: 19px; padding-right: 10px; }
  .payment-layout { grid-template-columns: minmax(0, 1fr); }
  .payment-intro { padding: 22px 20px 23px; }
  .payment-intro h2 { font-size: 34px; margin: 10px 0; }
  .payment-intro h2 br { display: none; }
  .payment-intro > #payment-description { max-width: 36ch; font-size: 12px; line-height: 1.7; }
  .payment-terms { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 10px; margin-top: 16px; padding-top: 13px; }
  .payment-workshop, .payment-place { display: none; }
  .payment-surface { border-left: 0; border-top: 1px solid #9d8470; padding: 22px 18px 20px; }
}