/* Charcoal and platinum from the House palette. Independent transform
   properties preserve the cinematic reveal system's existing transform. */
.signature-button {
  position:relative; isolation:isolate; display:inline-flex; align-items:center;
  justify-content:space-between; gap:20px; min-height:52px; max-width:100%;
  box-sizing:border-box; padding:7px 8px 7px 24px; border:1px solid var(--silver,#bfc6c2);
  border-radius:999px; overflow:hidden; background:var(--ink,#0a0c0b);
  color:var(--bone,#dfe3e0); font-size:11px; font-weight:500;
  letter-spacing:.14em; line-height:1.5; text-decoration:none;
  translate:var(--button-x,0px) var(--button-y,0px);
  transition:translate .55s cubic-bezier(.2,.85,.25,1.08),scale .12s ease,
    background-color .3s ease,border-color .3s ease,color .3s ease;
}
.signature-button::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(100px circle at var(--light-x,50%) var(--light-y,50%),rgba(223,227,224,.12),transparent);
  transition:opacity .3s ease;
}
.signature-button .ar {
  display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px;
  border:1px solid var(--line,#404643); border-radius:50%; margin:0;
  background:transparent; transition:background-color .3s ease,border-color .3s ease;
}
.signature-button .ar svg { width:13px; height:13px; transition:transform .35s ease; }
.signature-button .ar svg path { stroke:currentColor; }
.signature-button:active { scale:.97; }
.btn,.pay-btn {
  min-height:48px; border-radius:999px; box-sizing:border-box;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,scale .1s ease;
}
.btn:active:not(:disabled):not([aria-busy="true"]) { scale:.97; }
/* Payment stays still, retaining its existing loading indicator and handlers. */
.pay-btn:active { transform:none; }
.btn:disabled,.btn[aria-disabled="true"],.btn[aria-busy="true"] {
  opacity:.5; cursor:not-allowed; scale:1;
}
.signature-button:focus-visible,.btn:focus-visible,.pay-btn:focus-visible {
  outline:2px solid var(--bone,#dfe3e0); outline-offset:4px;
}
@media (hover:hover) and (pointer:fine) {
  .signature-button:hover { background:var(--ink-2,#101312); color:var(--bone,#dfe3e0); border-color:var(--bone,#dfe3e0); }
  .signature-button:hover::before { opacity:1; }
  .signature-button:hover .ar { background:var(--bone,#dfe3e0); border-color:var(--bone,#dfe3e0); color:var(--ink,#0a0c0b); }
  .signature-button:hover .ar svg { transform:translate(1px,-1px); }
  .signature-button:hover .ar svg path { stroke:currentColor; }
}
@media (hover:none),(pointer:coarse) {
  .signature-button { translate:none; gap:12px; padding-left:18px; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce) {
  .signature-button,.signature-button::before,.signature-button .ar,.signature-button .ar svg,.btn,.pay-btn {
    transition:none; animation:none;
  }
  .signature-button { translate:none; }
  .signature-button:active,.btn:active { scale:1; }
  .signature-button:hover .ar svg { transform:none; }
}