/* Pay-by-card sheet (SP6L, shared since SP7b). se-card-checkout.js shows / hides
   #se-card-sheet and fills [data-card-sheet-status] + [data-card-sheet-mount]; it
   builds this markup under <body> when a page does not ship it. One stylesheet for
   every pay surface (Ladder signup, My Registrations, the tournament register
   confirmation), so the card form looks the same wherever it opens. Colors, radii
   and fonts come from south-end-tokens.css, with fallbacks for a page that loads
   this sheet without the tokens. z-index clears the mobile dock (9500) so the form
   is never covered. Phones get a bottom sheet. */
.se-card-sheet{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:10000;padding:16px;}
.se-card-sheet[hidden]{display:none;}
.se-card-sheet__box{background:var(--surface,#fff);color:var(--ink,#111810);border-radius:var(--radius-lg,10px);max-width:560px;width:100%;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:'DM Sans',system-ui,sans-serif;}
.se-card-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule,#dde5d9);}
.se-card-sheet__title{margin:0;font-family:var(--font-head,'Bebas Neue',sans-serif);font-weight:400;font-size:var(--text-xl,20px);letter-spacing:.5px;color:var(--ink,#111810);}
.se-card-sheet__close{background:none;border:0;font:inherit;font-size:22px;line-height:1;cursor:pointer;color:var(--muted,#5a6357);padding:4px 8px;transition:color var(--transition-fast,120ms) var(--ease,ease);}
.se-card-sheet__close:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 3px rgba(26,107,58,.35));border-radius:var(--radius-sm,6px);}
.se-card-sheet__status{margin:0;padding:14px 18px 0;font-size:var(--text-base,14px);font-weight:600;line-height:1.4;color:var(--ink,#111810);}
.se-card-sheet__status[hidden]{display:none;}
.se-card-sheet__status--ok{color:var(--green,#1a6b3a);}
.se-card-sheet__status--error{color:#a33;}
.se-card-sheet__mount{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px;}
.se-card-sheet__mount[hidden]{display:none;}
.se-card-sheet__foot{padding:12px 18px;border-top:1px solid var(--rule,#dde5d9);text-align:right;}
.se-card-sheet__btn{background:var(--surface,#fff);color:var(--muted,#5a6357);border:1.5px solid var(--rule,#dde5d9);border-radius:var(--radius-md,8px);padding:11px 22px;font-family:var(--font-head,'Bebas Neue',sans-serif);font-size:17px;letter-spacing:1px;cursor:pointer;transition:background var(--transition-fast,120ms) var(--ease,ease);}
.se-card-sheet__btn:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 3px rgba(26,107,58,.35));}
/* The Stripe pay button scaffold (owner 2026-10-28): every button that opens this
   sheet says "Pay here" and carries .se-pay-btn: gold, green border, white text.
   The doubled class outranks each page's own single-class button rule, so a page
   keeps its layout (width, margin, padding) and this file owns the look.
   testing/unit/test-se-pay-button-scaffold.js keeps every pay site on it. */
.se-pay-btn.se-pay-btn{background:var(--gold,#e8a020);color:#fff;border:2px solid var(--green,#1a6b3a);border-radius:var(--radius-md,8px);font-family:var(--font-head,'Bebas Neue',sans-serif);font-weight:400;font-size:18px;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.25);cursor:pointer;transition:background var(--transition-fast,120ms) var(--ease,ease);}
.se-pay-btn.se-pay-btn:focus{color:#fff;background:var(--gold-hover,#d4911a);}
.se-pay-btn.se-pay-btn:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 3px rgba(26,107,58,.35));}@media (hover: hover) and (pointer: fine) {
  .se-card-sheet__close:hover{color:var(--ink,#111810);}
  .se-card-sheet__btn:hover{background:var(--cream,#f6f3ea);}
  .se-pay-btn.se-pay-btn:hover{color:#fff;background:var(--gold-hover,#d4911a);}
}
@media (max-width:520px){
  .se-card-sheet{align-items:flex-end;padding:0;}
  .se-card-sheet__box{border-radius:var(--radius-lg,10px) var(--radius-lg,10px) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);}
}