/* =============================================
   LA PORTA DEL CLUB (01/11/2026) — inc/negozio.php (blades_neg_porta_club), assets/js/porta-club.js
   Il pannello che apre ogni «Влез в Blades Club»: due strade, «Нов клиент?» → la prenotazione,
   «Вече си клиент?» → l'area clienti. Un <dialog> modale: al computer al centro, al telefono sale dal basso.
   Movimento solo transform e opacity (regola delle prestazioni sul telefono); fermo con «riduci movimento».
   Contrasti misurati sui fondi di qui: testo bianco al 78% su #171717 / sul rosso scuro della prima carta ≥ 9:1,
   il rosso scritto #fb3d48 su #111 5,27:1 (soglia AA 4,5:1).
   ============================================= */
.cp {
  width: min(840px, calc(100% - 48px)); max-width: none; max-height: min(calc(100vh - 48px), 760px); max-height: min(calc(100dvh - 48px), 760px);
  margin: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  background: #111; color: #fff; overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cp::backdrop { background: rgba(5, 5, 5, .8); }
.cp__in { position: relative; padding: 36px 36px 32px; }

.cp__kicker {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font: 600 12px/1.3 'Inter', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-red-testo, #fb3d48);
}
.cp__kicker::before { content: ''; flex: none; width: 30px; height: 1px; background: currentColor; }
.cp__t {
  margin: 12px 0 0; padding-right: 56px;
  font: 700 clamp(32px, 4vw, 46px)/.95 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.005em;
  color: #fff; text-wrap: balance;
}
.cp__sub { margin: 10px 0 0; font: 400 16px/1.55 'Inter', sans-serif; color: rgba(255, 255, 255, .74); }

.cp__strade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.cp__s {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: #171717;
}
/* la strada del cliente nuovo: la prima, scaldata dal rosso dello studio */
.cp__s--nuovo {
  border-color: rgba(251, 61, 72, .45);
  background: linear-gradient(160deg, rgba(176, 17, 30, .34) 0%, rgba(176, 17, 30, .08) 58%, rgba(176, 17, 30, 0) 100%), #171717;
}
.cp__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 44px; }
.cp__h { margin: 0; font: 700 28px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .005em; color: #fff; }
.cp__punti { display: flex; flex-direction: column; align-items: flex-end; flex: none; margin: -2px 0 0; text-align: right; }
.cp__punti b { display: block; font: 700 46px/.82 'Barlow Condensed', sans-serif; letter-spacing: -.02em; color: #fff; }
.cp__punti span {
  display: block; max-width: 11em; margin-top: 6px; text-wrap: balance;
  font: 600 10.5px/1.25 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88);
}
.cp__icona {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); color: #fff;
}
.cp__icona svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp__p { flex: 1; margin: 0; font: 400 15px/1.55 'Inter', sans-serif; color: rgba(255, 255, 255, .8); overflow-wrap: break-word; }
.cp__s .bs-cta { margin-top: 6px; padding-left: 22px; gap: 12px; letter-spacing: .12em; text-align: left; }

/* la X: in fondo nel codice (col Tab si parte dalla prenotazione), in alto a destra sullo schermo */
.cp__x {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.cp__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cp__x:hover { border-color: #fff; }
.cp__x:active { transform: scale(.92); }
.cp__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- il telefono: un foglio che sale dal basso ---------- */
@media (max-width: 640px) {
  .cp {
    width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); margin: auto 0 0;
    border-radius: 22px 22px 0 0; border-bottom: 0;
  }
  .cp__in { padding: 24px 18px calc(20px + env(safe-area-inset-bottom)); }
  .cp__x { top: 14px; right: 12px; }
  .cp__t { padding-right: 52px; font-size: clamp(28px, 8.6vw, 36px); }
  .cp__sub { font-size: 15px; }
  .cp__strade { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .cp__s { padding: 18px; gap: 10px; border-radius: 14px; }
  .cp__h { font-size: 26px; }
  .cp__punti b { font-size: 40px; }
}

/* ---------- il movimento: solo transform e opacity ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cp[open] { animation: cp-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  .cp[open]::backdrop { animation: cp-velo .35s ease-out both; }
  .cp[open] .cp__s { animation: cp-su .6s cubic-bezier(.16, 1, .3, 1) .08s both; }
  .cp[open] .cp__s--gia { animation-delay: .16s; }
  .cp[open] .cp__punti b { animation: cp-pop .7s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
  .cp[open].is-chiude { animation: cp-out .2s ease-in both; }
  .cp[open].is-chiude::backdrop { animation: cp-velo-out .2s ease-in both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .cp[open] { animation-name: cp-foglio; }
  .cp[open].is-chiude { animation-name: cp-foglio-out; }
}
@keyframes cp-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cp-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.98); } }
/* il foglio è opaco mentre sale: con l'opacità la pagina si vedeva attraverso a metà corsa */
@keyframes cp-foglio { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cp-foglio-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes cp-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-velo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cp-su { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cp-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }