/* =========================================================================== online payments of the members
   Module «pagamenti online dei soci»: the members' app (.ma, «Performance» look: dark, the gym's accent as the only
   light), the owner's page (.gx) and the fake provider page of the local bench (.po-finto). Prefix po-. */

/* ------------------------------------------------------------------------------- members: the offer */
.ma .po-offerta { margin: 14px 16px 4px; border-color: color-mix(in srgb, var(--acc) 45%, var(--riga)) }
.ma .po-offerta .ma-cta { margin: 10px 0 0; height: 52px; font-size: 18px }
.ma .po-vuoto { margin-top: 10px }

/* ------------------------------------------------------------------------------- members: the plans */
.ma .po-piani { display: flex; flex-direction: column; gap: 10px; padding: 6px 16px 0 }
.ma .po-piano { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; padding: 16px 14px 16px 18px;
  border-radius: 18px; background: var(--ghisa); border: 1px solid var(--riga); color: var(--testo); text-decoration: none;
  transition: border-color .2s, transform .15s var(--ease-out) }
.ma .po-piano:hover { border-color: var(--acc) }
.ma .po-piano:active { transform: scale(.98) }
.ma .po-pn { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.ma .po-pn b { font: 700 22px/1.05 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere }
.ma .po-pn small { font-size: 13.5px; color: var(--tenue) }
.ma .po-pp { font: 700 22px/1 'Oswald', sans-serif; color: var(--acc); white-space: nowrap; font-variant-numeric: tabular-nums }
.ma .po-piano svg { width: 20px; height: 20px; color: var(--tenue) }

/* ------------------------------------------------------------------------------- members: the summary */
.ma .po-indietro { margin: 0 0 2px !important; font-size: 14px !important }
.ma .po-indietro a { color: var(--tenue); text-decoration: none; font-weight: 600 }
.ma .po-sum { margin: 6px 16px 0; padding: 20px; border-radius: 22px; border: 1px solid var(--riga); display: flex; flex-direction: column; gap: 4px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%), var(--ghisa) }
.ma .po-sum h2 { margin: 2px 0 0; font: 700 34px/1 'Oswald', sans-serif; text-transform: uppercase; overflow-wrap: anywhere }
.ma .po-sum-d { margin: 0; color: var(--tenue); font-size: 14px }
.ma .po-sum-kv { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
.ma .po-sum-kv div { background: rgba(10, 11, 18, .35); border: 1px solid var(--riga); border-radius: 14px; padding: 10px 12px }
.ma .po-sum-kv div:nth-child(3) { grid-column: 1 / -1 }
.ma .po-sum-kv dt { font-size: 12px; color: var(--tenue) }
.ma .po-sum-kv dd { margin: 2px 0 0; font: 600 18px/1.15 'Oswald', sans-serif }
.ma .po-sum-kv dd small { display: block; font: 500 12.5px 'Archivo', sans-serif; color: var(--tenue) }
.ma .po-sum-tot { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--riga); display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
.ma .po-sum-tot span { font-size: 14px; color: var(--tenue); font-weight: 600 }
.ma .po-sum-tot b { font: 700 40px/1 'Oswald', sans-serif; color: var(--acc); font-variant-numeric: tabular-nums }
.ma .po-prova { margin: 12px 20px 0; display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: #FFD58A }
.ma .po-prova i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none }

/* the pay buttons: «Paga con carta» full, «Paga con PayPal» outlined when both are there */
.ma .po-paga { margin: 16px 16px 0; display: flex; flex-direction: column; gap: 10px }
.ma .po-btn { position: relative; min-height: 62px; border-radius: 16px; border: 1.5px solid var(--acc); background: var(--acc); color: var(--on-acc);
  display: flex; align-items: center; gap: 12px; padding: 10px 18px; font: 700 18px/1.1 'Oswald', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  text-align: left; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: transform .15s var(--ease-out), opacity .2s }
.ma .po-btn svg { width: 24px; height: 24px; flex: none }
.ma .po-btn span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 }
.ma .po-btn small { font: 600 12.5px/1.2 'Archivo', sans-serif; letter-spacing: 0; text-transform: none; color: inherit; opacity: .78 }
.ma .po-btn.alt { background: transparent; color: var(--testo); border-color: var(--riga); box-shadow: none }
.ma .po-btn.alt small { color: var(--tenue); opacity: 1 }
.ma .po-btn:active { transform: scale(.98) }
.ma .po-sp { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent; opacity: 0; flex: none }
.ma .po-busy .po-btn { pointer-events: none }
.ma .po-busy .po-btn:not(.is-busy) { opacity: .45 }
.ma .po-btn.is-busy .po-sp { opacity: 1; animation: po-spin .7s linear infinite }

/* ------------------------------------------------------------------------------- members: on the way, and back */
.ma .po-vai, .ma .po-esito { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: calc(40px + env(safe-area-inset-top, 0px)) 24px 0 }
.ma .po-vai { min-height: 64vh; justify-content: center }
.ma .po-vai h1 { margin: 8px 0 0; font: 700 34px/1.05 'Oswald', sans-serif; text-transform: uppercase }
.ma .po-vai p { margin: 0; color: var(--tenue); font-size: 15px; line-height: 1.45; max-width: 32ch }
.ma .po-vai p b { color: var(--testo) }
.ma .po-vai .ma-cta, .ma .po-esito .ma-cta { width: min(100%, 360px); margin: 10px 0 0; box-sizing: border-box }
.ma .po-link { color: var(--tenue); font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px }
.ma .po-anello { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--ghisa2); border-top-color: var(--acc); animation: po-spin .9s linear infinite }

/* paid: the ring closes, the disc pops, the check draws itself, sparks fly, the ticket rises */
.ma .po-badge { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 4px }
.ma .po-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) }
.ma .po-ring circle { fill: none; stroke: var(--acc); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: po-ring .7s .1s var(--ease-out) forwards }
.ma .po-disc { width: 96px; height: 96px; border-radius: 50%; background: var(--acc); color: var(--on-acc); display: grid; place-items: center;
  transform: scale(.3); opacity: 0; animation: po-pop .5s .55s var(--ease-spring) forwards }
.ma .po-disc svg { width: 50px; height: 50px }
.ma .po-disc path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: po-draw .4s .85s var(--ease-out) forwards }
.ma .po-disc.ko { background: #3A1D22; color: var(--ko); transform: none; opacity: 1; animation: none }
.ma .po-disc.ko path { stroke-dashoffset: 0; animation: none }
.ma .po-bit { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 2px; background: var(--acc);
  opacity: 0; animation: po-burst .9s .8s var(--ease-out) forwards }
.ma .po-bit.alt { background: #fff; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50% }
.ma .po-h { font-size: clamp(52px, 16vw, 68px) }
.ma .is-ok .po-h .ln > span { animation-delay: .75s }
.ma .po-lead { margin: 0; font-size: 15.5px; color: #D9DBE6; line-height: 1.45; max-width: 34ch }
.ma .is-ok .po-lead { animation: po-rise .5s .9s var(--ease-out) both }
.ma .po-ticket { width: min(100%, 360px); box-sizing: border-box; margin-top: 8px; padding: 14px 16px; border-radius: 18px; background: var(--ghisa);
  border: 1px solid var(--riga); display: flex; flex-direction: column; gap: 3px; text-align: left; animation: po-rise .55s 1.05s var(--ease-out) both }
.ma .po-ticket b { font: 600 20px/1.2 'Oswald', sans-serif }
.ma .po-ticket small { color: var(--tenue); font-size: 13px }
.ma .po-dopo { animation: po-rise .55s 1.15s var(--ease-out) both }

@keyframes po-spin { to { transform: rotate(360deg) } }
@keyframes po-ring { to { stroke-dashoffset: 0 } }
@keyframes po-pop { to { transform: scale(1); opacity: 1 } }
@keyframes po-draw { to { stroke-dashoffset: 0 } }
@keyframes po-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1) } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6) } }
@keyframes po-rise { from { opacity: 0; transform: translateY(14px) } }
@media (prefers-reduced-motion: reduce) {
  .ma .po-ring circle, .ma .po-disc, .ma .po-disc path, .ma .po-ticket, .ma .po-dopo, .ma .is-ok .po-lead { animation: none; stroke-dashoffset: 0; transform: none; opacity: 1 }
  .ma .po-bit { display: none }
}

/* ------------------------------------------------------------------------------- the owner's page */
.gx .po-soci { display: flex; align-items: center; gap: 14px; margin-bottom: 16px }
.gx .po-soci-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.gx .po-soci small { color: var(--ink-3); font-size: 14px }
.gx .po-luce { width: 12px; height: 12px; border-radius: 50%; background: #c4c8d2; flex: none; box-shadow: 0 0 0 5px #eef0f4 }
.gx .po-soci.is-on .po-luce { background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 16%, transparent) }
.gx .po-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start }
.gx .po-grid > .card + .card { margin-top: 0 }
.gx .po-grid + .card { margin-top: 16px }
.gx .po-conto { scroll-margin-top: 80px }
.gx .po-conto-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px }
.gx .po-conto-h h2 { margin: 0 }
.gx .po-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0 0 }
.gx .po-kv dt { font-size: 13px; color: var(--ink-3) }
.gx .po-kv dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere }
.gx .po-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px }
.gx .po-azioni form { margin: 0 }
.gx .po-cosa { margin: 6px 0 0 }
/* connecting Stripe: two plain steps, where the money goes */
.gx .po-passi { margin: 12px 0 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px }
.gx .po-passi li { padding-left: 2px }
.gx .po-soldi { margin: 12px 0 0; font-size: 14px }
.gx .po-presto .po-cosa { color: var(--ink-2) }
.gx .po-banco { margin: 8px 0 0; font-size: 13px; color: var(--ink-3) }
.gx .po-nota { margin: 12px 0 0; font-size: 13.5px; color: var(--warn) }
.gx .po-piani-l { list-style: none; margin: 10px 0 0; padding: 0 }
.gx .po-piani-l li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line) }
.gx .po-piani-l li span { display: flex; flex-direction: column; min-width: 0 }
.gx .po-piani-l small { color: var(--ink-3); font-size: 13.5px }
.gx .po-prezzo { white-space: nowrap; font-variant-numeric: tabular-nums }
.gx .po-tab .vd-num { text-align: right }
.gx .po-err small { display: block; margin-top: 2px; max-width: 34ch }
.gx .po-rimborsi { margin: 14px 0 0; font-size: 14px }
.gx .po-pop code, .gx .po-conto code, .gx .aiuto-pop code { font-size: .92em; background: var(--bg); padding: 1px 5px; border-radius: 5px }
@media (max-width: 899px) {
  .gx .po-grid { grid-template-columns: minmax(0, 1fr) }
  .gx .po-azioni > form, .gx .po-azioni > .btn { flex: 1 1 auto }
  .gx .po-azioni .btn { width: 100% }
  .gx .po-soci { align-items: flex-start }
}

/* ------------------------------------------------------------------------------- the fake provider (local bench) */
.po-finto { width: min(420px, 100%); box-sizing: border-box; margin: 6vh auto 0; padding: 26px 24px; border-radius: 18px; background: #fff; color: #1a1f36;
  box-shadow: 0 20px 60px rgba(10, 12, 20, .18); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center }
.po-finto-tag { margin: 0; display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff4dc; color: #8a5a00; font-size: 12.5px; font-weight: 700 }
.po-finto h1 { margin: 16px 0 4px; font-size: 44px; letter-spacing: -.02em }
.po-finto-cosa { margin: 0; font-weight: 600 }
.po-finto-chi { margin: 4px 0 0; color: #697386; font-size: 14px; overflow-wrap: anywhere }
.po-finto-azioni { display: flex; flex-direction: column; gap: 10px; margin-top: 22px }
.po-finto-azioni button { min-height: 48px; border-radius: 10px; font: 600 16px system-ui, sans-serif; cursor: pointer }
.po-finto-paga { border: 0; background: #635bff; color: #fff }
.po-finto-paypal .po-finto-paga { background: #ffc439; color: #111 }
.po-finto-no { border: 1px solid #d5d8e0; background: #fff; color: #1a1f36 }
.po-finto-nota { margin: 16px 0 0; color: #697386; font-size: 13px }
.po-finto .po-finto-h { margin: 16px 0 6px; font-size: 28px; letter-spacing: -.01em }
.po-finto-conto { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 14px; font-weight: 600; color: #3c4257 }
.po-finto-conto select { min-height: 44px; border-radius: 10px; border: 1px solid #d5d8e0; padding: 0 10px; font: inherit; font-weight: 500 }

/* ------------------------------------------------------------------------------- the confirmation is late
   The result page stops asking (pagamenti.js, or the server for an older purchase) and says what to do. */
.ma .po-esito.is-fermo .po-anello { display: none }
.ma .po-disc.tardi { background: var(--ghisa); color: var(--acc); transform: none; opacity: 1; animation: none; border: 1px solid var(--riga) }
.ma .po-disc.tardi svg, .ma .po-disc.tardi path { stroke-dashoffset: 0; animation: none }
.ma .is-tardi .po-h { font-size: clamp(40px, 12vw, 54px) }

/* ------------------------------------------------------------------------------- the owner: what to check, switching on */
.gx .po-verifiche { margin-bottom: 16px; border-color: color-mix(in srgb, var(--ko) 35%, var(--line)); scroll-margin-top: 80px }
.gx .po-ver-l { list-style: none; margin: 10px 0 0; padding: 0 }
.gx .po-ver-l li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line) }
.gx .po-ver-l li > div { min-width: 0; display: flex; flex-direction: column; gap: 3px }
.gx .po-ver-l small { color: var(--ink-3); font-size: 13.5px }
.gx .po-ver-l p { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere }
.gx .po-ver-l form { margin: 0; flex: none }
.gx .po-spento { margin: 12px 0 0; font-size: 14px; color: var(--ink-2) }
.gx .po-pop .po-piani-l { margin-top: 6px }
.gx .po-pop .po-piani-l li { padding: 8px 0 }
.gx .po-pop form { margin: 14px 0 0 }
.gx .po-pop .po-cambia { display: inline-block; margin-top: 8px; font-weight: 600 }
@media (max-width: 899px) {
  .gx .po-ver-l li { flex-direction: column; align-items: stretch }
  .gx .po-ver-l form .btn { width: 100% }
}