.purchase-dialog {
  box-sizing: border-box;
  inline-size: min(calc(100vw - 24px), 500px);
  max-block-size: min(760px, calc(100dvh - 24px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #1d5fcb;
  border-radius: 28px;
  background: #fff;
  color: #132d55;
  box-shadow: 0 24px 70px #06194091;
  text-align: start;
}
.purchase-dialog::backdrop { background: #061837cf; backdrop-filter: blur(5px); }
.purchase-content { box-sizing: border-box; max-block-size: min(760px, calc(100dvh - 24px)); overflow-y: auto; padding: clamp(22px, 5vw, 34px); }
#upgrade.purchase-dialog .close { position: absolute; inset-block-start: 14px; inset-inline-start: auto; inset-inline-end: 14px; z-index: 2; display: grid; place-items: center; inline-size: 38px; block-size: 38px; padding: 0; border: 0; border-radius: 50%; background: #edf3fc; color: #405979; font: 700 31px/1 system-ui; cursor: pointer; }
.purchase-header { padding-inline-end: 48px; }
.purchase-dialog .eyebrow { margin: 0 0 7px; color: #2864d8; font-size: 14px; font-weight: 800; }
.purchase-dialog h2 { margin: 0; color: #172f57; font-size: clamp(26px, 6vw, 34px); line-height: 1.14; letter-spacing: -.02em; }
.purchase-description { margin: 13px 0 0; color: #405979; font-size: 16px; line-height: 1.55; }
.sale-badge { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 20px 0 13px; padding: 10px 13px; border: 1px solid #ffc15b; border-radius: 13px; background: #fff7e5; color: #8e5300; font-size: 14px; font-weight: 800; }
.sale-badge s { color: #718096; font-weight: 500; }
.sale-badge strong { color: #d94128; font-size: 22px; }
.purchase-features { display: grid; gap: 9px; margin: 15px 0 18px; padding: 0; list-style: none; }
.purchase-features li { position: relative; padding-inline-start: 27px; color: #263f63; font-size: 15px; line-height: 1.35; }
.purchase-features li::before { content: '✓'; position: absolute; inset-inline-start: 0; display: grid; place-items: center; inline-size: 19px; block-size: 19px; border-radius: 50%; background: #d9f3df; color: #14733a; font-weight: 900; }
.purchase-price { display: flex; align-items: center; gap: 16px; margin: 20px 0 4px; padding: 15px 17px; border: 1px solid #b9d2f7; border-radius: 17px; background: #eef5ff; }
.purchase-price strong { flex: none; color: #1b58bf; font-size: 40px; line-height: 1; white-space: nowrap; }
.purchase-price span { color: #1c3760; font-size: 15px; font-weight: 800; line-height: 1.35; }
.purchase-price small { display: block; margin-top: 3px; color: #526b8e; font-size: 13px; font-weight: 500; }
.purchase-focus { margin: 13px 0; padding: 10px 12px; border-radius: 12px; background: #f0f6ff; color: #2454a3; font-size: 14px; font-weight: 700; }
.purchase-unavailable { display: grid; gap: 7px; margin-top: 20px; padding: 15px; border: 1px solid #e9c06b; border-radius: 16px; background: #fff8e7; color: #795000; line-height: 1.45; }
.purchase-unavailable strong { font-size: 15px; }
.purchase-unavailable span { color: #705e39; font-size: 14px; }
.purchase-dialog form { display: grid; gap: 12px; margin-top: 22px; }
.purchase-dialog .field { display: grid; gap: 6px; }
.purchase-dialog label { color: #203c67; font-size: 14px; font-weight: 800; }
.purchase-dialog input { box-sizing: border-box; inline-size: 100%; min-block-size: 53px; padding: 12px 14px; border: 2px solid #c7d6eb; border-radius: 14px; outline: none; background: #f9fbff; color: #142f57; font-family: inherit; font-size: 16px; line-height: 1.25; }
.purchase-dialog input::placeholder { color: #8799b3; }
.purchase-dialog input:focus { border-color: #2464d6; box-shadow: 0 0 0 3px #2464d629; background: #fff; }
#identity-code { max-inline-size: 220px; font-size: 24px; font-weight: 800; letter-spacing: .22em; text-align: center; }
#purchase-error { min-block-size: 0; margin: 0; color: #a13624; font-size: 14px; line-height: 1.4; }
#purchase-error:not(:empty) { padding: 10px 12px; border: 1px solid #f1b1a6; border-radius: 12px; background: #fff1ee; }
.purchase-actions { display: grid; gap: 7px; margin-top: 20px; }
.purchase-dialog .primary { display: block; inline-size: 100%; min-block-size: 54px; margin: 0; border-radius: 14px; font-size: 17px; font-weight: 900; white-space: normal; }
.purchase-dialog .primary:disabled { opacity: .58; cursor: not-allowed; }
.purchase-back { display: block; margin: 0 auto; padding: 8px 12px; border: 0; background: none; color: #496482; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#play-tools { flex-wrap: wrap; }
#play-tools #purchase-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-inline-end: auto; min-height: 44px; padding: 8px 14px; border: 2px solid #fff; border-radius: 13px; background: #fff; color: #102a65; font-size: 15px; font-weight: 800; line-height: 1.25; box-shadow: 0 3px 0 #b7c9e5; }
#play-tools #purchase-open:hover { background: #eaf1ff; }
#play-tools #purchase-open:focus-visible { outline: 3px solid #ffda63; outline-offset: 3px; }
#play-tools #purchase-open[hidden] { display: none; }
.purchase-cta-price { border-inline-start: 1px solid #b7c9e5; padding-inline-start: 8px; }
.purchase-policy { margin: 0; color: #254f91; font-size: 14px; line-height: 1.5; }
@media (max-width: 400px) { #play-tools { gap: 5px; } #play-tools .language-label { inline-size: 80px; min-inline-size: 0; padding-inline: 2px; } #play-tools .language-label select { inline-size: 100%; min-inline-size: 0; padding-inline: 0; } #play-tools #roast-mode { padding-inline: 6px; } #play-tools #purchase-open { flex-direction: column; gap: 0; padding: 5px 8px; font-size: 14px; } .purchase-cta-price { border: 0; padding: 0; } }
@media (max-width: 450px) { .purchase-dialog { inline-size: calc(100vw - 16px); border-radius: 23px; } .purchase-content { padding: 22px 20px 20px; } .purchase-dialog h2 { font-size: 27px; } .purchase-description { font-size: 15px; } .purchase-price strong { font-size: 35px; } }
@media (max-height: 560px) { .purchase-content { padding-block: 18px; } .purchase-dialog h2 { font-size: 25px; } .purchase-description { margin-top: 8px; } .purchase-features { gap: 6px; margin-block: 10px; } .purchase-price { margin-top: 12px; padding: 11px 13px; } }
/* Overrides the legacy compact checkout rules: account and payment forms share one clear treatment. */
.purchase-dialog #purchase-form { gap: 12px; text-align: start; }
.purchase-dialog #purchase-form input { min-block-size: 53px; padding: 12px 14px; border: 2px solid #c7d6eb; border-radius: 14px; background: #f9fbff; color: #142f57; }
.purchase-dialog #purchase-form label { margin: 0; font-size: 14px; font-weight: 800; }
.purchase-dialog #purchase-error { font-size: 14px; color: #a13624; line-height: 1.4; }