/* The pay window (js/pay.js): a card in the middle on wide screens, a sheet from the bottom on phones.
   Prices and payment links are hers, from the teacher area; the page only shows them. */
.buy [hidden]{display:none!important}
.buy .small-print a{color:inherit}
.pay-sheet{width:min(440px,calc(100vw - 32px));max-width:none;max-height:90vh;margin:auto;padding:0;overflow:auto;
  background:var(--cream);color:var(--ink);border:1px solid var(--gold);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.pay-sheet::backdrop{background:rgba(44,54,34,.62)}
.pay-in{position:relative;display:grid;gap:12px;padding:40px 28px 26px;text-align:left}
.pay-title{margin:0;padding-right:40px;font:400 30px/1.1 var(--display)}
.pay-meta{margin:0;font:400 14px/1.4 var(--text);color:var(--brown)}
.pay-price{margin:6px 0 4px;font:400 40px/1 var(--display)}
.pay-go{justify-content:center;min-height:52px;padding:0 26px;font-size:16px;background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pay-go:hover{background:var(--brown);border-color:var(--brown)}
.pay-note{margin:6px 0 0;font:400 15px/1.5 var(--text)}
.pay-small{margin:0;font:400 13px/1.45 var(--text);color:var(--brown)}
.pay-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;
  color:var(--ink);font:300 30px/1 var(--text);cursor:pointer}
.pay-x:hover{background:var(--sage)}
.pay-x:focus-visible,.pay-go:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
html.pay-open{overflow:hidden}
@media (max-width:640px){
  .pay-sheet{width:100%;max-height:92vh;margin:auto 0 0;border-width:1px 0 0;border-radius:20px 20px 0 0}
  .pay-in{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
}
/* a slide only, never a fade: if a browser holds the animation on its first frame, the window is still all there */
@media (prefers-reduced-motion:no-preference){.pay-sheet[open]{animation:pay-in .28s ease-out}}
@keyframes pay-in{from{transform:translateY(16px)}}