/* =========================================================================== the gym's public page of plans
   /abbonamenti (Http\Pages\Abbonati, viste/abbonati): the members' app «Performance» look (body.ma tokens) for people
   who are not members yet. The list and the steps are the door's own page (.ac), so the two read as one place: one card
   per plan, the cards come in one after the other (the page's only motion). Also: the result line about the
   certificate (members' app), the pill on the door and the owner's card to share the page. Prefix ab-. */

/* ------------------------------------------------------------------------------- the list, on the door's page (.ac)
   The photo and its fade are the door's own, held on the first screen (phone) or fixed behind the page (from 900px), so
   the list scrolls on the dark like the door's form. Same mark, same two lines (.ac-h), same column (.ac-in). */
.ab-lista { position: relative; background: var(--ferro) }
.ab-lista::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,18,.32) 0%, rgba(10,11,18,.12) 28%, rgba(10,11,18,.86) 56%, var(--ferro) 70%),
    var(--cover, linear-gradient(160deg, var(--brand-primary), var(--ferro) 70%)) center 20% / cover no-repeat }
.ab-lista > .ac-in { position: relative }
/* the two lines where the door has them: on the phone the door's form pushes them about 350px above the bottom */
.ab-lista .ac-main { margin-top: 0; padding-top: max(140px, calc(100vh - 432px)); padding-top: max(140px, calc(100svh - 432px)) }
.ab-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0 }
.ab-top img { height: 34px; width: auto; max-width: 58%; display: block; object-fit: contain; object-position: left center }
.ab-top .ac-name { min-width: 0; overflow-wrap: anywhere }
.ab-entra, .ab-indietro { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(10,11,18,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff !important; font: 600 14px 'Archivo', system-ui, sans-serif; text-decoration: none; transition: border-color .15s, transform .15s var(--ease-out) }
.ab-entra:hover, .ab-indietro:hover { border-color: var(--acc) }
.ab-entra:active, .ab-indietro:active { transform: scale(.96) }
.ab-sub { margin: -8px 0 4px; color: #D9DBE6; font-size: 15.5px; line-height: 1.45; max-width: 34ch }
.ab-piani { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px }
.ab-piano { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 18px 18px 16px; border-radius: 22px;
  background: var(--ghisa); border: 1px solid var(--riga);
  animation: ab-in .55s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * 70ms) }
.ab-piano h2 { margin: 0; min-width: 0; font: 700 26px/1.02 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere }
.ab-cosa { grid-column: 1 / -1; margin: 2px 0 0; color: var(--tenue); font-size: 14px; line-height: 1.35 }
.ab-prezzo { margin: 0; font: 700 26px/1.02 'Oswald', sans-serif; color: var(--acc); white-space: nowrap; font-variant-numeric: tabular-nums }
/* outlined like the booking buttons of the members' app: six full buttons in a row would shout */
.ab-compra { grid-column: 1 / -1; margin-top: 12px; min-height: 50px; box-sizing: border-box; border-radius: 14px; border: 1.5px solid var(--acc);
  background: transparent; color: var(--acc) !important; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 17px 'Oswald', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background .18s, color .18s, transform .15s var(--ease-out) }
.ab-compra svg { width: 20px; height: 20px; transition: transform .2s var(--ease-out) }
.ab-compra:hover { background: var(--acc); color: var(--on-acc) !important }
.ab-compra:hover svg { transform: translateX(3px) }
.ab-compra:active { transform: scale(.97); background: var(--acc); color: var(--on-acc) !important }
.ab-solo { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--tenue) }
.ab-nota { margin: 16px 2px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--tenue); font-size: 14px; line-height: 1.4 }
.ab-reception { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ghisa2); color: var(--testo);
  font-size: 15px; font-weight: 600; line-height: 1.35 }
.ab-reception i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none }
.ab-pw { margin-top: 30px }
@keyframes ab-in { from { opacity: 0; transform: translateY(18px) } }

/* from 900px, as on the door: the photo on the left, the column on the right; the photo stays while the list scrolls */
@media (min-width: 900px) {
  .ab-lista::before { position: fixed; bottom: 0; height: auto;
    background: linear-gradient(90deg, rgba(10,11,18,.15) 0%, rgba(10,11,18,.45) 42%, rgba(10,11,18,.94) 62%, var(--ferro) 78%),
      var(--cover, linear-gradient(160deg, var(--brand-primary), var(--ferro) 70%)) 30% 30% / cover no-repeat }
  .ab-lista .ac-main { margin: 0; padding-top: max(48px, calc(50vh - 237px)) }
}

/* ------------------------------------------------------------------------------- the steps (on the door's .ac) */
.ab-passo .ab-top img { height: 34px }
.ab-scelto { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--riga);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%), rgba(20,22,31,.94) }
.ab-scelto-n { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.ab-scelto-n small { font-size: 11.5px; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .1em }
.ab-scelto-n b { font: 700 22px/1.05 'Oswald', sans-serif; text-transform: uppercase; overflow-wrap: anywhere }
.ab-scelto-n span { font-size: 13.5px; color: var(--tenue) }
.ab-scelto-p { font: 700 24px/1 'Oswald', sans-serif; color: var(--acc); white-space: nowrap; font-variant-numeric: tabular-nums }
.ab-form { gap: 10px }
.ab-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
@media (max-width: 359px) { .ab-due { grid-template-columns: minmax(0, 1fr) } }
.ab-err { margin: 6px 4px 0; font-size: 13.5px; font-weight: 600 }
.ac .ac-field[aria-invalid="true"] { border-color: var(--ko) }
.ab-pv { margin: 6px 0 0 }
/* links and small buttons of the steps: a 44 px target without changing the line */
.ma .ab-passo .pv-read, .ac-sent a.ab-cambia { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: -12px 0; vertical-align: middle }
.ab-link, .ac-how a.ab-cambia { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--tenue); font: 500 14px 'Archivo', sans-serif;
  text-decoration: underline; text-underline-offset: 3px }
.ab-link:hover, .ac-how a.ab-cambia:hover { color: var(--testo) }
.ac-sent a.ab-cambia { color: var(--acc); font-weight: 700 }
.ab-chiuso { font-size: 16px }
.ab-torna { text-decoration: none }
/* a form on its way: the button shows it is working and cannot be pressed again (abbonati.js) */
.ab-busy .ac-cta { opacity: .78; pointer-events: none }
.ab-busy .ac-cta.is-busy::after { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-top-color: transparent;
  animation: ma-spin .7s linear infinite }

/* ------------------------------------------------------------------------------- after paying (viste/m/acquista_esito.php) */
.ma .ab-cert { width: min(100%, 360px); box-sizing: border-box; margin: 2px 0 0; display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 12px 14px; border-radius: 14px; background: rgba(255,213,138,.1); border: 1px solid rgba(255,213,138,.34); color: #FFD58A;
  font-size: 14.5px; font-weight: 600; line-height: 1.4; animation: ab-in .55s 1.1s var(--ease-out) both }
.ma .ab-cert svg { width: 20px; height: 20px; flex: none; margin-top: 1px }


/* ------------------------------------------------------------------------------- the owner: share the page */
.gx .ab-share h2 { margin: 0 }
.gx .ab-share-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.gx .ab-share p { margin: 6px 0 0 }
.gx .ab-share-riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px }
.gx .ab-share-riga input { flex: 1 1 280px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px }
.gx .ab-share-avviso { color: var(--warn); font-weight: 600 }
@media (max-width: 899px) { .gx .ab-share-riga .btn { flex: 1 1 auto } }