/* Compact gold store checkout / reward dialog */
body dialog#commerce-dialog.checkout-dialog,
body dialog#commerce-dialog:has(.checkout-sheet){
  box-sizing:border-box!important;
  width:min(340px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:none!important;
  margin:auto!important;
  padding:22px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  color:#fff!important;
  font-family:'Manrope',Arial,sans-serif!important;
  text-align:center;
  animation:checkoutIn .28s ease both!important;
}
body dialog#commerce-dialog.checkout-dialog::backdrop,
body dialog#commerce-dialog:has(.checkout-sheet)::backdrop{
  background:#020b14e0!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
@keyframes checkoutIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:none}
}

body dialog#commerce-dialog.checkout-dialog .commerce-close,
body dialog#commerce-dialog:has(.checkout-sheet) .commerce-close{
  position:absolute!important;
  top:4px!important;right:-4px!important;
  z-index:6!important;
  width:36px!important;height:36px!important;
  border-radius:50%!important;
  border:2.5px solid #f6d76a!important;
  background:radial-gradient(circle at 35% 28%,#fff1a8,#ffd24a 55%,#c99628 100%)!important;
  color:#1a1204!important;
  font:900 18px/1 Arial,sans-serif!important;
  display:grid!important;place-items:center!important;
  padding:0!important;
  box-shadow:0 4px 14px #0008,0 0 0 3px #f0c84a33,inset 0 1px 0 #fff8!important;
}

body dialog#commerce-dialog.checkout-dialog #commerce-dialog-body,
body dialog#commerce-dialog:has(.checkout-sheet) #commerce-dialog-body{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  overflow:visible!important;
}

.checkout-sheet{
  position:relative;
  box-sizing:border-box;
  width:100%;
  padding:22px 16px 16px;
  border-radius:18px;
  border:3px solid transparent;
  background:
    linear-gradient(160deg,#0a2f52 0%,#071f38 48%,#041528 100%) padding-box,
    linear-gradient(135deg,#ffe9a0 0%,#f0c145 22%,#c9972a 48%,#ffe07a 72%,#d4a63a 100%) border-box;
  box-shadow:
    0 24px 60px #000c,
    inset 0 1px 0 #ffffff22,
    inset 0 -18px 36px #0004,
    -8px 0 22px #2ad0ff2e,
    8px 0 22px #2ad0ff2e;
  overflow:visible;
}
.checkout-sheet:before,
.checkout-sheet:after{
  content:"";
  position:absolute;
  top:18%;bottom:18%;
  width:3px;border-radius:3px;
  background:linear-gradient(180deg,transparent,#5ce8ff,transparent);
  box-shadow:0 0 12px 3px #3ad7ff77;
  pointer-events:none;
}
.checkout-sheet:before{left:-2px}
.checkout-sheet:after{right:-2px}

.checkout-tab{
  position:absolute;
  top:-16px;left:50%;transform:translateX(-50%);
  z-index:3;
  min-width:100px;
  padding:6px 22px 7px;
  text-align:center;
  font:800 10px/1 'Manrope',Arial,sans-serif;
  letter-spacing:.18em;
  color:#f4f8ff;
  text-transform:uppercase;
  background:
    linear-gradient(180deg,#0d2744 0%,#071a30 100%) padding-box,
    linear-gradient(90deg,#e8c35a,#ffd86a 40%,#c9962e 100%) border-box;
  border:2px solid transparent;
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
  box-shadow:0 4px 12px #0007;
}

.checkout-art{
  width:112px;height:112px;
  margin:6px auto 0;
  border-radius:14px;
  border:1.5px solid #3db7e888;
  background:radial-gradient(ellipse at 50% 80%,#13648a,#0a1c38 75%);
  display:grid;place-items:center;
  overflow:hidden;
  box-shadow:inset 0 1px 0 #ffffff22,0 8px 18px #0006;
}
.checkout-art img{
  width:100%!important;height:100%!important;
  object-fit:contain;
  padding:6px;
  box-sizing:border-box;
}

.checkout-title{
  margin:10px 0 0!important;
  font:800 italic clamp(22px,5.5vw,28px)/1 Impact,'Arial Black','Bebas Neue',sans-serif!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff!important;
  text-shadow:0 2px 0 #03101fcc,0 0 18px #5ecfff44;
}
.checkout-title:after{
  content:"";
  display:block;
  width:48px;height:2px;margin:8px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffe34a,#fff8,#ffe34a,transparent);
  box-shadow:0 0 8px #ffd43a88;
}

.checkout-label{
  margin:10px 0 0!important;
  font:700 12px/1.3 'Manrope',Arial,sans-serif!important;
  color:#c8e6f8!important;
  letter-spacing:.02em;
}

.checkout-pay{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:8px!important;
  margin-top:8px;
}
.checkout-pay .commerce-button{
  min-height:42px!important;
  padding:8px 6px!important;
  border-radius:11px!important;
  font-size:12px!important;
  gap:6px!important;
  background:linear-gradient(165deg,#0d3a5e,#082744)!important;
  border:1.5px solid #3db7e8!important;
  color:#e8f6ff!important;
  box-shadow:inset 0 1px 0 #ffffff14!important;
}
.checkout-pay .commerce-button[aria-pressed="true"]{
  color:#082747!important;
  border-color:#ffe98a!important;
  background:linear-gradient(160deg,#fff1a0,#ffd24a 50%,#f0b820)!important;
  box-shadow:0 3px 0 #b17a12,inset 0 1px 0 #fff8!important;
}
.checkout-pay .commerce-button[data-checkout-currency="gems"][aria-pressed="true"]{
  color:#f9edff!important;
  border-color:#be7ceb!important;
  background:linear-gradient(160deg,#9b5de5,#69349b)!important;
  box-shadow:0 3px 0 #4a226e,inset 0 1px 0 #ffffff33!important;
}
.checkout-pay .club-icon{width:20px!important;height:22px!important}

.checkout-meta{
  margin:10px 0 0!important;
  font:600 12px/1.4 'Manrope',Arial,sans-serif!important;
  color:#c5e0ee!important;
}
.checkout-meta strong{color:#ffe34a}
.checkout-balance{
  margin:4px 0 0!important;
  font:600 11px/1.3 'Manrope',Arial,sans-serif!important;
  color:#9ec8e4!important;
}

.checkout-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px!important;
  width:100%;
}
.checkout-actions:has(> :only-child){grid-template-columns:1fr}
.checkout-actions .commerce-button{
  min-height:42px!important;
  padding:10px 12px!important;
  border-radius:11px!important;
  font:800 13px/1.2 'Manrope',Arial,sans-serif!important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.checkout-actions .commerce-button:not(.secondary){
  color:#082747!important;
  background:linear-gradient(160deg,#fff1a0,#ffd24a 42%,#f0b820)!important;
  border:1px solid #ffe98a!important;
  box-shadow:0 3px 0 #b17a12,0 8px 18px #ffc92933,inset 0 1px 0 #fff8!important;
}
.checkout-actions .commerce-button.secondary{
  color:#e8f6ff!important;
  background:linear-gradient(165deg,#0d3a5e,#082744)!important;
  border:2px solid #3db7e8!important;
  box-shadow:inset 0 1px 0 #ffffff1a!important;
}

.checkout-sheet .treasure-art{
  width:110px!important;height:78px!important;
  margin:8px auto 0!important;
}
.checkout-sheet .reward-symbol{
  margin:8px 0 0;
  font-size:42px!important;
  color:#ffd457;
}
.checkout-sheet .reward-symbol.gems{color:#d6a3ff}

@media(max-width:400px){
  .checkout-sheet{padding:20px 12px 14px;border-radius:16px}
  .checkout-art{width:96px;height:96px}
  .checkout-title{font-size:22px!important}
  .checkout-actions .commerce-button{min-height:40px!important;font-size:12px!important}
}
@media(orientation:landscape) and (max-height:420px){
  body dialog#commerce-dialog.checkout-dialog,
  body dialog#commerce-dialog:has(.checkout-sheet){padding:16px 0 0!important}
  .checkout-sheet{padding:16px 12px 12px}
  .checkout-art{width:72px;height:72px;margin-top:2px}
  .checkout-title{font-size:18px!important;margin-top:6px!important}
  .checkout-title:after{margin-top:5px}
  .checkout-meta,.checkout-label{margin-top:6px!important;font-size:11px!important}
  .checkout-actions{margin-top:8px!important}
  .checkout-actions .commerce-button{min-height:36px!important;padding:6px 10px!important}
}
@media(prefers-reduced-motion:reduce){
  body dialog#commerce-dialog.checkout-dialog,
  body dialog#commerce-dialog:has(.checkout-sheet){animation:none!important}
}